/* ==========================================================================
   BecA Feature Cards — beca-feature-cards.css  v2
   All layout values are driven by CSS custom properties injected inline
   per block instance, so multiple placements never collide.
   ========================================================================== */

/* ── Design tokens (fallbacks match PHP defaultConfiguration) ────────────── */
.bfc-section {
  /* background */
  --bfc-bg:            #ffffff;
  --bfc-bg-image:      none;
  /* container */
  --bfc-container:     1240px;
  /* spacing */
  --bfc-pad-top:       4rem;
  --bfc-pad-bottom:    4rem;
  --bfc-margin-top:    0;
  --bfc-margin-bottom: 0;
  /* border */
  --bfc-border-color:  rgba(217, 217, 217, 1);
  --bfc-border-style:  0.5px solid var(--bfc-border-color);
  /* cards */
  --bfc-card-bg:       #ffffff;
  --bfc-card-radius:   20px;
  --bfc-card-width:    100%;
  --bfc-card-height:   auto;
  --bfc-card-border:   1px solid rgba(0, 0, 0, 0.07);
  --bfc-card-shadow:   none;
  --bfc-card-hover-shadow: 0 16px 48px rgba(0, 0, 0, 0.1);
  --bfc-card-hover-transform: translateY(-4px);
  --bfc-card-transition: box-shadow 0.3s, transform 0.3s;
  --bfc-image-ratio: 16 / 10;
  --bfc-image-bg: #dde5f0;
  --bfc-image-scale: 1.04;
  --bfc-image-transition: transform 0.5s ease;
  --bfc-body-padding: 28px;
  --bfc-body-gap: 14px;
  --bfc-eyebrow-bg: #EEF4FF;
  --bfc-eyebrow-color: #135AD5;
  --bfc-eyebrow-size: 11px;
  --bfc-title-color: #1A1A1A;
  --bfc-title-size: 0.9375rem;
  --bfc-title-weight: 700;
  --bfc-title-line-height: 1.4;
  --bfc-text-color: #666666;
  --bfc-text-size: 0.8125rem;
  --bfc-text-line-height: 1.7;
  --bfc-columns:       3;
  --bfc-gap:           1.5rem;
  /* cta */
  --bfc-cta-bg:        #135AD5;
  --bfc-cta-text:      #6D6D6D;
  --bfc-cta-hover:     #ffffff;
  --bfc-cta-margin:    1rem;
  /* brand */
  --bfc-primary:       #135AD5;
  --bfc-accent:        #07A5F6;
  --bfc-dark:          #14213d;
  --bfc-muted:         #5b6472;
}

/* ==========================================================================
   Section shell — full-viewport-width breakout from any constrained layout
   ========================================================================== */
.bfc-section {
  position: relative;
  box-sizing: border-box;
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-block: var(--bfc-pad-top) var(--bfc-pad-bottom);
  margin-block:  var(--bfc-margin-top) var(--bfc-margin-bottom);
  border-top:    var(--bfc-border-style, 0.5px solid var(--bfc-border-color)) !important;
  border-bottom: var(--bfc-border-style, 0.5px solid var(--bfc-border-color)) !important;
  border-top-color: var(--bfc-border-color) !important;
  border-bottom-color: var(--bfc-border-color) !important;
  background-color:    var(--bfc-bg, #ffffff);
  background-image:    var(--bfc-bg-image, none);
  background-size:     cover;
  background-position: center;
  background-repeat:   no-repeat;
  
}

.bfc-section *,
.bfc-section *::before,
.bfc-section *::after {
  box-sizing: border-box;
}

/* ── Inner container (max-width + centred) ────────────────────────────────── */
.bfc-inner {
  width: min(100%, var(--bfc-container, 1240px));
  max-width: var(--bfc-container, 1240px);
  margin-inline: auto;
  padding-inline: 0 !important;
}


/* Keep the full 1240px desktop canvas; add only responsive viewport gutters below it. */
@media (max-width: 1279px) {
  .bfc-inner {
    width: calc(100% - 2rem);
  }
}

@media (max-width: 640px) {
  .bfc-inner {
    width: calc(100% - 1.25rem);
  }
}

/* ==========================================================================
   Section header
   ========================================================================== */
.bfc-header {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--bfc-container, var(--beca-container-max, 1240px));
  margin-inline: auto;
  margin-bottom: 2.5rem;
}

