/* ==========================================================================
   GURUKUL ONE — page-scoped brand layer

   Linked only from /products/gurukul-one/. Gurukul One needs its own visual
   identity while staying recognisably a Fireblaze property, so this file does
   two things:

   1. Re-points the flame tokens to a saffron ramp INSIDE `.g1` only. Existing
      components (.btn--primary, .card__icon, .badge, .eyebrow) then pick up the
      new accent automatically — no component rewrites, and the site nav and
      footer outside `.g1` stay Fireblaze orange, which is what keeps the
      parent/child brand relationship legible.
   2. Adds Gurukul One's own components: the three signature graphics plus the
      journey, constellation and path layouts.

   Contrast, measured against surface-0…3:
     saffron-500 8.10:1 min   saffron-400 9.61:1   saffron-300 11.23:1
     indigo-300  7.24:1 min   green-300   9.28:1   ivory      14.43:1
     near-black on saffron-500 = 9.65:1  (so primary buttons keep dark labels)
   indigo-500 measures 3.82:1 and FAILS AA as text — it is used for surfaces,
   borders and glows only, never for type. Do not repurpose it as a text colour.
   ========================================================================== */

.g1 {
  /* ---- accent ramp: saffron replaces flame within this page ---- */
  --flame-700: #a8690b;
  --flame-600: #d98a12;
  --flame-500: #f5a524;
  --flame-400: #ffb84d;
  --flame-300: #ffcd7a;
  --flame-200: #ffe0b3;
  --flame-glow: rgb(245 165 36 / 30%);
  --flame-wash: rgb(245 165 36 / 10%);
  --flame-edge: rgb(245 165 36 / 30%);
  --border-flame: rgb(245 165 36 / 45%);
  --glow-flame-sm: 0 4px 16px rgb(245 165 36 / 22%);
  --glow-flame-md: 0 8px 32px rgb(245 165 36 / 28%);
  --glow-flame-lg: 0 16px 56px rgb(245 165 36 / 32%);

  /* ---- Gurukul One's own palette ---- */
  --g1-indigo: #5a6bf5;          /* surfaces / borders / glow ONLY */
  --g1-indigo-300: #9aa5ff;      /* text-safe indigo */
  --g1-indigo-wash: rgb(90 107 245 / 12%);
  --g1-indigo-edge: rgb(90 107 245 / 32%);
  --g1-green: #3fbf87;
  --g1-green-300: #6bd6a6;
  --g1-green-wash: rgb(63 191 135 / 12%);
  --g1-ivory: #f5efe3;
  --g1-ivory-dim: #d8d2c6;

  /* Indic and SE-Asian scripts are outside the Inter subsets this site ships,
     so the multilingual section names common system faces and lets the browser
     fall back per script rather than shipping five more font files. */
  --g1-font-multi: "Noto Sans", "Noto Sans Devanagari", "Noto Sans Tamil",
    "Noto Sans Telugu", "Noto Sans Thai", "Nirmala UI", "Kohinoor Devanagari",
    system-ui, sans-serif;
}

/* ---------- eyebrow variants in the secondary hues -------------------- */
.g1-eyebrow--indigo { color: var(--g1-indigo-300); }
.g1-eyebrow--green { color: var(--g1-green-300); }

/* Warm ivory for display type — the "education + human warmth" note in the
   brand palette. Applied to section titles, not body copy, so long-form
   reading stays on the cooler primary. */
.g1 .section-header__title,
.g1 .cta-band__title,
.g1 .detail-hero__title { color: var(--g1-ivory); }

/* ==========================================================================
   SIGNATURE GRAPHIC 01 — KNOWLEDGE ORBIT
   Learn → Build → Innovate, as a centre with orbiting ecosystem pillars.
   Nodes are HTML (so they stay selectable, translatable and accessible);
   the rings behind them are SVG.
   ========================================================================== */

.orbit {
  position: relative;
  aspect-ratio: 1;
  max-width: 560px;
  margin-inline: auto;
  container-type: inline-size;
}

