.wp-block-formasuisse-hero-light {
  padding: clamp(56px, 9vw, 128px) 0 clamp(48px, 7vw, 88px);
  position: relative;
  background: var(--color-paper, #ffffff);
}

/* Compact "index hero" — the design (blog-index.html `.index-hero`) uses a
   shorter hero than the shared `.hero-light`: a smaller top and a much smaller
   bottom, so the filter bar / article list sit closer beneath it. Opt in per
   page with the `index-hero` block class. */
.wp-block-formasuisse-hero-light.index-hero {
  padding: clamp(48px, 7vw, 88px) 0 clamp(24px, 4vw, 40px);
}

.wp-block-formasuisse-hero-light .eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary-light, #1c3b69);
  margin-bottom: 18px;
}

.wp-block-formasuisse-hero-light h1 {
  font-size: var(--hero-h1, clamp(2.4rem, 5.5vw, 4rem));
  margin: 0 0 24px;
  max-width: 18ch;
}

.wp-block-formasuisse-hero-light .lead {
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.55;
  color: var(--color-text-sub);
  text-wrap: pretty;
  max-width: 56ch;
}

.wp-block-formasuisse-hero-light .hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

/* Button base (satellite system) — scoped to the block. */
.wp-block-formasuisse-hero-light .btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  font: 600 0.95rem/1 var(--font-body);
  border-radius: var(--radius-sm, 3px);
  cursor: pointer;
  border: 2px solid transparent;
  text-decoration: none;
  transition:
    background 150ms ease-out,
    color 150ms ease-out,
    border-color 150ms ease-out;
}

.wp-block-formasuisse-hero-light .btn-primary {
  background: var(--color-primary);
  color: #fff;
}

