/*
 * site/science-index.css — Class 10 Science chapter-index page.
 *
 * Adds ONLY what home.css doesn't already provide: the breadcrumb, the
 * compact featured-chapter entry, and the compact chapter list. Palette,
 * Manrope, header, footer, buttons, the .ph-container grid and the
 * .ph-page #main fix are all inherited from home.css via the shared
 * `.ph-page` wrapper class — no tokens are redeclared here.
 *
 * Deliberately lean: no chapter-count/status summary row (reads as product
 * incompleteness, not a student decision) and no long featured-chapter
 * description (that content lives on the chapter page itself, one level
 * deeper) — this page's only job is "which chapter?".
 */

.sci-intro-section { padding-top: clamp(28px, 4.5vh, 56px); padding-bottom: clamp(40px, 6vh, 72px); }

/* ---- breadcrumb (same visual language as /class-10/, declared locally —
   that page's stylesheet is frozen and not shared across pages) ---- */
.sci-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 28px;
  font-size: var(--text-meta);
  font-weight: 500;
  color: var(--text-muted);
}
.sci-breadcrumb a { color: var(--text-muted); text-decoration: none; }
.sci-breadcrumb a:hover { color: var(--text-secondary); }
.sci-breadcrumb [aria-current="page"] { color: var(--text-secondary); font-weight: 600; }
.sci-crumb-sep { color: var(--border); }

/* ---- page intro: eyebrow + question + one-line purpose ---- */
.sci-intro { max-width: 42rem; margin-bottom: clamp(24px, 3.5vh, 36px); }
.sci-intro .ph-eyebrow { margin-bottom: 10px; }
.sci-intro h1 {
  margin: 0 0 12px;
  font-size: clamp(1.75rem, 1.3rem + 2.2vw, 2.75rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text);
}
.sci-intro p { margin: 0; font-size: var(--text-body); font-weight: 500; line-height: 1.6; color: var(--text-secondary); }

/* ---- featured chapter: one compact, single clickable entry — badge,
   number, title, discipline, arrow. No paragraph, no separate button. ---- */
.sci-feature-mini {
  display: flex;
  align-items: center;
  gap: 18px;
  border-radius: var(--radius-card, 16px);
  border: 1px solid var(--mint);
  padding: 18px 20px;
  margin-bottom: clamp(28px, 3.5vh, 40px);
  background:
    radial-gradient(420px 200px at 100% 0%, rgba(200, 245, 226, 0.2), transparent 65%),
    linear-gradient(150deg, var(--surface-hover), var(--surface));
  box-shadow: 0 14px 34px rgba(3, 20, 14, 0.28);
  text-decoration: none;
  color: inherit;
}
.sci-feature-mini:hover { border-color: var(--mint-light); }
.sci-feature-mini-status {
  flex-shrink: 0;
  font-size: var(--text-meta);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--mint);
  background: rgba(169, 232, 207, 0.14);
  padding: 4px 12px;
  border-radius: 999px;
}
.sci-feature-mini-num {
  flex-shrink: 0;
  font-size: var(--text-section);
  font-weight: 700;
  color: var(--mint);
}
.sci-feature-mini-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.sci-feature-mini-title { font-size: var(--text-card-title); font-weight: 700; color: var(--text); }
.sci-feature-mini-meta { font-size: var(--text-meta); color: var(--text-muted); }
.sci-feature-mini-go { flex-shrink: 0; color: var(--mint); }

/* ---- all science chapters: compact curriculum navigation, quiet by design ---- */
.sci-more-heading { margin: 0 0 16px; font-size: var(--text-section); font-weight: 700; color: var(--text); }
.sci-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 32px;
}
.sci-row {
  display: flex;
  align-items: baseline;
  gap: 16px;
  min-width: 0;
  padding: 14px 4px;
  border-bottom: 1px solid var(--border);
}
.sci-row-num {
  flex-shrink: 0;
  width: 1.6rem;
  font-size: var(--text-meta);
  font-weight: 600;
  color: var(--text-muted);
}
.sci-row-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sci-row-title { font-size: var(--text-body); font-weight: 600; color: var(--text); }
.sci-row-meta { font-size: var(--text-meta); color: var(--text-muted); }

.sci-curriculum-note {
  margin: clamp(24px, 3.5vh, 36px) 0 0;
  font-size: var(--text-meta);
  color: var(--text-muted);
  text-align: center;
}

/* ---- mobile: single-column compact list ---- */
@media (max-width: 760px) {
  .sci-feature-mini { padding: 16px; gap: 12px; flex-wrap: wrap; }
  .sci-feature-mini-status { order: -1; flex-basis: 100%; }
  .sci-grid { grid-template-columns: 1fr; }
}