/*
 * home.css — homepage-only visual system.
 *
 * All homepage-specific tokens are scoped to `.ph-page` (never `:root`) so
 * they can never leak into, or collide with, design/tokens.css (the frozen
 * lesson-chrome system) or site.css (the topic/chapter article theme).
 * Structural tokens that already exist centrally (radius, shadow —
 * design/tokens.css, loaded before this file) are reused directly instead of
 * being re-declared here.
 *
 * Colour palette below is the CLIENT-APPROVED source of truth. Do not
 * substitute or add hues outside it (see the build report for the mapping).
 */

.ph-page {
  /* ---- approved colour palette — do not substitute ---- */
  --bg: #124F40;
  --bg-deep: #0A3B31;
  --surface: #185E4C;
  --surface-hover: #21705A;
  --border: #397565;
  --mint: #A9E8CF;
  --mint-light: #C8F5E2;
  --cream: #FFF6D8;
  --text: #F7FAF8;
  --text-secondary: #C5D8D1;
  --text-muted: #91AFA4;

  /* ---- shared responsive container ---- */
  --page-max: 1240px;
  --page-pad: clamp(24px, 3vw, 48px);

  /* ---- typography ---- */
  --font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  --text-hero: clamp(2.125rem, 1.2rem + 3.4vw, 3.75rem);       /* 34px -> 60px */
  --text-section: clamp(1.375rem, 1rem + 1.6vw, 2rem);          /* 22px -> 32px */
  --text-card-title: clamp(1rem, 0.86rem + 0.6vw, 1.25rem);     /* 16px -> 20px */
  --text-body: clamp(0.9rem, 0.8rem + 0.42vw, 1.125rem);        /* 14.4px -> 18px */
  --text-button: clamp(0.875rem, 0.8rem + 0.2vw, 1rem);         /* 14px -> 16px */
  --text-eyebrow: clamp(0.6875rem, 0.6rem + 0.15vw, 0.8125rem); /* 11px -> 13px */
  --text-meta: clamp(0.75rem, 0.68rem + 0.2vw, 0.875rem);       /* 12px -> 14px */

  /* ---- restrained secondary accents (how-it-works icon tiles only) ----
     Not part of the core approved palette — used sparingly (icon tile,
     icon colour, thin top accent line) so card surfaces stay emerald. */
  --accent-cyan: #7FD8E8;
  --accent-violet: #B9A8F0;
  --accent-gold: #F5C879;

  position: relative;
  overflow-x: hidden;
  background:
    radial-gradient(1100px 650px at 85% -8%, rgba(200, 245, 226, 0.30), transparent 60%),
    radial-gradient(900px 800px at 102% 6%, var(--surface-hover) 0%, transparent 62%),
    radial-gradient(650px 480px at -4% 2%, rgba(169, 232, 207, 0.12), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg) 42%, var(--bg-deep) 100%);
  color: var(--text);
  font-family: var(--font-family);
}

.ph-page * { box-sizing: border-box; }
.ph-icon { width: 1em; height: 1em; color: inherit; flex-shrink: 0; }

/* site.css styles the chapter/article #main (max-width: 46rem, for reading
   line-length) — this page shares the id, so neutralise that rule here.
   (.ph-page #main) beats the bare (#main) from site.css on specificity. */
.ph-page #main { max-width: none; margin: 0; padding: 0; }

/* shared responsive container — header, hero, sections and footer all align
   to this one grid, per the approved layout system */
.ph-container {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--page-pad);
}

/* ================================================================ header */
.ph-header { padding-top: 20px; }
.ph-header-row {
  display: flex;
  align-items: center;
  gap: 20px;
}
.ph-brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--text); }
.ph-brand-mark {
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: 9px;
  background: rgba(169, 232, 207, 0.18);
  color: var(--mint);
}
.ph-brand-mark .ph-icon { width: 18px; height: 18px; }
.ph-brand-name { font-weight: 800; font-size: 1.05rem; letter-spacing: -0.01em; }

