/*
 *  RECIPE PAGE CSS — recipe-page.css
 *  Additive only — extends brand.css without redefining any brand.css class.
 *  Include on all recipe pages alongside brand.css.
 *
 *  TABLE OF CONTENTS
 *  1. Story Section
 *  2. Failure Section
 *  3. Success Section
 *  4. Jump-to-Recipe Button
 *  5. Category Cards
 *  6. Homepage Category Mini-Cards
 *  7. Empty State (category pages pre-Phase 2)
 *  8. To-Top Button
 *  9. Responsive Breakpoints
 *  12. Recipe Transclusion (dressing-transclude shortcode)
 *  13. Quick Answer (AEO extract block)
 *  14. Frequently Asked Questions
 */

/* ─── 1. STORY SECTION ──────────────────────────────────────────────── */
.recipe-story {
  background: var(--soft-ivory);
  padding: var(--sp-xl) var(--content-pad);
}

.recipe-story__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--sp-lg);
  align-items: start;
}

.recipe-story__content {
  /* Left column — headline + body paragraphs + signature */
}

.recipe-story__sidebar {
  /* Right column — fact-box with Rimpy's guide quote — reuses .fact-box from brand.css */
}

.recipe-story__headline {
  font-family: var(--lora);
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 700;
  color: var(--terracotta);
  line-height: 1.25;
  margin-bottom: var(--sp-sm);
}

/* .recipe-story__body uses .t-body applied directly — no new class needed */

/* ─── 2. FAILURE SECTION ─────────────────────────────────────────────── */
.recipe-failure {
  background: var(--warm-cream);
  padding: var(--sp-xl) var(--content-pad);
}

.recipe-failure__inner {
  max-width: var(--max-w);
  margin: 0 auto;
}

.recipe-failure__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
  margin-top: var(--sp-md);
}

.recipe-failure__item {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: var(--sp-sm);
  align-items: start;
}

.recipe-failure__icon {
  font-family: var(--mont);
  font-size: 1rem;
  font-weight: 700;
  color: var(--turmeric);
  padding-top: 2px;
}

/* .recipe-failure__text uses .t-body applied directly — no new class needed */

/* ─── 3. SUCCESS SECTION ─────────────────────────────────────────────── */
.recipe-success {
  background: var(--soft-ivory);
  padding: var(--sp-xl) var(--content-pad);
}

.recipe-success__inner {
  /* Justified deviation: --prose-w token does not exist in brand.css */
  max-width: 780px;
  margin: 0 auto;
}

.recipe-success__body {
  /* Reuses .t-body — add size/line-height override only */
  font-size: 1.05rem;
  line-height: 1.8;
}

/* ─── 4. JUMP-TO-RECIPE BUTTON ───────────────────────────────────────── */
.recipe-hero__jump {
  /* Spacing override for the jump CTA within the hero — visual from .btn.btn--ivory.btn--sm */
  margin-top: var(--sp-md);
  display: inline-flex;
}

/* ─── 5. CATEGORY CARDS ──────────────────────────────────────────────── */
.category-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-md);
  margin-top: var(--sp-lg);
}

.category-card {
  background: var(--warm-cream);
  border-top: var(--border-terra);
  border-radius: 4px;
  padding: var(--sp-md);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--trans), transform var(--trans);
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
  text-decoration: none;
  color: inherit;
}

.category-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-3px);
}

.category-card__label {
  font-family: var(--mont);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 4px;
}

/* .category-card__title uses .t-recipe-title — no new class needed */

.category-card__desc {
  font-family: var(--lato);
  font-size: .92rem;
  line-height: 1.75;
  color: var(--charcoal);
  opacity: .8;
}

.category-card__cta {
  font-family: var(--mont);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--terracotta);
  text-decoration: none;
  margin-top: auto;
  padding-top: var(--sp-sm);
  border-top: var(--border-light);
  transition: opacity var(--trans);
}

.category-card__cta:hover {
  opacity: .75;
}

