/* ============================================================
   pages.css — page-specific styles + reveal animations
   ============================================================ */

/* -------- Reveal animations -------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  will-change: opacity, transform;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal][data-reveal-delay="1"] { transition-delay: 80ms; }
[data-reveal][data-reveal-delay="2"] { transition-delay: 160ms; }
[data-reveal][data-reveal-delay="3"] { transition-delay: 240ms; }
[data-reveal][data-reveal-delay="4"] { transition-delay: 320ms; }
[data-reveal][data-reveal-delay="5"] { transition-delay: 400ms; }

/* -------- Page header (interior pages) -------- */
.page-header {
  padding-block: var(--sp-9) var(--sp-8);
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--rule);
}
.page-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 90% 0%, rgba(176, 58, 26, 0.16), transparent 55%),
    radial-gradient(ellipse at 0% 100%, rgba(199, 156, 78, 0.08), transparent 50%);
  z-index: 0;
}
.page-header > * { position: relative; z-index: 1; }

.page-header__title {
  font-family: var(--font-display);
  font-size: var(--fs-7);
  line-height: 0.86;
  text-transform: uppercase;
  text-wrap: balance;
}

.page-header__title span { color: var(--brick); }

.page-header__lede {
  font-size: var(--fs-3);
  color: var(--paper);
  max-width: 44rem;
  margin-top: var(--sp-5);
  line-height: 1.5;
}

/* Breadcrumbs */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-0);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-bottom: var(--sp-5);
}
.crumbs li:not(:last-child)::after {
  content: '\002F';
  margin-left: var(--sp-3);
  color: var(--rule-strong);
}
.crumbs a:hover { color: var(--gold); }

/* -------- Home page — feature split block -------- */
.feature-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-7);
  align-items: start;
}
@media (min-width: 980px) {
  .feature-split { grid-template-columns: 1fr 1.15fr; gap: var(--sp-8); }
}
.feature-split__media {
  position: relative;
  aspect-ratio: 4 / 5;
}
.feature-split__caption {
  position: absolute;
  left: var(--sp-4);
  bottom: var(--sp-4);
  background: var(--ink);
  color: var(--bone);
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--font-sub);
  font-size: var(--fs-0);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* -------- Locations block -------- */
.locations {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .locations { grid-template-columns: 1fr 1fr 1fr; } }

.location {
  border: 1px solid var(--rule);
  padding: var(--sp-6);
  background: var(--bg-elevated);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  transition: border-color var(--dur) var(--ease-out);
}
.location:hover { border-color: var(--rule-strong); }
.location__city {
  font-family: var(--font-display);
  font-size: var(--fs-4);
  text-transform: uppercase;
  line-height: 1;
}
.location__addr { color: var(--fg-muted); font-size: var(--fs-1); line-height: 1.5; }
.location__phone {
  font-family: var(--font-mono);
  color: var(--gold);
  letter-spacing: 0.1em;
  font-size: var(--fs-1);
}
.location__chip {
  align-self: flex-start;
  font-family: var(--font-sub);
  font-size: var(--fs-0);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--brick);
  color: var(--brick);
}
.location--here .location__chip { background: var(--brick); color: var(--bone); }

/* -------- Coach hero (coach.html) -------- */
.coach-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-7);
  align-items: start;
}
@media (min-width: 980px) {
  .coach-hero { grid-template-columns: 5fr 7fr; gap: var(--sp-9); }
}
.coach-hero__portrait {
  position: relative;
  aspect-ratio: 4 / 5;
}
.coach-hero__caption {
  margin-top: var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--fs-0);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