.ph-nav { display: flex; align-items: center; gap: 28px; margin: 0 auto; }
.ph-nav a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--text-button);
  font-weight: 600;
}
.ph-nav a:hover { color: var(--text); }

.ph-header-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.ph-header-cta { display: inline-flex; }
.ph-mobile-nav { display: none; position: relative; }
.ph-mobile-nav summary {
  list-style: none;
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: var(--radius-button, 10px);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}
.ph-mobile-nav summary::-webkit-details-marker { display: none; }
.ph-mobile-nav[open] summary { background: var(--surface-hover); }
.ph-mobile-nav nav {
  position: absolute;
  right: 0; top: calc(100% + 8px);
  display: flex; flex-direction: column; gap: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card, 14px);
  padding: 10px;
  min-width: 200px;
  box-shadow: 0 16px 40px rgba(4, 20, 14, 0.4);
  z-index: 20;
}
.ph-mobile-nav nav a {
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--text-button);
  padding: 10px 12px;
  border-radius: 8px;
}
.ph-mobile-nav nav a:hover { background: var(--surface-hover); color: var(--text); }
.ph-mobile-nav nav .ph-btn { margin-top: 4px; justify-content: center; }

/* ================================================================ buttons */
.ph-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-family);
  font-weight: 700;
  font-size: var(--text-button);
  text-decoration: none;
  padding: 11px 20px;
  border-radius: var(--radius-button, 12px);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}
.ph-btn .ph-icon { width: 16px; height: 16px; }
.ph-btn-primary { background: linear-gradient(180deg, var(--mint-light), var(--mint)); color: #06281d; }
.ph-btn-primary:hover { filter: brightness(1.05); }
.ph-btn-ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--text);
}
.ph-btn-ghost:hover { background: var(--surface-hover); }
.ph-btn-lg { padding: 14px 26px; font-size: calc(var(--text-button) + 1px); }

/* ================================================================== hero */
.ph-hero {
  padding-top: clamp(28px, 4.5vh, 56px);
  padding-bottom: clamp(32px, 4vh, 56px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 4vw, 56px);
  align-items: center;
}
.ph-eyebrow {
  margin: 0 0 10px;
  font-size: var(--text-eyebrow);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mint-light);
}
.ph-hero h1 {
  margin: 0 0 16px;
  font-size: var(--text-hero);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--text);
}
.ph-mint-text { color: var(--mint); }
/* Forces "See it happen." onto its own line on mobile without affecting the
   desktop layout, which already wraps correctly from width alone. */
.ph-hero-break { display: none; }
.ph-hero-sub {
  margin: 0 0 26px;
  max-width: 34rem;
  font-size: var(--text-body);
  font-weight: 500;
  line-height: 1.6;
  color: var(--text-secondary);
}
.ph-hero-ctas { margin-bottom: 28px; }
.ph-trust { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 20px 26px; }
.ph-trust li { display: flex; align-items: center; gap: 8px; font-size: var(--text-meta); font-weight: 500; color: var(--text-secondary); }
.ph-trust .ph-icon { color: var(--mint); width: 16px; height: 16px; }

.ph-hero-visual { position: relative; padding-bottom: 88px; }
.ph-prism { display: block; width: 100%; height: auto; filter: drop-shadow(0 20px 40px rgba(3, 20, 14, 0.45)); }
.ph-launcher {
  position: absolute;
  left: 2%; right: 2%; bottom: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card, 16px);
  padding: 16px 18px;
  text-decoration: none;
  color: var(--text);
  box-shadow: 0 18px 40px rgba(3, 20, 14, 0.4);
}
.ph-launcher:hover { background: var(--surface-hover); }
.ph-launcher-play {
  display: grid; place-items: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--mint);
  color: #06281d;
  flex-shrink: 0;
}
.ph-launcher-play .ph-icon { width: 18px; height: 18px; }
.ph-launcher-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.ph-launcher-title { font-weight: 700; font-size: var(--text-card-title); line-height: 1.25; }
.ph-launcher-meta { font-size: var(--text-meta); color: var(--text-muted); }
.ph-launcher-go { color: var(--mint); flex-shrink: 0; }

