/* =====================================================================
   HealthBuzz — home extras: banner slider, HB Originals, E-Magazine,
   Originals page. All classes are prefixed `hb-`. Uses site.css tokens
   so dark mode ([data-theme="dark"]) works automatically.
   ===================================================================== */

/* ---------- A) 3-up animated banner slider ---------- */
.hb-bslider{
  --per:3; --gap:18px; --peek:0px;
  background:var(--bg-2);
  padding:22px 0 16px;
  position:relative;
}
.hb-bslider__inner{max-width:calc(var(--wrap) + 220px);margin:0 auto;padding:0 52px;position:relative}
.hb-bslider__viewport{overflow:hidden;border-radius:var(--radius);touch-action:pan-y;padding:28px 0 40px;margin:-16px 0 -28px}
.hb-bslider__track{display:flex;gap:var(--gap);will-change:transform;transition:transform .7s cubic-bezier(.22,.8,.24,1)}
.hb-bslider__track.is-instant{transition:none}
.hb-bslider__track.is-dragging{transition:none;cursor:grabbing}
.hb-bslider__slide{flex:0 0 calc((100% - var(--peek) - var(--gap) * (var(--per) - 1)) / var(--per));min-width:0}
.hb-bslider__card{
  display:block;position:relative;overflow:hidden;border-radius:var(--radius);
  aspect-ratio:3/2;background:var(--card);box-shadow:var(--shadow);
  transition:transform .35s ease,box-shadow .35s ease;color:#fff;
}
.hb-bslider__card img{width:100%;height:100%;object-fit:cover;display:block;user-select:none;transition:transform .6s ease}
a.hb-bslider__card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);color:#fff}
a.hb-bslider__card:hover img{transform:scale(1.035)}
/* hover caption (only rendered when a subtitle exists) */
.hb-bslider__cap{
  position:absolute;left:0;right:0;bottom:0;padding:34px 16px 14px;display:flex;flex-direction:column;gap:2px;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.82));
  transform:translateY(100%);transition:transform .35s ease;font-size:.85rem;line-height:1.35;
}
.hb-bslider__cap strong{font-family:var(--fh);font-size:1rem}
.hb-bslider__card:hover .hb-bslider__cap,.hb-bslider__card:focus-visible .hb-bslider__cap{transform:none}
/* arrows at the band edges */
.hb-bslider__nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:34px;height:64px;
  display:grid;place-items:center;border:0;background:transparent;color:var(--text);
  font-size:1.35rem;cursor:pointer;opacity:.55;transition:opacity .2s,color .2s,transform .2s;
}
.hb-bslider__nav--prev{left:8px}.hb-bslider__nav--next{right:8px}
.hb-bslider__nav:hover{opacity:1;color:var(--brand)}
.hb-bslider__nav--prev:hover{transform:translate(-2px,-50%)}.hb-bslider__nav--next:hover{transform:translate(2px,-50%)}
/* dots with a progress fill on the active one */
.hb-bslider__dots{display:flex;justify-content:center;gap:7px;margin-top:14px}
.hb-bslider__dot{width:8px;height:8px;padding:0;border:0;border-radius:99px;background:var(--line);cursor:pointer;position:relative;overflow:hidden;transition:width .35s ease,background .2s}
.hb-bslider__dot:hover{background:var(--muted)}
.hb-bslider__dot.is-active{width:28px;background:var(--line)}
.hb-bslider__dot i{position:absolute;inset:0;background:var(--brand);transform:scaleX(0);transform-origin:left;border-radius:inherit}
.hb-bslider__dot.is-active i{transform:scaleX(1)}
.hb-bslider.is-playing .hb-bslider__dot.is-active i{animation:hbDotFill var(--interval,3.5s) linear forwards}
.hb-bslider.is-paused .hb-bslider__dot.is-active i{animation-play-state:paused}
@keyframes hbDotFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* centre highlight: middle card larger + glowing, side cards recede */
.hb-bslider__slide{transition:transform .7s cubic-bezier(.22,.8,.24,1),opacity .7s,filter .7s;position:relative}
.hb-bslider.has-center .hb-bslider__slide{transform:scale(.9);opacity:.75;filter:saturate(.85)}
.hb-bslider.has-center .hb-bslider__slide.is-center{transform:scale(1.1);opacity:1;filter:none;z-index:2}
.hb-bslider.has-center .hb-bslider__slide.is-center .hb-bslider__card{box-shadow:0 0 0 3px var(--brand),0 18px 42px rgba(255,102,0,.32)}
.hb-bslider.has-center .hb-bslider__slide.is-center .hb-bslider__card:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);transform:translateX(-100%);animation:hbShine 1.1s .35s ease-out 1}
.hb-bslider.has-center .hb-bslider__slide:not(.is-center):hover{opacity:.95}
.hb-bslider.no-anim .hb-bslider__slide{transition:none!important}
.hb-bslider.no-anim .hb-bslider__card:after{animation:none!important}
@keyframes hbShine{to{transform:translateX(100%)}}
/* static mode (not enough banners to loop) */
.hb-bslider.is-static .hb-bslider__nav,.hb-bslider.is-static .hb-bslider__dots{display:none}
.hb-bslider.is-static .hb-bslider__track{justify-content:center}

