/* =============================================================
   homepage.css — front-page modules
   ============================================================= */

/* Hero */
.sbt-hero{
  position:relative; overflow:hidden;
  padding:var(--sbt-space-9) 0 var(--sbt-space-8);
  background:
    radial-gradient(ellipse 70% 60% at 70% 20%, color-mix(in srgb, var(--sbt-spice) 25%, transparent) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 20% 80%, color-mix(in srgb, var(--sbt-sage) 30%, transparent) 0%, transparent 65%),
    linear-gradient(180deg, var(--sbt-cream) 0%, color-mix(in srgb, var(--sbt-cream) 80%, var(--sbt-mist)) 100%);
}
.sbt-hero__inner{ position:relative; display:grid; grid-template-columns:1.15fr .85fr; gap:var(--sbt-space-7); align-items:center; min-height:60vh }
@media (max-width: 900px){ .sbt-hero__inner{ grid-template-columns:1fr; min-height:auto } }

.sbt-hero__copy h1{
  font-family:var(--sbt-font-display); font-weight:700;
  font-size:clamp(2.5rem, 1.4rem + 4.2vw, 5rem);
  line-height:1.05; letter-spacing:-.02em; color:var(--sbt-basil); margin-bottom:var(--sbt-space-4);
}
.sbt-hero__sub{ font-family:var(--sbt-font-editorial); font-size:clamp(1.1rem, .8rem + 1vw, 1.5rem); color:color-mix(in srgb, var(--sbt-ink) 80%, transparent); max-width:55ch; margin-bottom:var(--sbt-space-5) }

.sbt-hero__ctas{ display:flex; gap:var(--sbt-space-3); flex-wrap:wrap; margin-bottom:var(--sbt-space-5) }

.sbt-hero__chips{ display:flex; flex-wrap:wrap; gap:.5em; margin-bottom:var(--sbt-space-5) }
.sbt-hero__chips a{
  display:inline-flex; align-items:center; padding:.45em 1em;
  background:color-mix(in srgb, #fff 60%, transparent); border:1px solid color-mix(in srgb, var(--sbt-rustic) 18%, transparent);
  border-radius:var(--sbt-radius-pill); font-size:.85rem; font-weight:500; color:var(--sbt-basil); text-decoration:none;
  backdrop-filter:blur(6px); transition:all var(--sbt-dur-1) var(--sbt-ease);
}
.sbt-hero__chips a:hover{ background:var(--sbt-basil); color:var(--sbt-cream); transform:translateY(-1px) }

.sbt-hero__visual{
  position:relative; aspect-ratio:4/5; border-radius:var(--sbt-radius-lg); overflow:hidden;
  background:linear-gradient(135deg, var(--sbt-herb) 0%, var(--sbt-basil) 60%, var(--sbt-rustic) 100%);
  box-shadow:var(--sbt-shadow-3);
}
.sbt-hero__visual img{ width:100%; height:100%; object-fit:cover }
.sbt-hero__visual::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--sbt-spice) 18%, transparent), transparent 50%);
  pointer-events:none;
}

/* Floating herb particles */
.sbt-particles{ position:absolute; inset:0; pointer-events:none; overflow:hidden }
.sbt-particle{
  position:absolute; width:32px; height:32px; opacity:.35; will-change:transform;
  animation:sbt-drift 18s linear infinite;
}
.sbt-particle:nth-child(1){ top:10%; left:8%;  animation-delay:0s }
.sbt-particle:nth-child(2){ top:60%; left:80%; animation-delay:-3s; animation-duration:22s }
.sbt-particle:nth-child(3){ top:30%; left:65%; animation-delay:-7s; animation-duration:20s }
.sbt-particle:nth-child(4){ top:75%; left:18%; animation-delay:-12s; animation-duration:24s }
.sbt-particle:nth-child(5){ top:45%; left:42%; animation-delay:-9s; animation-duration:19s }
.sbt-particle:nth-child(6){ top:20%; left:90%; animation-delay:-5s; animation-duration:25s }
@keyframes sbt-drift{
  0%   { transform:translate3d(0,0,0) rotate(0deg) }
  50%  { transform:translate3d(20px,-30px,0) rotate(180deg) }
  100% { transform:translate3d(0,0,0) rotate(360deg) }
}
@media (prefers-reduced-motion: reduce){ .sbt-particle{ animation:none; opacity:0 } }