.orbit__rings {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.orbit__core {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  z-index: 2;
  width: 39%;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-content: center;
  text-align: center;
  padding: var(--space-3);
  background:
    radial-gradient(circle at 50% 35%, rgb(245 165 36 / 18%), transparent 70%),
    var(--surface-1);
  border: 1px solid var(--border-flame);
  box-shadow: var(--glow-flame-md);
}

.orbit__core b {
  display: block;
  font-size: clamp(0.8rem, 4.2cqi, 1.1rem);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
  color: var(--g1-ivory);
  line-height: 1.15;
}

.orbit__core span {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(0.5rem, 2.2cqi, 0.625rem);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--flame-400);
  margin-top: 4px;
}

/* Each node sits on the ring: rotate out, then counter-rotate the label so
   text stays upright. --a is set per node inline.
   The push-out distance must be a share of the ORBIT, not of the node. CSS
   composes the individual `translate`/`rotate` properties after `transform`,
   so a percentage here resolves against the node's own height and collapses the
   nodes into the centre disc. `cqi` resolves against the orbit's inline size
   (it declares container-type), which is the radius we actually mean: 33cqi
   lands between the 26cqi core edge and the 37.5cqi outer ring at every size. */
.orbit__node {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  width: 27%;
  translate: -50% -50%;
  rotate: var(--a);
  transform: translateY(-33cqi);
}

.orbit__inner {
  rotate: calc(-1 * var(--a));
  background: var(--surface-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  text-align: center;
  transition:
    border-color var(--duration-base) var(--ease-out),
    background-color var(--duration-base) var(--ease-out);
}

.orbit__node:hover .orbit__inner,
.orbit__node:focus-within .orbit__inner {
  border-color: var(--border-flame);
  background: var(--surface-3);
}

.orbit__inner b {
  display: block;
  font-size: clamp(0.625rem, 2.6cqi, 0.8125rem);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  line-height: 1.2;
}

.orbit__inner span {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(0.4375rem, 1.9cqi, 0.5625rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-top: 2px;
}

/* Below the orbit's comfortable size the ring becomes unreadable, so it is
   replaced outright by a stacked list — an intentional mobile layout rather
   than a scaled-down desktop one. */
.orbit__fallback { display: none; }

@media (max-width: 620px) {
  .orbit__rings,
  .orbit__node,
  .orbit__core { display: none; }

  .orbit {
    aspect-ratio: auto;
    max-width: none;
  }

  .orbit__fallback {
    display: grid;
    gap: var(--space-2);
  }

  .orbit__fallback .orbit__lead {
    background:
      radial-gradient(circle at 20% 0%, rgb(245 165 36 / 16%), transparent 60%),
      var(--surface-1);
    border-color: var(--border-flame);
  }

  .orbit__fallback li {
    list-style: none;
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    background: var(--surface-1);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
  }

  .orbit__fallback b {
    font-size: var(--text-body-sm);
    color: var(--text-primary);
    font-weight: var(--weight-semibold);
  }

  .orbit__fallback span {
    font-family: var(--font-mono);
    font-size: 0.5625rem;
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-left: auto;
    white-space: nowrap;
  }
}

/* ==========================================================================
   SIGNATURE GRAPHIC 02 — DIGITAL YANTRA
   A contemporary reading of Indian sacred geometry: nested rotated squares,
   concentric circles, radial divisions. Geometry and proportion only — no
   mandala ornament, no literal iconography.
   ========================================================================== */

.yantra {
  width: 100%;
  max-width: 380px;
  aspect-ratio: 1;
  margin-inline: auto;
  display: block;
  overflow: visible;
}

.yantra [data-spin] {
  transform-origin: 100px 100px;
  animation: yantra-spin 64s linear infinite;
}

.yantra [data-spin="reverse"] {
  animation-direction: reverse;
  animation-duration: 88s;
}

@keyframes yantra-spin {
  to { rotate: 360deg; }
}

/* ==========================================================================
   SIGNATURE GRAPHIC 03 — LEARNING NETWORK
   Student → Teacher → School → Community → World, as widening reach.
   ========================================================================== */

.netw {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 132px), 1fr));
  align-items: stretch;
}

.netw__step {
  position: relative;
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-3);
  text-align: center;
  overflow: hidden;
}

/* reach grows step to step — encoded as the width of the underline, so the
   graphic carries the meaning rather than just decorating it */
.netw__step::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  width: var(--reach, 20%);
  margin-inline: auto;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--flame-500), var(--g1-green));
}

.netw__ring {
  width: 30px;
  height: 30px;
  margin: 0 auto var(--space-3);
  border-radius: 50%;
  border: 1px solid var(--border-flame);
  background: var(--flame-wash);
  display: grid;
  place-content: center;
  color: var(--flame-400);
  font-family: var(--font-mono);
  font-size: 0.5625rem;
}