@media (max-width:1023px){.hb-bslider{--per:2;--gap:14px}.hb-bslider__inner{padding:0 40px}}
@media (max-width:639px){
  .hb-bslider{--per:1;--gap:12px;--peek:14%;padding:16px 0 12px}
  .hb-bslider__inner{padding:0 0 0 16px}
  .hb-bslider__viewport{border-radius:var(--radius) 0 0 var(--radius)}
  .hb-bslider__nav{display:none}
  .hb-bslider.is-static .hb-bslider__inner{padding:0 16px}
  .hb-bslider.is-static .hb-bslider__track{flex-direction:column}
  .hb-bslider.is-static .hb-bslider__slide{flex-basis:auto}
}

/* ---------- shared horizontal scroller (Originals + Magazines rows) ---------- */
.hb-scroller{position:relative}
.hb-scroller__track{
  display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding:14px 4px 18px;margin:-14px -4px -18px;scrollbar-width:none;overscroll-behavior-x:contain;
}
.hb-scroller__track::-webkit-scrollbar{display:none}
.hb-scroller__track > *{scroll-snap-align:start}
.hb-scroller__btn{
  position:absolute;top:var(--btn-top,42%);z-index:4;transform:translateY(-50%);
  width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--text);
  box-shadow:var(--shadow);display:grid;place-items:center;cursor:pointer;transition:opacity .2s,background .2s,color .2s,transform .2s;
}
.hb-scroller__btn--prev{left:-18px}.hb-scroller__btn--next{right:-18px}
.hb-scroller__btn:hover{background:var(--brand);color:#fff;border-color:var(--brand)}
.hb-scroller__btn[disabled]{opacity:0;pointer-events:none}
@media (max-width:1279px){.hb-scroller__btn--prev{left:-6px}.hb-scroller__btn--next{right:-6px}}
@media (max-width:760px),(hover:none){.hb-scroller__btn{display:none}}

/* ---------- B) HB Originals posters ---------- */
.hb-poster{flex:0 0 200px;display:flex;flex-direction:column;gap:8px;color:var(--text)}
.hb-poster:hover{color:var(--text)}
.hb-poster__img{
  position:relative;display:block;aspect-ratio:3/4;border-radius:var(--radius);overflow:hidden;background:var(--bg-2);
  box-shadow:var(--shadow);transform-style:preserve-3d;
  transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s;
}
.hb-poster__img img{width:100%;height:100%;object-fit:cover;display:block}
.hb-poster:hover .hb-poster__img,.hb-poster:focus-visible .hb-poster__img{
  transform:translateY(-6px) scale(1.02);box-shadow:var(--shadow-lg);
}
/* diagonal shine sweep on hover */
.hb-poster__shine{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.38) 50%,transparent 65%);
  background-size:250% 100%;background-position:120% 0;transition:background-position .7s ease;
}
.hb-poster:hover .hb-poster__shine{background-position:-20% 0}
.hb-poster__badge{
  position:absolute;top:10px;left:10px;z-index:2;background:var(--brand);color:#fff;
  font-size:.66rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:.35em .7em;border-radius:6px;
  box-shadow:0 4px 12px rgba(0,0,0,.25);
}
.hb-poster__play{
  position:absolute;right:10px;bottom:10px;z-index:2;width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.92);color:var(--brand);display:grid;place-items:center;font-size:.85rem;box-shadow:0 4px 14px rgba(0,0,0,.3);
}
.hb-poster__title{font-family:var(--fh);font-weight:800;font-size:.95rem;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color .2s}
.hb-poster:hover .hb-poster__title{color:var(--brand)}
.hb-poster__tag{font-size:.8rem;color:var(--muted);margin-top:-4px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.hb-orow .hb-scroller{--btn-top:40%}
@media (max-width:640px){.hb-posters .hb-poster{flex-basis:140px}.hb-scroller__track{gap:14px}}

/* ---------- C) E-Magazine 3D covers ---------- */
.hb-mags{gap:26px;padding-left:10px}
.hb-mag{flex:0 0 190px;display:flex;flex-direction:column;align-items:stretch;color:var(--text)}
.hb-mag:hover{color:var(--text)}
.hb-mag__book{
  position:relative;display:block;aspect-ratio:1/1.4;border-radius:3px 8px 8px 3px;overflow:hidden;background:var(--bg-2);
  transform:none;
  box-shadow:6px 8px 18px rgba(0,0,0,.22),1px 1px 0 rgba(0,0,0,.08);
  transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s;
}
.hb-mag__book img{width:100%;height:100%;object-fit:cover;display:block}
/* spine shadow + binding highlight on the left edge */
.hb-mag__book:before{
  content:"";position:absolute;inset:0 auto 0 0;width:16px;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.38),rgba(255,255,255,.18) 35%,rgba(0,0,0,.12) 60%,transparent);
}
/* page-edge gloss */
.hb-mag__book:after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(100deg,transparent 60%,rgba(255,255,255,.12))}
.hb-mag:hover .hb-mag__book,.hb-mag:focus-visible .hb-mag__book{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.hb-mag__read{
  position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;gap:8px;
  background:rgba(17,17,17,.5);color:#fff;font-weight:800;font-family:var(--fh);letter-spacing:.03em;
  opacity:0;transition:opacity .3s;
}
.hb-mag__read i{color:var(--brand);background:#fff;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:.9rem}
.hb-mag:hover .hb-mag__read,.hb-mag:focus-visible .hb-mag__read{opacity:1}
.hb-mag__issue{
  margin-top:12px;align-self:stretch;text-align:center;background:var(--dark);color:#fff;
  font-family:var(--fh);font-weight:800;font-size:.82rem;letter-spacing:.02em;padding:.5em .6em;border-radius:8px;
  transition:background .2s;
}
[data-theme="dark"] .hb-mag__issue{background:var(--card);border:1px solid var(--line)}
.hb-mag:hover .hb-mag__issue{background:var(--brand);border-color:var(--brand)}
.hb-mrow .hb-scroller{--btn-top:44%}
@media (max-width:640px){.hb-mag{flex-basis:140px}.hb-mags{gap:18px}}

/* ---------- D) Originals page ---------- */
.hb-ogrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:26px 22px}
.hb-ogrid .hb-poster{flex:none;min-width:0}
@media (max-width:480px){.hb-ogrid{grid-template-columns:repeat(2,1fr);gap:20px 14px}}

.hb-odetail{padding-top:24px;padding-bottom:10px}
.hb-odetail__grid{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:40px;align-items:start;margin-top:10px}
.hb-odetail__poster{border-radius:18px;overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:3/4;background:var(--bg-2);position:sticky;top:90px}
.hb-odetail__poster img{width:100%;height:100%;object-fit:cover;display:block}
.hb-odetail__kicker{display:inline-flex;align-items:center;gap:8px;color:var(--brand);font-weight:800;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase}
.hb-odetail__body h1{font-size:clamp(1.8rem,3.4vw,2.7rem);margin:8px 0 8px;line-height:1.1}
.hb-odetail__tagline{font-size:1.12rem;color:var(--muted);margin:0 0 14px}
.hb-pill{display:inline-flex;align-items:center;gap:6px;background:var(--soft);color:var(--brand);font-weight:700;font-size:.82rem;padding:.4em .9em;border-radius:99px;border:1px solid var(--line)}
.hb-odetail__video{position:relative;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;background:#000;margin:6px 0 22px;box-shadow:var(--shadow)}
.hb-odetail__video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.hb-odetail__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
@media (max-width:760px){
  .hb-odetail__grid{grid-template-columns:1fr;gap:22px}
  .hb-odetail__poster{position:relative;top:auto;max-width:260px;width:70%;margin:0 auto}
  .hb-odetail__body{text-align:left}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .hb-bslider__track{transition:none}
  .hb-bslider__card,.hb-bslider__card img,.hb-poster__img,.hb-poster__shine,.hb-mag__book{transition:none}
  .hb-poster:hover .hb-poster__img{transform:none}
  .hb-mag__book,.hb-mag:hover .hb-mag__book{transform:none}
  .hb-scroller__track{scroll-behavior:auto}
  .hb-bslider__dot.is-active i{animation:none!important;transform:scaleX(1)}
}

/* 3D side rails step aside while they would cover the wide banner slider */
.hb-rail.hb-rail--yield{opacity:0;pointer-events:none;transform:translateY(24px)}

/* ---------- v1.7 HB Originals "stage" — cinematic band, HD posters, reflections ---------- */
.hb-orow--stage{position:relative;overflow:hidden;padding:46px 0 34px;margin:10px 0;
  background:radial-gradient(70% 90% at 50% -10%,rgba(255,102,0,.28),transparent 60%),radial-gradient(50% 60% at 50% 120%,rgba(255,140,40,.18),transparent 70%),linear-gradient(180deg,#07070c,#12101a 55%,#07070c);
  color:#fff;isolation:isolate}
.hb-orow--stage:before{content:"";position:absolute;inset:0;z-index:-1;opacity:.35;
  background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1px);background-size:4px 4px}
.hb-orow--stage:after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,102,0,.6),transparent)}
.hb-orow__beam{position:absolute;top:-20%;width:38%;height:140%;z-index:-1;pointer-events:none;filter:blur(18px);opacity:.5;
  background:linear-gradient(180deg,rgba(255,190,120,.35),transparent 70%);animation:hbBeam 9s ease-in-out infinite alternate}