/* Editor's picks grid */
.sbt-picks{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--sbt-space-5) }
@media (max-width: 1000px){ .sbt-picks{ grid-template-columns:repeat(2, minmax(0,1fr)) } }
@media (max-width: 600px){ .sbt-picks{ grid-template-columns:1fr } }

/* Archetype grid */
.sbt-archetypes{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--sbt-space-4) }
@media (max-width: 1000px){ .sbt-archetypes{ grid-template-columns:repeat(3, minmax(0,1fr)) } }
@media (max-width: 700px){ .sbt-archetypes{ display:flex; overflow-x:auto; gap:var(--sbt-space-3); scroll-snap-type:x mandatory; padding-bottom:var(--sbt-space-3); margin:0 calc(-1 * var(--sbt-gutter-mob)); padding:0 var(--sbt-gutter-mob) var(--sbt-space-3) } }
@media (max-width: 700px){ .sbt-archetypes .sbt-archetype{ flex:0 0 220px; scroll-snap-align:start } }

.sbt-archetype{
  background:#fff; border-radius:var(--sbt-radius-md); padding:var(--sbt-space-4);
  display:flex; flex-direction:column; gap:.55em; box-shadow:var(--sbt-shadow-1);
  border:1px solid color-mix(in srgb, var(--sbt-rustic) 8%, transparent);
  transition:transform var(--sbt-dur-1) var(--sbt-ease), box-shadow var(--sbt-dur-1) var(--sbt-ease);
}
.sbt-archetype:hover{ transform:translateY(-2px); box-shadow:var(--sbt-shadow-2); border-color:color-mix(in srgb, var(--sbt-spice) 40%, transparent) }
.sbt-archetype__icon{
  width:44px; height:44px; border-radius:var(--sbt-radius-pill);
  background:color-mix(in srgb, var(--sbt-sage) 35%, transparent);
  display:inline-flex; align-items:center; justify-content:center; color:var(--sbt-basil); font-size:1.3rem;
}
.sbt-archetype__title{ font-family:var(--sbt-font-display); font-size:1.05rem; font-weight:700; color:var(--sbt-basil); margin:0 }
.sbt-archetype__cuisine{ font-size:.78rem; color:var(--sbt-rustic); text-transform:uppercase; letter-spacing:.08em }
.sbt-archetype__blurb{ font-size:.88rem; color:color-mix(in srgb, var(--sbt-ink) 75%, transparent); margin:0 }

/* Tool teaser */
.sbt-teaser{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--sbt-space-6); align-items:center;
  background:#fff; border-radius:var(--sbt-radius-lg); padding:var(--sbt-space-6);
  box-shadow:var(--sbt-shadow-2);
}
.sbt-teaser--reverse{ direction:rtl }
.sbt-teaser--reverse > *{ direction:ltr }
@media (max-width: 800px){ .sbt-teaser{ grid-template-columns:1fr } }

.sbt-teaser__copy h3{ font-size:clamp(1.5rem, 1.1rem + 1vw, 2.25rem); margin-bottom:var(--sbt-space-3) }
.sbt-teaser__copy p{ font-family:var(--sbt-font-editorial); font-size:1.1rem; color:color-mix(in srgb, var(--sbt-ink) 80%, transparent); margin-bottom:var(--sbt-space-4) }

.sbt-teaser__preview{
  background:linear-gradient(135deg, var(--sbt-mist) 0%, color-mix(in srgb, var(--sbt-sage) 25%, transparent) 100%);
  border-radius:var(--sbt-radius-md); padding:var(--sbt-space-5); min-height:240px;
  display:flex; flex-direction:column; gap:var(--sbt-space-3);
  border:1px solid color-mix(in srgb, var(--sbt-rustic) 8%, transparent);
}