.netw__step b {
  display: block;
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.netw__step span {
  display: block;
  font-size: 0.6875rem;
  color: var(--text-tertiary);
  margin-top: 3px;
  line-height: 1.45;
}

/* ==========================================================================
   GRADE 1–12 JOURNEY
   ========================================================================== */

.journey {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  counter-reset: stage;
}

.jstage {
  position: relative;
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* progression is encoded in the top bar's fill, left → right across stages */
.jstage::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--flame-500) var(--fill, 20%),
    var(--border-subtle) var(--fill, 20%)
  );
}

.jstage__grade {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--flame-400);
}

.jstage__verb {
  font-size: var(--text-h3);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
  color: var(--g1-ivory);
  line-height: 1;
}

.jstage__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 5px;
}

.jstage__list li {
  font-size: var(--text-caption);
  color: var(--text-secondary);
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.jstage__list li::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--flame-500);
  flex-shrink: 0;
  translate: 0 -2px;
}

/* ==========================================================================
   TECHNOLOGY CONSTELLATION
   ========================================================================== */

.constellation {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 172px), 1fr));
}

.domain {
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-4);
  text-align: center;
  transition:
    transform var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out),
    background-color var(--duration-base) var(--ease-out);
}

.domain:hover {
  transform: translateY(-3px);
  border-color: var(--border-flame);
  background: var(--surface-2);
}

.domain__icon {
  width: 42px;
  height: 42px;
  margin: 0 auto var(--space-3);
  border-radius: var(--radius-md);
  display: grid;
  place-content: center;
  background: var(--flame-wash);
  border: 1px solid var(--flame-edge);
  color: var(--flame-400);
}

.domain--indigo .domain__icon {
  background: var(--g1-indigo-wash);
  border-color: var(--g1-indigo-edge);
  color: var(--g1-indigo-300);
}

.domain--green .domain__icon {
  background: var(--g1-green-wash);
  border-color: rgb(63 191 135 / 32%);
  color: var(--g1-green-300);
}

.domain b {
  display: block;
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  line-height: 1.3;
}

/* ==========================================================================
   HORIZONTAL PROCESS RAIL (project method, innovation, brand architecture)
   Scrolls rather than wraps: a wrapped sequence stops reading as a sequence.
   ========================================================================== */

.rail {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding-bottom: var(--space-3);
  list-style: none;
  margin: 0;
  scroll-snap-type: x proximity;
}

.rail li {
  flex: 0 0 auto;
  min-width: 124px;
  max-width: 168px;
  scroll-snap-align: start;
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-3);
  position: relative;
}

.rail li::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: var(--highlight-top);
}

.rail__n {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: var(--tracking-mono);
  color: var(--flame-400);
  margin-bottom: var(--space-2);
}

.rail li b {
  display: block;
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  line-height: 1.3;
}

.rail li span {
  display: block;
  font-size: 0.6875rem;
  color: var(--text-tertiary);
  margin-top: 4px;
  line-height: 1.45;
}

/* ==========================================================================
   CONCEPTUAL PANEL (portfolio + school view)
   Deliberately reads as a product concept, not an ERP screen: generous
   spacing, no dense tables, no fabricated numbers presented as real data.
   ========================================================================== */

.panel {
  background: var(--surface-1);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.panel__bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-2);
}

.panel__title {
  font-family: var(--font-mono);
  font-size: var(--text-mono-label);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.panel__tag {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--g1-indigo-300);
  border: 1px solid var(--g1-indigo-edge);
  background: var(--g1-indigo-wash);
  padding: 3px var(--space-2);
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.panel__body { padding: var(--space-5); }

.pchips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.pchip {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.03em;
  color: var(--text-secondary);
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  padding: 4px var(--space-2);
  border-radius: var(--radius-sm);
}

.pchip--accent {
  color: var(--flame-300);
  background: var(--flame-wash);
  border-color: var(--flame-edge);
}

/* skill meters — proportions are illustrative, and labelled as such in copy */
.meter {
  display: grid;
  gap: var(--space-3);
}

.meter__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2.2fr;
  gap: var(--space-3);
  align-items: center;
}

.meter__label {
  font-size: var(--text-caption);
  color: var(--text-secondary);
  min-width: 0;
}

