/**
 * @file
 * Sticky Features Section — 4-card "bento" feature grid (ClearTax-style).
 *
 * The grid skeleton (centred heading + a CSS grid whose four cells are placed
 * by the server-mapped `.animated-feature-card--{type}` modifier) is unchanged.
 * Each card now renders a simple block: a title, a description, and a single
 * uploaded GIF/image — no native mock-UI animations.
 *
 * Brand tokens (locked): green #3CB944, accent green 2 #1D9E75, navy #1C3557,
 * heading #0A0A0A, body #45464F, white. Font: Manrope (self-hosted).
 */

@font-face {
  font-family: 'Manrope';
  src: url('../../fonts/Manrope-VariableFont_wght.woff2?v=2') format('woff2-variations');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

.bento-features-wrapper {
  --bf-green: #3cb944;
  --bf-green-2: #1d9e75;
  --bf-navy: #1c3557;
  --bf-blue: #4a84f6;
  --bf-heading: #0a0a0a;
  --bf-body: #45464f;
  --bf-wash: #ffffff;   /* section wash — white */
  --bf-card: #ffffff;   /* cards reverted to crisp white; border+shadow supply separation */
  --bf-surface: #ffffff;
  --bf-muted: #70757a;
  --bf-radius-lg: 24px;
  --bf-radius-md: 16px;
  --bf-radius-sm: 12px;

  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  /* Base aligned to the FINAL SURGICAL OVERRIDES values (gap 0 — the
     heading's own margin supplies the header->grid spacing; a flex gap here
     would stack on top of it). */
  gap: 0;
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--et-section-pad-y, 5rem) 1.5rem; /* unified section rhythm */
  background: var(--bf-wash);
  color: var(--bf-body);
  font-family: 'Manrope', -apple-system, 'Segoe UI', Roboto, sans-serif;
}

.bento-features-wrapper *,
.bento-features-wrapper *::before,
.bento-features-wrapper *::after {
  box-sizing: border-box;
}

/* ====================================================================== */
/* Header                                                                 */
/* ====================================================================== */
.bento-features__header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.bento-features__heading {
  margin: 0;
  /* Base mirrors the unified H2 token; the FINAL SURGICAL OVERRIDES block at
     the end of this file re-asserts the same values with !important. */
  font-size: var(--et-h2-size);
  font-weight: var(--et-h2-weight, 800);
  line-height: var(--et-h2-lh, 1.15);
  letter-spacing: var(--et-h2-track, -0.02em);
  color: var(--et-heading-color, #0a0a0a);
}

/* Highlight colour now comes from the global .et-highlight-text utility
   (design-tokens.css → --et-highlight-green). Old scoped --bf-blue removed. */

/* ====================================================================== */
/* Bento grid                                                             */
/* ====================================================================== */
.bento-features__grid {
  display: grid;
  /* Console-measured geometry: columns 439 / 358 / 358, rows 353 / 258, gap 24.
     Expressed as fr-ratios capped at max-width:1203px — at the design width the
     tracks resolve to the EXACT pixels; below it they shrink proportionally
     (fr never overflows), so no horizontal scroll at any width >991px. minmax(0,…)
     stops a long unbreakable label from blowing a track past its share. */
  grid-template-columns: minmax(0, 439fr) minmax(0, 358fr) minmax(0, 358fr);
  grid-template-rows: 353px 258px;
  gap: 24px;
  width: 100%;
  max-width: 1203px;
  margin-inline: auto;
}

/* Cell placement is driven only by the server-mapped type modifier. */
.animated-feature-card--expert-match {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
  /* Spans both fixed rows: 353 + 258 + 24 gap = 635px (console-measured). */
}

.animated-feature-card--data-fetch {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}

.animated-feature-card--cursor-click {
  grid-column: 3 / 4;
  grid-row: 1 / 2;
}

.animated-feature-card--bar-chart {
  grid-column: 2 / 4;
  grid-row: 2 / 3;
}

/* ====================================================================== */
/* Card base                                                              */
/* ====================================================================== */
.animated-feature-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2.5rem;
  overflow: hidden;
  background: var(--bf-card);
  border-radius: var(--bf-radius-lg);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
}