/* Gear database mini */
.sbt-gear-db{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--sbt-space-4) }
@media (max-width: 900px){ .sbt-gear-db{ grid-template-columns:repeat(2, minmax(0,1fr)) } }
@media (max-width: 560px){ .sbt-gear-db{ grid-template-columns:1fr } }

.sbt-cat-chips{ display:flex; gap:var(--sbt-space-2); flex-wrap:wrap; justify-content:center; margin-bottom:var(--sbt-space-5) }

/* Newsletter */
.sbt-newsletter{
  background:linear-gradient(135deg, var(--sbt-basil) 0%, var(--sbt-herb) 100%);
  color:var(--sbt-cream); padding:var(--sbt-space-8) var(--sbt-space-6);
  border-radius:var(--sbt-radius-lg); text-align:center;
}
.sbt-newsletter h2{ color:var(--sbt-cream) }
.sbt-newsletter p{ color:color-mix(in srgb, var(--sbt-cream) 90%, transparent); max-width:50ch; margin:0 auto var(--sbt-space-5) }
.sbt-newsletter__form{
  display:flex; gap:var(--sbt-space-2); max-width:480px; margin:0 auto; flex-wrap:wrap;
}
.sbt-newsletter__form input{ flex:1 1 220px; padding:.85em 1em; border-radius:var(--sbt-radius-pill); border:0 }

/* Editorial trust */
.sbt-trust-section{
  background:var(--sbt-mist); padding:var(--sbt-space-7); border-radius:var(--sbt-radius-lg);
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:var(--sbt-space-5);
}
@media (max-width: 800px){ .sbt-trust-section{ grid-template-columns:1fr } }
.sbt-trust-section h4{ color:var(--sbt-basil); margin-bottom:.3em }

/* Featured image fallback */
.sbt-card__media--ph{
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--sbt-herb) 30%, transparent), color-mix(in srgb, var(--sbt-spice) 25%, transparent)),
    var(--sbt-mist);
}

/* Homepage emotional pacing — bigger gaps between phases of the page */
.sbt-homepage > section{ padding-block:var(--sbt-space-8) }
@media (min-width: 900px){
  .sbt-homepage > section{ padding-block:var(--sbt-space-9) }
}

/* Identity-phase modules get a slightly denser rhythm to feel like one experience */
.sbt-homepage > section:nth-of-type(3),
.sbt-homepage > section:nth-of-type(4),
.sbt-homepage > section:nth-of-type(5){ padding-block:var(--sbt-space-7) }