/* ─── 6. HOMEPAGE CATEGORY MINI-CARDS ───────────────────────────────── */
.recipes-preview {
  margin-bottom: var(--sp-lg);
}

.recipes-preview__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-sm);
  margin-bottom: var(--sp-md);
}

.recipe-mini-card {
  background: var(--soft-ivory);
  border-top: var(--border-terra);
  border-radius: 4px;
  padding: var(--sp-sm);
  text-align: center;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-xs);
  transition: transform var(--trans), box-shadow var(--trans);
}

.recipe-mini-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}

.recipe-mini-card__icon {
  font-size: 1.8rem;
  line-height: 1;
  display: block;
  margin-bottom: 4px;
}

.recipe-mini-card__name {
  font-family: var(--mont);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--soft-ivory);
  line-height: 1.3;
}

.recipe-mini-card__count {
  font-family: var(--mont);
  font-size: .6rem;
  font-weight: 600;
  color: var(--soft-ivory);
  opacity: .65;
  letter-spacing: .08em;
}

/* ─── 6b. TECHNIQUE SPOTLIGHT (Air Fryer strip) ────────────────────── */
.technique-spotlight {
  margin-top: var(--sp-lg);
}

.technique-spotlight__divider {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  margin-bottom: var(--sp-md);
}

.technique-spotlight__divider-line {
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,.25);
}

.technique-spotlight__divider-label {
  font-family: var(--mont);
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
  white-space: nowrap;
}

.technique-spotlight__grid {
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
}

.technique-card {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--sp-lg);
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 6px;
  padding: var(--sp-md) var(--sp-lg);
  text-decoration: none;
  color: inherit;
  transition: background var(--trans), transform var(--trans), box-shadow var(--trans);
}

.technique-card:hover {
  background: rgba(255,255,255,.16);
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0,0,0,.15);
}

.technique-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
  min-width: 0;
}

.technique-card__label {
  font-family: var(--mont);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--turmeric);
}

.technique-card__title {
  font-family: var(--lora);
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.15;
}

.technique-card__desc {
  font-family: var(--lato);
  font-size: .92rem;
  line-height: 1.7;
  color: rgba(255,255,255,.8);
  max-width: 560px;
}

.technique-card__cta {
  font-family: var(--mont);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 3px;
  padding: 12px 24px;
  white-space: nowrap;
  transition: background var(--trans);
}

.technique-card:hover .technique-card__cta {
  background: rgba(255,255,255,.25);
}

/* ─── 7. EMPTY STATE ─────────────────────────────────────────────────── */
.recipe-grid-empty {
  text-align: center;
  padding: var(--sp-xl) var(--content-pad);
  color: var(--sage);
  font-family: var(--mont);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  opacity: .7;
}

/* ─── 7b. CATEGORY INTRO (SEO/AEO body copy above the recipe grid) ──── */
/* Renders the category _index.md markdown body: what defines the
   category, how to choose, technique notes. Sits inside the grid
   section's .container, above .grid-3. */
.category-intro {
  max-width: 720px;
  margin: 0 auto var(--sp-xl);
}
.category-intro > * + * {
  margin-top: var(--sp-md);
}
.category-intro p {
  font-family: var(--lato);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--charcoal);
}
.category-intro h2 {
  font-family: var(--mont);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--charcoal);
  margin-top: var(--sp-lg);
}
.category-intro a {
  color: var(--terracotta);
  text-decoration: underline;
}

/* Collapsible wrapper around .category-browse — native <details>, no JS.
   Closed by default so the pill list doesn't push the recipe grid below
   the fold on mobile; the links inside are unchanged real <a> tags and
   stay in the DOM (and crawlable) whether open or closed. */
.category-browse-toggle {
  text-align: center;
}
.category-browse-toggle summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mont);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--terracotta);
  border: 2px solid var(--terracotta);
  border-radius: 999px;
  padding: 14px 30px;
  cursor: pointer;
  list-style: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.category-browse-toggle summary::-webkit-details-marker {
  display: none;
}
.category-browse-toggle summary:hover,
.category-browse-toggle summary:focus-visible {
  background-color: var(--terracotta);
  color: #fff;
}
.category-browse-toggle summary::after {
  content: '▾';
  font-size: 0.8rem;
  color: currentColor;
  transition: transform 0.15s ease;
}
.category-browse-toggle[open] summary::after {
  transform: rotate(180deg);
}
.category-browse-toggle .category-browse {
  margin-top: var(--sp-md);
}

