/* ============================================================
   Home page styles - Nathu Blended Learning (London heritage)
   ============================================================ */

/* ---------- HERO ---------- */
.hero { position: relative; border-bottom: 1px solid var(--line); }
.hero__inner {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--s-7);
  align-items: center; padding-block: var(--s-8);
}
@media (max-width: 860px) { .hero__inner { grid-template-columns: 1fr; gap: var(--s-6); padding-block: var(--s-7); } }

.hero__kicker {
  display: inline-block; font-size: var(--t-small); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--navy);
  border-left: 3px solid var(--red); padding-left: .6rem;
}
.hero h1 {
  font-size: clamp(2.3rem, 5.5vw, 3.4rem); line-height: 1.04;
  margin: var(--s-4) 0 var(--s-3);
}
.hero h1 em { font-style: normal; color: var(--red); }
.hero__lede { font-size: 1.15rem; color: var(--ink-soft); max-width: 34rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); align-items: center; }

.hero__photo { width: 100%; aspect-ratio: 5 / 4; align-self: center; }
@media (max-width: 860px) { .hero__photo { aspect-ratio: 16 / 10; } }

/* ---------- Section heading ---------- */
.section { padding-block: var(--s-7); }
.section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-6); flex-wrap: wrap; }
.section__head h2 { font-size: var(--t-h1); margin-top: var(--s-2); }
.section__head p { color: var(--ink-soft); max-width: 40rem; margin-top: var(--s-3); }
.eyebrow { font-size: var(--t-tag); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--navy); border-left: 3px solid var(--red); padding-left: .55rem; }

/* ---------- Theme tabs ---------- */
.theme-tabs { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-6); }
.theme-tab {
  display: inline-flex; align-items: center;
  padding: .55rem 1.05rem; border-radius: var(--r-md); cursor: pointer;
  font-family: var(--font-body); font-weight: 600; font-size: var(--t-small); color: var(--ink-soft);
  background: var(--card); border: 1.5px solid var(--line);
  transition: all .15s ease;
}
.theme-tab:hover { border-color: var(--ink-faint); color: var(--ink); }
.theme-tab[aria-selected="true"] { background: var(--navy); color: #fff; border-color: var(--navy); }

/* ---------- Scenario grid ---------- */
.scenario-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
@media (max-width: 900px) { .scenario-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .scenario-grid { grid-template-columns: 1fr; } }
[data-theme-group][hidden] { display: none; }

.scn {
  display: flex; flex-direction: column; gap: var(--s-3);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s-5); box-shadow: var(--shadow-sm);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  position: relative; overflow: hidden; text-decoration: none; color: inherit;
}
.scn::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--accent, var(--red)); }
.scn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); text-decoration: none; }
.scn--locked { opacity: 1; }
.scn--locked .scn__title, .scn--locked .scn__num { color: var(--ink-faint); }
.scn__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.scn__num { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: var(--accent, var(--red)); line-height: 1; }
.scn__done { font-size: var(--t-tag); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--green-deep); border: 1.5px solid var(--green); padding: .12rem .5rem; border-radius: var(--r-sm); display: none; }
.scn[data-complete] .scn__done { display: inline-block; }
.scn__title { font-size: var(--t-h3); font-weight: 700; margin: 0; }
.scn__goal { color: var(--ink-soft); font-size: var(--t-small); flex: 1; }
.scn__steps { font-size: var(--t-tag); font-weight: 600; color: var(--ink-faint); letter-spacing: .02em; text-transform: uppercase; }
.scn__foot { display: flex; align-items: center; justify-content: space-between; margin-top: var(--s-2); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.scn__open { font-weight: 700; font-size: var(--t-small); color: var(--accent, var(--red-deep)); display: inline-flex; align-items: center; gap: .35rem; }
.scn:hover .scn__open { gap: .6rem; }
.scn__soon { font-size: var(--t-tag); font-weight: 700; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .05em; }

/* ---------- How it works (guided walkthrough) ---------- */
.how-flow { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-6); max-width: 62rem; }
.how-step { display: grid; grid-template-columns: 1fr minmax(0, 19rem); gap: var(--s-4) var(--s-6); align-items: center; }
@media (max-width: 760px) { .how-step { grid-template-columns: 1fr; gap: var(--s-4); } }