/* Apply the selected alignment to every header text element. */
.bfc-header--align-left {
  align-items: flex-start;
  text-align: left;
}

.bfc-header--align-center {
  align-items: center;
  text-align: center;
}

.bfc-header--align-right {
  align-items: flex-end;
  text-align: right;
}

/* Keep the eyebrow text and its ::before decoration as one movable unit. */
.bfc-header > .bfc-eyebrow {
  display: inline-flex !important;
  width: auto !important;
  max-width: 100%;
  align-items: center;
  text-align: inherit !important;
}

.bfc-header > .bfc-heading {
  display: block;
  width: 100%;
  max-width: none;
  text-align: inherit !important;
}

.bfc-header-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  width: 100%;
}

.bfc-header-bottom .bfc-subheading {
  flex: 1 1 auto;
  width: auto;
  max-width: none;
  margin: 0;
  text-align: inherit !important;
}

/* Left and centre: text first, View All on the right. */
.bfc-header--align-left .bfc-header-bottom .bfc-subheading,
.bfc-header--align-center .bfc-header-bottom .bfc-subheading {
  order: 1;
}

.bfc-header--align-left .bfc-view-all,
.bfc-header--align-center .bfc-view-all {
  order: 2;
}

/* Right: View All moves left and all header text moves right. */
.bfc-header--align-right .bfc-header-bottom {
  flex-direction: row;
}

.bfc-header--align-right .bfc-view-all {
  order: 1;
}

.bfc-header--align-right .bfc-header-bottom .bfc-subheading {
  order: 2;
  text-align: right !important;
}