/* Subtle lift on hover — motion only for users who haven't opted out. */
@media (prefers-reduced-motion: no-preference) {
  .animated-feature-card {
    transition: transform 0.3s ease;
  }

  .animated-feature-card:hover {
    transform: translateY(-4px); /* 4px grid (was 5px) */
  }
}

/* ====================================================================== */
/* Shared text styling (all variants)                                     */
/* ====================================================================== */
.bento-content-layer {
  position: relative;
  z-index: 3; /* above the GIF + gradient layers in Variant B */
  width: 100%;
}

.feature-card__title {
  margin: 0 0 0.75rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--bf-navy);
}

.feature-card__desc,
.feature-card__desc p {
  margin: 0;
  line-height: 1.5;
  /* Global body token — 8.4:1 on the white card (AA/AAA). */
  color: var(--bf-body);
}

.feature-card__desc :last-child {
  margin-bottom: 0;
}

/* Links stay readable in the rich-text description. */
.feature-card__desc a {
  color: var(--bf-navy);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.feature-card__desc a:hover {
  color: var(--bf-green-2);
}

.feature-card a:focus-visible {
  outline: 2px solid var(--bf-green);
  outline-offset: 2px;
  border-radius: 4px;
}

/* The GIF/image is printed server-side as a plain <img> (original file, no image
   style — see the preprocess hook) so animated GIFs keep playing. */
.animated-feature-card img {
  display: block;
}

/* Lottie player fills its media slot exactly like the media it replaces —
   aggressive containment so a rogue animation can't blow the rigid grid. */
.card-media-slot lottie-player {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  max-height: 100%;
}

/* ====================================================================== */
/* VARIANT A — tall card: text centred at top, GIF below (contain)        */
/* (.animated-feature-card--expert-match)                                 */
/* ====================================================================== */
.animated-feature-card--expert-match {
  padding: 3rem 2.5rem;
  align-items: center;
  text-align: center;
}

/* NOTE: the per-variant title/desc font-size rules that used to live here were
   DEAD CODE — the FINAL SURGICAL OVERRIDES block at the end of this file forces
   the unified H3/body tokens with !important on every variant (same-specificity
   !important, later in source, silently wins). Removed in the design-system
   unification sweep rather than left to mislead. */

.bento-media-layer-tall {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  min-height: 280px; /* floor for the mobile/auto-height card; desktop grows past it */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1.5rem;
  /* Breathing room so a (near-)square composition can't fill the box edge-to-edge
     and clip the fanned side cards against the boundary — matches the reference's
     centred-with-margin framing. */
  padding: 0.5rem 7%;
}

/* Size the image to its OWN aspect ratio (cap at the box), centred by the flex
   parent. This contains any aspect — square, portrait or landscape — without
   stretching, distortion or cropping; the box padding above supplies the margin. */
.bento-media-layer-tall img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

/* ====================================================================== */
/* VARIANT B — full-bleed cover GIF + bottom wash + bottom-centred text    */
/* (.animated-feature-card--data-fetch, --cursor-click)                    */
/* ====================================================================== */
.animated-feature-card--data-fetch,
.animated-feature-card--cursor-click {
  justify-content: flex-end; /* push the text layer to the bottom */
  align-items: center;
  text-align: center;
}

/* (Variant B per-card font sizes removed — dead code; the final override
   block's unified H3/body tokens win.) */

.bento-media-layer-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.bento-media-layer-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* fill the slot, anchored to the top */
  object-position: top center;
}

/* Bottom-to-top wash so the bottom text stays legible over the media. The
   opaque stop matches the card background (white) for a seamless fade. */
.bento-gradient-overlay-bottom {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0.85) 35%,
    rgba(255, 255, 255, 0) 70%
  );
}

/* ====================================================================== */
/* VARIANT C — horizontal: media left (contain), text right (left-align)   */
/* (.animated-feature-card--bar-chart)                                     */
/* ====================================================================== */
.animated-feature-card--bar-chart {
  flex-direction: row;
  align-items: center;
  gap: 3rem;
}