/* Category chip grid — /recipes/ hub only, links every category page */
.category-browse {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-sm);
}
.category-browse__item {
  text-align: center;
}
.category-browse__item {
  padding: var(--sp-sm) var(--sp-lg);
  font-family: var(--mont);
  font-weight: 700;
  color: var(--charcoal);
  text-decoration: none;
  border: var(--border-light);
  border-radius: 999px;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.category-browse__item:hover,
.category-browse__item:focus-visible {
  background-color: var(--terracotta);
  color: #fff;
}

/* ─── 9. SOCIAL LINKS SECTION ───────────────────────────────────────── */
.recipe-social {
  padding: var(--space-xl, 2.5rem) var(--space-lg, 2rem);
  background: var(--warm-cream);
  border-top: 1px solid rgba(193, 87, 58, 0.12);
}

.recipe-social__inner {
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-md, 1.25rem);
  flex-wrap: wrap;
}

.recipe-social__label {
  font-family: var(--mont);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--charcoal);
  margin: 0;
  opacity: 0.75;
}

.recipe-social__links {
  display: flex;
  gap: var(--space-sm, 0.75rem);
  flex-wrap: wrap;
}

/* ─── 10. TO-TOP BUTTON ──────────────────────────────────────────────── */
.recipe-to-top-wrap {
  position: fixed;
  right: 24px;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  z-index: 600;
  /* Hidden until brand.js's scroll listener adds .is-visible — see there
     for why: it was rendering on top of the hero/intro copy at page
     load, before there was anywhere to scroll back to. Progressive
     enhancement: if JS fails to run, this rule wins and the button
     just never appears, rather than blocking the #main-content anchor
     link underneath it (visible + no toggle would be the broken state,
     not this one). */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.recipe-to-top-wrap.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.recipe-to-top {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--terracotta);
  color: #fff;
  box-shadow: 0 8px 22px rgba(37, 40, 51, 0.28);
  transition: background var(--trans), transform var(--trans), box-shadow var(--trans);
}

.recipe-to-top:hover,
.recipe-to-top:focus-visible {
  background: #a8422a;
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(193, 87, 58, 0.4);
}

.recipe-to-top svg {
  display: block;
}

/* ─── 12. RECIPE TRANSCLUSION ────────────────────────────────────────── */
.recipe-transclude {
  border: 1px solid var(--sage);
  border-radius: 12px;
  background: var(--soft-ivory);
  padding: var(--sp-md);
  margin: var(--sp-lg) 0;
}

.recipe-transclude__inner {
  max-width: var(--max-w);
  margin: 0 auto;
}

.recipe-transclude__title {
  font-family: var(--lora);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--terracotta);
  margin: var(--sp-xs) 0 var(--sp-xs);
}

/* ─── 13. SHOP THIS RECIPE ────────────────────────────────────────────
   The standalone recipe-page "Shop This Recipe" section was removed —
   affiliate products now render only in "You Might Also Need"
   (.recipe-related-shop__*). These rules are kept because shop.html
   (built by build.mjs) still borrows .recipe-shop__de-link. */
.recipe-shop {
  padding: var(--sp-lg) var(--content-pad);
  background: var(--soft-ivory);
  border-top: 1px solid rgba(193, 87, 58, 0.12);
}

.recipe-shop__inner {
  max-width: 780px;
  margin: 0 auto;
}

.recipe-shop__heading {
  font-family: var(--lora);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--terracotta);
  margin: 0 0 var(--sp-sm);
}

.recipe-shop__list {
  list-style: none;
  margin: var(--sp-sm) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
}

