/* ==========================================================================
   Guide Layout — Shared, reusable building blocks for all guide pages
   --------------------------------------------------------------------------
   Design rules (match the rest of the site):
   - Strictly monochrome. No accent hues; emphasis comes from weight, the
     black/white/gray scale, and mono type.
   - Full container width. Content fills the grid like every other page;
     only running prose is line-length capped, and even then left-aligned.
   - Built on tokens from styles.css and the shared .ref-section component.
   Use these classes across every guide so 100+ pages stay consistent.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Running prose — capped for readability, never a skinny centered card
   -------------------------------------------------------------------------- */
.guide-prose {
  max-width: 68ch;
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-gray-700);
}

.guide-prose p {
  margin: 0 0 var(--space-4);
}

.guide-prose p:last-child {
  margin-bottom: 0;
}

.guide-prose strong {
  color: var(--color-black);
  font-weight: var(--font-weight-semibold);
}

/* Lead line under a section header, before grids */
.guide-lead {
  max-width: 68ch;
  margin-bottom: var(--space-8);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-gray-700);
}

/* --------------------------------------------------------------------------
   Card grid — auto-fit, full width. The default container for guide content.
   -------------------------------------------------------------------------- */
.gx-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-5);
}

.gx-cards--2 { grid-template-columns: repeat(2, 1fr); }
.gx-cards--3 { grid-template-columns: repeat(3, 1fr); }
.gx-cards--4 { grid-template-columns: repeat(4, 1fr); }

.gx-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  text-align: left;
}

.gx-card__icon {
  width: 32px;
  height: 32px;
  margin-bottom: var(--space-4);
  color: var(--color-black);
}

.gx-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.gx-card__title {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-black);
}

.gx-card__tag {
  flex-shrink: 0;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-gray-500);
  padding: 2px var(--space-2);
  background: var(--color-gray-100);
  border-radius: var(--radius-full);
}

.gx-card__text {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-gray-600);
}

.gx-card__link {
  margin-top: auto;
  padding-top: var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-black);
  text-decoration: none;
}

.gx-card__link:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   Value cards — a "which setting, when" lookup. Each card is led by a large
   mono value (the lookup key), then the scenario and example settings.
   Use for value-to-use-case mappings: aperture range -> scenario, shutter
   speed -> motion type, ISO -> light level, etc. The big value is the anchor,
   so there is no corner tag to compete with the example chips.
   -------------------------------------------------------------------------- */
.value-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-5);
}

.value-cards--2 { grid-template-columns: repeat(2, 1fr); }
.value-cards--3 { grid-template-columns: repeat(3, 1fr); }

.value-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
}

/* Mono is loaded at 400/500 only — use medium, never bold, on mono text. */
.value-card__value {
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-tight);
  color: var(--color-black);
}

.value-card__title {
  margin: var(--space-3) 0 var(--space-2);
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-black);
}

.value-card__text {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-gray-600);
}

/* Example chips sit apart from the description so they read as a separate row. */
.value-card__examples {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

@media (max-width: 560px) {
  .value-cards--2 { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Learn cards — the Keep Learning grid. A hairline-divided grid of icon-led
   navigation cards (mirrors the site's tools grid) so the "where to next"
   block reads as distinct, clickable navigation. Keep to 3 cards.
   Self-contained here so guide pages never need to load home.css/hub.css.
   -------------------------------------------------------------------------- */
.learn-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--color-gray-200);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.learn-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  background: var(--color-white);
  text-decoration: none;
  color: var(--color-black);
  transition: background-color var(--transition-base);
}

.learn-card:hover { background: var(--color-gray-50); }

.learn-card__name {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-black);
}

.learn-card__preview {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  margin: var(--space-3) 0 var(--space-5);
  background: var(--color-gray-50);
  border-radius: var(--radius-lg);
  transition: background-color var(--transition-base);
}

.learn-card:hover .learn-card__preview { background: var(--color-white); }

.learn-card__preview svg {
  width: 44px;
  height: 44px;
  color: var(--color-gray-500);
  transition: color var(--transition-fast);
}

.learn-card:hover .learn-card__preview svg { color: var(--color-black); }

.learn-card__label {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-600);
}

