/* Course-page hero. Ported from the design system
   (formasuisse-design-system/project/site/course-page.css §Hero). */

.hero {
  position: relative;
  color: #fff;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: var(--color-primary);
  padding: clamp(48px, 8vw, 96px) 0;
}
/* The banner photo only applies from the two-column breakpoint up. Below
   800px the hero stacks tall-and-narrow and `cover` zooms a landscape photo
   into an arbitrary face fragment, so phones get the solid-navy funnel look
   instead — and never fetch the image (render.php passes the URL as the
   --fs-hero-banner custom property, only consumed here; the LCP preload in
   helpers.php carries the matching media attribute). */
@media (min-width: 800px) {
  .hero {
    background-image: var(--fs-hero-banner, none);
  }
}
/* Photo-protection gradient — only where the photo renders. */
@media (min-width: 800px) {
  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(
      rgba(6, 35, 67, 0.3) 0%,
      rgba(6, 35, 67, 0.5) 55%,
      rgba(6, 35, 67, 0.72) 100%
    );
  }
}
/* Funnel variant: solid navy promise hero, no photo, no protection gradient. */
.hero[data-variant="funnel"] {
  background-image: none;
}
.hero[data-variant="funnel"]::before {
  display: none;
}

/* Funnel promise column (fs-hero-main.is-funnel). Ported from the design
   system (formasuisse-design-system/project/site/funnel.css §HERO BLOCK,
   .hero-funnel). Layout/columns reuse .hero-grid above; these rules cover
   the funnel-only pieces: eyebrow, accent highlight, and microsignal. */
.fs-hero-main.is-funnel .hero-eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}
.fs-hero-main.is-funnel h1 .hl {
  color: var(--color-cta);
}

.fs-hero-main.is-funnel .hero-microsignal {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.8);
}
.fs-hero-main.is-funnel .hero-microsignal .dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--color-cta);
  border-radius: 50%;
}
.hero .wrapper {
  position: relative;
}
/* The global `.wrapper` only adds side padding above 1200px (where it caps at
   1100px). Below that it's full-width, so add the same gutter the breadcrumb
   uses to keep the hero aligned with the rest of the page. */
@media (max-width: 1199px) {
  .hero .wrapper {
    padding: 0 clamp(20px, 4vw, 56px);
  }
}

.hero .hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
}
@media (min-width: 800px) {
  .hero .hero-grid {
    grid-template-columns: 2fr 1fr;
    gap: 48px;
  }
}

/* Left column. The eyebrow (category) and <h1> (title) are fixed structure;
   everything below is ordinary blocks, styled generically so they read well on
   the navy background — no per-block magic. */
.hero .fs-hero-main > * {
  margin: 0;
}
.hero .fs-hero-main > * + * {
  margin-top: 20px;
}

.hero .eyebrow {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.7);
}
.hero h1 {
  font-family: var(--font-title);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.1;
  font-size: clamp(2rem, 4vw, 3rem);
  color: #fff;
  text-wrap: pretty;
}
/* Photo-contrast text-shadow — only where the photo renders (≥800px, see the
   banner rule above). The funnel hero never has a photo, so it opts out at
   every width — the design system funnel h1 has none. */
@media (min-width: 800px) {
  .hero h1 {
    text-shadow: 1px 2px 3px var(--color-shadow-text);
  }
  .hero[data-variant="funnel"] h1 {
    text-shadow: none;
  }
}

/* Every heading sits on the navy hero, so keep them all white. Without this the
   global `--heading-color` (navy) renders headings navy-on-navy: h1 is whitened
   above and hero-aside whitens only its h3, so any other heading level added as
   an ordinary block in either column would otherwise be invisible. Covers the
   front-end wrapper (.hero) and the editor's navy approximation
   (.fs-course-hero-editor, see editor.js) — this stylesheet loads in the editor
   canvas too, where the wrapper carries a different class. */
.hero :is(h2, h3, h4, h5, h6),
.fs-course-hero-editor :is(h1, h2, h3, h4, h5, h6) {
  color: #fff;
}

/* Generic content (paragraphs, lists, links) in the left column. Excludes the
   eyebrow and the funnel eyebrow/microsignal, which have their own treatment
   above. */
.hero .fs-hero-main p:not(.eyebrow):not(.hero-eyebrow):not(.hero-microsignal),
.hero .fs-hero-main ul:not(.eyebrow),
.hero .fs-hero-main ol {
  font-size: 1.15rem;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.92);
  max-width: 640px;
  text-wrap: pretty;
}
.hero .fs-hero-main a {
  color: #fff;
}

/* Print: the photo/navy background is dropped by the browser, leaving white
   text on white. Recolour the whole hero to navy and remove the (now pointless)
   protection gradient and text shadow. */
@media print {
  .hero {
    background: none;
  }
  .hero::before {
    display: none;
  }
  .hero,
  .hero * {
    color: var(--color-primary, #062343) !important;
    text-shadow: none !important;
  }
  /* Stack the layout so the "En bref" aside sits below the title instead of in a
     right-hand column (see hero-aside/style.css for its print box). */
  .hero .hero-grid {
    grid-template-columns: 1fr;
  }
  /* Drop the ≤1199px side gutter (paper width triggers it) so the hero runs edge
     to edge — the @page margin already frames the page. */
  .hero .wrapper {
    padding-left: 0;
    padding-right: 0;
  }
}