/*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/.pnpm/css-loader@7.1.4_webpack@5.108.4/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/.pnpm/postcss-loader@8.2.1_postcss@8.5.20_webpack@5.108.4/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/.pnpm/sass-loader@16.0.8_sass@1.101.0_webpack@5.108.4/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./inc/Components/Card/styles.scss ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* stylelint-disable */
.wp-component-card {
  background-color: var(--component-card-background);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.wp-component-card.edwp-button-hover .wp-component-card__title:enabled, .wp-component-card.edwp-button-hover .wp-component-card__title:not([disabled]) {
  opacity: 1;
}
@media (hover: hover) and (pointer: fine) {
  .wp-component-card.edwp-button-hover .wp-component-card__title:enabled:hover, .wp-component-card.edwp-button-hover .wp-component-card__title:not([disabled]):hover {
    color: var(--link-colour);
    text-decoration-color: var(--link-colour-hover);
  }
  .wp-component-card.edwp-button-hover .wp-component-card__title:enabled:focus-visible, .wp-component-card.edwp-button-hover .wp-component-card__title:not([disabled]):focus-visible {
    color: var(--link-colour-focus);
    text-decoration-color: var(--link-colour-focus);
  }
  .wp-component-card.edwp-button-hover .wp-component-card__title:enabled:active, .wp-component-card.edwp-button-hover .wp-component-card__title:not([disabled]):active {
    color: var(--link-colour-active);
    text-decoration-color: var(--link-colour-active);
  }
  .wp-component-card.edwp-button-hover .wp-component-card__title:enabled:disabled, .wp-component-card.edwp-button-hover .wp-component-card__title:not([disabled]):disabled {
    color: var(--link-colour-disabled);
    text-decoration-color: var(--link-colour-disabled);
  }
}
.wp-component-card.edwp-button-hover .wp-component-card__title {
  align-items: center;
  color: var(--link-colour);
  display: inline-flex;
  font-weight: var(--link-font-weight);
  gap: var(--link-gap);
  margin: 0 0 calc(0px - var(--link-underline-offset));
  padding: 0;
  position: relative;
  text-decoration-color: transparent;
  text-decoration-line: underline;
  text-decoration-style: initial;
  text-decoration-thickness: var(--link-underline-width);
  text-underline-offset: var(--link-underline-offset);
  transition: var(--transition-all);
  --link-colour: var(--component-card-title-colour);
  --link-colour-hover: var(--component-card-title-colour-hover);
  --link-colour-focus: var(--component-card-title-colour-focus);
  --link-colour-active: var(--component-card-title-colour-active);
}

.wp-component-card__image-wrapper {
  aspect-ratio: 3/2;
  overflow: hidden;
  position: relative;
}
.wp-component-card__image-wrapper .wp-component-card__tags {
  bottom: 0;
  left: var(--component-card-padding);
  position: absolute;
  z-index: 1;
}

.wp-component-card__image {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.wp-component-card__content {
  align-items: flex-start;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--component-card-content-gap);
  padding: var(--component-card-padding) var(--component-card-padding) var(--component-card-padding-bottom);
}

.wp-component-card__tags {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--spacing-xxs);
}

.wp-component-card__tags--in-content {
  display: none;
}

.wp-component-card__header {
  display: flex;
  flex-direction: column;
  gap: var(--component-card-header-gap);
}

.wp-component-card__eyebrow {
  font-family: var(--font-sans-serif);
  font-size: var(--font-size-p-s);
  font-weight: 400;
  letter-spacing: var(--letter-spacing-p-s);
  line-height: var(--line-height-p-s);
  text-transform: none;
  color: var(--component-card-title-colour);
  text-transform: uppercase;
}

.wp-component-card__title {
  font-family: var(--font-heading-sans-serif);
  font-size: var(--font-size-4);
  font-weight: 600;
  letter-spacing: var(--letter-spacing-4);
  line-height: var(--line-height-4);
  text-transform: none;
  color: var(--component-card-title-colour);
}

.wp-component-card__description {
  font-family: var(--font-sans-serif);
  font-size: var(--font-size-p);
  font-weight: 400;
  letter-spacing: var(--letter-spacing-p);
  line-height: var(--line-height-p);
  text-transform: none;
}