/* ================================================================ sections */
.ph-section { padding-top: clamp(32px, 5vh, 64px); padding-bottom: clamp(32px, 5vh, 64px); }
.ph-section h2 {
  margin: 0 0 8px;
  text-align: center;
  font-size: var(--text-section);
  font-weight: 700;
  color: var(--text);
}
.ph-section-intro {
  margin: 0 0 32px;
  text-align: center;
  font-size: var(--text-body);
  color: var(--text-secondary);
}

/* ---- choose your class: horizontal, balanced cards ---- */
.ph-class-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2vw, 24px); }
.ph-class-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px 26px;
  border-radius: var(--radius-card, 16px);
  border: 1px solid var(--border);
  background: var(--surface);
  text-decoration: none;
  color: inherit;
}
.ph-class-icon {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(169, 232, 207, 0.16);
  color: var(--mint);
  flex-shrink: 0;
}
.ph-class-icon .ph-icon { width: 22px; height: 22px; }
.ph-class-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ph-class-name { font-size: var(--text-card-title); font-weight: 700; color: var(--text); white-space: nowrap; }
.ph-class-note { font-size: var(--text-meta); color: var(--text-secondary); white-space: nowrap; }
.ph-class-status {
  align-self: flex-start;
  font-size: var(--text-meta);
  font-weight: 600;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.06);
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.ph-class-card.is-soon { opacity: 0.82; }
.ph-class-card.is-soon .ph-class-icon { background: rgba(255, 255, 255, 0.05); color: var(--text-muted); }
.ph-class-card.is-live { border-color: var(--mint); background: linear-gradient(180deg, var(--surface-hover), var(--surface)); }
.ph-class-card.is-live:hover { border-color: var(--mint-light); }
.ph-class-go { margin-left: auto; color: var(--mint); flex-shrink: 0; }
.ph-class-go .ph-icon { width: 18px; height: 18px; }

/* ---- how learning works: full desktop width, calm and broad ---- */
.ph-how-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 2vw, 24px); }
.ph-step {
  position: relative;
  overflow: hidden;
  min-width: 0;
  padding: 26px 22px 24px;
  border-radius: var(--radius-card, 16px);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 12px 28px rgba(3, 20, 14, 0.22);
  text-align: left;
}
/* thin top accent line — the only full-width use of the step's accent hue */
.ph-step::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--mint);
  opacity: 0.85;
}
.ph-step.is-cyan::before { background: var(--accent-cyan); }
.ph-step.is-violet::before { background: var(--accent-violet); }
.ph-step.is-gold::before { background: var(--accent-gold); }
.ph-step-icon {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 11px;
  margin-bottom: 16px;
  background: rgba(169, 232, 207, 0.16);
  color: var(--mint);
}
.ph-step-icon .ph-icon { width: 20px; height: 20px; }
.ph-step.is-cyan .ph-step-icon { background: rgba(127, 216, 232, 0.16); color: var(--accent-cyan); }
.ph-step.is-violet .ph-step-icon { background: rgba(185, 168, 240, 0.16); color: var(--accent-violet); }
.ph-step.is-gold .ph-step-icon { background: rgba(245, 200, 121, 0.16); color: var(--accent-gold); }
.ph-step-label { margin: 0 0 8px; font-size: var(--text-card-title); font-weight: 700; color: var(--text); }
.ph-step-text { margin: 0; font-size: var(--text-body); line-height: 1.55; color: var(--text-secondary); }

