/* ============================================================
   product.html — page-specific styles
   Reuses tokens/classes from styles.css; only new layout lives here.
   ============================================================ */

/* ---------- SECTION 1 — PRODUCT HERO ---------- */
.sec-product-hero{ padding: 80px var(--pad-desktop); }
/* fr units, not percentages — percentages resolve against the full grid
   width and ignore `gap`, so "60% 40%" plus a 60px gap overflowed the grid's
   own right edge by exactly 60px. `fr` correctly subtracts the gap first,
   then splits what's left 3:2 (same 60/40 ratio). */
.product-hero-grid{ display:grid; grid-template-columns: 3fr 2fr; gap: 60px; align-items:start; }

.gallery-main{ border-radius: 20px; overflow:hidden; margin-bottom: 20px; background: var(--bg-cream); }
.gallery-main img{ width:100%; height:auto; border-radius:20px; }
.gallery-thumbs{ display:flex; gap: 16px; }
.gallery-thumb{
  flex:1; border-radius: 14px; overflow:hidden; border: 2px solid transparent;
  background:none; padding:0; cursor:pointer; transition: border-color .2s;
}
.gallery-thumb img{ width:100%; height:180px; object-fit:cover; display:block; }
.gallery-thumb.is-active{ border-color: var(--secondary); }

.product-hero-info{ display:flex; flex-direction:column; gap: 4px; }
.product-hero-info .h2-heading{ margin-bottom: 8px; }
.price{ font-family: var(--font-display); font-size: clamp(30px,3vw,40px); font-weight:700; color: var(--secondary); margin: 0 0 20px; }
.price-currency{ font-size: 0.5em; font-weight:600; margin-right:4px; }
.product-hero-desc{ margin-bottom: 8px; }

.feature-list{ display:flex; flex-direction:column; gap: 14px; margin: 0 0 32px; }
.feature-list li{ display:flex; align-items:flex-start; gap: 12px; font-family: var(--font-body); font-size: clamp(15px,1.1vw,17px); color: var(--text); }
.feature-list li i{ color: var(--success); margin-top: 4px; flex-shrink:0; }
.product-hero-buttons{ display:flex; flex-wrap:wrap; gap: 16px; }
.btn-outline-dark{ background: transparent; color: var(--secondary); border: 1px solid var(--secondary); border-radius: 20px; }
.btn-outline-dark:hover{ background: var(--secondary); color: var(--white); }

.hero-trust{ display:flex; flex-wrap:wrap; gap: 12px; margin-top: 22px; }
.trust-badge{
  display:inline-flex; align-items:center; gap: 8px;
  font-family: var(--font-body); font-size: 13.5px; color: var(--secondary);
  background: rgba(93,137,182,0.08); border: 1px solid rgba(93,137,182,0.25);
  border-radius: 20px; padding: 8px 14px;
}
.trust-badge i{ font-size: 12px; }

/* .sticky-col (styles.css) only drops to static at 720px; this page's own
   grid already stacks to a single column at 1024px, so extend the static
   override to match — otherwise 721–1024px gets a sticky info block with
   no second column to scroll against. */
@media (max-width: 1024px){
  .product-hero-info.sticky-col{ position: static; }
}

/* ---------- SECTION 2 — WHAT YOU GET ---------- */
.sec-wyg{ padding: 80px var(--pad-desktop); background: var(--bg-cream); }
.wyg-head{ text-align:center; margin-bottom: 48px; }
.wyg-head .h2-heading, .wyg-head .body-copy{ text-align:center; }

.wyg-card{
  background: var(--white); border: 1px solid #EEEEEE; border-radius: 20px;
  padding: 40px 28px; text-align:center; display:flex; flex-direction:column; align-items:center; gap: 8px;
  transition: box-shadow .2s;
}
.wyg-card:hover{ box-shadow: 0 12px 30px -20px rgba(0,0,0,0.2); }
.wyg-icon{ width: auto; height: 52px; max-width: 90px; object-fit: contain; margin-bottom: 12px; }
.wyg-card .h3-heading{ font-size: clamp(20px,1.6vw,24px); margin-bottom: 6px; }

.wyg-carousel{ display:flex; align-items:center; gap:18px; }
.wyg-track{
  display:flex; gap:24px; flex:1; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:4px 4px 12px; scrollbar-width:none;
}
.wyg-track::-webkit-scrollbar{ display:none; }
.wyg-track .wyg-card{ flex:0 0 clamp(220px, 26vw, 300px); scroll-snap-align:start; }