.how-step__text h3 { display: flex; align-items: center; gap: var(--s-3); font-size: var(--t-h3); font-weight: 700; }
.how-step__num { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }
.how-step__text p { color: var(--ink-soft); font-size: var(--t-body); margin-top: var(--s-3); max-width: 34rem; }

/* mock: scenario card (fake-interactive — looks clickable, does nothing) */
.demo-scn { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: var(--s-2); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-4); box-shadow: var(--shadow-sm); cursor: pointer; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.demo-scn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.demo-scn:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
.demo-scn::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--accent, var(--red)); }
.demo-scn__top { display: flex; align-items: center; justify-content: space-between; }
.demo-scn__num { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; color: var(--accent, var(--red)); line-height: 1; }
.demo-scn__tag { font-size: var(--t-tag); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--navy); border: 1.5px solid var(--navy); border-radius: var(--r-sm); padding: .1rem .45rem; }
.demo-scn__title { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; color: var(--ink); }
.demo-scn__open { display: inline-flex; align-items: center; gap: .3rem; font-weight: 700; font-size: var(--t-small); color: var(--accent, var(--red-deep)); margin-top: var(--s-1); }
.demo-scn__arrow { transition: transform .16s ease; }
.demo-scn:hover .demo-scn__arrow { transform: translateX(3px); }

/* mock: name field */
.demo-name { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-4); box-shadow: var(--shadow-sm); }
.demo-name__label { width: 100%; font-size: var(--t-tag); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); }
/* Real, typeable input — fake-interactive, saves nothing. */
.demo-name__field { flex: 1; min-width: 7rem; box-sizing: border-box; background: var(--paper); border: 1.5px solid var(--line-strong); border-radius: var(--r-md); padding: .5rem .7rem; font-family: var(--font-body); font-size: var(--t-body); font-weight: 600; color: var(--ink); outline: none; transition: border-color .15s ease, box-shadow .15s ease; }
.demo-name__field:hover { border-color: var(--navy); }
.demo-name__field:focus { border-color: var(--navy); box-shadow: var(--ring); }

/* mock: overview / progress report */
.demo-report { display: flex; flex-direction: column; gap: var(--s-2); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-4); box-shadow: var(--shadow-sm); }
.demo-report__head { display: flex; align-items: center; gap: var(--s-3); }
.demo-report__head strong { font-family: var(--font-display); font-weight: 700; }
.demo-report__sheet { flex: none; width: 42px; aspect-ratio: 3 / 4; background: #fff; border: 1px solid var(--line-strong); border-radius: var(--r-sm); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 7px; }
.demo-report__line { height: 4px; border-radius: 2px; background: var(--line-strong); }
.demo-report__line--title { background: var(--red); width: 72%; height: 5px; }
.demo-report__line--short { width: 55%; }
/* Reuses .btn .btn--primary .btn--sm so it matches the real certificate button. */
.demo-report__btn { white-space: nowrap; }
.demo-report > strong { align-self: center; font-family: var(--font-display); font-weight: 700; color: var(--ink); }

/* privacy band */
.how-privacy { display: flex; flex-direction: column; gap: var(--s-2); background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--red); border-radius: var(--r-md); padding: var(--s-5); margin-top: var(--s-7); max-width: 62rem; box-shadow: var(--shadow-sm); }
.how-privacy__tag { font-size: var(--t-tag); font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--navy); }
.how-privacy p { color: var(--ink); font-size: var(--t-body); max-width: 46rem; }

/* contact */
.how-contact { margin-top: var(--s-5); color: var(--ink-soft); font-size: var(--t-small); max-width: 62rem; }
.how-contact a { color: var(--red); font-weight: 600; }

/* ---------- Overall progress banner ---------- */
.myprogress { display: flex; align-items: center; gap: var(--s-4); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-4) var(--s-5); box-shadow: var(--shadow-sm); }
.myprogress__ring { flex: none; }
.myprogress__text { flex: 1; }
.myprogress__text b { font-weight: 700; }
.myprogress .progress { margin-top: var(--s-2); }