/**
 * The Food Gene — recipe.css
 * Version: 3.0 (Site V2)
 *
 * The recipe, guide and video page furniture: the details bar, the ingredients
 * and method columns, the reader tools and Cook Mode. Loaded only on those
 * templates (NFR-001 — the homepage does not pay for it).
 */

/* ═══ Recipe head (CNT-002) ══════════════════════════════════════════════ */

/* CNT-002 asks for a CENTRED title, summary and author line. */
.recipe__head { max-width: var(--width-reading); margin: 0 auto var(--space-md); text-align: center; }
.recipe__title { font-size: var(--text-4xl); }
.recipe__summary { font-size: var(--text-lg); color: var(--text-secondary); }
.recipe__byline {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-sm);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* ═══ Details bar (CNT-002) ══════════════════════════════════════════════ */

.details-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md);
  margin: 0 auto var(--space-md);
  padding: var(--space-2xs) var(--space-sm);
  max-width: var(--width-reading);
  background: var(--bg-surface);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  text-align: center;
}
.details-bar div { min-width: 4.5rem; }
.details-bar dt {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-secondary);
}
.details-bar dd { margin: 0; font-weight: var(--weight-semi); font-size: var(--text-base); }

.recipe__actions {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2xs);
  margin-bottom: var(--space-md);
}

.recipe__hero { margin: 0 auto var(--space-md); }
.recipe__hero-image { aspect-ratio: 16 / 9; width: 100%; max-width: none; }

/* ═══ Two-column layout (CNT-003) ════════════════════════════════════════ */

/* CNT-003: a contextual sidebar that reflows below the main content on smaller
   devices — handled by the media query at the end of this file. */
.recipe__layout, .video-page__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 17rem);
  gap: var(--space-xl);
  align-items: start;
}
.recipe__side, .video-page__side {
  position: sticky;
  top: calc(var(--tap-target) + var(--space-md));
  display: grid;
  gap: var(--space-lg);
}

/* ═══ Ingredients and method side by side (CNT-002) ══════════════════════ */

.recipe-card {
  display: grid;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  gap: var(--space-xl);
  margin: var(--space-xl) 0;
  padding: var(--space-md);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  align-items: start;
}

.ingredients__head { margin-bottom: var(--space-2xs); }
.ingredients__group {
  margin: var(--space-sm) 0 var(--space-3xs);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  color: var(--text-secondary);
}

/* CNT-016: the servings adjuster. The −/+ buttons are inserted by recipe.js. */
.servings {
  display: flex; align-items: center; gap: var(--space-3xs);
  font-size: var(--text-sm);
}
.servings__label { color: var(--text-secondary); }
.servings__value { font-weight: var(--weight-semi); min-width: 1.5em; text-align: center; }
.servings__btn {
  display: grid; place-items: center;
  width: var(--tap-target); height: var(--tap-target);
  background: var(--bg-surface);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  font-size: var(--text-lg);
  line-height: 1;
  cursor: pointer;
  color: var(--accent-juniper);
}
.servings__btn:hover:not(:disabled) { border-color: var(--accent-juniper); background: var(--bg-accent-soft); }
.servings__btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* CNT-017: tick off ingredients. */
.ingredients__list { margin-bottom: var(--space-sm); }
.ingredient { border-bottom: 1px solid var(--border-subtle); }
.ingredient__label {
  display: flex; align-items: flex-start; gap: var(--space-2xs);
  /* Padding rather than a fixed height: the row must stay a 44px target while
     still growing for a long ingredient name (NFR-004). */
  padding: var(--space-2xs) 0;
  min-height: var(--tap-target);
  font-weight: var(--weight-normal);
  cursor: pointer;
}
.ingredient__tick { width: auto; min-height: 0; margin-top: 0.35em; flex: none; accent-color: var(--accent-juniper); }
.ingredient__amount, .ingredient__unit { font-weight: var(--weight-semi); }
.ingredient__notes { color: var(--text-secondary); font-size: var(--text-sm); }

/* A ticked row dims rather than disappearing — CNT-019 still needs to know which
   rows are unticked, and a vanishing line loses the reader's place. */
.ingredient__tick:checked ~ .ingredient__text {
  color: var(--text-muted);
  text-decoration: line-through;
}
.ingredient__tick:checked ~ .ingredient__text .ingredient__amount,
.ingredient__tick:checked ~ .ingredient__text .ingredient__unit { font-weight: var(--weight-normal); }