@media (max-width: 640px) {
  .learn-cards { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Stop ladder — visualizes "one stop = double the light" as brightening swatches
   -------------------------------------------------------------------------- */
.stop-ladder {
  margin-bottom: var(--space-8);
}

.stop-ladder__track {
  display: flex;
  align-items: stretch;
  gap: var(--space-2);
  padding: var(--space-6);
  background: var(--color-gray-900);
  border-radius: var(--radius-xl);
}

.stop-ladder__step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.stop-ladder__swatch {
  width: 100%;
  aspect-ratio: 4 / 3;
  margin-bottom: var(--space-1);
  border-radius: var(--radius-md);
  /* Brightness doubles per stop; warm glow so it reads as "light" */
  background:
    radial-gradient(120% 120% at 50% 30%, rgba(255, 250, 235, 0.9), rgba(255, 250, 235, 0) 62%),
    hsl(45 35% var(--lum));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.stop-ladder__step--base .stop-ladder__swatch {
  box-shadow: inset 0 0 0 2px var(--color-white);
}

.stop-ladder__stop {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
}

.stop-ladder__amt {
  font-size: var(--text-xs);
  color: var(--color-gray-400);
}

.stop-ladder__step--base .stop-ladder__amt {
  color: var(--color-white);
  font-weight: var(--font-weight-semibold);
}

.stop-ladder__arrow {
  align-self: center;
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-gray-400);
  padding-bottom: var(--space-8);
}

.stop-ladder__caption {
  margin: var(--space-4) 0 0;
  font-size: var(--text-sm);
  color: var(--color-gray-500);
  text-align: center;
}

@media (max-width: 640px) {
  .stop-ladder__track {
    padding: var(--space-4);
    gap: var(--space-1);
  }
  .stop-ladder__arrow { display: none; }
  .stop-ladder__amt { display: none; }
}

/* --------------------------------------------------------------------------
   Stop scales — each setting's full-stop run as a visual track, base marked
   -------------------------------------------------------------------------- */
.stop-scales {
  display: grid;
  gap: var(--space-4);
}

.stop-scale {
  display: grid;
  grid-template-columns: 120px 1fr;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
}

.stop-scale__label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--font-weight-semibold);
  color: var(--color-black);
}

.stop-scale__label svg {
  width: 18px;
  height: 18px;
  color: var(--color-gray-500);
  flex-shrink: 0;
}

.stop-scale__track {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.stop-scale__track li {
  flex: 1;
  padding: var(--space-2) var(--space-1);
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-gray-600);
  background: var(--color-gray-50);
  border-left: 1px solid var(--color-gray-200);
}

.stop-scale__track li:first-child { border-left: none; }

.stop-scale__track li.is-base {
  background: var(--color-black);
  color: var(--color-white);
  font-weight: var(--font-weight-bold);
}

.stop-scale__ends {
  grid-column: 2;
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-gray-400);
  margin-top: calc(var(--space-2) * -1);
}

.stop-scales__note {
  max-width: 68ch;
  margin: var(--space-6) 0 0;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-gray-600);
}

@media (max-width: 560px) {
  .stop-scale {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
  .stop-scale__ends { grid-column: 1; }
}

/* Mono settings chips inside a card (e.g. f/2.8 · 1/500 · ISO 100) */
.guide-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.guide-chip {
  padding: var(--space-1) var(--space-2);
  background: var(--color-gray-100);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-gray-800);
}

/* --------------------------------------------------------------------------
   Numbered steps — full-width grid, monochrome counters
   -------------------------------------------------------------------------- */
.guide-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-5);
  counter-reset: guide-step;
  list-style: none;
  margin: 0;
  padding: 0;
}

.guide-steps > li {
  counter-increment: guide-step;
  padding: var(--space-6);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
}

.guide-steps > li::before {
  content: counter(guide-step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-bottom: var(--space-4);
  background: var(--color-black);
  color: var(--color-white);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  border-radius: var(--radius-full);
}

.guide-steps strong {
  display: block;
  font-weight: var(--font-weight-semibold);
  color: var(--color-black);
  margin-bottom: var(--space-2);
}

.guide-steps p {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-gray-600);
}

/* --------------------------------------------------------------------------
   Setting callout chips — mono tags (kept compatible with prior markup)
   -------------------------------------------------------------------------- */
.setting-callout {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.setting-callout__tag {
  padding: var(--space-1) var(--space-3);
  background: var(--color-gray-100);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-gray-800);
}

/* --------------------------------------------------------------------------
   Keyline note — neutral callout (no color), matches site .ref-note feel
   -------------------------------------------------------------------------- */
.guide-note {
  padding: var(--space-5);
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-left: 3px solid var(--color-black);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

.guide-note__label {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-gray-500);
  margin-bottom: var(--space-2);
}

.guide-note p {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-gray-700);
}

/* --------------------------------------------------------------------------
   Cheat grid — guide pages use a tidy two-column key/value list
   (Base .cheat-grid / .cheat-item come from guide.css; here we ensure a
   full-width, auto-fit layout regardless of page.)
   -------------------------------------------------------------------------- */
.guide-page .cheat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-3);
}

/* Stacked term-over-answer mini-cards. Overrides the legacy side-by-side row
   layout (guide.css) so neither column wraps into the other. */
.guide-page .cheat-item {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-5);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
}

.guide-page .cheat-term {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-black);
}

.guide-page .cheat-answer {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-gray-600);
}

/* --------------------------------------------------------------------------
   FAQ — an editorial two-column block: a title rail on the left, an
   expandable Q&A list on the right. Deliberately NOT styled as cards; only
   navigational elements (Keep Learning) should look like clickable cards.
   The left rail fills the page width intentionally and constrains the list
   to a comfortable reading measure.
   -------------------------------------------------------------------------- */
.guide-faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: var(--space-12);
  align-items: start;
}

.guide-faq-intro {
  position: sticky;
  top: var(--space-24);
}

