/*
 *  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)
 */

/* ─── 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;
}

/* ─── 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;
}

.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) {
  .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);
  }
}

/* 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;
  }
}