.wp-component-card__button-wrapper {
  margin-top: auto;
}

/**
 * Layout only (image + content side by side). Independent from the
 * "large" (title/padding size) modifier below - a card can be horizontal
 * without being large, or large without being horizontal.
 */
@container block-cards (width >= 768px) {
  .wp-component-card--horizontal {
    flex-direction: row;
  }
  .wp-component-card--horizontal .wp-component-card__image-wrapper {
    aspect-ratio: unset;
    max-width: 50%;
  }
  .wp-component-card--horizontal .wp-component-card__image-wrapper + .wp-component-card__content {
    max-width: 70%;
  }
  .wp-component-card--horizontal .wp-component-card__tags--on-image {
    display: none;
  }
  .wp-component-card--horizontal .wp-component-card__tags--in-content {
    display: inline-flex;
  }
}
@container block-tabbed-content-content (width >= 768px) {
  .wp-component-card--horizontal {
    flex-direction: row;
  }
  .wp-component-card--horizontal .wp-component-card__image-wrapper {
    aspect-ratio: unset;
    max-width: 50%;
  }
  .wp-component-card--horizontal .wp-component-card__image-wrapper + .wp-component-card__content {
    max-width: 70%;
  }
  .wp-component-card--horizontal .wp-component-card__tags--on-image {
    display: none;
  }
  .wp-component-card--horizontal .wp-component-card__tags--in-content {
    display: inline-flex;
  }
}
@container block-timeline-slide (width >= 768px) {
  .wp-component-card--horizontal {
    flex-direction: row;
  }
  .wp-component-card--horizontal .wp-component-card__image-wrapper {
    aspect-ratio: unset;
    max-width: 50%;
  }
  .wp-component-card--horizontal .wp-component-card__image-wrapper + .wp-component-card__content {
    max-width: 70%;
  }
  .wp-component-card--horizontal .wp-component-card__tags--on-image {
    display: none;
  }
  .wp-component-card--horizontal .wp-component-card__tags--in-content {
    display: inline-flex;
  }
}
@container block-latest-insights (width >= 768px) {
  .wp-component-card--horizontal {
    flex-direction: row;
  }
  .wp-component-card--horizontal .wp-component-card__image-wrapper {
    aspect-ratio: unset;
    max-width: 50%;
  }
  .wp-component-card--horizontal .wp-component-card__image-wrapper + .wp-component-card__content {
    max-width: 70%;
  }
  .wp-component-card--horizontal .wp-component-card__tags--on-image {
    display: none;
  }
  .wp-component-card--horizontal .wp-component-card__tags--in-content {
    display: inline-flex;
  }
}

/**
 * Title/padding size only. Independent from the "horizontal" layout
 * modifier above - see the comment there.
 */
@container block-cards (width >= 768px) {
  .wp-component-card--large {
    --component-card-padding: var(--component-card-padding-large);
    --component-card-padding-bottom: var(--component-card-padding-large);
  }
  .wp-component-card--large .wp-component-card__title {
    font-family: var(--font-heading-sans-serif);
    font-size: var(--font-size-3);
    font-weight: 600;
    letter-spacing: var(--letter-spacing-3);
    line-height: var(--line-height-3);
    text-transform: none;
  }
}
@container block-tabbed-content-content (width >= 768px) {
  .wp-component-card--large {
    --component-card-padding: var(--component-card-padding-large);
    --component-card-padding-bottom: var(--component-card-padding-large);
  }
  .wp-component-card--large .wp-component-card__title {
    font-family: var(--font-heading-sans-serif);
    font-size: var(--font-size-3);
    font-weight: 600;
    letter-spacing: var(--letter-spacing-3);
    line-height: var(--line-height-3);
    text-transform: none;
  }
}
@container block-timeline-slide (width >= 768px) {
  .wp-component-card--large {
    --component-card-padding: var(--component-card-padding-large);
    --component-card-padding-bottom: var(--component-card-padding-large);
  }
  .wp-component-card--large .wp-component-card__title {
    font-family: var(--font-heading-sans-serif);
    font-size: var(--font-size-3);
    font-weight: 600;
    letter-spacing: var(--letter-spacing-3);
    line-height: var(--line-height-3);
    text-transform: none;
  }
}
@container block-latest-insights (width >= 768px) {
  .wp-component-card--large {
    --component-card-padding: var(--component-card-padding-large);
    --component-card-padding-bottom: var(--component-card-padding-large);
  }
  .wp-component-card--large .wp-component-card__title {
    font-family: var(--font-heading-sans-serif);
    font-size: var(--font-size-3);
    font-weight: 600;
    letter-spacing: var(--letter-spacing-3);
    line-height: var(--line-height-3);
    text-transform: none;
  }
}