.hb-orow__beam--l{left:4%;transform:rotate(18deg)}.hb-orow__beam--r{right:4%;transform:rotate(-18deg);animation-delay:-4.5s}
@keyframes hbBeam{from{opacity:.25}to{opacity:.6}}
.hb-orow--stage .sh h2,.hb-orow--stage .sh p{color:#fff}
.hb-orow--stage .hb-posters{justify-content:center;gap:26px;padding:14px 6px 70px;perspective:1400px}
.hb-orow--stage .hb-poster{flex:0 0 214px;color:#fff}
.hb-orow--stage .hb-poster__img{border-radius:12px;background:#111;
  box-shadow:0 0 0 1px rgba(255,255,255,.12),0 22px 40px -12px rgba(0,0,0,.9);
  -webkit-box-reflect:below 10px linear-gradient(transparent 62%,rgba(255,255,255,.22));
  transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s}
.hb-orow--stage .hb-poster__img img{image-rendering:auto;filter:contrast(1.06) saturate(1.08)}
.hb-orow--stage .hb-poster:nth-child(odd) .hb-poster__img{transform:rotateY(4deg)}
.hb-orow--stage .hb-poster:nth-child(even) .hb-poster__img{transform:rotateY(-4deg)}
.hb-orow--stage .hb-poster:hover .hb-poster__img,.hb-orow--stage .hb-poster:focus-visible .hb-poster__img{
  transform:translateY(-12px) scale(1.06) rotateY(0);
  box-shadow:0 0 0 2px var(--brand),0 0 38px rgba(255,102,0,.55),0 30px 50px -10px rgba(0,0,0,.9)}
.hb-orow--stage .hb-poster__title,.hb-orow--stage .hb-poster__tag{color:#fff}
.hb-orow--stage .hb-poster__tag{color:rgba(255,255,255,.7)}
.hb-orow--stage .hb-scroller__btn{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.2);backdrop-filter:blur(6px)}
.hb-orow__foot{display:flex;justify-content:center;margin-top:-34px}
.hb-orow__all{display:inline-flex;align-items:center;gap:10px;padding:.65em 1.3em;border-radius:999px;font:800 .82rem/1 var(--fh);letter-spacing:.04em;text-transform:uppercase;
  color:#fff;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.06);transition:background .2s,border-color .2s}
.hb-orow__all:hover{background:var(--brand);border-color:var(--brand);color:#fff}
.hb-orow__all i:first-child{color:var(--brand)}.hb-orow__all:hover i{color:#fff}
@media (max-width:1100px){.hb-orow--stage .hb-posters{justify-content:flex-start}}
@media (max-width:640px){.hb-orow--stage{padding:30px 0 26px}.hb-orow--stage .hb-poster{flex-basis:160px}.hb-orow--stage .hb-poster__img{-webkit-box-reflect:none}.hb-orow--stage .hb-posters{padding-bottom:30px}.hb-orow__foot{margin-top:0}}
@media (prefers-reduced-motion:reduce){.hb-orow__beam{animation:none}}

/* ---------- per-section display switches (Home Page Builder) ---------- */
.hsec.no-head .sh{display:none}
.hsec.no-more .sh__more,.hsec.no-more .hb-orow__foot{display:none}
.hsec.no-item-title .hb-poster__title,.hsec.no-item-title .hb-poster__tag,.hsec.no-item-title .card__title,.hsec.no-item-title .bento__title,.hsec.no-item-title .hb-mag__issue{display:none}
.hsec.no-label .card .chip,.hsec.no-label .bento__label{display:none}
.hsec.no-meta .card__by,.hsec.no-meta .card .meta,.hsec.no-meta .bento__by{display:none}