/* =============================================================
   atmosphere.css — Mediterranean warmth, cookbook editorial feel
   Texture, depth, ingredient illustrations. GPU-cheap.
   ============================================================= */

/* Parchment grain — extremely subtle (tuned down in v1.3 per feedback: "editorial warmth, not vintage scrapbook") */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:
    radial-gradient(circle at 17% 11%, rgba(107,66,38,.010) 0 .5px, transparent 1.5px),
    radial-gradient(circle at 73% 31%, rgba(107,66,38,.008) 0 .5px, transparent 1.5px),
    radial-gradient(circle at 41% 73%, rgba(107,66,38,.012) 0 .5px, transparent 1.5px);
  background-size: 280px 280px, 360px 360px, 240px 240px;
  background-position: 0 0, 80px 40px, 160px 120px;
  opacity:.55;
}
/* Mobile: kill grain entirely — keeps things crisp on small screens */
@media (max-width: 700px){ body::before{ display:none } }

/* Warm light vignette — only on hero now, softer */
.sbt-hero::after{
  content:"";
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 40% 30% at 0% 100%, rgba(244,162,97,.06), transparent 60%),
    radial-gradient(ellipse 40% 30% at 100% 0%, rgba(149,213,178,.05), transparent 60%);
  mix-blend-mode: multiply;
}
.sbt-hero, .sbt-section--lg{ position:relative; }

/* Card depth layers — give cards a real cookbook stack feel */
.sbt-card{
  background:
    linear-gradient(180deg, rgba(255,247,236,0) 0%, rgba(149,213,178,.04) 100%),
    #ffffff;
  border:1px solid rgba(107,66,38,.06);
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 6px 16px -8px rgba(20,36,28,.18),
    0 2px 6px rgba(20,36,28,.06);
}
.sbt-card:hover{
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 20px 40px -16px rgba(20,36,28,.22),
    0 6px 12px rgba(20,36,28,.08);
  border-color: rgba(244,162,97,.35);
}

/* Photographs sit slightly raised inside cards */
.sbt-card__media{
  position:relative;
  border-bottom:1px solid rgba(107,66,38,.08);
}
.sbt-card__media::after{
  content:""; position:absolute; inset:auto 0 0 0; height:24px;
  background:linear-gradient(180deg, rgba(20,36,28,0) 0%, rgba(20,36,28,.06) 100%);
  pointer-events:none;
}

/* Editorial section dividers — botanical mark instead of plain rule */
.sbt-section + .sbt-section{ position:relative; }
.sbt-section + .sbt-section::before{
  content:""; display:block; height:2px; width:48px;
  margin:0 auto var(--sbt-space-6);
  background:linear-gradient(90deg, transparent, var(--sbt-spice) 50%, transparent);
  opacity:.45;
}

/* Section-head eyebrow gets a leaf flourish */
.sbt-section-head .sbt-eyebrow::before{
  content:"❦"; margin-right:.5em; color:var(--sbt-spice); font-size:.8em;
}

/* Hero gets a layered warm-light gradient */
.sbt-hero{
  background:
    radial-gradient(ellipse 60% 50% at 20% 80%, rgba(149,213,178,.32) 0%, transparent 65%),
    radial-gradient(ellipse 70% 60% at 78% 22%, rgba(244,162,97,.28) 0%, transparent 60%),
    radial-gradient(ellipse 100% 80% at 50% 50%, rgba(255,247,236,1) 0%, rgba(243,239,230,.92) 90%);
}

/* Headings get an editorial swash via tiny olive accent on first letter */
.sbt-recipe__hero h1::first-letter,
.sbt-section-head h2::first-letter{
  color:var(--sbt-basil);
  font-style:normal;
}

/* Premium card: recipe meta pills get warmer hue */
.sbt-meta-pills li{
  background:linear-gradient(180deg, #fff 0%, var(--sbt-mist) 100%);
  border:1px solid rgba(107,66,38,.08);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset;
}

/* Tool result panel — glass + warmth */
.sbt-tool__result{
  background:
    linear-gradient(135deg, rgba(255,247,236,.85) 0%, rgba(149,213,178,.18) 100%),
    radial-gradient(circle at 90% 10%, rgba(244,162,97,.10), transparent 40%);
  backdrop-filter: blur(2px);
  border:1px solid rgba(149,213,178,.35);
}

/* Buttons get subtle two-tone fill */
.sbt-btn--primary{
  background:linear-gradient(180deg, #f6b27a 0%, var(--sbt-spice) 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.45) inset, 0 6px 12px -6px rgba(244,162,97,.5);
}
.sbt-btn--secondary{
  background:linear-gradient(180deg, var(--sbt-herb) 0%, var(--sbt-basil) 100%);
}

/* Newsletter section gains depth */
.sbt-newsletter{
  background:
    radial-gradient(circle at 0% 0%, rgba(244,162,97,.22), transparent 50%),
    linear-gradient(135deg, var(--sbt-basil) 0%, var(--sbt-herb) 100%);
  position:relative; overflow:hidden;
}
.sbt-newsletter::after{
  content:""; position:absolute; right:-40px; bottom:-40px; width:240px; height:240px;
  background:radial-gradient(circle, rgba(149,213,178,.18), transparent 70%);
  pointer-events:none;
}

/* Print: kill all of the above */
@media print{
  body::before, .sbt-hero::after, .sbt-section + .sbt-section::before{ display:none !important }
  .sbt-card{ background:#fff !important; box-shadow:none !important; border:1px solid #ccc !important }
}

/* Reduced motion: kill animated atmosphere */
@media (prefers-reduced-motion: reduce){
  body::before{ animation:none }
}