/* ==========================================================================
   Programs Overview — hero overrides on top of the shared hero (hero.css).
   Same structure/classes as the home hero; this page swaps the imagery
   (its own sparkle backdrop + sequin-dress model) and replaces the lede
   with the pink check bullets.
   ========================================================================== */

/* Mobile backdrop: baked sparkles+model composite instead of the home texture */
.hero--programs::before {
  background: url('/wp-content/themes/ogle/assets/img/po-hero-mobile.webp') top center / cover no-repeat;
}
.hero--cosmetology::before {
  background: url('/wp-content/themes/ogle/assets/img/pc-hero-mobile.webp') top center / cover no-repeat;
}
.hero--esthetics::before {
  background: url('/wp-content/themes/ogle/assets/img/pe-hero-mobile.webp') top center / cover no-repeat;
}
/* Locations hero: shorter mobile stage (387px), no bullets */
.hero--locations::before {
  height: 387px;
  background: url('/wp-content/themes/ogle/assets/img/pl-hero-mobile.webp') top center / cover no-repeat;
}
.hero--locations .hero__copy {
  padding-top: 207px; /* 3-line title lands at y 207 in the 387px stage */
}

/* Campus hero (per-campus template, Hurst first): taller mobile stage with
   the campus eyebrow above the title */
.hero--campus::before {
  height: 567px;
  background: url('/wp-content/themes/ogle/assets/img/ph-hero-mobile.webp') top center / cover no-repeat;
}
.hero--campus .hero__copy {
  padding-top: 240px; /* eyebrow cap lands at y 245 in the 567px stage */
}

/* Affordability hero: short mobile stage (437px), two bullets */
.hero--affordability::before {
  height: 437px;
  background: url('/wp-content/themes/ogle/assets/img/pa-hero-mobile.webp') top center / cover no-repeat;
}
.hero--affordability .hero__copy {
  padding-top: 229px; /* 2-line title lands at y 229 in the 437px stage */
}

/* Why Ogle School hero: standard 493px stage */
.hero--why::before {
  background: url('/wp-content/themes/ogle/assets/img/pw-hero-mobile.webp') top center / cover no-repeat;
}
.hero--why .hero__copy {
  padding-top: 248px;
}

.hero__eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  line-height: 18.5px;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: var(--c-pink);
}
.hero__eyebrow + .hero__title { margin-top: 12px; }

/* Title cap lands at y 248 in these designs (home: 243) */
.hero--programs .hero__copy,
.hero--cosmetology .hero__copy,
.hero--esthetics .hero__copy {
  padding-top: 248px;
}

/* Check bullets (replace the home lede paragraph) */
.hero__bullets {
  margin-top: 16px;
  margin-bottom: 27px; /* stage bottom pad: bullets end at y 466 in the 493px stage */
  display: grid;
  gap: 11px;
}

.hero__bullet {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 12px;
  line-height: 17.1px;
  color: var(--c-white);
}

.hero__bullet-icon {
  flex-shrink: 0;
  display: inline-flex;
}

/* ================= Desktop (>=900px) ================= */
@media (min-width: 900px) {
  /* The mobile composite must not leak into the desktop ::before backdrop;
     plain black covers the below-the-bg gap at mid widths */
  .hero--programs::before,
  .hero--cosmetology::before,
  .hero--esthetics::before,
  .hero--locations::before,
  .hero--campus::before,
  .hero--affordability::before,
  .hero--why::before {
    height: 100%;
    background: var(--c-black);
  }

  .hero__eyebrow {
    font-size: 16px;
    line-height: 22.8px;
    letter-spacing: 3.2px;
  }
  .hero__eyebrow + .hero__title { margin-top: 24px; }

  /* Sparkle field + bokeh burst (COLOR_DODGE pre-baked, no model) — the
     burst group is identical across the programs-family heroes */
  .hero--programs .hero__inner,
  .hero--cosmetology .hero__inner,
  .hero--esthetics .hero__inner,
  .hero--locations .hero__inner,
  .hero--campus .hero__inner,
  .hero--affordability .hero__inner,
  .hero--why .hero__inner {
    background: url('/wp-content/themes/ogle/assets/img/po-hero-bg.webp') top center / 100% auto no-repeat;
  }

  .hero--programs .hero__copy,
  .hero--cosmetology .hero__copy,
  .hero--esthetics .hero__copy,
  .hero--locations .hero__copy,
  .hero--campus .hero__copy,
  .hero--affordability .hero__copy,
  .hero--why .hero__copy { padding-top: 0; }

  /* Model geometry (programs overview: 543x685 at 486,80; design clips 73px
     at the hero bottom — proportional clip keeps it flush with the scaled
     bg edge) */
  .hero--programs .hero__model,
  .hero--campus .hero__model {
    left: calc(486 * var(--s));
    top: calc(80 * var(--s));
    width: calc(543 * var(--s));
    clip-path: inset(0 0 10.66% 0);
  }

  /* Cosmetology model: the finaid-model source, design STRETCHes it into
     558x639 at 521,126 (design squashes the portrait; height is explicit) */
  .hero--cosmetology .hero__model {
    left: calc(521 * var(--s));
    top: calc(126 * var(--s));
    width: calc(558 * var(--s));
    height: calc(639 * var(--s));
    clip-path: inset(0 0 11.42% 0); /* bottom 73px clipped at the 692 edge */
  }

  /* Esthetics model: 298x692 at 623,103 (asset pre-cropped to the FILL
     aspect; bottom 103px clipped at the 692 edge) */
  .hero--esthetics .hero__model {
    left: calc(623 * var(--s));
    top: calc(103 * var(--s));
    width: calc(298 * var(--s));
    height: calc(692 * var(--s));
    object-fit: cover;
    clip-path: inset(0 0 14.88% 0);
  }

  /* Locations model: 552x622 at 447,149 (bottom 79px clipped at the 692 edge) */
  .hero--locations .hero__model {
    left: calc(447 * var(--s));
    top: calc(149 * var(--s));
    width: calc(552 * var(--s));
    height: calc(622 * var(--s));
    object-fit: cover;
    clip-path: inset(0 0 12.7% 0);
  }

  /* Affordability model: 438x665 at 504,143 (bottom 116px clipped) */
  .hero--affordability .hero__model {
    left: calc(504 * var(--s));
    top: calc(143 * var(--s));
    width: calc(438 * var(--s));
    height: calc(665 * var(--s));
    object-fit: cover;
    clip-path: inset(0 0 17.44% 0);
  }

  /* Why model: 596x630 at 420,117 (bottom 55px clipped); tighter bullet gap */
  .hero--why .hero__model {
    left: calc(420 * var(--s));
    top: calc(117 * var(--s));
    width: calc(596 * var(--s));
    height: calc(630 * var(--s));
    object-fit: cover;
    clip-path: inset(0 0 8.73% 0);
  }
  .hero--why .hero__bullets { gap: 18px; }

  .hero__bullets {
    margin-top: 28px;
    margin-bottom: 0;
    gap: 22px;
  }

  .hero__bullet {
    max-width: 232px; /* 26px icon + 10px gap + 196px text: designed 2-line wrap */
    font-size: 16px;
    line-height: 22.8px;
  }
}