/* Tool-teaser modules get a calmer background pattern */
.sbt-homepage > section:nth-of-type(odd) .sbt-teaser{ background:#fff }
.sbt-homepage > section:nth-of-type(even) .sbt-teaser{ background:linear-gradient(135deg, #fff 0%, color-mix(in srgb, var(--sbt-sage) 8%, #fff) 100%) }

/* ----------------------------------------------------------------
   Affinity strip — v1.6 unified personalization surface.
   Replaces mode-switcher + continue-journey + welcome pill.
   ONE component. ONE narration. ONE place to nudge the lean.
   ---------------------------------------------------------------- */
.sbt-affinity{
  padding:var(--sbt-space-5) 0 var(--sbt-space-3);
  background:
    radial-gradient(ellipse 60% 80% at 80% 50%, color-mix(in srgb, var(--sbt-spice) 6%, transparent), transparent 60%),
    linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--sbt-mist) 50%, transparent) 100%);
  position:sticky; top:64px; z-index:30;
  backdrop-filter:saturate(140%) blur(8px); -webkit-backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid color-mix(in srgb, var(--sbt-rustic) 8%, transparent);
}
.sbt-affinity__inner{
  display:grid; grid-template-columns: 1fr auto; gap:var(--sbt-space-5);
  max-width:1080px; margin:0 auto; align-items:center;
}
.sbt-affinity__primary{ min-width:0 }
.sbt-affinity__headline{
  font-family:var(--sbt-font-display); font-size:1.15rem; font-weight:700;
  color:var(--sbt-basil); margin:0 0 .15em; line-height:1.2; letter-spacing:-0.005em;
}
.sbt-affinity__sentence{
  font-size:.88rem; color:var(--sbt-rustic); margin:0 0 .5em;
}
.sbt-affinity__meter{ display:flex; align-items:center; gap:.7em }
.sbt-affinity__meter-bar{
  flex:1; max-width:240px; height:5px;
  background:rgba(20,36,28,.06); border-radius:999px; overflow:hidden; position:relative;
}
.sbt-affinity__meter-bar > span{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg, var(--sbt-sage), var(--sbt-spice));
  border-radius:999px; transition:width .5s var(--sbt-ease);
}
.sbt-affinity__meter-label{
  font-size:.75rem; color:var(--sbt-rustic); font-weight:600;
  text-transform:uppercase; letter-spacing:.06em;
}
.sbt-affinity__lean{
  display:flex; gap:2px; padding:3px;
  background:#fff; border-radius:999px;
  border:1px solid rgba(107,66,38,.10); box-shadow:var(--sbt-shadow-1);
}
.sbt-affinity__lean-btn{
  position:relative; padding:.5em 1.1em; min-width:90px;
  border-radius:999px; cursor:pointer; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  color:var(--sbt-rustic); transition:color var(--sbt-dur-1) var(--sbt-ease);
}
.sbt-affinity__lean-btn:hover{ color:var(--sbt-basil) }
.sbt-affinity__lean-btn.is-dominant{
  color:var(--sbt-cream);
  background:linear-gradient(180deg, var(--sbt-herb) 0%, var(--sbt-basil) 100%);
}
.sbt-affinity__lean-label{ font-family:var(--sbt-font-tool); font-weight:600; font-size:.82rem; letter-spacing:.02em }
.sbt-affinity__lean-weight{
  display:block; height:2px; width:0%;
  background:var(--sbt-spice); border-radius:999px;
  transition:width var(--sbt-dur-2) var(--sbt-ease);
}
.sbt-affinity__lean-btn.is-dominant .sbt-affinity__lean-weight{ background:var(--sbt-cream); opacity:.6 }
.sbt-affinity__details{ grid-column:1 / -1; margin-top:.3em }
.sbt-affinity__details summary{
  cursor:pointer; display:inline-flex; align-items:center; gap:.4em;
  font-size:.78rem; color:var(--sbt-rustic); font-weight:500;
  padding:.25em .6em; border-radius:var(--sbt-radius-sm); list-style:none;
}
.sbt-affinity__details summary::-webkit-details-marker{ display:none }
.sbt-affinity__details summary::before{
  content:"▸"; transition:transform var(--sbt-dur-1) var(--sbt-ease); color:var(--sbt-spice);
}
.sbt-affinity__details[open] summary::before{ transform:rotate(90deg) }
.sbt-affinity__details summary:hover{ color:var(--sbt-basil); background:rgba(107,66,38,.04) }
.sbt-affinity__what{
  margin-top:.6em; padding:.9em 1.1em;
  background:#fff; border:1px solid rgba(107,66,38,.08);
  border-radius:var(--sbt-radius-md); font-size:.85rem;
}
.sbt-affinity__what-lead{
  margin:0 0 .6em; font-size:.78rem; color:var(--sbt-rustic);
  padding-bottom:.5em; border-bottom:1px dashed rgba(107,66,38,.15);
}
.sbt-affinity__what-list{ list-style:none; padding:0; margin:0; display:grid; gap:.35em }
.sbt-affinity__what-list strong{ color:var(--sbt-basil); margin-right:.3em }
.sbt-affinity__what-empty{ margin:0; color:var(--sbt-rustic); font-style:italic }
.sbt-affinity__what-note{
  margin:.7em 0 0; padding-top:.5em; border-top:1px dashed rgba(107,66,38,.15);
  font-size:.78rem; color:var(--sbt-rustic);
}
.sbt-affinity__what-note a{ color:var(--sbt-basil); font-weight:600 }
.sbt-affinity[data-tone="curious"]{   border-bottom-color:rgba(149,213,178,.35) }
.sbt-affinity[data-tone="attentive"]{ border-bottom-color:rgba(244,162,97,.30) }
.sbt-affinity[data-tone="familiar"]{  border-bottom-color:rgba(45,106,79,.30) }
@media (max-width: 800px){
  .sbt-affinity{ top:56px; padding:var(--sbt-space-3) 0 }
  .sbt-affinity__inner{ grid-template-columns:1fr; gap:var(--sbt-space-3); align-items:start }
  .sbt-affinity__lean{ width:100%; justify-content:space-between }
  .sbt-affinity__lean-btn{ flex:1 }
  .sbt-affinity__headline{ font-size:1rem }
}

