/* =====================================================================
   KNOW YOUR TEACHER PAGE STYLES (know-your-teacher.html)
   Sections: hero with orbiting badges, numbers, training path, how he teaches,
   skills marquee, photo gallery, approach.
   ===================================================================== */

/* ---------- Hero ---------- */
.t-hero{position:relative;overflow:hidden}
.t-hero .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:2rem;align-items:center;padding-block:clamp(2rem,5vw,4rem) 3rem}
.t-copy{display:flex;flex-direction:column;gap:1.15rem;min-width:0}
.t-copy h1{font-size:clamp(2.6rem,6vw,4.6rem);color:var(--text-strong)}
.t-copy h1 span{color:var(--gold)}
.t-title{font-size:1.15rem;color:var(--gold-light);font-weight:600}
.t-mini{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.t-mini li{padding:.4rem .85rem;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-size:.9rem;color:var(--text-strong)}

.orbit{position:relative;width:100%;max-width:560px;aspect-ratio:1;margin:0 auto}
.orbit .glow{inset:6% 8% 4%}
.orbit .sun{position:absolute;left:50%;top:44%;width:62%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,230,180,.55),rgba(217,164,91,.25) 60%,transparent)}
.orbit .path-ring{position:absolute;left:50%;top:52%;width:92%;height:34%;translate:-50% -50%;border-radius:50%;border:1px dashed rgba(217,164,91,.5)}
.orbit .person{position:absolute;left:50%;bottom:0;height:96%;translate:-50% 0;z-index:5}
.orbit .person img{height:100%;width:auto;max-width:none;object-fit:contain;display:block;filter:drop-shadow(0 18px 30px rgba(0,0,0,.45))}
.badge-o{position:absolute;left:50%;top:52%;translate:-50% -50%;white-space:nowrap;padding:.35rem .8rem;border-radius:999px;font-size:.82rem;font-weight:600;
  background:rgba(38,33,25,.92);border:1px solid rgba(217,164,91,.55);color:var(--gold-light);box-shadow:0 6px 20px rgba(0,0,0,.35);will-change:transform}
@media (max-width:900px){.t-hero .wrap{grid-template-columns:1fr}.orbit{order:-1;max-width:440px}}
@media (max-width:480px){.badge-o{font-size:.72rem;padding:.25rem .6rem}}

/* ---------- Numbers ---------- */
.t-stats{border-block:1px solid var(--line);background:var(--bg-deep)}
.t-stats .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;padding-block:1.6rem}
.t-stat b{display:block;font-family:var(--f-display);font-weight:400;font-size:clamp(1.8rem,3.4vw,2.6rem);color:var(--gold);font-variant-numeric:tabular-nums;line-height:1.1}
.t-stat span{color:var(--muted);font-size:.9rem}
@media (max-width:760px){.t-stats .wrap{grid-template-columns:repeat(2,1fr)}}

/* ---------- Training path (line draws on scroll) ---------- */
.tpath{position:relative;display:grid;gap:2.2rem;padding-block:1rem}
.tpath .line,.tpath .line-fill{position:absolute;top:0;bottom:0;left:50%;width:2px;translate:-1px 0}
.tpath .line{background:var(--line)}
.tpath .line-fill{background:linear-gradient(var(--gold-light),var(--gold));transform-origin:top;transform:scaleY(0)}
.tnode{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:3.2rem;align-items:center}
.tnode .dot{position:absolute;left:50%;top:50%;width:20px;height:20px;translate:-50% -50%;border-radius:50%;background:var(--bg);border:2px solid var(--line);transition:background .4s,border-color .4s,box-shadow .4s;z-index:2}
.tnode.lit .dot{background:var(--gold);border-color:var(--gold);box-shadow:0 0 0 6px rgba(217,164,91,.18),0 0 24px rgba(217,164,91,.6)}
.tnode .place{font-family:var(--f-display);font-size:clamp(1.8rem,3.4vw,2.6rem);color:var(--gold);text-align:right}
.tnode .tcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem 1.3rem;display:flex;flex-direction:column;gap:.6rem}
.tnode .inst{font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-light);font-weight:700}
.tnode ul{margin:0;padding:0;list-style:none;display:grid;gap:.45rem}
.tnode li{display:grid;grid-template-columns:16px 1fr;gap:.5rem;color:var(--text-strong)}
.tnode li::before{content:"";width:8px;height:8px;margin-top:.55rem;border-radius:2px;background:var(--gold);transform:rotate(45deg)}
.tnode:nth-child(even) .place{order:2;text-align:left}
.tnode:nth-child(even) .tcard{order:1}
@media (max-width:760px){
  .tpath .line,.tpath .line-fill{left:10px}
  .tnode{grid-template-columns:1fr;gap:.6rem;padding-left:2.4rem}
  .tnode .dot{left:10px;top:1.1rem}
  .tnode .place,.tnode:nth-child(even) .place{order:0;text-align:left;font-size:1.7rem}
  .tnode:nth-child(even) .tcard{order:1}
}

