/* ============================================================================
   oh-landing.css — Landing-only chrome (hero + ToC card grid)
   Loaded ONLY by index.html / index.ar.html. Split out of oh-core.css in
   PR 7 (2026-05-28) so the other 90 inner pages don't ship ~150 lines of
   landing CSS they never use. If you add a selector here that an inner page
   needs, promote it back into oh-core.css — not the other way around.
   ============================================================================ */
.oh-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--oh-cover-bg);
  color: var(--oh-cover-text);
  /* Reserve space for the fixed overlay header; the hero background fills behind
     it so the header merges into the hero (matches the inner-page cover). */
  padding-block-start: var(--oh-header-h);
}
.oh-hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--oh-space-5);
  padding: clamp(64px, 10vw, 128px) clamp(24px, 6vw, 80px);
  /* Extra bottom room so the hero content clears the wavy divider. */
  padding-block-end: clamp(108px, 13vw, 210px);
  max-width: var(--oh-container);
  width: 100%;
  margin: 0 auto;
  min-height: clamp(420px, 50vw, 600px);
}
.oh-hero__eyebrow {
  font-family: var(--oh-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 13px;
  color: var(--oh-indigo-200);
  margin: 0;
}
.oh-hero__title {
  font-family: var(--oh-font-app);
  font-weight: 700;
  font-size: clamp(44px, 8vw, 96px);
  line-height: 1.02;
  letter-spacing: -2px;
  margin: 0;
  color: var(--oh-text-inverse);
  white-space: nowrap;
}
@media (max-width: 720px) { .oh-hero__title { white-space: normal; } }
.oh-hero__lede {
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.75);
  max-width: var(--oh-prose);
  margin: 0;
}
.oh-hero__meta {
  display: inline-flex;
  align-items: center;
  gap: var(--oh-space-2);
  padding: var(--oh-space-2) var(--oh-space-4);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--oh-radius-pill);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
  width: max-content;
}

.oh-toc {
  padding: clamp(56px, 8vw, 96px) var(--oh-space-5);
  max-width: var(--oh-container);
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--oh-space-6);
}
.oh-toc__head {
  display: flex;
  align-items: baseline;
  gap: var(--oh-space-3);
}
.oh-toc__head h2 {
  font-family: var(--oh-font-app);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 700;
  margin: 0;
  color: var(--oh-text-default);
}
.oh-toc__head small {
  font-family: var(--oh-font-mono);
  font-size: 13px;
  color: var(--oh-text-muted);
}
.oh-toc__line { flex: 1; height: 1px; background: var(--oh-border-default); }

.oh-toc__grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--oh-space-4);
}
.oh-toc__card {
  /* Cap normal section cards at half-row so a single-card group never
     stretches edge-to-edge — 4 cards → 25% each (quarter), 2 cards or
     1 card → 50% each (half). The external/canvas card overrides this
     to take the full row. */
  flex: 1 1 calc(25% - var(--oh-space-4));
  max-width: calc(50% - var(--oh-space-4) / 2);
  min-width: 240px;
  display: flex;
  flex-direction: column;
  gap: var(--oh-space-3);
  padding: var(--oh-space-5);
  background: var(--oh-bg-raised);
  border: 1px solid var(--oh-border-default);
  border-radius: var(--oh-radius-lg);
  color: var(--oh-text-default);
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: all var(--oh-duration-base) var(--oh-ease);
}
.oh-toc__card:hover {
  transform: translateY(-3px);
  box-shadow: var(--oh-shadow-md);
  border-color: var(--oh-primary);
  color: var(--oh-text-default);
}
/* Card head — a Tabler glyph tile (primary tint) on the inline-start, the
   section number opposite. The tile gives each card a quick, themeable cue. */
.oh-toc__card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--oh-space-3);
}
.oh-toc__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: var(--oh-radius-md);
  background: var(--oh-primary-soft);
  color: var(--oh-primary);
  flex: none;
  transition: background var(--oh-duration-base) var(--oh-ease), color var(--oh-duration-base) var(--oh-ease);
}
.oh-toc__ico .oh-ico { width: 24px; height: 24px; }
.oh-toc__card:hover .oh-toc__ico { background: var(--oh-primary); color: #fff; }
.oh-toc__card--external .oh-toc__ico { background: color-mix(in srgb, var(--oh-sky-500) 14%, transparent); color: var(--oh-sky-500); }
.oh-toc__card--external:hover .oh-toc__ico { background: var(--oh-sky-500); color: #fff; }
.oh-toc__num {
  font-family: var(--oh-font-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--oh-primary);
}
/* External / off-guide references (e.g. the canvas card) — a Sky-500 accent
   stripe on the inline-start edge marks them as a different class of
   destination than the numbered guide sections, and the card breaks the
   half-row cap to span the full row. */
.oh-toc__card--external {
  flex-basis: 100%;
  max-width: 100%;
  border-inline-start: 4px solid var(--oh-sky-500);
  padding-inline-start: calc(var(--oh-space-5) - 3px);
}
.oh-toc__title {
  font-family: var(--oh-font-app);
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.3px;
}
.oh-toc__desc {
  font-size: 13px;
  line-height: 1.6;
  color: var(--oh-text-muted);
  margin: 0;
}
.oh-toc__count {
  font-family: var(--oh-font-mono);
  font-size: 11px;
  color: var(--oh-text-muted);
  margin-top: auto;
}