/* ---- featured chapter — broad horizontal banner ---- */
.ph-featured {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 48px);
  padding: clamp(28px, 3.5vw, 40px) clamp(28px, 4vw, 48px);
  border-radius: var(--radius-card, 18px);
  border: 1px solid var(--border);
  background:
    radial-gradient(700px 300px at 100% 0%, rgba(200, 245, 226, 0.16), transparent 70%),
    linear-gradient(135deg, var(--surface-hover), var(--surface));
  text-decoration: none;
  color: inherit;
}
.ph-featured:hover { border-color: var(--mint); }
.ph-featured-text { flex: 1 1 auto; min-width: 0; }
.ph-eyebrow-on-surface { margin-bottom: 8px; }
.ph-featured-class { margin: 0 0 4px; font-size: var(--text-meta); font-weight: 600; color: var(--text-secondary); }
.ph-featured-title { margin: 0 0 10px; font-size: var(--text-section); font-weight: 700; color: var(--text); }
.ph-featured-blurb { margin: 0; max-width: 46rem; font-size: var(--text-body); line-height: 1.6; color: var(--text-secondary); }
.ph-featured .ph-btn-ghost { flex-shrink: 0; border-color: var(--mint); color: var(--mint); }

/* ================================================================ footer */
.ph-footer {
  border-top: 1px solid var(--border);
  background: linear-gradient(180deg, var(--bg), var(--bg-deep));
}
.ph-footer-inner { padding-top: clamp(36px, 5vh, 56px); padding-bottom: clamp(24px, 3vh, 32px); }
.ph-footer-main { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.ph-footer-brand { flex: 1 1 260px; max-width: 22rem; }
.ph-footer-brand .ph-brand { margin-bottom: 12px; }
.ph-footer-tagline { margin: 0; font-size: var(--text-body); color: var(--text-secondary); line-height: 1.55; }
.ph-footer-col { display: flex; flex-direction: column; gap: 12px; min-width: 9rem; }
.ph-footer-col h3 {
  margin: 0 0 2px;
  font-size: var(--text-eyebrow);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.ph-footer-col a, .ph-footer-col span {
  font-size: var(--text-button);
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
}
.ph-footer-col a:hover { color: var(--text); }
.ph-footer-col span { color: var(--text-muted); }
.ph-footer-divider { border: none; border-top: 1px solid var(--border); margin: 28px 0 18px; }
.ph-footer-meta { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ph-footer-meta p { margin: 0; font-size: var(--text-meta); color: var(--text-muted); }

/* ================================================================ responsive */
/* Mobile header: logo only, for now. The hamburger menu (nav links + CTA)
   is intentionally hidden rather than shown — with only 3 same-page anchors
   and one CTA that already live prominently in the page body, a mobile menu
   isn't earning its keep yet. Revisit once there are enough destinations to
   justify real mobile navigation. */
@media (max-width: 900px) {
  .ph-nav, .ph-header-cta, .ph-mobile-nav { display: none; }
}

@media (max-width: 760px) {
  .ph-page { --page-pad: 20px; }
  .ph-hero { grid-template-columns: 1fr; padding-top: 20px; padding-bottom: 28px; }
  .ph-hero-visual { max-width: 26rem; margin: 0 auto; padding-bottom: 78px; }
  .ph-hero-break { display: inline; }
  /* Trust row (Concepts made simple / Interactive & visual / NCERT-aligned)
     costs too much vertical space above the fold on mobile — desktop keeps it. */
  .ph-trust { display: none; }
  .ph-class-grid { grid-template-columns: 1fr; }
  /* Class 10 is the only live class today — show it first on mobile so a
     student doesn't have to scroll past two "Coming soon" cards to reach
     the one usable option. Desktop keeps the curricular 8/9/10 order. */
  .ph-class-card.cls-class-10 { order: -1; }
  .ph-class-card.cls-class-8 { order: 1; }
  .ph-how-steps { grid-template-columns: 1fr; }
  .ph-featured { flex-direction: column; align-items: flex-start; }
  .ph-footer-main { flex-direction: column; gap: 28px; }
  .ph-footer-brand { flex: none; max-width: none; }
  .ph-footer-meta { flex-direction: column; gap: 6px; }
}

@media (max-width: 480px) {
  .ph-header-row { gap: 10px; }
  .ph-hero-ctas .ph-btn-lg { width: 100%; justify-content: center; }
  .ph-launcher { padding: 12px 14px; gap: 10px; }
  .ph-launcher-play { width: 36px; height: 36px; }
}