/*
 * Shared hero styling for the five top-level sections and their subpages.
 *
 * Two hero designs coexist:
 *
 *  (a) `.aik-sched-hero` — a custom HTML hero (gradient navy with diagonal
 *      pattern + radial highlights + centered white card) used on each
 *      section TOP page (about, schedule, apply, result, exam). The HTML
 *      block lives in the source file for each top page; the schedule
 *      page also carries an inline copy of the rules below.
 *
 *  (b) `<section ... > <.c-container> <.c-h1>` + a banner image, used on
 *      SUBPAGES (apply/examinee, exam/grade_1, …). The CSS variable
 *      `--hero-img` (injected per-route by generate.ts) supplies the image.
 *
 * Pages that already carry `.aik-sched-hero` suppress (b) — otherwise the
 * top pages would render two heroes stacked.
 */

/* (a) aik-sched-hero — port of the inline CSS from schedule/index.html so
 * that the four other section tops can share it without duplicating styles. */
.aik-sched-hero {
  position: relative;
  overflow: hidden;
  padding: 80px 20px;
  background: #091d4e;
  display: flex;
  align-items: center;
  justify-content: center;
}
.aik-sched-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(45deg,  rgba(255,255,255,.03) 0px, rgba(255,255,255,.03) 40px, transparent 40px, transparent 80px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.02) 0px, rgba(255,255,255,.02) 60px, transparent 60px, transparent 120px);
  pointer-events: none;
}
.aik-sched-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(255,255,255,.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 30%, rgba(255,255,255,.06) 0%, transparent 40%),
    radial-gradient(ellipse at 50% 80%, rgba(0,0,0,.10)       0%, transparent 50%);
  pointer-events: none;
}
.aik-sched-hero__card {
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  padding: 48px 80px;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}
.aik-sched-hero__title {
  font-size: 3.2rem;
  font-weight: 900;
  color: #222;
  margin: 0 0 8px;
  letter-spacing: 0.05em;
}
.aik-sched-hero__sub {
  font-size: 1.4rem;
  color: #888;
  margin: 0;
  letter-spacing: 0.1em;
}
@media (max-width: 768px) {
  .aik-sched-hero { padding: 56px 16px; }
  .aik-sched-hero__card { padding: 32px 24px; }
  .aik-sched-hero__title { font-size: 2.4rem; }
}

/* (a-2) White-background hero variant — used on pages that add the
 * `.aik-sched-hero--white` modifier (e.g. apply). Overrides the navy
 * gradient with a clean white background matching the about page style. */
.aik-sched-hero--white {
  background: #fff !important;
}
.aik-sched-hero--white::before,
.aik-sched-hero--white::after {
  display: none !important;
}
.aik-sched-hero--white .aik-sched-hero__card {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.aik-sched-hero--white .aik-sched-hero__title {
  color: #1b3b8b !important;
}

/* When a page carries `.aik-sched-hero`, the existing in-content c-h1
 * (carried over from the original markup) would otherwise duplicate the
 * heading — visually hide it but keep it in the DOM for SEO/a11y. */
main:has(.aik-sched-hero) section > .c-container > .c-h1 {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ---------------------------------------------------------------- */
/* (b) Banner-image hero — for subpages that don't have aik-sched-hero. */
/* The :not(:has(.aik-sched-hero)) guard ensures top pages (which now
 * carry aik-sched-hero) only render hero (a), not both. */

main:not(:has(.aik-sched-hero)) section:has(> .c-container > .c-h1) {
  position: relative;
  padding-top: 0 !important;
  background: #ffffff;
  overflow: hidden;
}

main:not(:has(.aik-sched-hero)) section:has(> .c-container > .c-h1)::before {
  content: "";
  display: block;
  width: 100%;
  aspect-ratio: 1128 / 476;
  background-image: var(--hero-img);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

main:not(:has(.aik-sched-hero)) section:has(> .c-container > .c-h1) > .c-container {
  position: relative;
  z-index: 1;
}

main:not(:has(.aik-sched-hero)) section:has(> .c-container > .c-h1) > .c-container:has(> .c-h1) {
  padding-top: clamp(40px, 5vw, 64px) !important;
}

main:not(:has(.aik-sched-hero)) section:has(> .c-container > .c-h1) > .c-container > .c-h1 {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

main:not(:has(.aik-sched-hero)) section:has(> .c-container > .c-h1) > .c-container > .c-h1 + * {
  margin-top: 0 !important;
}

main:not(:has(.aik-sched-hero)) section:has(> .c-container > .c-h1) > .c-container > .c-panelbtns {
  justify-content: center !important;
  flex-wrap: wrap;
  gap: 12px !important;
}

@media (max-width: 880px) {
  main:not(:has(.aik-sched-hero)) section:has(> .c-container > .c-h1) > .c-container:has(> .c-h1) {
    padding-top: 28px !important;
  }
}