.recipe-shop__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-xs);
  padding: var(--sp-xs) 0;
  border-bottom: 1px solid rgba(212, 144, 10, 0.15);
}

.recipe-shop__item-label {
  font-family: var(--mont);
  font-weight: 600;
  color: var(--charcoal);
}

.recipe-shop__item-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-xs);
}

.recipe-shop__de-link {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

/* ─── 14. AMAZON AFFILIATE DISCLOSURE (shared: recipe pages + shop.html) ─ */
.amazon-disclosure {
  font-family: var(--lato);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--charcoal);
  opacity: 0.85;
  background: var(--warm-cream);
  border-left: var(--border-terra);
  padding: var(--sp-xs) var(--sp-sm);
  margin: 0 0 var(--sp-sm);
}

.amazon-disclosure__en,
.amazon-disclosure__de {
  margin: 0 0 var(--sp-xs);
}

.amazon-disclosure__de:last-child {
  margin-bottom: 0;
}

/* Hidden by default — German-law "Werbung" wording is only relevant to
   visitors brand.js detects as European; everyone else just sees the
   English disclosure line above it, no need to show them German legal
   copy. Unhidden in brand.js's geo block, same signal used everywhere
   else region-specific content already depends on. */
.amazon-disclosure__de {
  display: none;
}

.amazon-disclosure__badge-inline {
  display: inline-block;
  font-family: var(--mont);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--charcoal);
  opacity: 0.6;
  line-height: 1.4;
}

/* ─── 15. EQUIPMENT CALLOUT (top-of-recipe, under the hero photo) ──────── */
/* ─── SHARE BAR — static share-intent links under the hero photo ───── */
.recipe-share {
  max-width: var(--max-w);
  margin: var(--sp-sm) auto 0;
  padding: 0 var(--content-pad);
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
}

.recipe-share__label {
  font-family: var(--mont);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--charcoal);
  opacity: 0.6;
}

.recipe-share__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--warm-cream);
  color: var(--charcoal);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.recipe-share__link:hover,
.recipe-share__link:focus-visible {
  background: var(--terracotta);
  color: #fff;
}

.recipe-equipment {
  max-width: var(--max-w);
  margin: var(--sp-md) auto 0;
  padding: 0 var(--content-pad);
}

.recipe-equipment__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  background: var(--warm-cream);
  border: 2px solid var(--terracotta);
  border-radius: 6px;
  padding: var(--sp-sm) var(--sp-md);
  flex-wrap: wrap;
}

.recipe-equipment__icon {
  flex: 0 0 auto;
  color: var(--terracotta);
  display: flex;
}

.recipe-equipment__body {
  flex: 1 1 220px;
}

.recipe-equipment__eyebrow {
  font-family: var(--mont);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin: 0 0 2px;
}

.recipe-equipment__name {
  font-family: var(--lora);
  font-weight: 700;
  color: var(--charcoal);
  margin: 0;
}

.recipe-equipment__cta {
  flex: 0 0 auto;
}

.recipe-equipment__disclosure {
  font-family: var(--lato);
  font-size: 0.72rem;
  color: var(--charcoal);
  opacity: 0.7;
  margin: var(--sp-xs) 0 0;
}

.recipe-equipment__disclosure a {
  color: var(--terracotta);
}

/* Hidden by default — this badge sits next to the .in link shown to
   everyone, so it must only appear for visitors brand.js detects as
   German (the bottom "Shop This Recipe" and shop.html Werbung badges
   sit directly on the actual .de link and stay unconditional). */
.recipe-equipment__werbung {
  display: none;
}

/* ─── 16. RELATED SHOP ITEMS ("You Might Also Need") ────────────────────
   Full-width clickable rows, not cards with a separate buy button — the
   whole row IS the link (better tap target on phone). Image/icon left,
   title + description + text-CTA right. Same layout at every breakpoint;
   only spacing/type scale changes at wider widths. */
.recipe-related-shop {
  padding: var(--sp-lg) var(--content-pad);
  background: var(--soft-ivory);
  border-top: 1px solid rgba(193, 87, 58, 0.12);
}