.bento-media-layer-inline {
  position: relative;
  flex: 0 0 45%;
  align-self: stretch; /* fill the card height so the contain box has height */
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bento-media-layer-inline img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.animated-feature-card--bar-chart .bento-content-layer {
  flex: 1 1 0;
  width: auto;
  text-align: left;
}

/* (Variant C per-card font sizes removed — dead code; the final override
   block's unified H3/body tokens win.) */

/* ====================================================================== */
/* Responsive — collapse the bento to one column (no h-scroll ≥320px)     */
/* ====================================================================== */
@media (max-width: 991px) {
  .bento-features-wrapper {
    padding: var(--et-section-pad-y, 3rem) clamp(1rem, 5vw, 2rem);
    gap: 0; /* aligned with the final override — heading margin owns the gap */
  }

  .bento-features__grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 1.25rem;
  }

  .animated-feature-card,
  .animated-feature-card--expert-match,
  .animated-feature-card--data-fetch,
  .animated-feature-card--cursor-click,
  .animated-feature-card--bar-chart {
    grid-column: 1 / -1;
    grid-row: auto;
    padding: clamp(1.5rem, 6vw, 2.5rem);
  }

  /* Variant B loses its fixed row height once linearised — give the card a real
     height so the absolutely-positioned cover GIF has a box to fill. */
  .animated-feature-card--data-fetch,
  .animated-feature-card--cursor-click {
    min-height: 340px;
  }

  /* Variant C stacks: media on top (full width), text below, centred. */
  .animated-feature-card--bar-chart {
    flex-direction: column;
    gap: 2rem;
  }

  .animated-feature-card--bar-chart .bento-media-layer-inline {
    flex: 0 0 auto;
    width: 100%;
    align-self: auto;
    min-height: 200px;
  }

  .animated-feature-card--bar-chart .bento-content-layer {
    text-align: center;
  }
}

/* ====================================================================== */
/* FINAL SURGICAL OVERRIDES — layout finalisation + global theme sync     */
/* Fixes: (1) Card-1 media slot too small, (2) Cards-2/3 media acting as  */
/* full-card backgrounds, (3) global sizing/typography drift.             */
/* !important is deliberate: these must beat both the variant rules above */
/* and any WYSIWYG-injected inline styles (CMS specificity war).          */
/* NOTE: DOM mapping — the <article> itself is the flex column (there is  */
/* no .card-inner-layout wrapper), and `.bento-heading` is the CARD-title */
/* alias, NOT the section <h2>.                                           */
/* ====================================================================== */

/* ---- 1. Global grid & theme ---- */
/* Wrapper is WHITE. Vertical padding = the UNIFIED section rhythm token —
   every homepage section now shares the same padding-block, replacing the old
   asymmetric 4rem/1rem seam tuning (superseded by the design-system sweep).
   Margin stays 0 so nothing invisible stacks on top of it. */
.bento-features-wrapper,
.bento-skeleton-wrapper {
  background-color: #ffffff !important;
  max-width: 1100px !important;
  width: 100%;
  margin: 0 auto !important; /* margin-bottom: 0 — no extra push on the next section */
  /* Extra top padding (+48px) offsets et-depth's -3rem bottom breach so the gap
     BELOW the dark sheet === the gap ABOVE it (persona side). Dark-sheet symmetry. */
  padding: calc(var(--et-section-pad-y, 5rem) + 3rem) 1.5rem var(--et-section-pad-y, 5rem) !important;
  gap: 0 !important; /* header→grid spacing moves to the heading margin below */
  box-sizing: border-box;
}

/* Cards reverted to crisp white — the 1px navy-tint border + soft shadow are
   what separate them from the equally-white section wash. */
.bento-card,
.animated-feature-card,
.feature-card-inner {
  background-color: #ffffff !important;
  border-radius: 24px !important;
  border: 1px solid rgba(28, 53, 87, 0.08) !important;
  overflow: hidden;
}

