/* ============================================================
   CFTP Oshawa — Inner pages
   ============================================================ */

/* ---------- Page hero ---------- */
.page-hero { position: relative; background: var(--ink); color: #fff; overflow: hidden; }
.page-hero--tint { background: var(--ink); }
.page-hero__media { position: absolute; inset: 0; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }
.page-hero__veil { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,12,16,0.9) 0%, rgba(8,12,16,0.66) 60%, rgba(8,12,16,0.4) 100%); }
.page-hero__inner { position: relative; padding: clamp(3.5rem, 2rem + 5vw, 6.5rem) 0 clamp(2.5rem, 1.5rem + 3vw, 4rem); max-width: 720px; }
.page-hero .eyebrow { color: #7fd0ff; }
.page-hero .eyebrow::before { background: var(--blue); }
.page-hero h1 { color: #fff; }
.page-hero__sub { color: #D8E0E6; font-size: 1.15rem; max-width: 34em; }
/* ---------- Breadcrumb ---------- */
.crumbs { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; font-size: 0.82rem; color: var(--muted); margin-bottom: 1rem; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.crumbs .sep { color: var(--line); }

/* ---------- Program detail ---------- */
.prog-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.9rem; margin: 2rem 0; }
.prog-fact { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 1.1rem 1.25rem; }
.prog-fact .k { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.3rem; }
.prog-fact .v { font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; color: var(--ink); }

/* ---------- Feature rows (program pages) ---------- */
.feature-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 1rem + 2vw, 3rem); align-items: center; padding-block: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.feature-row:nth-child(even) { direction: rtl; }
.feature-row:nth-child(even) > * { direction: ltr; }
.feature-row img { border-radius: var(--r-lg); width: 100%; object-fit: cover; }
.feature-row h3 { font-size: 1.6rem; }
.feature-row p { color: var(--slate); }
@media (max-width: 900px) {
  .feature-row, .feature-row:nth-child(even) { grid-template-columns: 1fr; direction: ltr; }
  .feature-row:nth-child(even) > * { direction: ltr; }
}

/* ---------- Stat band (about) ---------- */
.stat-band { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1.5rem; text-align: center; }
.stat-band .num { font-family: var(--font-display); font-weight: 900; font-size: clamp(2.2rem, 1.4rem + 3vw, 3.5rem); color: var(--red); line-height: 1; }
.stat-band .lbl { font-size: 0.9rem; color: var(--slate); margin-top: 0.4rem; }

/* ---------- Success state (booking) ---------- */
.success-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.success-card .tick { width: 56px; height: 56px; border-radius: 50%; background: var(--blue-soft); color: var(--blue-dark); display: grid; place-items: center; font-size: 1.6rem; margin-bottom: 1rem; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(2rem, 2rem + 3vw, 4rem); align-items: start; }
.contact-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.6rem; margin-bottom: 1rem; }
.contact-card h4 { margin-bottom: 0.6rem; }
.contact-card p { margin: 0; color: var(--slate); }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

/* ---------- "Needs confirmation" flag (dev note, hidden on live) ---------- */
.confirm-note {
  display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.76rem; font-weight: 600;
  color: #8A6D1A; background: #FBF3D5; border: 1px solid #EAD9A0; padding: 0.3rem 0.6rem; border-radius: var(--r-sm);
}