/* ==========================================================================
   Feature Block — Webflow code component styles (rendered inside its Shadow DOM)

   Generic white card: heading, rich-text description (with checklist), form
   and media. Figma: "The AI CFO Newsletter" container.

   Same conventions as faq.css: the Figma frame is the source of truth, a
   Webflow variable is used only where its value matches Figma, every
   variable has the Figma value as fallback, ALL values live in the token
   block below. Heading, Description and Form are slots, styled at page level
   by shared/slot-text.ts and feature/slot-styles.ts.
   ========================================================================== */

:host {
  display: block;

  /* ===== Webflow variables (value matches Figma) ===== */

  --fb-font-primary: var(--fonts--primary, "Bitter");

  --fb-navy:       var(--colors--equity-blue, #132c3a);   /* Figma Text-Primary   */
  --fb-slate:      var(--colors--market-slate, #3c6e82);  /* Figma Text-Secondary */
  --fb-white:      var(--colors--white, #ffffff);         /* Figma Neutral-White  */
  --fb-off-white:  var(--colors--clear-ledger, #f5f7fb);
  --fb-tint-blue:  var(--colors--soft-trust, #d4f2fa);

  --fb-pad-x:     var(--spacing--horizontal-padding, 5rem); /* 80px */
  --fb-pad-y:     var(--spacing--vertical-padding, 5rem);   /* 80px */
  --fb-max-width: var(--spacing--max-width, 1440px);
  --fb-radius:    var(--spacing--card-roundness, 2.5rem);   /* Figma 40px */

  /* Heading: family + weight match H2; mobile uses H2 "M -" (no mobile Figma) */
  --fb-h-family: var(--h2--font-family, var(--fb-font-primary));
  --fb-h-weight: var(--h2--font-weight, 400);
  --fb-h-size-m: var(--h2--m-font-size, 2.4rem);
  --fb-h-lh-m:   var(--h2--m-line-height, 3rem);

  /* ===== Fixed Figma values (no matching variable) ===== */

  --fb-pad-x-tablet: 2rem;        /* 32px sides at 991px and below (as the other modules) */
  --fb-card-pad:  4rem;           /* 64px */
  --fb-text-w:    38.2637rem;     /* 612.22px text column */
  --fb-media-w:   30.625rem;      /* 490px square media */
  --fb-col-gap:   3rem;           /* minimum space between the columns */
  --fb-stack-gap: 1.6rem;         /* 25.6px heading → description → form */
  --fb-h-size:    2.8125rem;      /* 45px / 400 / 122% (H2 is 44.8px) */
  --fb-h-lh:      122%;

  /* Scroll-in animation (not in Figma) */
  --fb-reveal-shift: 1.5rem;
  --fb-reveal-time:  0.7s;
  --fb-reveal-ease:  cubic-bezier(0.22, 1, 0.36, 1);

  /* Derived */
  --fb-border: color-mix(in srgb, var(--fb-slate) 10%, transparent); /* = rgba(60,110,130,.10) */
}

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

/* Container query anchored inside the Shadow DOM (see faq.css for why) */
.fb-section {
  container: fb / inline-size;
  padding-inline: var(--fb-pad-x);
}

.fb-bg--transparent { background: transparent; }
.fb-bg--white       { background: var(--fb-white); }
.fb-bg--off-white   { background: var(--fb-off-white); }
.fb-bg--light-blue  { background: var(--fb-tint-blue); }

/* Webflow's tablet breakpoint (viewport, so it lines up with the rest of the site) */
@media (max-width: 991px) {
  .fb-section {
    padding-inline: var(--fb-pad-x-tablet);
  }
}

.fb-inner {
  width: 100%;
  max-width: var(--fb-max-width);
  margin-inline: auto;
  padding-block: var(--fb-pad-y);
}

/* "Section spacing: None": the card only, no space above or below */
.fb-section--flush .fb-inner {
  padding-block: 0;
}

/* The card */
.fb-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--fb-col-gap);
  padding: var(--fb-card-pad);
  border: 1px solid var(--fb-border);
  border-radius: var(--fb-radius);
  background: var(--fb-white);
}

.fb-media--left .fb-card {
  flex-direction: row-reverse;
}

.fb-content {
  display: flex;
  flex-direction: column;
  gap: var(--fb-stack-gap);
  flex: 0 1 var(--fb-text-w);
  min-width: 0;
}

/* Heading slot: type for whatever Heading is dropped in */
.fb-heading {
  --slot-family: var(--fb-h-family), Georgia, serif;
  --slot-size:   var(--fb-h-size);
  --slot-weight: var(--fb-h-weight);
  --slot-lh:     var(--fb-h-lh);
  --slot-color:  var(--fb-navy);
}

.fb-description,
.fb-form {
  min-width: 0;
}

/* Media: 490px square, image covers it */
.fb-media {
  flex: 0 1 var(--fb-media-w);
  aspect-ratio: 1 / 1;
  min-width: 0;
  overflow: hidden;
}

.fb-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Media slot (video, embed, Lottie …) fills the square */
.fb-media ::slotted(*) {
  display: block;
  width: 100%;
  height: 100%;
}

/* No media: the text column takes the card */
.fb-no-media .fb-content {
  flex-basis: 100%;
  max-width: var(--fb-text-w);
}

/* ==========================================================================
   Scroll-in animation (classes from shared/reveal.ts; none set when
   "Animate on scroll" is off or the visitor prefers reduced motion)
   ========================================================================== */

.fb-section.is-hidden .fb-card {
  opacity: 0;
  transform: translateY(2rem);
}

.fb-section.is-shown .fb-card {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.8s ease,
    transform 0.9s var(--fb-reveal-ease);
}

/* Heading, description, form rise in after the card */
.fb-section.is-hidden .fb-anim {
  opacity: 0;
  transform: translateY(var(--fb-reveal-shift));
}

.fb-section.is-shown .fb-anim {
  --_d: calc(250ms + var(--i, 0) * 110ms);
  opacity: 1;
  transform: none;
  transition:
    opacity var(--fb-reveal-time) ease var(--_d),
    transform var(--fb-reveal-time) var(--fb-reveal-ease) var(--_d);
}

/* Media settles from a slight zoom */
.fb-section.is-hidden .fb-media > * {
  opacity: 0;
  transform: scale(1.08);
}

.fb-section.is-shown .fb-media > * {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.9s ease 0.2s,
    transform 1.4s var(--fb-reveal-ease) 0.2s;
}

@media (prefers-reduced-motion: reduce) {
  .fb-card,
  .fb-anim,
  .fb-media > * {
    transition: none !important;
  }
}

/* ==========================================================================
   Responsive (container widths exclude the section's side padding)
   ========================================================================== */

@container fb (max-width: 1100px) {
  .fb-inner {
    --fb-card-pad: 3rem;          /* 48px */
  }
}

/* Tablet: media moves under the text */
@container fb (max-width: 900px) {
  .fb-card,
  .fb-media--left .fb-card {
    flex-direction: column;
    align-items: stretch;
  }

  .fb-content {
    flex: none;
    max-width: none;
  }

  .fb-media {
    flex: none;
    align-self: center;
    width: 100%;
    max-width: var(--fb-media-w);
  }
}

@container fb (max-width: 767px) {
  .fb-inner {
    --fb-card-pad: 2rem;
    --fb-radius:   1.75rem;
    --fb-h-size:   var(--fb-h-size-m);
    --fb-h-lh:     var(--fb-h-lh-m);
    padding-block: 4rem;
  }

  .fb-section--flush .fb-inner {
    padding-block: 0;
  }
}

@container fb (max-width: 479px) {
  .fb-inner {
    --fb-card-pad: 1.5rem;
    --fb-h-size:   2rem;          /* 32px */
    --fb-h-lh:     125%;
  }
}