.creds {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
  margin-top: var(--sp-6);
}
@media (min-width: 600px) { .creds { grid-template-columns: 1fr 1fr; } }
.cred {
  border-top: 1px solid var(--rule);
  padding-top: var(--sp-4);
}
.cred__year {
  font-family: var(--font-mono);
  font-size: var(--fs-0);
  color: var(--gold);
  letter-spacing: 0.14em;
}
.cred__title {
  font-family: var(--font-display);
  font-size: var(--fs-4);
  text-transform: uppercase;
  line-height: 1;
  margin-top: var(--sp-2);
}
.cred__detail { color: var(--fg-muted); font-size: var(--fs-1); margin-top: var(--sp-2); }

/* -------- Programs page lists -------- */
.program-detail {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: 1fr;
  padding-block: var(--sp-8);
  border-top: 1px solid var(--rule);
}
.program-detail:first-of-type { border-top: 0; padding-top: 0; }
@media (min-width: 880px) {
  .program-detail { grid-template-columns: 4fr 8fr; gap: var(--sp-8); }
}
.program-detail__index {
  font-family: var(--font-mono);
  font-size: var(--fs-0);
  color: var(--gold);
  letter-spacing: 0.14em;
}
.program-detail__title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 1.6rem + 2.2vw, 3.75rem);
  text-transform: uppercase;
  line-height: 0.92;
  margin-top: var(--sp-2);
}
.program-detail__body { color: var(--fg-muted); line-height: 1.65; max-width: var(--measure); }
.program-detail__body p + p { margin-top: var(--sp-4); }

.bullet-list {
  margin-top: var(--sp-5);
  display: grid;
  gap: var(--sp-3);
}
.bullet-list li {
  position: relative;
  padding-left: var(--sp-5);
  color: var(--paper);
  font-size: var(--fs-2);
}
.bullet-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 12px;
  height: 1px;
  background: var(--brick);
}

/* -------- Contact split -------- */
.contact-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-8);
}
@media (min-width: 980px) {
  .contact-split { grid-template-columns: 5fr 7fr; gap: var(--sp-9); }
}
.contact-card {
  background: var(--bg-elevated);
  border: 1px solid var(--rule);
  padding: var(--sp-7);
}
.contact-card h3 {
  font-family: var(--font-display);
  font-size: var(--fs-4);
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: var(--sp-5);
}
.contact-line {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-3) var(--sp-4);
  align-items: baseline;
  padding-block: var(--sp-3);
  border-top: 1px solid var(--rule);
}
.contact-line:first-of-type { border-top: 0; padding-top: 0; }
.contact-line dt {
  font-family: var(--font-sub);
  font-size: var(--fs-0);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.contact-line dd {
  font-family: var(--font-mono);
  color: var(--bone);
  letter-spacing: 0.04em;
  font-size: var(--fs-1);
}

/* Map embed */
.map-frame {
  aspect-ratio: 16 / 10;
  width: 100%;
  border: 0;
  margin-top: var(--sp-5);
  filter: grayscale(0.3) contrast(1.05) brightness(0.9);
}

/* -------- Kids page -------- */
.kids-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
}
@media (min-width: 720px) { .kids-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .kids-grid { grid-template-columns: repeat(3, 1fr); } }

.kid-pillar {
  border: 1px solid var(--rule);
  padding: var(--sp-6);
  background: var(--bg-elevated);
}
.kid-pillar__icon {
  width: 48px;
  height: 48px;
  border: 1.5px solid var(--gold);
  color: var(--gold);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  margin-bottom: var(--sp-4);
}
.kid-pillar h3 {
  font-family: var(--font-display);
  font-size: var(--fs-4);
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: var(--sp-3);
}
.kid-pillar p { color: var(--fg-muted); font-size: var(--fs-2); }

/* -------- 404 -------- */
.notfound {
  min-height: 70vh;
  display: grid;
  place-items: center;
  text-align: center;
}
.notfound__num {
  font-family: var(--font-display);
  font-size: clamp(8rem, 5rem + 16vw, 22rem);
  line-height: 0.85;
  color: var(--brick);
}
.notfound__msg {
  font-family: var(--font-display);
  font-size: var(--fs-5);
  text-transform: uppercase;
  margin-top: var(--sp-5);
}