.recipe-related-shop__inner {
  max-width: 780px;
  margin: 0 auto;
}

.recipe-related-shop__heading {
  font-family: var(--lora);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--terracotta);
  margin: 0 0 var(--sp-sm);
}

.recipe-related-shop__list {
  display: flex;
  flex-direction: column;
  margin-top: var(--sp-sm);
}

.recipe-related-shop__item {
  border-bottom: 1px solid rgba(212, 144, 10, 0.15);
}

.recipe-related-shop__item:first-child {
  border-top: 1px solid rgba(212, 144, 10, 0.15);
}

.recipe-related-shop__row {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: var(--sp-sm) var(--sp-xs);
  text-decoration: none;
  color: inherit;
  transition: background 0.15s ease;
}

.recipe-related-shop__row:hover,
.recipe-related-shop__row:focus-visible {
  background: var(--warm-cream);
}

.recipe-related-shop__photo {
  flex: 0 0 auto;
  width: 128px;
  height: 128px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--warm-cream);
  display: flex;
  align-items: center;
  justify-content: center;
}

.recipe-related-shop__photo img {
  width: 100%;
  height: 100%;
  /* product shots are landscape — contain shows the whole product
     instead of cropping it to an unreadable square */
  object-fit: contain;
  padding: 6px;
}

@media (min-width: 769px) {
  .recipe-related-shop__photo {
    width: 152px;
    height: 152px;
  }
}

.recipe-related-shop__icon {
  width: 24px;
  height: 24px;
  opacity: 0.5;
  object-fit: contain;
}

.recipe-related-shop__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.recipe-related-shop__title {
  font-family: var(--mont);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--charcoal);
}

.recipe-related-shop__desc {
  font-family: var(--lato);
  font-size: 0.92rem;
  color: var(--charcoal);
  opacity: 0.75;
}

.recipe-related-shop__cta {
  font-family: var(--mont);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--terracotta);
  margin-top: 2px;
}

.recipe-related-shop__werbung {
  align-self: flex-start;
  margin-top: 2px;
}

.recipe-related-shop__view-all {
  text-align: center;
  margin-top: var(--sp-md);
}

.recipe-transclude__intro {
  margin-bottom: var(--sp-sm);
}

.recipe-transclude__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-md);
  margin-bottom: var(--sp-sm);
}

.recipe-transclude__col ul,
.recipe-transclude__col ol {
  padding-left: 1.2em;
}

.recipe-transclude__heading {
  font-family: var(--mont);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--sage);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--sp-xs);
}

/* ─── 11. RESPONSIVE BREAKPOINTS ────────────────────────────────────── */

/* Story section — sidebar stacks below content */
@media (max-width: 768px) {
  /* /recipes/ hub only (recipe-grid--hub, set in list.html when $isHub) —
     2 columns on mobile instead of brand.css's universal 1-column collapse
     for .grid-3. Scoped to this one modifier class, not .grid-3 itself,
     so every other page using .grid-3 keeps the normal 1-column mobile
     layout untouched. */
  .recipe-grid--hub {
    /* minmax(0, 1fr), not bare 1fr — without the 0 floor, a track's
       min-content (the longest unbreakable word inside it) can force
       the column wider than its fair share and push the grid past the
       viewport, which is what was happening here. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Title bar keeps its desktop padding/font-size otherwise, which is
     tuned for a full-width card, not a ~150px 2-col mobile column —
     that's what was truncating titles mid-word ("4-Ingredie..."). */
  .recipe-grid--hub .recipe-card__title-bar {
    padding: 10px 12px 8px;
    min-height: 64px;
  }

  .recipe-grid--hub .recipe-card__title-bar .t-recipe-title {
    font-size: 0.95rem;
    line-height: 1.2;
  }

  .recipe-to-top-wrap {
    right: 14px;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  }

  .recipe-story__inner {
    grid-template-columns: 1fr;
  }

  .recipe-transclude__body {
    grid-template-columns: 1fr;
  }

  .technique-card {
    grid-template-columns: 1fr;
    gap: var(--sp-md);
  }

  .technique-card__cta {
    align-self: flex-start;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.35;
  }

  .recipe-failure__item {
    grid-template-columns: 1fr;
  }

  .recipe-failure__icon {
    display: inline;
    margin-right: 6px;
  }

  .category-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-xs);
  }

  /* Compact list-row layout for category cards on mobile */
  .category-card {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    align-items: center;
    padding: var(--sp-sm) var(--sp-md);
    gap: 2px var(--sp-sm);
    border-top: none;
    border-left: 3px solid var(--terracotta);
  }

  .category-card h3.t-recipe-title {
    grid-column: 1;
    grid-row: 1;
    font-size: 1rem;
  }

  .category-card__label {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
    margin-bottom: 0;
    white-space: nowrap;
  }

  .category-card__desc {
    grid-column: 1;
    grid-row: 2;
    font-size: .8rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    opacity: .65;
  }

  .category-card__cta {
    display: none;
  }

  .recipes-preview__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Category-browse pills inherit their desktop 48px side padding and
     999px pill radius unchanged otherwise. On a narrow 2-col mobile
     column that padding leaves almost no room for text, so a multi-word
     category name wraps to 4-5 lines — and a 999px radius on that tall,
     narrow box renders as a blob/oval, not a pill. */
  .category-browse {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .category-browse__item {
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 0.85rem;
  }
}