.wp-block-formasuisse-hero-light .btn-primary:hover {
  background: var(--color-primary-light, #1c3b69);
  color: #fff;
}

.wp-block-formasuisse-hero-light .btn-ghost {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.wp-block-formasuisse-hero-light .btn-ghost:hover {
  background: var(--color-primary);
  color: #fff;
}

/* With-photo variant — copy + framed inset photo (4:5). */
.wp-block-formasuisse-hero-light.with-photo .hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}

.wp-block-formasuisse-hero-light.with-photo .hero-photo {
  aspect-ratio: 4 / 5;
  background: var(--color-paper-alt, #f6f7f8) center / cover no-repeat;
  border-radius: 2px;
}

@media (max-width: 820px) {
  .wp-block-formasuisse-hero-light.with-photo .hero-inner {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1199px) {
  .wp-block-formasuisse-hero-light .wrapper {
    padding: 0 clamp(20px, 4vw, 56px);
  }
}

/* With-aside variant — copy column + aside slot (stat-row on the catalogue).
   Ported from the design system's catalogue hero (site/category.html .cat-hero). */
.wp-block-formasuisse-hero-light.with-aside .hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: end;
}

/* In the aside slot the stat-row sheds its standalone band chrome (vertical
   padding, wrapper gutter, top/bottom rules, per-stat cells) and becomes the
   hero's compact left-ruled column. */
.wp-block-formasuisse-hero-light .hero-aside .wp-block-formasuisse-stat-row {
  padding: 0;
}

.wp-block-formasuisse-hero-light .hero-aside .wp-block-formasuisse-stat-row .wrapper {
  padding: 0;
  max-width: none;
  width: auto;
}

.wp-block-formasuisse-hero-light .hero-aside .stat-row {
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding-left: 32px;
  border-left: 1px solid var(--color-rule, #d8dde3);
  border-top: 0;
  border-bottom: 0;
}

.wp-block-formasuisse-hero-light .hero-aside .stat {
  padding: 0;
  border-right: 0;
  border-bottom: 0;
}

.wp-block-formasuisse-hero-light .hero-aside .stat .v {
  font-size: 2rem;
}

.wp-block-formasuisse-hero-light .hero-aside .stat .k {
  margin-top: 6px;
  font-size: 0.82rem;
}

@media (max-width: 820px) {
  .wp-block-formasuisse-hero-light.with-aside .hero-inner {
    grid-template-columns: 1fr;
  }

  .wp-block-formasuisse-hero-light .hero-aside .stat-row {
    padding-left: 0;
    border-left: 0;
    padding-top: 24px;
    border-top: 1px solid var(--color-rule, #d8dde3);
  }
}

/* Home hero — opt-in `home-hero` block class (Accueil, PAGE-RECIPES §1).
   Larger typographic scale + the design's home layout (design system
   site/home.html .home-hero): 1.3fr/1fr columns aligned to the baseline end,
   large CTAs (.btn-large in the design). */
.wp-block-formasuisse-hero-light.home-hero {
  padding: clamp(72px, 11vw, 152px) 0 clamp(56px, 8vw, 96px);
}

.wp-block-formasuisse-hero-light.home-hero h1 {
  font-size: clamp(2.4rem, 6vw, 4.4rem);
  max-width: 16ch;
}

.wp-block-formasuisse-hero-light.home-hero .lead {
  max-width: 50ch;
}

.wp-block-formasuisse-hero-light.home-hero .hero-cta {
  margin-top: 36px;
}

.wp-block-formasuisse-hero-light.home-hero .btn {
  padding: 16px 28px;
  font-size: 1rem;
}

.wp-block-formasuisse-hero-light.home-hero.with-aside .hero-inner {
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 88px);
}

/* Nested fs/hero-aside — the "signals" proof list. Per the design system
   (blocks.html, fs/hero-light note), the host hero restyles the aside: instead
   of the course hero's "En bref" panel (navy glass, green checks) it becomes a
   left-ruled column of signals — red repère + bold line + descriptive sub-line
   (site/home.html .signals). Authored as a list; each item = <strong>ligne
   forte</strong> followed by the sous-ligne text. */

/* The slot div shares the bare .hero-aside class the hero-aside block's own
   stylesheet paints (navy glass panel) — keep the slot chrome-free here. */
.wp-block-formasuisse-hero-light .hero-aside {
  background: none;
  border: 0;
  backdrop-filter: none;
  padding: 0;
  color: inherit;
}
.wp-block-formasuisse-hero-light .hero-aside .wp-block-formasuisse-hero-aside {
  background: none;
  border: 0;
  backdrop-filter: none;
  color: inherit;
  padding: 0 0 0 clamp(20px, 3vw, 36px);
  border-left: 1px solid var(--color-rule, #d8dde3);
}

.wp-block-formasuisse-hero-light .hero-aside .wp-block-formasuisse-hero-aside ul {
  gap: 14px;
}

/* Block layout (not the panel's flex row) so the sub-line wraps under the
   strong line; the repère is absolutely positioned in the padding. */
.wp-block-formasuisse-hero-light .hero-aside .wp-block-formasuisse-hero-aside li {
  display: block;
  position: relative;
  padding-left: 22px;
  color: var(--color-text-sub, #5a5a5a);
  font-size: 0.82rem;
  line-height: 1.5;
}

.wp-block-formasuisse-hero-light .hero-aside .wp-block-formasuisse-hero-aside li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-cta, #ff0000);
}

.wp-block-formasuisse-hero-light .hero-aside .wp-block-formasuisse-hero-aside li strong {
  display: block;
  font-family: var(--font-title);
  font-weight: 600;
  color: var(--color-primary, #062343);
  font-size: 1.05rem;
  margin-bottom: 2px;
}

@media (max-width: 820px) {
  /* Beats the desktop .home-hero.with-aside columns (higher specificity than
     the generic .with-aside collapse above). */
  .wp-block-formasuisse-hero-light.home-hero.with-aside .hero-inner {
    grid-template-columns: 1fr;
  }

  .wp-block-formasuisse-hero-light .hero-aside .wp-block-formasuisse-hero-aside {
    padding: 24px 0 0;
    border-left: 0;
    border-top: 1px solid var(--color-rule, #d8dde3);
  }
}