.guide-faq-intro .section-title { margin-bottom: var(--space-3); }

.guide-faq-intro__text {
  max-width: 32ch;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-gray-500);
}

.guide-faq {
  border-top: 1px solid var(--color-gray-200);
}

@media (max-width: 820px) {
  .guide-faq-layout {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .guide-faq-intro { position: static; }
}

.guide-faq__item {
  border-bottom: 1px solid var(--color-gray-200);
}

.guide-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  list-style: none;
  cursor: pointer;
  font-size: var(--text-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-black);
}

.guide-faq__q::-webkit-details-marker { display: none; }

.guide-faq__icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--color-gray-400);
  transition: transform var(--transition-base);
}

.guide-faq__item[open] .guide-faq__icon { transform: rotate(45deg); }

.guide-faq__a {
  max-width: 68ch;
  padding: 0 0 var(--space-5);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-gray-600);
}

.guide-faq__a p { margin: 0; }
.guide-faq__a a { color: var(--color-black); font-weight: var(--font-weight-semibold); }

/* --------------------------------------------------------------------------
   Night Vision — uses the site's shared --nv-* tokens
   -------------------------------------------------------------------------- */
body.night-vision .gx-card,
body.night-vision .guide-steps > li {
  background: var(--nv-bg-card);
  border-color: var(--nv-border);
}

body.night-vision .guide-note {
  background: var(--nv-bg-elevated);
  border-color: var(--nv-border);
  border-left-color: var(--nv-accent);
}

body.night-vision .gx-card__title,
body.night-vision .guide-steps strong,
body.night-vision .gx-card__icon,
body.night-vision .gx-card__link {
  color: var(--nv-text);
}

body.night-vision .guide-prose,
body.night-vision .guide-lead,
body.night-vision .gx-card__text,
body.night-vision .guide-steps p,
body.night-vision .guide-note p {
  color: var(--nv-text-muted);
}

body.night-vision .guide-prose strong { color: var(--nv-text); }

body.night-vision .guide-chip,
body.night-vision .setting-callout__tag,
body.night-vision .gx-card__tag {
  background: var(--nv-bg-elevated);
  color: var(--nv-text-muted);
}

body.night-vision .guide-steps > li::before {
  background: var(--nv-accent);
  color: var(--nv-bg);
}

body.night-vision .stop-ladder__track {
  background: var(--nv-bg-elevated);
}

body.night-vision .stop-ladder__swatch {
  background:
    radial-gradient(120% 120% at 50% 30%, rgba(255, 80, 80, 0.85), rgba(255, 80, 80, 0) 60%),
    hsl(0 60% var(--lum));
}

body.night-vision .stop-ladder__stop { color: var(--nv-text); }
body.night-vision .stop-ladder__amt,
body.night-vision .stop-ladder__arrow,
body.night-vision .stop-ladder__caption { color: var(--nv-text-muted); }

body.night-vision .stop-scale {
  background: var(--nv-bg-card);
  border-color: var(--nv-border);
}

body.night-vision .stop-scale__label { color: var(--nv-text); }

body.night-vision .stop-scale__track,
body.night-vision .stop-scale__track li {
  border-color: var(--nv-border);
  background: var(--nv-bg-elevated);
  color: var(--nv-text-muted);
}

body.night-vision .stop-scale__track li.is-base {
  background: var(--nv-accent);
  color: var(--nv-bg);
}

body.night-vision .stop-scales__note { color: var(--nv-text-muted); }

body.night-vision .value-card {
  background: var(--nv-bg-card);
  border-color: var(--nv-border);
}
body.night-vision .value-card__value,
body.night-vision .value-card__title { color: var(--nv-text); }
body.night-vision .value-card__text { color: var(--nv-text-muted); }

body.night-vision .learn-cards { background: var(--nv-border); border-color: var(--nv-border); }
body.night-vision .learn-card { background: var(--nv-bg-card); color: var(--nv-text); }
body.night-vision .learn-card:hover { background: var(--nv-bg-elevated); }
body.night-vision .learn-card__name { color: var(--nv-text); }
body.night-vision .learn-card__label { color: var(--nv-text-muted); }
body.night-vision .learn-card__preview { background: var(--nv-bg-elevated); }
body.night-vision .learn-card:hover .learn-card__preview { background: var(--nv-bg-card); }
body.night-vision .learn-card__preview svg { color: var(--nv-text-muted); }
body.night-vision .learn-card:hover .learn-card__preview svg { color: var(--nv-text); }

body.night-vision.guide-page .cheat-item {
  background: var(--nv-bg-card);
  border-color: var(--nv-border);
}

body.night-vision .guide-faq-intro__text { color: var(--nv-text-muted); }
body.night-vision .guide-faq,
body.night-vision .guide-faq__item { border-color: var(--nv-border); }
body.night-vision .guide-faq__q { color: var(--nv-text); }
body.night-vision .guide-faq__icon { color: var(--nv-text-muted); }
body.night-vision .guide-faq__a { color: var(--nv-text-muted); }
body.night-vision .guide-faq__a a { color: var(--nv-text); }