/* Tablet: 2-column cards — only between 769px and 1100px */
@media (min-width: 769px) and (max-width: 1100px) {
  .category-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .recipes-preview__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ─── 13. FOOTER NAV — mirrors the top breadcrumb: editorial text links,
      not buttons. Same type scale / colours as .breadcrumb. ─────────── */
.recipe-footer-nav {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--sp-md) var(--content-pad);
  border-top: var(--border-light);
  font-family: var(--mont);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--charcoal);
  text-align: center;
}

.recipe-footer-nav__label {
  margin-right: 8px;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.45;
}

.recipe-footer-nav a {
  color: var(--terracotta);
  text-decoration: none;
  opacity: 0.85;
  transition: opacity var(--trans);
}

.recipe-footer-nav a:hover,
.recipe-footer-nav a:focus-visible {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.recipe-footer-nav__sep {
  margin: 0 8px;
  opacity: 0.3;
}

@media (max-width: 768px) {
  .recipe-footer-nav {
    line-height: 2.1;
  }
}

/* ─── 13. QUICK ANSWER (AEO extract block, under the H1) ─────────────── */
/* Lives inside .recipe-hero (terracotta bg, color: var(--soft-ivory)
   inherited by every other element in it — title, intro, meta). This
   block used to hardcode var(--charcoal) text on a border-left the
   exact same terracotta as its own background — invisible border, and
   dark text sitting incongruously between two light-on-dark siblings.
   Matches the hero's actual light-on-dark scheme now. */
.recipe-hero__answer {
  font-family: var(--lato);
  font-size: 1.05rem;
  line-height: 1.6;
  font-weight: 600;
  color: var(--soft-ivory);
  max-width: 62ch;
  margin: 0 0 var(--sp-sm);
  padding-left: var(--sp-md);
  border-left: 3px solid rgba(253, 246, 227, .6);
}

/* ─── 14. FREQUENTLY ASKED QUESTIONS ────────────────────────────────── */
.recipe-faq {
  background: var(--warm-cream);
}

.recipe-faq__heading {
  font-family: var(--mont);
  font-weight: 700;
  color: var(--terracotta);
  margin-bottom: var(--sp-lg);
}

.recipe-faq__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
  max-width: 780px;
  margin: 0;
}

.recipe-faq__item {
  padding-bottom: var(--sp-md);
  border-bottom: 1px solid rgba(193, 87, 58, 0.15);
}

.recipe-faq__item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.recipe-faq__q {
  font-family: var(--mont);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--charcoal);
  margin: 0 0 var(--sp-xs);
}

.recipe-faq__a {
  font-family: var(--lato);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--charcoal);
  margin: 0;
}