/* Legacy mode-switcher — kept for back-compat if a customizer order still references it. */
.sbt-modeswitch{
  padding:var(--sbt-space-5) 0 var(--sbt-space-3);
  background:linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--sbt-mist) 60%, transparent) 100%);
  position:sticky; top:64px; z-index:30;
  backdrop-filter:saturate(140%) blur(8px); -webkit-backdrop-filter:saturate(140%) blur(8px);
}
.sbt-modeswitch__inner{
  display:flex; gap:.5em; max-width:680px; margin:0 auto;
  background:#fff; border:1px solid rgba(107,66,38,.10); padding:.4em;
  border-radius:var(--sbt-radius-pill);
  box-shadow:var(--sbt-shadow-1);
}
.sbt-modeswitch__btn{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:.55em .8em; border-radius:999px; color:var(--sbt-rustic);
  transition: background var(--sbt-dur-1) var(--sbt-ease), color var(--sbt-dur-1) var(--sbt-ease);
  cursor:pointer; gap:1px;
}
.sbt-modeswitch__btn:hover{ background:color-mix(in srgb, var(--sbt-mist) 60%, transparent) }
.sbt-modeswitch__btn.is-active{
  background:linear-gradient(180deg, var(--sbt-herb) 0%, var(--sbt-basil) 100%);
  color:var(--sbt-cream);
  box-shadow:var(--sbt-shadow-1);
}
.sbt-modeswitch__icon{ font-size:1rem; line-height:1 }
.sbt-modeswitch__label{ font-family:var(--sbt-font-tool); font-weight:600; font-size:.92rem }
.sbt-modeswitch__sub{ font-size:.7rem; opacity:.85; font-weight:500 }
.sbt-modeswitch__hint{
  text-align:center; max-width:560px; margin:.8rem auto 0;
  font-size:.85rem; color:var(--sbt-rustic); font-style:italic;
}
@media (max-width: 600px){
  .sbt-modeswitch{ top:56px; padding:var(--sbt-space-3) 0 var(--sbt-space-2) }
  .sbt-modeswitch__sub{ display:none }
  .sbt-modeswitch__hint{ display:none }
}

/* Recommendation explainability — primary + secondary ranked */
.sbt-because{
  font-size:.82rem; color:var(--sbt-basil); font-style:normal;
  margin-top:.4em; padding-left:1.2em; position:relative;
  line-height:1.4;
}
.sbt-because::before{
  content:"❦"; position:absolute; left:0; top:0; color:var(--sbt-spice); font-style:normal;
}
.sbt-because strong{ font-weight:600; color:var(--sbt-basil) }
.sbt-because__sub{ color:var(--sbt-rustic); font-style:italic; font-size:.96em }

/* Soft-mode dimming — modules that don't fit the current emphasis fade gently */
[data-sbt-module]{ transition: opacity .35s cubic-bezier(.2,.7,.2,1) }
[data-sbt-module].is-dim{ /* additional CSS hook if we want filter or border tweaks */ }

/* Phase divider — pure visual rhythm between emotional phases */
.sbt-phase-divider{
  height:var(--sbt-space-4);
  position:relative;
}
.sbt-phase-divider::after{
  content:""; display:block;
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:64px; height:1px;
  background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--sbt-rustic) 30%, transparent), transparent);
}