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

   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.

   Eyebrow, Buttons and Media are Webflow slots. Their content inherits the
   type set on the slot containers here (e.g. the eyebrow style), so a plain
   Text Block looks right, while a block with its own classes (Breadcrumb,
   Button) keeps its own styles.
   ========================================================================== */

:host {
  display: block;

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

  --hero-font-primary:   var(--fonts--primary, "Bitter");
  --hero-font-secondary: var(--fonts--secondary, "Inter");

  --hero-text:      var(--colors--equity-blue, #132c3a);   /* Figma Text-Primary      */
  --hero-slate:     var(--colors--market-slate, #3c6e82);  /* Figma Text-Secondary    */
  --hero-off-white: var(--colors--clear-ledger, #f5f7fb);  /* Figma Neutral-Off-white */
  --hero-white:     var(--colors--white, #ffffff);

  --hero-pad-x:     var(--spacing--horizontal-padding, 5rem); /* 80px */
  --hero-pad-y:     var(--spacing--vertical-padding, 5rem);   /* 80px (Large) */
  --hero-max-width: var(--spacing--max-width, 1440px);

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

  --hero-pad-x-tablet:   2rem;      /* 32px sides at 991px and below (as the other modules) */
  --hero-pad-y-standard: 7.5rem;    /* 120px (Standard) */

  /* Large (home) */
  --hero-min-h:      39.375rem;     /* 630px */
  --hero-col-gap:    3rem;          /* 48px text ↔ image */
  --hero-media-pad:  1.5rem;        /* 24px sides inside it */
  --hero-text-gap:   1.6rem;        /* 25.6px heading → subhead → paragraph */
  --hero-action-gap: 3rem;          /* 48px text → buttons */

  /* Standard */
  --hero-std-text-w:    45.4375rem; /* 727px */
  --hero-std-gap:       1.5rem;     /* 24px between every item */
  --hero-std-media-h:   21.875rem;  /* 350px */
  --hero-std-image-max: 25rem;      /* 400px illustration */

  --hero-h-size:   3.375rem;        /* 54px / 400 / 126% */
  --hero-h-lh:     126%;
  --hero-sub-size: 1.625rem;        /* 26px / 400 / 150% (Bitter) */
  --hero-sub-lh:   150%;
  --hero-p-size:   1.125rem;        /* 18px / 300 / 150% */
  --hero-p-lh:     150%;
  --hero-eyebrow-size: 0.875rem;    /* 14px / 700 / 164%, uppercase */
  --hero-eyebrow-lh:   164%;
  --hero-btn-gap:  0.75rem;         /* 12px between buttons */

  /* Optional gap overrides from the Hero's Gap fields (set inline on .hero;
     unset → the Figma values above):
       --hero-gap-columns  text ↔ image
       --hero-gap-text     between eyebrow / heading / subheading / description
       --hero-gap-buttons  text → buttons */
}

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

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

.hero-bg--off-white   { background: var(--hero-off-white); }
.hero-bg--white       { background: var(--hero-white); }
.hero-bg--transparent { background: transparent; }

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

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

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.hero-text {
  display: flex;
  flex-direction: column;
  align-self: stretch;
}

/* Eyebrow slot: default type for a plain Text Block; a Breadcrumb keeps its own */
.hero-eyebrow {
  color: var(--hero-slate);
  font-family: var(--hero-font-secondary), system-ui, sans-serif;
  font-size: var(--hero-eyebrow-size);
  font-weight: 700;
  line-height: var(--hero-eyebrow-lh);
  text-transform: uppercase;
}

.hero-heading {
  margin: 0;
  color: var(--hero-text);
  font-family: var(--hero-font-primary), Georgia, serif;
  font-size: var(--hero-h-size);
  font-weight: 400;
  line-height: var(--hero-h-lh);
}

.hero-subheading {
  margin: 0;
  color: var(--hero-text);
  font-family: var(--hero-font-primary), Georgia, serif;
  font-size: var(--hero-sub-size);
  font-weight: 400;
  line-height: var(--hero-sub-lh);
  white-space: pre-line;          /* keeps line breaks typed in the field */
}

.hero-description {
  margin: 0;
  color: var(--hero-text);
  font-family: var(--hero-font-secondary), system-ui, sans-serif;
  font-size: var(--hero-p-size);
  font-weight: 300;
  line-height: var(--hero-p-lh);
  white-space: pre-line;
}

/* Buttons slot: whatever is dropped in sits in a row */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--hero-btn-gap);
}

/* Webflow wraps slot content in its own element. display: contents lets the
   buttons inside that wrapper become the row's items. */
.hero-actions ::slotted(*) {
  display: contents;
}

.hero-media {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 0;
}

.hero-image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* ----- Large (home): text left, square image column right ----- */

.hero--large .hero-inner {
  display: grid;
  /* Columns keep the Figma ratio as the container narrows: 684.44 : 547.56px
     (the exact Figma widths at the 1280px container) */
  grid-template-columns: minmax(0, 684.44fr) minmax(0, 547.56fr);
  align-items: center;            /* text and image vertically centred against each other */
  gap: var(--hero-gap-columns, var(--hero-col-gap));
}

.hero--large .hero-inner {
  min-height: var(--hero-min-h);  /* on the inner box (incl. its padding), so the queries below can reset it */
}

.hero--large .hero-content {
  gap: var(--hero-gap-buttons, var(--hero-action-gap));
}

.hero--large .hero-text {
  gap: var(--hero-gap-text, var(--hero-text-gap));
}

.hero--large .hero-media {
  aspect-ratio: 1 / 1;
  padding-inline: var(--hero-media-pad);
}

/* No media: one column, text kept at the Figma column width */
.hero--large.hero--no-media .hero-inner {
  grid-template-columns: minmax(0, 1fr);
}

.hero--large.hero--no-media .hero-content {
  max-width: 42.7775rem;          /* 684.44px */
}

/* ----- Standard: eyebrow, H1, subhead, button; image fills the rest ----- */

.hero--standard .hero-inner {
  display: flex;
  align-items: center;
  column-gap: var(--hero-gap-columns, 0px);   /* Figma: none (727 + 553 = 1280) */
  padding-block: var(--hero-pad-y-standard);
}

.hero--standard .hero-content {
  /* 727 : 553, the Figma split, so the image doesn't collapse on narrower screens */
  flex: 727 1 0;
  max-width: var(--hero-std-text-w);
  gap: var(--hero-gap-buttons, var(--hero-std-gap));
}

.hero--standard .hero-text {
  gap: var(--hero-gap-text, var(--hero-std-gap));
}

.hero--standard .hero-description {
  color: var(--hero-slate);
}

.hero--standard .hero-media {
  flex: 553 1 0;                  /* image area at 1440px: 1280 - 727 = 553px */
  height: var(--hero-std-media-h);
}

.hero--standard .hero-image {
  height: auto;
  width: 100%;
}

/* ----- Responsive ----- */

/* Container widths below exclude the section's side padding (80px, or 32px at
   991px and below). 930px stacks every tablet width (991px − 2 × 32px = 927px)
   and screens up to ~1090px (1090px − 2 × 80px). */

/* Small laptops: slightly smaller heading so the narrower text column holds it */
@container hero (max-width: 1100px) {
  .hero-inner {
    --hero-h-size: 3rem;          /* 48px */
  }
}

/* Tablet: image moves under the text */
@container hero (max-width: 930px) {
  .hero--large .hero-inner {
    min-height: 0;
  }

  .hero--large .hero-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Stacked: no square box, so there's no empty band above/below the image */
  .hero--large .hero-media {
    justify-self: center;
    width: min(100%, 28rem);
    aspect-ratio: auto;
  }

  .hero--standard .hero-inner {
    flex-direction: column;
    align-items: stretch;
    gap: var(--hero-gap-columns, var(--hero-col-gap));
    padding-block: var(--hero-pad-y);
  }

  .hero--standard .hero-content {
    flex: none;
    max-width: var(--hero-std-text-w);
  }

  .hero--standard .hero-media {
    flex: none;
    height: auto;
    max-height: var(--hero-std-media-h);
  }

  .hero--standard .hero-image {
    width: 100%;
    max-height: var(--hero-std-media-h);
  }
}

@container hero (max-width: 767px) {
  .hero-inner,
  .hero--standard .hero-inner {
    padding-block: 4rem;
  }

  /* (set on .hero-inner: a container query can't restyle its own container) */
  .hero-inner {
    --hero-h-size:   2.5rem;      /* 40px */
    --hero-h-lh:     120%;
    --hero-sub-size: 1.375rem;    /* 22px */
    --hero-p-size:   1rem;
    --hero-action-gap: 2rem;
    --hero-text-gap:   1.25rem;
  }
}

@container hero (max-width: 479px) {
  .hero-inner {
    --hero-h-size: 2.125rem;      /* 34px */
  }
}