/* ---------- How he teaches ---------- */
.teach .wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:2.5rem;align-items:start}
.teach-video{position:sticky;top:calc(var(--hh) + 1.5rem);border-radius:24px;aspect-ratio:9/14;max-width:100%;border:1px solid var(--line)}
.teach-video figcaption{position:absolute;left:12px;bottom:12px;z-index:2;padding:.3rem .7rem;border-radius:999px;background:rgba(20,18,15,.65);color:var(--gold-light);font-size:.8rem;font-weight:600}
.qualities{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.quality{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:1.3rem;display:flex;flex-direction:column;gap:.55rem}
.quality svg{width:34px;height:34px;color:var(--gold)}
.quality h3{font-size:1.35rem;color:var(--text-strong)}
@media (max-width:860px){.teach .wrap{grid-template-columns:1fr}.teach-video{position:relative;top:0;max-width:340px;margin:0 auto;width:100%}}
@media (max-width:480px){.qualities{grid-template-columns:1fr}}

/* ---------- Skills marquee ---------- */
.marquee{overflow:hidden;display:grid;gap:.8rem;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mrow{display:flex;gap:.8rem;width:max-content;animation:slide 38s linear infinite}
.mrow.rev{animation-direction:reverse}
.marquee:hover .mrow{animation-play-state:paused}
.mrow span{padding:.6rem 1.1rem;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--text-strong);font-weight:500;white-space:nowrap}
.mrow.gold span{color:var(--gold-light);border-color:rgba(217,164,91,.45)}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- Gallery: photos "develop" from soft to sharp, middle column drifts ---------- */
.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;align-items:start}
.gcol{display:grid;gap:1rem}
.gitem{all:unset;cursor:zoom-in;display:block;border-radius:18px;overflow:hidden;border:1px solid var(--line);background:var(--surface);position:relative}
.gitem img{display:block;width:100%;height:auto;transition:filter 1.2s ease,transform 1.4s ease}
.gitem.soft img{filter:grayscale(.85) blur(6px) brightness(.8);transform:scale(1.08)}
.gitem:hover img{transform:scale(1.03)}
.gitem:focus-visible{outline:3px solid var(--gold-light)}
@media (max-width:760px){.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}
dialog.lightbox{border:0;padding:0;background:transparent;max-width:min(94vw,1100px);max-height:90vh}
dialog.lightbox::backdrop{background:rgba(10,9,7,.88)}
dialog.lightbox img{display:block;max-width:100%;max-height:86vh;width:auto;height:auto;border-radius:14px}
dialog.lightbox button{position:absolute;top:8px;right:8px;width:40px;height:40px;border-radius:50%;border:0;background:rgba(20,18,15,.8);color:var(--text-strong);font-size:1.4rem;cursor:pointer}

/* ---------- Approach band with bright photo ---------- */
.approach .wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:3rem;align-items:center}
.approach-photo{border-radius:28px;aspect-ratio:4/5;max-width:100%;border:1px solid var(--line)}
.approach blockquote{margin:0;font-family:var(--f-display);font-size:clamp(1.5rem,2.8vw,2.2rem);line-height:1.35;color:var(--text-strong)}
.approach blockquote em{font-style:normal;color:var(--gold)}
@media (max-width:860px){.approach .wrap{grid-template-columns:1fr}.approach-photo{max-width:420px;margin:0 auto;width:100%}}