.bfc-view-all {
  --bfc-cta-bg: var(--bfc-view-all-bg, #135AD5);
  margin-top: 0;
  flex: 0 0 auto;
  align-self: center;
}

@media (max-width: 640px) {
  .bfc-header-bottom {
    flex-direction: column;
    gap: 1rem;
  }

  .bfc-header--align-left .bfc-header-bottom {
    align-items: flex-start;
  }

  .bfc-header--align-center .bfc-header-bottom {
    align-items: center;
  }

  .bfc-header--align-right .bfc-header-bottom {
    flex-direction: column;
    align-items: flex-end;
  }

  .bfc-header--align-right .bfc-header-bottom .bfc-subheading {
    order: 1;
  }

  .bfc-header--align-right .bfc-view-all {
    order: 2;
  }

  .bfc-view-all {
    align-self: inherit;
  }
}

/* ==========================================================================
   Card grid
   ========================================================================== */
.bfc-grid {
  display: grid;
  grid-template-columns: repeat(var(--bfc-columns, 3), minmax(0, 1fr));
  gap: var(--bfc-gap, 1.5rem);
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

/* Tablet: 2 columns */
@media (max-width: 1024px) {
  .bfc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mobile: 1 column */
@media (max-width: 640px) {
  .bfc-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Individual card — exact visual implementation mapped from beca_block_stories
   ========================================================================== */
.bfc-card {
  border: var(--bfc-card-border, 1px solid rgba(0, 0, 0, 0.07));
  border-radius: var(--bfc-card-radius, 20px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: var(--bfc-card-width, 100%);
  max-width: 100%;
  background: var(--bfc-card-bg, #ffffff);
  height: var(--bfc-card-height, auto);
  min-height: 0;
  box-shadow: var(--bfc-card-shadow, none);
  transition: var(--bfc-card-transition, box-shadow 0.3s, transform 0.3s);
}

.bfc-card:hover,
.bfc-card:focus-within {
  box-shadow: var(--bfc-card-hover-shadow, 0 16px 48px rgba(0, 0, 0, 0.1));
  /*transform: var(--bfc-card-hover-transform, translateY(-4px));*/
}

/* Card image — exact Stories card ratio, background and zoom treatment. */
.bfc-card-media {
  aspect-ratio: var(--bfc-image-ratio, 16 / 10);
  overflow: hidden;
  background: var(--bfc-image-bg, #dde5f0);
  flex-shrink: 0;
  width: 100%;
}

.bfc-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--bfc-image-transition, transform 0.5s ease);
  display: block;
}

.bfc-card:hover .bfc-card-media img,
.bfc-card:focus-within .bfc-card-media img {
  /*transform: scale(var(--bfc-image-scale, 1.04));*/
}

/* Card body — exact Stories card spacing. */
.bfc-card-body {
  padding: var(--bfc-body-padding, 28px);
  display: flex;
  flex-direction: column;
  gap: var(--bfc-body-gap, 14px);
  flex: 1;
}

.bfc-card--no-image .bfc-card-body {
  padding: var(--bfc-body-padding, 28px);
}

/* Card eyebrow mapped to the Stories tag treatment. */
.bfc-card-eyebrow {
  display: inline-block;
  width: fit-content;
  margin: 0;
  font-size: var(--bfc-eyebrow-size, 11px);
  font-weight: 700;
  line-height: normal;
  color: var(--bfc-eyebrow-color, #135AD5);
  background: var(--bfc-eyebrow-bg, #EEF4FF);
  padding: 4px 12px;
  border-radius: 100px;
  text-transform: none;
  letter-spacing: normal;
}

/* Card title — exact Stories typography. */
.bfc-card-title {
  font-size: var(--bfc-title-size, 0.9375rem);
  font-weight: var(--bfc-title-weight, 700);
  color: var(--bfc-title-color, #1A1A1A);
  line-height: var(--bfc-title-line-height, 1.4);
  margin: 0;
}

/* Card summary — exact Stories typography and flex behaviour. */
.bfc-card-text {
  font-size: var(--bfc-text-size, 0.8125rem);
  color: var(--bfc-text-color, #666666);
  line-height: var(--bfc-text-line-height, 1.7);
  margin: 0;
  flex: 1;
  min-height: 0;
}

/* ==========================================================================
   CTA button — animated pill with expanding background fill
   ========================================================================== */
.bfc-card-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0;
  margin-top: var(--bfc-cta-margin, 1rem);
  padding: 0 1.4rem 0 4rem;
  min-height: 2.85rem;
  width: fit-content;
  border-radius: 999px;
  background: transparent;
  color: var(--bfc-cta-text, #6D6D6D);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  letter-spacing: 0.01em;
  isolation: isolate;
  overflow: hidden;
  flex: 0 0 auto;
  align-self: flex-start;
  transition: color 300ms ease,
              transform 300ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 300ms ease;
}

/* Expanding pill background */
.bfc-card-cta::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  z-index: -1;
  width: 2.85rem;
  height: 2.85rem;
  border-radius: 999px;
  background: var(--bfc-cta-bg, #135AD5);
  transform: translateY(-50%);
  transition: width 400ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 300ms ease;
}

.bfc-card-cta:hover,
.bfc-card-cta:focus-visible {
  color: var(--bfc-cta-hover, #ffffff);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(19, 90, 213, 0.28);
  text-decoration: none;
  outline-offset: 3px;
}

.bfc-card-cta:hover::before,
.bfc-card-cta:focus-visible::before {
  width: 100%;
  box-shadow: 0 6px 18px rgba(19, 90, 213, 0.32);
}

/* Icon container */
.bfc-cta-icon {
  position: absolute;
  left: 0;
  top: 50%;
  width: 2.85rem;
  height: 2.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  pointer-events: none;
}

.bfc-cta-icon img {
  position: absolute;
  filter: brightness(0) invert(1);
  object-fit: contain;
  transition: opacity  320ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Chevron (default visible) */
.bfc-cta-icon-chevron {
  width: 1rem;
  height: 1rem;
  opacity: 1;
  transform: translateX(0);
}

/* Arrow (hidden until hover) */
.bfc-cta-icon-arrow {
  width: 1.25rem;
  height: 1.25rem;
  opacity: 0;
  transform: translateX(-6px) scaleX(0.5);
}

.bfc-card-cta:hover .bfc-cta-icon-chevron,
.bfc-card-cta:focus-visible .bfc-cta-icon-chevron {
  opacity: 0;
  transform: translateX(8px) scaleX(1.15);
}

.bfc-card-cta:hover .bfc-cta-icon-arrow,
.bfc-card-cta:focus-visible .bfc-cta-icon-arrow {
  opacity: 1;
  transform: translateX(0) scaleX(1);
}

.bfc-cta-label {
  position: relative;
  z-index: 1;
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

.bfc-card-cta:hover .bfc-cta-label,
.bfc-card-cta:focus-visible .bfc-cta-label {
  transform: translateX(2px);
}

/* ==========================================================================
   Accessibility — reduce motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .bfc-card,
  .bfc-card-media img,
  .bfc-card-cta,
  .bfc-card-cta::before,
  .bfc-cta-icon img,
  .bfc-cta-label {
    transition: none;
  }

  .bfc-card:hover,
  .bfc-card:focus-within {
    transform: none;
  }

  .bfc-card-cta:hover,
  .bfc-card-cta:focus-visible {
    transform: none;
  }
}

/* ==========================================================================
   Fallback for browsers without -webkit-line-clamp
   ========================================================================== */
@supports not (-webkit-line-clamp: 1) {
  .bfc-card-title { max-height: 2.6em;  overflow: hidden; }
  .bfc-card-text  { max-height: 4.8em;  overflow: hidden; }
}

/* Anchor offset for sticky headers. */
.bfc-section[id] {
  scroll-margin-top: 110px;
}


/* Ensure the per-instance configured border wins over beca_base/theme defaults. */
.bfc-section[style] {
  border-top: var(--bfc-border-style, 0.5px solid var(--bfc-border-color)) !important;
  border-bottom: var(--bfc-border-style, 0.5px solid var(--bfc-border-color)) !important;
  border-top-color: var(--bfc-border-color) !important;
  border-bottom-color: var(--bfc-border-color) !important;
}

/* Header alignment hardening: override theme-level heading/paragraph alignment. */
.bfc-section .bfc-header.bfc-header--align-left > .bfc-heading,
.bfc-section .bfc-header.bfc-header--align-left .bfc-subheading {
  text-align: left !important;
}

.bfc-section .bfc-header.bfc-header--align-center > .bfc-heading,
.bfc-section .bfc-header.bfc-header--align-center .bfc-subheading {
  text-align: center !important;
}

.bfc-section .bfc-header.bfc-header--align-right > .bfc-heading,
.bfc-section .bfc-header.bfc-header--align-right .bfc-subheading {
  text-align: right !important;
}

/* ==========================================================================
   Interaction model
   - Module text is never selectable and never shows a text-insertion cursor.
   - A URL without CTA text makes the whole card the link surface.
   - A URL with CTA text leaves only the CTA button clickable.
   ========================================================================== */
.bfc-section,
.bfc-section * {
  -webkit-user-select: none;
  user-select: none;
  cursor: default;
}

.bfc-card {
  position: relative;
}

.bfc-card--linked,
.bfc-card--linked * {
  cursor: pointer;
}

.bfc-card-link {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: block;
  border-radius: inherit;
  cursor: pointer !important;
  text-decoration: none;
}

.bfc-card--linked:focus-within {
  outline: 3px solid var(--bfc-accent, #07A5F6);
  outline-offset: 3px;
}

.bfc-card-cta,
.bfc-card-cta *,
.bfc-view-all,
.bfc-view-all * {
  cursor: pointer !important;
}