@container block-cards (width >= 768px) {
  .wp-component-card--horizontal-reverse {
    flex-direction: row-reverse;
  }
}
@container block-tabbed-content-content (width >= 768px) {
  .wp-component-card--horizontal-reverse {
    flex-direction: row-reverse;
  }
}
@container block-timeline-slide (width >= 768px) {
  .wp-component-card--horizontal-reverse {
    flex-direction: row-reverse;
  }
}
@container block-latest-insights (width >= 768px) {
  .wp-component-card--horizontal-reverse {
    flex-direction: row-reverse;
  }
}

/**
 * Colour schemes (set at block level via the Cards block "Card Style" setting).
 * Each scheme only re-points the shared --component-card-* tokens, so the whole
 * card recolours with no markup changes. Dark schemes also carry
 * .edwp-block--dark-mode (added in Card.php) which flips inner buttons/links.
 */
.wp-component-card--dark-blue {
  --component-card-title-colour: var(--colour-white);
  --component-card-title-colour-hover: var(--colour-brand-2-20);
  --component-card-title-colour-focus: var(--colour-brand-2-20);
  --component-card-title-colour-active: var(--colour-brand-2-30);
  background: var(--gradient-dark-radial-right-subtle);
  color: var(--colour-white);
}

.wp-component-card--light-blue-bordered,
.wp-component-card--light-blue {
  --component-card-background: var(--colour-brand-2-5);
  --component-card-title-colour: var(--colour-brand-2-base);
  color: var(--colour-brand-1-base);
}

.wp-component-card--light-blue-bordered {
  border-bottom: 4px solid var(--colour-brand-2-base);
}