/* An amount that just changed gets a brief highlight, so a reader pressing + can
   see which numbers moved. */
.ingredient__amount.is-updated {
  background: var(--bg-accent-soft);
  transition: background-color 600ms ease;
}

/* ═══ Method ════════════════════════════════════════════════════════════ */

.method__list { counter-reset: step; }
.step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-2xs);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--border-subtle);
  counter-increment: step;
}
.step__done { display: flex; align-items: flex-start; min-height: var(--tap-target); cursor: pointer; }
.step__done input { width: auto; min-height: 0; margin-top: 0.4em; accent-color: var(--accent-juniper); }

/* The step number is drawn from the counter, so renumbering is automatic. */
.step__body::before {
  content: counter(step);
  display: inline-grid;
  place-items: center;
  width: 1.75rem; height: 1.75rem;
  margin-bottom: var(--space-3xs);
  background: var(--accent-juniper);
  color: var(--text-inverse);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
}
.step__title { font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--weight-semi); }
.step__needs {
  margin: 0 0 var(--space-3xs);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.step__needs-label {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin-right: var(--space-3xs);
}
.step__text > * { margin: 0 0 var(--space-2xs); }
.step__tip {
  margin: var(--space-2xs) 0 0;
  padding-left: var(--space-2xs);
  border-left: 2px solid var(--accent-sage);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  font-style: italic;
}
.step__image { margin-top: var(--space-2xs); }
.step__timer-note { margin: var(--space-2xs) 0 0; font-size: var(--text-xs); color: var(--text-secondary); }

.step__done input:checked ~ * ,
.step:has(.step__done input:checked) .step__body { opacity: 0.55; }

/* The inline timer control (CNT-018), inserted by recipe.js. */
.step-timer {
  display: inline-flex; align-items: center; gap: var(--space-3xs);
  margin-top: var(--space-2xs);
  padding: var(--space-3xs) var(--space-2xs);
  background: var(--bg-surface-warm);
  border-radius: var(--radius-sm);
}
.step-timer__display { font-variant-numeric: tabular-nums; font-weight: var(--weight-semi); min-width: 3.5em; }
.step-timer__btn {
  min-height: 2rem; padding: 0 var(--space-2xs);
  background: var(--bg-surface);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  cursor: pointer;
}
.step-timer.is-done .step-timer__display { color: var(--accent-juniper); }

/* ═══ Editorial blocks (CMS-005, CMS-006) ═══════════════════════════════ */

.editorial-block {
  max-width: var(--width-reading);
  margin: var(--space-md) 0;
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-left: 4px solid var(--accent-juniper);
  border-radius: var(--radius-sm);
}
.editorial-block__title {
  margin-bottom: var(--space-3xs);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--accent-juniper);
}
.editorial-block__body > * { margin: 0 0 var(--space-2xs); }
.editorial-block__body > *:last-child { margin-bottom: 0; }

/* Quick Answer is the AEO block — the concise answer a reader or an answer engine
   reads first (SEO-010), so it is the most prominent of the set. */
.editorial-block--quick-answer { background: var(--bg-accent-soft); border-left-color: var(--accent-juniper); }
.editorial-block--good-to-know { background: var(--bg-sage-soft); border-left-color: var(--accent-sage); }
.editorial-block--chef-tip     { border-left-color: var(--accent-sage); }
.editorial-block--storage,
.editorial-block--make-ahead,
.editorial-block--swap-it      { border-left-color: var(--border-sand); }

/* ═══ FAQ ═══════════════════════════════════════════════════════════════ */

.faq { max-width: var(--width-reading); margin: var(--space-xl) 0; }
.faq__list dt {
  margin-top: var(--space-sm);
  font-weight: var(--weight-semi);
}
.faq__list dd { margin: var(--space-3xs) 0 0; color: var(--text-secondary); }
.faq__list dd > * { margin: 0 0 var(--space-2xs); }

/* ═══ Flavor DNA (CNT-020) ══════════════════════════════════════════════ */

.flavor-dna__list { display: grid; gap: var(--space-3xs); }
.flavor-dna__row {
  display: grid;
  grid-template-columns: 4rem 1fr;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--text-sm);
}
.flavor-dna__name { color: var(--text-secondary); }
.flavor-dna__dots { display: flex; gap: 3px; }
.flavor-dna__dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 1px solid var(--accent-sage);
}
.flavor-dna__dot.is-filled { background: var(--accent-juniper); border-color: var(--accent-juniper); }