.meter__track {
  height: 5px;
  border-radius: 3px;
  background: var(--surface-3);
  overflow: hidden;
}

.meter__fill {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--flame-600), var(--flame-400));
}

.meter__fill--indigo {
  background: linear-gradient(90deg, var(--g1-indigo), var(--g1-indigo-300));
}

.meter__fill--green {
  background: linear-gradient(90deg, var(--g1-green), var(--g1-green-300));
}

/* ==========================================================================
   TWO PATHS — private / government, given equal visual weight on purpose
   ========================================================================== */

.paths {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 880px) {
  .paths { grid-template-columns: 1fr 1fr; }
}

.path {
  position: relative;
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  overflow: hidden;
}

.path::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--path-accent, var(--flame-500));
}

.path--gov { --path-accent: var(--g1-green); }
.path--gov .path__icon {
  background: var(--g1-green-wash);
  border-color: rgb(63 191 135 / 32%);
  color: var(--g1-green-300);
}

.path__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  display: grid;
  place-content: center;
  background: var(--flame-wash);
  border: 1px solid var(--flame-edge);
  color: var(--flame-400);
}

.path__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-2);
  flex: 1;
}

.path__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-body-sm);
  color: var(--text-secondary);
}

.path__list svg {
  flex-shrink: 0;
  margin-top: 4px;
  color: var(--path-accent, var(--flame-500));
}

/* ==========================================================================
   MULTILINGUAL
   ========================================================================== */

.langs {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
}

.lang {
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.lang__native {
  display: block;
  font-family: var(--g1-font-multi);
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--g1-ivory);
}

.lang__name {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-top: var(--space-2);
}

/* ==========================================================================
   STEAM / STREAM
   ========================================================================== */

.steam {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
}

.steam__item {
  min-width: 96px;
  text-align: center;
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-3);
}

.steam__letter {
  display: block;
  font-size: 1.5rem;
  font-weight: var(--weight-bold);
  letter-spacing: -0.03em;
  color: var(--flame-400);
  line-height: 1;
}

.steam__word {
  display: block;
  font-size: var(--text-caption);
  color: var(--text-secondary);
  margin-top: var(--space-2);
}

.steam__item--added {
  border-color: var(--g1-indigo-edge);
  background: var(--g1-indigo-wash);
}

.steam__item--added .steam__letter { color: var(--g1-indigo-300); }

/* ==========================================================================
   BRAND ARCHITECTURE  (Fireblaze → Gurukul One → Outcome)
   ========================================================================== */

.barch {
  display: grid;
  gap: var(--space-2);
  max-width: 620px;
  margin-inline: auto;
  text-align: center;
}

.barch__tier {
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  border: 1px solid var(--border-subtle);
  background: var(--surface-1);
}

.barch__tier--parent { border-color: rgb(255 107 53 / 40%); }
.barch__tier--child {
  border-color: var(--border-flame);
  background:
    radial-gradient(circle at 50% 0%, rgb(245 165 36 / 12%), transparent 70%),
    var(--surface-1);
}
.barch__tier--outcome { border-color: rgb(63 191 135 / 35%); }

.barch__name {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.barch__tier--parent .barch__name { color: #ff8a4c; }
.barch__tier--child .barch__name { color: var(--flame-400); }
.barch__tier--outcome .barch__name { color: var(--g1-green-300); }

.barch__val {
  display: block;
  font-size: var(--text-h4);
  font-weight: var(--weight-semibold);
  color: var(--g1-ivory);
  margin-top: var(--space-2);
}

.barch__sub {
  display: block;
  font-size: var(--text-caption);
  color: var(--text-tertiary);
  margin-top: 4px;
}

.barch__arrow {
  color: var(--border-strong);
  display: grid;
  place-content: center;
}

/* ==========================================================================
   GLOBAL REACH — clearly labelled as target markets, never as operations
   ========================================================================== */

.reach {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
}

.reach__tier {
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

.reach__k {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--flame-400);
  margin-bottom: var(--space-3);
}

.reach__list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.reach__list li {
  font-size: var(--text-caption);
  color: var(--text-secondary);
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  padding: 3px var(--space-2);
  border-radius: var(--radius-sm);
}

/* ---------- reduced motion ---------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .yantra [data-spin] { animation: none; }
  .domain:hover { transform: none; }
}