.wp-component-card--featured {
  --component-card-title-colour: var(--colour-white);
  --component-card-title-colour-hover: var(--colour-brand-2-20);
  --component-card-title-colour-focus: var(--colour-brand-2-20);
  --component-card-title-colour-active: var(--colour-brand-2-30);
  background: linear-gradient(54deg, var(--colour-brand-2-base) 41.11%, #1e78c5 104.71%);
  color: var(--colour-white);
}

/* Benefits: light-blue base with a left accent border, no image/button expected. */
.wp-component-card--benefits {
  --component-card-background: var(--colour-brand-2-5);
  --component-card-title-colour: var(--colour-brand-2-base);
  border-left: var(--stroke-l) solid var(--colour-brand-2-base);
  color: var(--colour-brand-1-base);
}

/**
 * Transparent: no background/padding of its own, so - unlike the schemes
 * above - it doesn't assert or opt out of dark-mode (see Card.php). It
 * follows whichever ambient context (light or dark section) it's placed in.
 */
.wp-component-card--transparent {
  --component-card-background: transparent;
  --component-card-title-colour-dark: var(--colour-white);
  --component-card-title-colour-hover-dark: var(--colour-brand-2-20);
  --component-card-title-colour-focus-dark: var(--colour-brand-2-20);
  --component-card-title-colour-active-dark: var(--colour-brand-2-30);
}
.edwp-block--dark-mode .wp-component-card--transparent {
  --component-card-title-colour: var(--component-card-title-colour-dark);
  --component-card-title-colour-hover: var(--component-card-title-colour-hover-dark);
  --component-card-title-colour-focus: var(--component-card-title-colour-focus-dark);
  --component-card-title-colour-active: var(--component-card-title-colour-active-dark);
  color: var(--colour-white);
}
.wp-admin .wp-block-group.bg--primary .wp-component-card--transparent, .wp-admin .wp-block-group.bg--dark-radial-left .wp-component-card--transparent, .wp-admin .wp-block-group.bg--dark-radial-right .wp-component-card--transparent, .wp-admin .wp-block-group.wp-block-group--background-image .wp-component-card--transparent, .wp-admin .wp-block-group.wp-block-group--background-video .wp-component-card--transparent {
  --component-card-title-colour: var(--component-card-title-colour-dark);
  --component-card-title-colour-hover: var(--component-card-title-colour-hover-dark);
  --component-card-title-colour-focus: var(--component-card-title-colour-focus-dark);
  --component-card-title-colour-active: var(--component-card-title-colour-active-dark);
  color: var(--colour-white);
}
.wp-component-card--transparent .wp-component-card__content {
  padding: var(--component-card-content-gap) 0 0;
}

/**
 * Hero (Image Reveal): the card's own box is always just the text/button
 * content (the image never reserves layout space), so the surrounding
 * grid/flex never reflows. The image is absolutely positioned directly
 * above that content and hidden until hover/focus, when it fades and
 * slides into view - "popping up" above the card. Because it's out of
 * flow, it needs `overflow: visible` on the card (overriding the base
 * `overflow: hidden`) to avoid being clipped.
 */
.wp-component-card.wp-component-card--hero-reveal {
  --component-card-background: color-mix(in srgb, var(--colour-brand-2-base) 80%, transparent);
  --component-card-title-colour: var(--colour-white);
  --component-card-title-colour-hover: var(--colour-brand-2-20);
  --component-card-title-colour-focus: var(--colour-brand-2-20);
  --component-card-title-colour-active: var(--colour-brand-2-30);
  overflow: visible;
  position: relative;
}
@media (min-width: 1024px) {
  .wp-component-card.wp-component-card--hero-reveal:enabled, .wp-component-card.wp-component-card--hero-reveal:not([disabled]) {
    opacity: 1;
  }
}
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .wp-component-card.wp-component-card--hero-reveal:enabled:hover, .wp-component-card.wp-component-card--hero-reveal:enabled:focus-within, .wp-component-card.wp-component-card--hero-reveal:not([disabled]):hover, .wp-component-card.wp-component-card--hero-reveal:not([disabled]):focus-within {
    --component-card-background: var(--colour-brand-2-base);
  }
}
.wp-component-card.wp-component-card--hero-reveal:not(.wp-component-card--highlighted) {
  --component-tag-background-colour: var(--colour-brand-1-base);
}
.wp-component-card.wp-component-card--hero-reveal .wp-component-card__image-wrapper {
  transition: var(--transition-opacity), var(--transition-transform);
  transition-duration: calc(0.3s * 2);
  aspect-ratio: 2/1;
  bottom: 100%;
  left: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transform: translateY(var(--spacing-xxs));
  width: 100%;
  z-index: -1;
}
.wp-component-card.wp-component-card--hero-reveal .wp-component-card__image-wrapper .wp-component-card__tags {
  left: var(--spacing-xs);
}
.wp-component-card.wp-component-card--hero-reveal .wp-component-card__content {
  transition: var(--transition-background-color);
  transition-duration: calc(0.3s * 2);
  background-color: var(--component-card-background);
  padding: var(--spacing-xs);
  position: relative;
  z-index: 1;
}
.wp-component-card.wp-component-card--hero-reveal.wp-component-card--highlighted .wp-component-card__content {
  background: var(--gradient-dark-radial-right-subtle);
}
@media (min-width: 1024px) {
  .wp-component-card.wp-component-card--hero-reveal:enabled, .wp-component-card.wp-component-card--hero-reveal:not([disabled]) {
    opacity: 1;
  }
}
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .wp-component-card.wp-component-card--hero-reveal:enabled:hover .wp-component-card__image-wrapper, .wp-component-card.wp-component-card--hero-reveal:enabled:focus-within .wp-component-card__image-wrapper, .wp-component-card.wp-component-card--hero-reveal:not([disabled]):hover .wp-component-card__image-wrapper, .wp-component-card.wp-component-card--hero-reveal:not([disabled]):focus-within .wp-component-card__image-wrapper {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
}
.wp-component-card.wp-component-card--hero-reveal .wp-component-card__title {
  font-family: var(--font-sans-serif);
  font-size: var(--font-size-p);
  font-weight: 500;
  letter-spacing: var(--letter-spacing-p);
  line-height: var(--line-height-p);
  text-transform: none;
}

/*# sourceMappingURL=styles.css.map*/