/* css/pages.css
   Layout that belongs to one page or one section of a page. */

/* ---------- Hero (home) ---------- */
.hero { background: radial-gradient(circle at 1px 1px, rgba(184, 224, 176, 0.22) 1.4px, transparent 1.6px) 0 0 / 16px 16px, linear-gradient(135deg, var(--navy-900), var(--navy-700)); color: #fff; padding-block: clamp(40px, 7vw, 88px); margin-inline: calc(-1 * max(var(--gutter), env(safe-area-inset-left, 0px))); padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px)); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.hero h1 { color: #fff; }
.hero .lede { color: #d3def7; margin-top: 18px; }
.hero-tag { display: flex; justify-content: center; }
@media (max-width: 860px) { .hero .wrap { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Page title band (inner pages) ---------- */
.page-title { background: var(--bg-soft); border-bottom: 1px solid var(--line); padding-block: 40px; margin-inline: calc(-1 * max(var(--gutter), env(safe-area-inset-left, 0px))); padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px)); }
.page-title .lede { margin: 12px 0 0; }

/* ---------- Home sections ---------- */
.mini-courses { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.mini-courses li { border-top: 3px solid var(--gold-500); padding-top: 12px; display: grid; gap: 4px; }
.mini-courses span { color: var(--muted); font-size: 0.95rem; }
.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: 20px; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; }
.steps li::before { content: counter(step); font-family: var(--font-display); font-weight: 700; width: 44px; height: 44px; border-radius: 50%; background: var(--navy-700); color: #fff; display: grid; place-items: center; }
.steps b { display: block; }
.steps span { color: var(--muted); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
@media (max-width: 820px) { .split { grid-template-columns: minmax(0, 1fr); } }
.standards { background: var(--gold-100); border-inline-start: 5px solid var(--gold-500); padding: 20px 24px; border-radius: var(--radius); }
.standards p { margin: 0 0 6px; }
.six { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; }
.six div { border-top: 2px solid var(--navy-700); padding-block: 18px 24px; }
.six h3 { margin-bottom: 8px; }
.six p { color: var(--muted); margin: 0; }
@media (max-width: 820px) { .six { grid-template-columns: minmax(0, 1fr); } }
.cta-band { background: var(--navy-700); color: #fff; margin-inline: calc(-1 * max(var(--gutter), env(safe-area-inset-left, 0px))); padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px)); }
.cta-band h2 { color: #fff; }
.cta-band p { color: #d3def7; }

/* ---------- Course page ---------- */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin: 0 0 40px; }
.facts div { border-top: 3px solid var(--navy-700); padding-top: 10px; }
.facts dt { color: var(--muted); font-size: 0.9rem; }
.facts dd { margin: 0; font-weight: 700; font-size: 1.15rem; }
.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
@media (max-width: 820px) { .two-col { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Certificates page ---------- */
.sample-frame { border: 2px dashed var(--gold-500); border-radius: var(--radius); background: var(--gold-100); min-height: 240px; display: grid; place-items: center; padding: 24px; text-align: center; }

/* ---------- Contact page ---------- */
.contact-list { display: grid; gap: 18px; margin: 0; }
.contact-list dt { color: var(--muted); font-size: 0.9rem; }
.contact-list dd { margin: 0; font-weight: 600; }