.wyg-nav{
  flex-shrink:0; width:48px; height:48px; border-radius:50%;
  background: var(--white); border:1px solid #EEEEEE; display:flex; align-items:center; justify-content:center;
  cursor:pointer; color: var(--secondary); font-size:15px;
  transition: background .2s, color .2s, opacity .2s;
}
.wyg-nav:hover:not(:disabled){ background: var(--secondary); color: var(--white); }
.wyg-nav:disabled{ opacity:.35; cursor:default; }

/* ---------- SECTION 4 — DAILY FLOW ---------- */
.flow-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:40px; }

/* ---------- SECTION 5 — THIS IS FOR YOU IF ---------- */
.sec-for-you{ padding: 80px var(--pad-desktop); }
.for-you-pin-wrap{
  position: relative;
  height: 600vh; /* headline + 5 statements = 6 steps x 100vh of scroll travel */
}
.for-you-pin{
  position: sticky; top: 0; height: 100vh;
  display: flex; align-items:center; justify-content:center;
  overflow: hidden;
}
.for-you-step{
  position: absolute; inset: 0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px;
  text-align:center; padding: 0 var(--pad-desktop);
  opacity: 0; transform: translateY(28px);
  transition: opacity .6s ease, transform .6s ease;
}
.for-you-step.is-active{ opacity:1; transform:none; }
.for-you-step.in-view{ opacity:1; transform:none; }
.for-you-step-mark{
  font-family: var(--font-body); font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  color: var(--secondary); font-weight:600;
}
.for-you-step p{
  font-family: var(--font-display); font-weight:700; color: var(--text);
  font-size: clamp(28px, 4.4vw, 54px); line-height:1.25; max-width:900px; margin:0;
}
.for-you-step--final p{ color: var(--secondary); }
.for-you-step--headline .h2-heading{
  text-align:center; margin:0;
  font-size: clamp(36px, 6vw, 72px);
}

.for-you-progress{
  position:absolute; bottom: 48px; left:50%; transform:translateX(-50%);
  display:flex; gap:8px; z-index:1;
}
.for-you-progress span{ width:28px; height:4px; border-radius:2px; background:#DDD; transition: background .3s; }
.for-you-progress span.is-active{ background: var(--secondary); }

/* ---------- SECTION 6 — FAQ ----------
   Divider lightened from --text (read too heavy as a border color),
   tighter row spacing, a hover state on the question, and a taller
   max-height cap so longer answers can't get clipped. Scoped to
   .sec-faq so the shared .accordion classes used elsewhere (e.g.
   homepage curriculum) are untouched. */
.sec-faq .accordion-item{ border-bottom: 1px solid #EAEAEA; }
.sec-faq .accordion-trigger{
  padding: 20px 0;
  transition: color .2s;
}
.sec-faq .accordion-trigger:hover{ color: var(--secondary); }
.sec-faq .accordion-panel{ transition: max-height .35s ease; }
.sec-faq .accordion-item.is-open .accordion-panel{ max-height: 320px; }
.sec-faq .accordion-panel p{ padding: 0 0 24px; line-height:1.6; }

@media (max-width: 1024px){
  .product-hero-grid{ grid-template-columns: 1fr; }
  .flow-grid{ grid-template-columns: repeat(2,1fr); gap:36px 24px; }
}

@media (max-width: 900px){
  .for-you-pin-wrap{ height:auto; }
  .for-you-pin{ position:static; height:auto; display:flex; flex-direction:column; gap:40px; padding: 20px 0; }
  .for-you-step{
    position:static; padding:0;
    display:flex; flex-direction:column; align-items:center; gap:12px;
    opacity:0; transform: translateY(24px);
    transition: opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1);
  }
  .for-you-step p{ font-size: clamp(22px, 6vw, 30px); }
  .for-you-progress{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  .for-you-pin-wrap{ height:auto; }
  .for-you-pin{ position:static; height:auto; display:flex; flex-direction:column; gap:40px; padding: 20px 0; }
  .for-you-step{ position:static; opacity:1; transform:none; padding:0; }
  .for-you-progress{ display:none; }
}

@media (max-width: 720px){
  .sec-product-hero{ padding: 60px var(--pad-mobile); }
  .gallery-thumbs{ gap: 10px; }
  .gallery-thumb img{ height: 100px; }
  .sec-wyg, .sec-for-you{ padding: 60px var(--pad-mobile); }
  .flow-grid{ grid-template-columns: 1fr; gap:32px; }
  .wyg-nav{ display:none; }
  .wyg-track{ padding-bottom:8px; }
  .wyg-track .wyg-card{ flex-basis: 78vw; }

  .product-hero-buttons{ flex-direction:column; }
  .product-hero-buttons .btn{ width:100%; }
  .hero-trust{ justify-content:center; }
}