/* ---- 2. Nuclear typography sync — UNIFIED DESIGN-SYSTEM TOKENS ---- */
/* Section <h2>: the shared H2 token, identical to every other section title. */
.bento-features__heading {
  color: var(--et-heading-color, #0a0a0a) !important;
  font-family: 'Manrope', sans-serif !important;
  font-size: var(--et-h2-size) !important;
  font-weight: var(--et-h2-weight, 800) !important;
  line-height: var(--et-h2-lh, 1.15) !important;   /* tight — inverse line-height law */
  letter-spacing: var(--et-h2-track, -0.02em) !important;
  text-align: center;
  margin-bottom: var(--et-title-gap, 3rem) !important;
}

/* Card titles (all variants): the shared H3 token. */
.feature-card__title,
.bento-heading,
.animated-feature-card h3 {
  color: #1c3557 !important;
  font-family: 'Manrope', sans-serif !important;
  font-size: var(--et-h3-size, 1.25rem) !important;
  font-weight: var(--et-h3-weight, 700) !important;
  margin: 0 0 0.5rem !important;      /* 8px — 4-px grid */
  line-height: var(--et-h3-lh, 1.3) !important;
  letter-spacing: var(--et-h3-track, -0.01em) !important;
}

/* Card body copy & strip WYSIWYG bolding. */
.feature-card__desc,
.feature-card__desc *,
.bento-description,
.bento-description * {
  color: #45464f !important;
  font-family: 'Manrope', sans-serif !important;
  font-size: var(--et-body-sm-size, 0.9375rem) !important;
  font-weight: 500 !important;
  line-height: var(--et-body-lh-dense, 1.5) !important; /* loose — breathable body copy */
  margin: 0 !important;
}

/* Links stay distinguishable inside the forced body copy (same specificity,
   declared later, so these win the tie). */
.bento-description a,
.feature-card__desc a {
  color: #1c3557 !important;
  text-decoration: underline !important;
}

/* ---- 3. Card 1 (expert-match): FULL-BLEED media ---- */
/* The card sheds ALL of its padding (beats variant A's 3rem 2.5rem); only the
   text layer gets padding back, so the media can touch the bottom, left and
   right edges of the card. */
.bento-card--expert,
.animated-feature-card--expert-match {
  padding: 0 !important;
  display: flex;
  flex-direction: column;
}

/* Text keeps its breathing room; bottom 1rem = the text↔media gap. */
.bento-card--expert .card-text-content,
.animated-feature-card--expert-match .card-text-content {
  padding: 3rem 2.5rem 1rem !important; /* 48px / 40px / 16px — 4-px grid */
  flex-shrink: 0;
}

/* Slot eats all remaining height and hugs the card's bottom edge. */
.bento-card--expert .card-media-slot,
.animated-feature-card--expert-match .card-media-slot {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-height: 0; /* flex sizes the slot, not the old 280px floor */
  margin: 0 !important;
  padding: 0 !important; /* the old 7% side padding is what broke the bleed */
  position: relative;
  display: flex;
  align-items: flex-end; /* anchors the media to the bottom */
  justify-content: center;
  border-radius: 0 0 24px 24px; /* match the card's bottom corners */
  overflow: hidden;
}

/* Media covers the entire slot — edge-to-edge, cropped from the top. */
.bento-card--expert .card-media-slot img,
.bento-card--expert .card-media-slot picture,
.bento-card--expert .card-media-slot lottie-player,
.bento-card--expert .card-media-slot video,
.animated-feature-card--expert-match .card-media-slot img,
.animated-feature-card--expert-match .card-media-slot picture,
.animated-feature-card--expert-match .card-media-slot lottie-player,
.animated-feature-card--expert-match .card-media-slot video {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important; /* fill to the edges — no letterbox gaps */
  object-position: bottom center !important;
  display: block !important;
}

/* Lottie-only camera zoom: the exported JSON carries dead padding around the
   artwork, so scale past it. transform doesn't affect layout, and the slot's
   overflow: hidden (rounded to the card's bottom corners) clips the spill —
   origin bottom-center keeps the subject anchored to the card's bottom edge. */
.bento-card--expert .card-media-slot lottie-player,
.animated-feature-card--expert-match .card-media-slot lottie-player {
  width: 100% !important;
  height: 100% !important;
transform: scale(2.1) translateY(120px) translateX(-5px) !important;
  transform-origin: bottom center !important;
  display: block !important;
}

/* ---- 4. Cards 2 & 3 (data-fetch, cursor-click): media TOP, text BOTTOM ---- */
/* The media slot precedes the text in the DOM, so once it re-enters normal
   flow the column order is already media-then-text — no reversal needed. */
.animated-feature-card--data-fetch,
.animated-feature-card--cursor-click {
  justify-content: flex-start !important;
  gap: 1.5rem; /* 24px minimum media↔text separation */
  padding: 2rem !important; /* 32px — keeps 180px media + 2-line desc inside the 353px row */
}

.animated-feature-card--data-fetch .card-media-slot,
.animated-feature-card--cursor-click .card-media-slot {
  position: relative !important; /* stops it acting as a full-card background */
  inset: auto !important;
  z-index: auto !important;
  width: 100%;
  height: 180px !important; /* locks the media to the top of the card */
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.animated-feature-card--data-fetch .card-media-slot img,
.animated-feature-card--cursor-click .card-media-slot img,
.animated-feature-card--data-fetch .card-media-slot lottie-player,
.animated-feature-card--cursor-click .card-media-slot lottie-player {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important; /* no more cover-crop */
  object-position: center !important;
}

/* Text drops to the bottom edge of the card. */
.animated-feature-card--data-fetch .bento-content-layer,
.animated-feature-card--cursor-click .bento-content-layer {
  margin-top: auto;
}

/* The legibility wash is obsolete now the media no longer sits behind the
   text — left visible it would grey out the in-flow media. */
.animated-feature-card--data-fetch .bento-gradient-overlay-bottom,
.animated-feature-card--cursor-click .bento-gradient-overlay-bottom {
  display: none !important;
}

/* ==========================================================================
   CARD 4 — LIQUID "DRAIN" BARS + JS COUNTDOWN  (user-approved 2026-07-11)
   Replaces the Speed Compare pills for the bar_chart_us card. Bars START FULL
   and DRAIN to target levels when the card scrolls into view (IntersectionObserver
   adds .is-visible via js/components/sticky-features.js); labels count down in sync.
   Trigger class adapted to the REAL DOM: card is .animated-feature-card--bar-chart
   (the spec's .bento-card does not exist — see summary/section4.md §6).
   NOTE: the wave-mask top % values are the spec's; the surface crest may need a
   small live tweak (the spec omitted .liquid-bar dimensions). The DRAIN itself
   (fill height) and the countdown are geometry-independent and correct.
   ========================================================================== */
.liquid-chart-stage {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 32px;                 /* 4px grid */
  width: 100%;
  height: 100%;
  min-height: 224px;
  padding: 8px 0;
}
.liquid-bar-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.liquid-bar {
  position: relative;
  width: 64px;
  height: 176px;
  background: #E8EAED;       /* empty column behind the liquid */
  border-radius: 12px;
  overflow: hidden;          /* clips the spinning wave blob to the bar */
}

/* Base State: start full */
.liquid-fill {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100%;              /* start full */
  transition: height 2s cubic-bezier(0.25, 1, 0.5, 1);
  z-index: 1;
}
.fill-green { background: #3CB944; }  /* other platform — barely drains */
.fill-blue  { background: #1C3557; }  /* EasyTax — drains hard */

/* Base Wave State: top of the container */
.liquid-wave-mask {
  position: absolute;
  top: -190%;               /* pushed up to match 100% fill */
  left: -50%;
  width: 200%;
  padding-bottom: 200%;
  background: #E8EAED;
  border-radius: 40%;
  z-index: 2;
  animation: spin-wave 4s linear infinite;
  transition: top 2s cubic-bezier(0.25, 1, 0.5, 1);
}
@keyframes spin-wave {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Triggered State: drain to target levels */
.animated-feature-card--bar-chart.is-visible .fill-green { height: 90%; }
.animated-feature-card--bar-chart.is-visible .fill-green + .liquid-wave-mask { top: -180%; }
.animated-feature-card--bar-chart.is-visible .fill-blue { height: 25%; }
.animated-feature-card--bar-chart.is-visible .fill-blue + .liquid-wave-mask { top: -50%; }
xx
/* Labels below each bar */
.liquid-chart-stage .bar-label {
  text-align: center;
  color: #1C3557;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.3;
}
.liquid-chart-stage .counter-left,
.liquid-chart-stage .counter-right {
  font-size: 1.5rem;        /* the number leads */
  font-weight: 800;
  letter-spacing: -0.01em;  /* large numeral → slight negative tracking */
}
.liquid-chart-stage .unit-left,
.liquid-chart-stage .unit-right { font-weight: 600; }
.liquid-chart-stage .bar-label small {
  display: block;
  margin-top: 4px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;   /* small label → positive tracking */
  text-transform: uppercase;
  color: #45464F;
  opacity: 0.75;
}

/* Respect reduced motion: freeze the wave, no drain transition (JS renders the
   settled numbers instantly — see sticky-features.js). */
@media (prefers-reduced-motion: reduce) {
  .liquid-wave-mask { animation: none; }
  .liquid-fill,
  .liquid-wave-mask { transition: none; }
}

/* ======================================================================== */
/* NATIVE <video> MEDIA — parity with the <img>/<lottie-player> it replaced. */
/* Appended last so it wins on source order at equal specificity.            */
/* ======================================================================== */

/* 1. RESET + SELF-CLIP.
      <video> is display:inline by default, so it sits on the text baseline and
      leaves a ~4px descender gap beneath it — that gap is what pushed the media
      past the card's bottom edge. (The theme resets `img { display:block }` but
      never video.)
      border-radius:inherit is the important one: a <video> is promoted to its
      OWN compositing layer, and an ancestor's overflow:hidden does NOT reliably
      clip a composited layer (Safari + older Chrome) — which is why the card's
      bottom rounded corners disappeared. Inheriting the radius makes the video
      paint its own rounded corners instead of relying on ancestor clipping. */
.afc-media__video {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background-color: transparent;
}

/* 2a. VARIANT A — .bento-media-layer-tall = COVER, anchored bottom.
       Previously there was NO video rule here at all (only `img`), so the
       element fell back to its intrinsic size (1080x1920) and blew out the
       grid. Cover + bottom-center keeps the subjects flush to the bottom edge. */
.bento-media-layer-tall .afc-media__video,
.bento-media-layer-tall video {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  object-position: bottom center;
}

/* The tall layer ships `padding: 0.5rem 7%` + `margin-top: 1.5rem` as breathing
   room for the ORIGINAL contain framing (an <img> sized to its own aspect). A
   cover video can only sit flush once that inset is gone — but existing IMAGE
   tall-cards must keep it, so the reset is scoped with :has() to layers that
   actually contain a video. Bottom-only radius mirrors .card-media-slot. */
.bento-media-layer-tall:has(.afc-media__video),
.bento-media-layer-tall:has(video) {
  padding: 0;
  align-items: flex-end;
  border-radius: 0 0 24px 24px; /* 24px — matches the card token, 4-px grid */
}

/* 2b. VARIANT B — full-bleed slot = COVER (edge-to-edge, no letterbox).
       Mirrors the existing img/picture/lottie cover treatment above. */
.card-media-slot .afc-media__video,
.bento-media-layer-bg .afc-media__video {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  object-position: bottom center;
}

/* 3. HARD CLIP on the wrapper. isolation:isolate gives the slot its own
      paint/stacking context so the rounded clip is actually applied to the
      video's composited layer. Radius is intentionally NOT set here — each
      slot keeps the radius it already declares (the expert slot is
      bottom-corners-only, and blanket-inheriting would round its top too). */
.bento-media-layer-tall,
.card-media-slot,
.bento-media-layer-bg {
  overflow: hidden;
  isolation: isolate;
}