/* =========================================================
   HealthBuzz — E-Magazine listing, 3D covers & flip-book reader
   Uses design tokens from site.css (do not hard-code brand).
   ========================================================= */

/* ---------- listing hero ---------- */
.maghero{padding:34px 0 26px;margin-bottom:30px;border-bottom:1px solid var(--line);background:radial-gradient(ellipse at 85% 0%,rgba(255,102,0,.16),transparent 55%),linear-gradient(180deg,var(--soft),transparent)}
.maghero h1{font-size:clamp(1.9rem,4vw,3rem);margin:0 0 8px;letter-spacing:-.02em}
.maghero h1 span{color:var(--brand)}
.maghero p{color:var(--muted);max-width:640px;margin:0}
.magwrap{padding-bottom:50px}

/* ---------- 3D cover (shared) ---------- */
.mag3d{display:block;perspective:1100px;padding:8px 18px 22px 22px;position:relative;isolation:isolate}
.mag3d::after{content:"";position:absolute;left:16%;right:12%;bottom:8px;height:16px;border-radius:50%;background:rgba(0,0,0,.35);filter:blur(10px);transition:transform .5s,opacity .5s;z-index:-1}
.mag3d__book{position:relative;display:block;aspect-ratio:1/1.414;border-radius:2px 7px 7px 2px;transform-style:preserve-3d;transform-origin:50% 50%;transform:rotateY(24deg) rotateX(2deg);transition:transform .55s cubic-bezier(.2,.8,.2,1),box-shadow .55s;box-shadow:16px 14px 26px rgba(0,0,0,.28),4px 4px 8px rgba(0,0,0,.18);background:#ddd}
.mag3d__book img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit}
/* spine crease + gloss */
.mag3d__book::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;background:linear-gradient(90deg,rgba(0,0,0,.38) 0,rgba(255,255,255,.28) 1.6%,rgba(0,0,0,.16) 3.4%,rgba(255,255,255,.1) 5.5%,transparent 10%,transparent 72%,rgba(255,255,255,.14) 100%)}
/* spine thickness */
.mag3d__book::after{content:"";position:absolute;top:0;bottom:0;right:100%;width:14px;transform-origin:100% 50%;transform:rotateY(-90deg);background:linear-gradient(90deg,#2a2a2e,#4a4a52 45%,#26262a);border-radius:2px 0 0 2px}
.magcard:hover .mag3d__book,.magcard:focus-visible .mag3d__book{transform:rotateY(0) rotateX(0) translateY(-8px) scale(1.02);box-shadow:0 26px 40px rgba(0,0,0,.3),0 6px 12px rgba(0,0,0,.15)}
.magcard:hover .mag3d::after{transform:scale(.9);opacity:.6}
.mag3d__badge{position:absolute;top:10px;right:10px;z-index:3;display:inline-flex;align-items:center;gap:5px;background:linear-gradient(135deg,#ffb347,var(--brand));color:#fff;font:800 .68rem/1 var(--fh);letter-spacing:.08em;padding:6px 9px;border-radius:999px;box-shadow:0 4px 12px rgba(255,102,0,.45)}
.mag3d__badge--inline{position:static;box-shadow:none}
.mag3d--lg{padding:10px 30px 34px 36px}
.mag3d--lg .mag3d__book{transform:rotateY(20deg) rotateX(3deg);box-shadow:26px 24px 46px rgba(0,0,0,.5),6px 6px 12px rgba(0,0,0,.3)}
.mag3d--lg .mag3d__book::after{width:20px}
.mag3d--lg::after{background:rgba(0,0,0,.65);height:22px}
.mag3d--blur .mag3d__book img{filter:blur(7px) saturate(.85) brightness(.85);clip-path:inset(0 round 2px 7px 7px 2px)}

/* ---------- listing grid ---------- */
.maggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:34px 26px}
.magcard{display:flex;flex-direction:column;align-items:stretch;text-align:center;color:var(--text);outline:none}
.magcard__label{font:800 1.02rem/1.25 var(--fh);margin-top:4px}
.magcard__title{font-size:.82rem;color:var(--muted);margin-top:2px}
.magcard:hover .magcard__label{color:var(--brand)}
@media (max-width:560px){.maggrid{grid-template-columns:repeat(2,1fr);gap:24px 10px}.mag3d{padding:6px 10px 18px 16px}}

/* ---------- reader page ---------- */
.magreader{padding-top:18px;padding-bottom:40px}
.magreader .crumbs{margin-bottom:12px}
html.fb-lock,html.fb-lock body{overflow:hidden}

.fb{position:relative;display:flex;flex-direction:column;border-radius:var(--radius);overflow:hidden;background:#141417;color:#ececec;box-shadow:var(--shadow-lg)}
.fb__bar{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;flex-wrap:wrap;padding:8px 12px;background:#1c1c21;border-bottom:1px solid rgba(255,255,255,.07);position:relative;z-index:6}
.fb__grp{display:flex;align-items:center;gap:6px;min-width:0}
.fb__title{font:700 .92rem/1.2 var(--fh);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:28vw}
.fb__title small{font:500 .78rem var(--fb);color:#9a9aa3;margin-left:6px}
.fb__btn{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;border:0;background:rgba(255,255,255,.07);color:#ececec;cursor:pointer;font-size:.9rem;transition:background .2s,color .2s,transform .15s}
.fb__btn:hover{background:var(--brand);color:#fff}
.fb__btn:active{transform:scale(.93)}
.fb__btn:disabled{opacity:.3;cursor:default;background:rgba(255,255,255,.07);color:#ececec}
.fb__btn.is-on{background:var(--brand);color:#fff}
.fb__count{min-width:132px;text-align:center;font:700 .84rem var(--fb);font-variant-numeric:tabular-nums;color:#ddd}

.fb__stage{position:relative;height:clamp(420px,calc(100vh - 190px),940px);overflow:hidden;display:flex;align-items:center;justify-content:center;touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;cursor:pointer;
  background:radial-gradient(ellipse 70% 60% at 50% 45%,#44444c 0%,#2a2a30 45%,#151518 100%)}
.fb__stage::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;background:repeating-linear-gradient(45deg,rgba(255,255,255,.012) 0 2px,transparent 2px 6px)}
.fb.is-zoomed .fb__stage{touch-action:none;cursor:grab}
.fb.is-zoomed.is-dragging .fb__stage{cursor:grabbing}
.fb__pan{position:relative;transition:transform .28s ease;will-change:transform}
.fb.is-dragging .fb__pan{transition:none}

.fb__book{position:relative;perspective:2000px;perspective-origin:50% 50%;opacity:0;transition:opacity .6s ease}
.fb.is-ready .fb__book{opacity:1;animation:fbIn .8s cubic-bezier(.2,.8,.2,1)}
@keyframes fbIn{from{filter:blur(4px)}to{filter:none}}
/* floor shadow under the book */
.fb__book::before{content:"";position:absolute;left:4%;right:4%;bottom:-18px;height:30px;border-radius:50%;background:rgba(0,0,0,.55);filter:blur(16px);pointer-events:none}
.fb.is-spread .fb__book::before{left:calc(var(--pw) * .02);right:calc(var(--pw) * .02)}

.fb__slot{position:absolute;top:0;width:var(--pw);height:100%;background:#fff}
.fb__half{z-index:1}
.fb__half--l{left:0;box-shadow:-1px 1px 0 #ececec,-3px 2px 0 #d6d6d6,-4px 3px 0 #efefef,-6px 4px 0 #c9c9c9,0 18px 40px rgba(0,0,0,.5)}
.fb__half--r{left:var(--pw);box-shadow:1px 1px 0 #ececec,3px 2px 0 #d6d6d6,4px 3px 0 #efefef,6px 4px 0 #c9c9c9,0 18px 40px rgba(0,0,0,.5)}
.fb.is-single .fb__half--l{display:none}
.fb.is-single .fb__half--r{left:0}
.fb__slot.is-empty{background:transparent;box-shadow:none}
.fb__slot.is-empty::after,.fb__slot.is-empty .fb__shade{display:none}
.fb__slot.is-blank{background:linear-gradient(90deg,#f1efea,#fbfaf7)}
.fb__pgh,.fb__pg{position:absolute;inset:0;overflow:hidden}
.fb__pg canvas{display:block;width:100%;height:100%}
.fb__pgspin{position:absolute;left:50%;top:50%;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;border:3px solid #eee;border-top-color:var(--brand);animation:fbSpin .8s linear infinite}
.fb__pg.is-ready .fb__pgspin{display:none}

/* spine shading on every page (gutter) */
.fb__slot::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2}
.fb__slot--l::after{background:linear-gradient(270deg,rgba(0,0,0,.32) 0,rgba(0,0,0,.12) 2.5%,rgba(0,0,0,.04) 6%,transparent 12%),linear-gradient(90deg,rgba(0,0,0,.05),transparent 3%)}
.fb__slot--r::after{background:linear-gradient(90deg,rgba(0,0,0,.32) 0,rgba(255,255,255,.12) 1%,rgba(0,0,0,.1) 2.6%,rgba(0,0,0,.03) 6%,transparent 12%),linear-gradient(270deg,rgba(0,0,0,.05),transparent 3%)}
.fb.is-single .fb__slot--r::after{opacity:.45}

/* turning leaf */
.fb__leaf{position:absolute;top:0;width:var(--pw);height:100%;transform-style:preserve-3d;z-index:5;will-change:transform;pointer-events:none}
.fb__leaf .fb__slot{left:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.fb__face--back{transform:rotateY(180deg)}
.fb__shade{position:absolute;inset:0;opacity:0;pointer-events:none;z-index:3}
.fb__slot--r .fb__shade{background:linear-gradient(90deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.18) 22%,rgba(255,255,255,.22) 62%,rgba(255,255,255,0) 82%,rgba(0,0,0,.22) 100%)}
.fb__slot--l .fb__shade{background:linear-gradient(270deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.18) 22%,rgba(255,255,255,.22) 62%,rgba(255,255,255,0) 82%,rgba(0,0,0,.22) 100%)}
.fb__leaf .fb__face--front{box-shadow:0 0 18px rgba(0,0,0,.18)}
.fb__cast{position:absolute;top:0;height:100%;z-index:4;pointer-events:none;opacity:0}
.fb__cast.is-r{background:linear-gradient(90deg,rgba(0,0,0,.5),rgba(0,0,0,.18) 35%,transparent)}
.fb__cast.is-l{background:linear-gradient(270deg,rgba(0,0,0,.5),rgba(0,0,0,.18) 35%,transparent)}

/* side arrows */
.fb__arrow{position:absolute;top:50%;z-index:7;width:48px;height:48px;margin-top:-24px;border-radius:50%;border:0;display:grid;place-items:center;background:rgba(255,255,255,.1);color:#fff;font-size:1.05rem;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .2s,opacity .2s,transform .2s}
.fb__arrow:hover{background:var(--brand)}
.fb__arrow:disabled{opacity:0;pointer-events:none}
.fb__arrow--prev{left:14px}.fb__arrow--next{right:14px}
.fb__arrow--prev:hover{transform:translateX(-2px)}.fb__arrow--next:hover{transform:translateX(2px)}

/* loader */
.fb__loader{position:absolute;inset:0;z-index:8;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#ddd;text-align:center;padding:20px;transition:opacity .4s}
.fb__loader b{font:800 1.4rem var(--fh);font-variant-numeric:tabular-nums}
.fb__loader small{color:#9a9aa3}
.fb__loader.is-off{opacity:0;pointer-events:none}
.fb__loader.is-error i{font-size:2rem;color:var(--brand)}
.fb__loader.is-error b{font-size:1.05rem}
.fb__spin{width:46px;height:46px;border-radius:50%;border:4px solid rgba(255,255,255,.12);border-top-color:var(--brand);animation:fbSpin .8s linear infinite;margin-bottom:6px}
@keyframes fbSpin{to{transform:rotate(360deg)}}

/* resume + hint */
.fb__resume{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:9;display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;max-width:calc(100% - 24px);padding:10px 12px 10px 18px;border-radius:999px;background:rgba(20,20,24,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 10px 30px rgba(0,0,0,.45);font-size:.86rem;cursor:default;animation:fbUp .4s ease}
.fb__resume[hidden]{display:none}
@keyframes fbUp{from{opacity:0;transform:translate(-50%,10px)}}
.fb__pill{border:0;border-radius:999px;padding:.45em 1em;font-weight:700;font-size:.8rem;cursor:pointer;background:rgba(255,255,255,.1);color:#fff}
.fb__pill--on{background:var(--brand)}
.fb__hint{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:6;font-size:.76rem;color:rgba(255,255,255,.55);white-space:nowrap;pointer-events:none;transition:opacity .6s}
.fb__hint.is-off{opacity:0}

/* thumbnails */
.fb__thumbs{display:flex;gap:10px;overflow-x:auto;padding:12px 14px;background:#1a1a1f;border-top:1px solid rgba(255,255,255,.07);scrollbar-width:thin}
.fb__thumbs[hidden]{display:none}
.fb__th{flex:none;width:84px;border:0;background:none;padding:0;cursor:pointer;color:#aaa;font-size:.72rem;text-align:center}
.fb.is-spread .fb__th:nth-child(odd):not(:first-child){margin-left:-8px}
.fb__thimg{position:relative;display:block;background:#2b2b31;border-radius:3px;overflow:hidden;outline:2px solid transparent;outline-offset:2px;transition:outline-color .2s,transform .2s}
.fb__thimg canvas{position:absolute;inset:0;width:100%;height:100%}
.fb__th b{display:block;margin-top:5px;font-weight:600}
.fb__th:hover .fb__thimg{transform:translateY(-2px)}
.fb__th.on .fb__thimg{outline-color:var(--brand)}
.fb__th.on b{color:#fff}

/* fullscreen (native or fallback) */
.fb.is-full{position:fixed;inset:0;z-index:10000;border-radius:0;width:100%;height:100%;height:100dvh}
.fb.is-full .fb__stage{height:auto;flex:1;min-height:0}
.fb:fullscreen{border-radius:0}

@media (max-width:760px){
  .fb__bar{justify-content:center;padding:8px}
  .fb__title,[data-act="first"],[data-act="last"]{display:none}
  .fb__grp--nav{order:3;width:100%;justify-content:center}
  .fb__btn{width:34px;height:34px;font-size:.84rem}
  .fb__stage{height:clamp(420px,calc(100vh - 230px),760px)}
  .fb__arrow{display:none}
  .fb__count{min-width:120px}
}

/* ---------- locked / coming-soon panels ---------- */
.fbx{display:grid;grid-template-columns:minmax(220px,380px) 1fr;gap:20px 46px;align-items:center;padding:44px clamp(20px,5vw,70px);border-radius:var(--radius);color:#eee;box-shadow:var(--shadow-lg);
  background:radial-gradient(ellipse 60% 80% at 25% 50%,#46464e 0%,#2a2a30 50%,#151518 100%)}
.fbx__cover{max-width:380px;width:100%;margin:0 auto}
.fbx__kicker{display:inline-flex;align-items:center;gap:8px;font:800 .74rem var(--fh);letter-spacing:.1em;text-transform:uppercase;color:var(--brand-2,#ff8a3d);background:rgba(255,102,0,.12);padding:7px 12px;border-radius:999px}
.fbx__text h1{font-size:clamp(1.7rem,3.4vw,2.6rem);margin:14px 0 4px;color:#fff}
.fbx__text > p{color:#b9b9c2;margin:0 0 10px;font-weight:600}
.fbx__text .fbx__note{font-weight:400;color:#d0d0d6;max-width:520px;line-height:1.65}
.fbx__cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
@media (max-width:760px){.fbx{grid-template-columns:1fr;text-align:center;padding:30px 18px}.fbx__cover{max-width:250px}.fbx__cta{justify-content:center}.fbx__text .fbx__note{margin-left:auto;margin-right:auto}}

/* ---------- info + more issues ---------- */
.maginfo{margin:28px 0 8px;padding-bottom:24px;border-bottom:1px solid var(--line)}
.maginfo__issue{display:inline-block;font:800 .72rem var(--fh);letter-spacing:.1em;text-transform:uppercase;color:var(--brand);margin-bottom:6px}
.maginfo h2{font-size:clamp(1.4rem,2.6vw,2rem);margin:0 0 8px}
.maginfo p{max-width:780px;color:var(--text);opacity:.88;margin:0 0 12px}
.maginfo__meta{display:flex;gap:16px;flex-wrap:wrap;align-items:center;font-size:.85rem}
.maginfo__meta i{margin-right:4px}
.magmore{margin-top:26px}
.magmore__head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.magmore__head h3{font-size:1.25rem;margin:0}
.magmore__head a{font-size:.85rem;font-weight:700;color:var(--brand)}
.magmore__row{display:flex;gap:6px;overflow-x:auto;padding:6px 0 8px;scroll-snap-type:x mandatory;scrollbar-width:thin}
.magcard--sm{flex:none;width:160px;scroll-snap-align:start}
.magcard--sm .magcard__label{font-size:.9rem}
@media (max-width:560px){.magcard--sm{width:132px}}