/* StressTherapy Solutions — homepage sections (front-page.php).
   Scoped under .sts-home. Design tokens, buttons, header, footer and the
   theme toggle all live in global.css (loaded site-wide); this file only holds
   the homepage-specific sections. */

/* section headers */
.sts-home .sts-section-head{max-width:640px;margin:0 auto 26px;text-align:center}
.sts-home .sts-section-title{font-size:clamp(26px,4vw,36px);font-weight:800;letter-spacing:-.02em;margin:.35em 0 .3em;color:var(--ink)}
.sts-home .sts-section-lede{color:var(--ink-soft);font-size:17px;margin:0}

/* hero */
.sts-hero{background:radial-gradient(120% 120% at 15% 0%,var(--surface),var(--surface-2));border-bottom:1px solid var(--line)}
.sts-hero-inner{padding-block:clamp(44px,8vw,88px);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,5vw,52px);align-items:center}
.sts-hero-text{max-width:640px}
.sts-hero-media img{width:100%;height:auto;border-radius:18px;box-shadow:0 1px 2px rgba(22,29,24,.06),0 34px 64px -34px rgba(27,82,51,.55)}

/* ---- hero carousel -------------------------------------------------------
   Slides are mixed shapes — landscape photographs and a square brand mark — so
   the frame holds one fixed aspect and each slide fits inside it. Letting the
   frame follow the image would make the whole page jump on every advance. */
.sts-hero-carousel{position:relative;border-radius:18px;overflow:hidden;
  box-shadow:0 1px 2px rgba(22,29,24,.06),0 34px 64px -34px rgba(27,82,51,.55)}
.sts-hero-carousel .sts-carousel-slide{aspect-ratio:1200/614;background:var(--surface-2)}
.sts-hero-carousel .sts-carousel-slide img{width:100%;height:100%;object-fit:cover;
  object-position:50% 35%;border-radius:0;box-shadow:none}
/* The brand mark is artwork, not a photograph: it gets air around it and is never
   cropped, which is what `cover` would do to a square in a landscape frame. */
.sts-hero-carousel .sts-carousel-slide.is-brand{
  background:radial-gradient(120% 120% at 50% 12%,var(--surface),var(--surface-2));
  display:flex;align-items:center;justify-content:center}
.sts-hero-carousel .sts-carousel-slide.is-brand img{width:auto;height:86%;object-fit:contain;padding:12px}
@media (max-width:860px){.sts-hero-carousel .sts-carousel-slide.is-brand img{height:78%}}
.sts-hero-title{font-size:clamp(32px,5vw,52px);line-height:1.06;font-weight:800;letter-spacing:-.025em;margin:.35em 0 .45em;color:var(--ink)}
.sts-hero-sub{font-size:clamp(17px,2.4vw,20px);color:var(--ink-soft);max-width:56ch;margin:0 0 30px}
.sts-hero-cta{display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:860px){.sts-hero-inner{grid-template-columns:1fr}.sts-hero-text{max-width:none}}

/* two feature cards */
.sts-duo{display:grid;gap:20px;padding-block:clamp(40px,7vw,72px)}
.sts-card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:28px;box-shadow:0 1px 2px rgba(22,29,24,.04),0 18px 40px -26px rgba(27,82,51,.28)}
.sts-card-feature h2{font-size:23px;font-weight:800;letter-spacing:-.01em;margin:.5em 0 .4em;color:var(--ink)}
.sts-card-feature p{color:var(--ink-soft);margin:0 0 18px}
.sts-card-tag{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--green);background:var(--surface-2);padding:5px 11px;border-radius:999px}

/* frequency explorer section */
.sts-freq-section{background:linear-gradient(180deg,var(--ground),var(--surface-2));padding-block:clamp(48px,8vw,80px)}
.sts-freq-section .sts-freqx{max-width:760px;margin-inline:auto}
.sts-freq-foot{text-align:center;color:var(--ink-faint);font-size:14px;margin:18px auto 0;max-width:60ch}

/* upcoming workshops */
.sts-upcoming-section{padding-block:clamp(40px,7vw,72px)}

/* instructor highlight */
.sts-instructors-section{padding-block:clamp(40px,7vw,72px)}
.sts-instructors-more{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;text-align:center;margin-top:30px}
/* the tally link sits under the two buttons rather than beside them */
.sts-instructors-more .sts-votes-link{flex-basis:100%}

/* homepage testimonials revolver */
.sts-home-ts{padding-block:clamp(40px,7vw,72px)}

/* value props */
.sts-values{display:grid;gap:22px;padding-block:clamp(40px,7vw,72px)}
.sts-value h3{font-size:18px;font-weight:800;margin:0 0 .4em;color:var(--ink)}
.sts-value h3::before{content:"";display:block;width:34px;height:3px;border-radius:3px;background:var(--green);margin-bottom:14px}
.sts-value p{color:var(--ink-soft);margin:0}

/* CTA band */
.sts-cta-band{background:linear-gradient(120deg,var(--green-deep),var(--green));color:#fff}
.sts-cta-inner{text-align:center;padding-block:clamp(48px,8vw,80px)}
.sts-cta-inner h2{font-size:clamp(26px,4vw,38px);font-weight:800;letter-spacing:-.02em;margin:0 0 .3em;color:inherit}
.sts-cta-inner p{font-size:18px;opacity:.9;margin:0 0 26px}
.sts-cta-inner .sts-hero-cta{justify-content:center}
.sts-cta-band .sts-btn-solid{background:#fff;color:var(--green-deep)}
.sts-cta-band .sts-btn-solid:hover{background:var(--surface-2)}

/* ---- desktop ---- */
@media (min-width:720px){
  .sts-duo{grid-template-columns:1fr 1fr}
  .sts-values{grid-template-columns:repeat(3,1fr)}
}

/* ---- dark mode (site-wide tokens come from global.css) — homepage tweaks ---- */
:root[data-theme="dark"] .sts-home .sts-cta-band{color:#0f1611}
:root[data-theme="dark"] .sts-home .sts-cta-band .sts-btn-solid{background:#0f1611;color:#eef4ef}
/* CTA band flips to light-green in dark → ghost button needs dark ink/border */
:root[data-theme="dark"] .sts-home .sts-cta-band .sts-btn-on-dark{color:#12261b;border-color:rgba(18,38,27,.55)}
:root[data-theme="dark"] .sts-home .sts-cta-band .sts-btn-on-dark:hover{border-color:#12261b;background:rgba(18,38,27,.1)}