/* ═══ Watch it made, chapters, transcript ═══════════════════════════════ */

.watch-it p { margin: var(--space-3xs) 0 0; font-size: var(--text-sm); }
.chapters__list { display: grid; gap: 1px; }
.chapters__list a {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: var(--space-2xs);
  padding: var(--space-3xs) var(--space-2xs);
  min-height: var(--tap-target);
  align-items: center;
  font-size: var(--text-sm);
  text-decoration: none;
  border-bottom: 1px solid var(--border-subtle);
}
.chapters__list a:hover { background: var(--bg-surface-subtle); }
.chapters__time { font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.chapters__label { color: var(--text-primary); }

.transcript { max-width: var(--width-reading); margin: var(--space-lg) 0; }
.transcript summary {
  cursor: pointer;
  min-height: var(--tap-target);
  display: flex; align-items: center;
  font-weight: var(--weight-medium);
  color: var(--accent-juniper);
}
.transcript .prose { margin-top: var(--space-2xs); font-size: var(--text-sm); }

.video-page__cta { margin: var(--space-md) 0; }
.guide__hero-image { aspect-ratio: 16 / 9; width: 100%; max-width: none; }
.guide__body { margin: var(--space-md) 0; }
.guide__video { max-width: var(--width-reading); margin: var(--space-xl) 0; }

/* ═══ Cook Mode (CNT-018) ═══════════════════════════════════════════════ */

/* Full-screen, large-text, one step at a time. A fixed overlay rather than the
   Fullscreen API: the API needs a user gesture, behaves differently on iOS, and
   an overlay is easier to keep keyboard-navigable. */
.cook-mode {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--bg-surface);
  padding: var(--space-md) var(--gutter);
}
.cook-mode[hidden] { display: none; }

.cook-mode__bar { display: flex; align-items: center; gap: var(--space-sm); }
.cook-mode__progress {
  flex: 1;
  height: 4px;
  background: var(--bg-surface-subtle);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.cook-mode__progress span {
  display: block; height: 100%;
  background: var(--accent-juniper);
  transition: width var(--transition-smooth);
}
.cook-mode__count { font-size: var(--text-sm); color: var(--text-secondary); white-space: nowrap; }
.cook-mode__close {
  width: var(--tap-target); height: var(--tap-target);
  background: none; border: 0; cursor: pointer;
}

.cook-mode__body {
  display: grid;
  align-content: center;
  gap: var(--space-sm);
  max-width: var(--width-reading);
  margin: 0 auto;
  /* Large text is the point of Cook Mode: readable from across a worktop. */
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  line-height: var(--leading-snug);
}
.cook-mode__step-title { font-size: clamp(1.75rem, 4vw, 2.5rem); }
.cook-mode__needs {
  padding: var(--space-2xs) var(--space-sm);
  background: var(--bg-surface-warm);
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
}
.cook-mode__nav { display: flex; justify-content: space-between; gap: var(--space-sm); }
.cook-mode__nav .btn { min-width: 8rem; min-height: 3.5rem; font-size: var(--text-base); }

.cook-mode .step-timer { font-size: var(--text-lg); padding: var(--space-2xs) var(--space-sm); }
.cook-mode .step-timer__display { min-width: 4.5em; }

/* ═══ Responsive (CNT-003, NFR-010) ═════════════════════════════════════ */

@media (max-width: 1024px) {
  /* CNT-003: the sidebar moves below the main content. */
  .recipe__layout, .video-page__layout { grid-template-columns: 1fr; }
  .recipe__side, .video-page__side { position: static; }
}

@media (max-width: 760px) {
  /* The ingredients and method stack. Ingredients first: a cook reads them
     before starting, and a phone screen cannot show both usefully. */
  .recipe-card { grid-template-columns: 1fr; gap: var(--space-lg); padding: var(--space-sm); }
  .recipe__title { font-size: var(--text-2xl); }
  .details-bar { gap: var(--space-sm); }
  .recipe__actions .btn { flex: 1 1 auto; }
}

@media print {
  /* The print ADDRESS is the supported route (CNT-004), but if someone prints
     this page directly, drop the furniture that cannot mean anything on paper. */
  .recipe__actions, .share-bar, .follow-icons, .cook-mode,
  .recipe__side, .related, .newsletter { display: none !important; }
}