/* ===========================================================
   MENTAL TENNIS — ON LINE (Coaching 1to1 + Webinar)
   Coaching = focus. Webinar = connessione.
   =========================================================== */

/* ---------- VIDEO YOUTUBE (facade) ---------- */
.yt{margin:0}
.yt-fr{position:relative;aspect-ratio:16/9;width:100%;overflow:hidden;border:1px solid var(--line-d);background:#000}
.yt-fr img{width:100%;height:100%;object-fit:cover;opacity:.82;transition:opacity .35s var(--ease),transform .5s var(--ease)}
.yt-fr iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt:hover .yt-fr img{opacity:1;transform:scale(1.02)}
.yt-fr::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,5,5,.35),rgba(5,5,5,.15) 40%,rgba(5,5,5,.7));
  transition:opacity .35s var(--ease)}
.yt.yt-on .yt-fr img,.yt.yt-on .yt-fr::after,.yt.yt-on .yt-lab,.yt.yt-on .yt-play{display:none}
.yt-lab{position:absolute;left:14px;top:14px;z-index:2;font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:#fff;background:rgba(5,5,5,.55);border:1px solid rgba(255,255,255,.16);padding:6px 10px}
.yt-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;cursor:pointer;
  width:66px;height:66px;border-radius:50%;border:1px solid rgba(255,255,255,.55);background:rgba(5,5,5,.35);
  transition:border-color .3s var(--ease),background .3s var(--ease),transform .3s var(--ease)}
.yt-play::before{content:"";position:absolute;left:27px;top:22px;border-left:15px solid #fff;
  border-top:11px solid transparent;border-bottom:11px solid transparent;transition:border-left-color .3s var(--ease)}
.yt-play:hover{border-color:var(--emerald);background:rgba(37,144,142,.2);transform:translate(-50%,-50%) scale(1.06)}
.yt-play:hover::before{border-left-color:var(--emerald-lift)}
.yt-t{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.01em;
  font-size:15px;line-height:1.15;color:#fff;margin:14px 0 0}
.yt--small .yt-play{width:48px;height:48px}
.yt--small .yt-play::before{left:20px;top:16px;border-left:11px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent}
.yt--small .yt-t{font-size:13px}
.yt-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:clamp(18px,2.4vw,30px);margin-top:34px;align-items:start}
.yt-side{display:grid;gap:clamp(18px,2.4vw,26px)}

/* ---------- CATENA DI PROCESSO ---------- */
.chain{position:relative;display:grid;gap:14px;margin-top:34px;grid-template-columns:repeat(5,1fr)}
.chain::before{content:"";position:absolute;left:0;right:0;top:26px;height:1px;background:rgba(255,255,255,.12)}
.chain::after{content:"";position:absolute;left:0;top:26px;height:1px;background:var(--emerald);width:0;
  transition:width 1.8s var(--ease)}
.chain.ch-on::after{width:100%}
.ch-i{position:relative;text-align:center}
.ch-i i{display:block;width:12px;height:12px;border-radius:50%;margin:20px auto 16px;border:1px solid var(--emerald);
  background:var(--court);position:relative;z-index:2;transform:scale(.5);opacity:.4;
  transition:transform .5s var(--ease),opacity .5s var(--ease)}
.chain.ch-on .ch-i i{transform:scale(1);opacity:1}
.chain.ch-on .ch-i:nth-child(2) i{transition-delay:.3s}
.chain.ch-on .ch-i:nth-child(3) i{transition-delay:.6s}
.chain.ch-on .ch-i:nth-child(4) i{transition-delay:.9s}
.chain.ch-on .ch-i:nth-child(5) i{transition-delay:1.2s}
.ch-i b{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#fff}
.ch-loop{display:block;text-align:center;margin-top:18px;font-family:var(--mono);font-size:11px;
  letter-spacing:.24em;color:var(--emerald-lift)}

/* ---------- COACHING: campo → match analysis ---------- */
.mc-wrap{position:relative;max-width:560px;margin:38px auto 0}
.mc{width:100%;height:auto;display:block;overflow:visible}
.mc .mc-court{fill:none;stroke:rgba(255,255,255,.17);stroke-width:1}
.mc .mc-net{stroke:rgba(255,255,255,.28);stroke-dasharray:3 4}
.mc .mc-traj{fill:none;stroke:var(--emerald-lift);stroke-width:1.6;opacity:.9}
.mc .mc-ball{fill:#fff}
.mc .mc-lab{opacity:0;transition:opacity .6s var(--ease)}
.mc .mc-lab text{font-family:var(--mono);font-size:8px;letter-spacing:.18em;fill:var(--emerald-lift)}
.mc .mc-lab circle{fill:none;stroke:var(--emerald);stroke-width:.8}
.mc.mc-static .mc-lab{opacity:1}
.mc.mc-static .mc-traj{stroke-dasharray:none}
.mc-cap{margin:18px 0 0;text-align:center;font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ash-dark)}

/* ---------- COACHING: player profiles ---------- */
.pp{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-d);border:1px solid var(--line-d);margin-top:34px}
.pp-i{position:relative;background:var(--court);padding:clamp(22px,2.6vw,32px);overflow:hidden;
  transition:background .3s var(--ease),transform .3s var(--ease)}
.pp-i:hover,.pp-i:focus-within{background:#101B1A;transform:translateY(-3px)}
.pp-i b{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--emerald-lift)}
.pp-i h3{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:17px;color:#fff;margin:14px 0 10px}
.pp-i p{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;line-height:1.75;color:var(--ash-dark);margin:0}
.pp-v{margin-top:18px;width:100%;height:52px;display:block;overflow:visible}
.pp-v rect{fill:none;stroke:rgba(255,255,255,.14)}
.pp-v line{stroke:rgba(255,255,255,.14)}
.pp-v path{fill:none;stroke:var(--emerald);stroke-width:1.4;stroke-dasharray:200;stroke-dashoffset:200;
  transition:stroke-dashoffset 1.1s var(--ease)}
.pp-i:hover .pp-v path,.pp-i:focus-within .pp-v path{stroke-dashoffset:0}
.pp-v circle{fill:var(--emerald-lift);opacity:0;transition:opacity .3s var(--ease) .9s}
.pp-i:hover .pp-v circle,.pp-i:focus-within .pp-v circle{opacity:1}

/* ---------- COACHING: non è una call motivazionale ---------- */
.nsay{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line-ink,rgba(0,0,0,.12));
  border:1px solid var(--line-ink,rgba(0,0,0,.12));margin-top:30px}
.nsay-c{background:var(--paper,#fff);padding:clamp(22px,3vw,36px)}
.nsay-c h4{font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;margin:0 0 20px}
.nsay-c ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.nsay-c li{font-family:var(--serif);font-size:clamp(16px,1.7vw,20px);line-height:1.45}
.nsay--no li{opacity:.42;text-decoration:line-through;text-decoration-thickness:1px}
.nsay--yes{background:#08100F}
.nsay--yes h4{color:var(--emerald-lift)}
.nsay--yes li{color:#fff}
.nsay--yes li::before{content:"";display:inline-block;width:14px;height:1px;background:var(--emerald);
  vertical-align:middle;margin-right:10px}
.nsay-punch{margin-top:24px;font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(15px,1.8vw,20px);letter-spacing:-.01em}
.nsay-punch em{font-style:normal;color:var(--emerald)}

/* ---------- WEBINAR: rete di prospettive ---------- */
.pv{position:relative;width:100%;max-width:440px;aspect-ratio:1/1;margin:0 auto}
.pv-court{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:42%;height:52%;
  border:1px solid rgba(255,255,255,.18)}
.pv-court::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:1px dashed rgba(255,255,255,.28)}
.pv-c{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;text-align:center;
  font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:#fff;
  background:rgba(5,5,5,.75);border:1px solid var(--emerald);padding:8px 12px;transition:box-shadow .5s var(--ease)}
.pv-c.beat{box-shadow:0 0 0 6px rgba(37,144,142,.12)}
.pv-n{position:absolute;z-index:2;display:flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ash-dark);
  transition:color .5s var(--ease)}
.pv-n i{width:12px;height:12px;border-radius:50%;border:1px solid var(--emerald);opacity:.45;
  transition:opacity .5s var(--ease),box-shadow .5s var(--ease)}
.pv-n.on{color:#fff}
.pv-n.on i{opacity:1;box-shadow:0 0 0 5px rgba(37,144,142,.16)}
.pv-n--1{left:4%;top:12%}
.pv-n--2{right:4%;top:12%}
.pv-n--3{left:4%;bottom:12%}
.pv-n--4{right:4%;bottom:12%}
.pv-ln{position:absolute;inset:0;z-index:1;width:100%;height:100%}
.pv-ln line{stroke:rgba(255,255,255,.12);stroke-width:1;vector-effect:non-scaling-stroke}
.pv-cap{margin-top:22px;text-align:center;font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ash-dark)}
.pv-cap b{color:var(--emerald-lift);font-weight:400}

/* ---------- WEBINAR: conversazione a più voci ---------- */
.views{margin-top:34px}
.views-q{border:1px solid var(--line-d);padding:clamp(22px,3vw,38px);text-align:center;background:#08100F}
.views-q small{font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--ash-dark)}
.views-q p{font-family:var(--serif);font-size:clamp(20px,2.6vw,30px);line-height:1.35;color:#fff;margin:14px 0 0}
.views-tabs{display:flex;flex-wrap:wrap;gap:1px;background:var(--line-d);border:1px solid var(--line-d);border-top:0}
.views-tabs button{flex:1 1 140px;min-height:48px;background:var(--court);border:0;cursor:pointer;padding:14px 12px;
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ash);
  transition:background .25s var(--ease),color .25s var(--ease)}
.views-tabs button:hover{background:#101B1A;color:#fff}
.views-tabs button[aria-pressed="true"]{background:rgba(37,144,142,.14);color:#fff;box-shadow:inset 0 -2px 0 var(--emerald)}
.views-p{border:1px solid var(--line-d);border-top:0;padding:clamp(22px,3vw,38px);background:var(--court)}
.views-p p{font-family:var(--serif);font-size:clamp(17px,2vw,23px);line-height:1.5;color:#fff;margin:0}
.views-p small{display:block;margin-top:16px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  line-height:1.8;color:var(--ash-dark)}
.views-p--mt{background:#08100F;box-shadow:inset 2px 0 0 var(--emerald)}

/* ---------- WEBINAR: topic map ---------- */
.tm{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-ink,rgba(0,0,0,.12));
  border:1px solid var(--line-ink,rgba(0,0,0,.12));margin-top:34px}
.tm-hub{grid-column:2;grid-row:1;display:flex;align-items:center;justify-content:center;
  background:#08100F;color:#fff;font-family:var(--display);font-weight:800;text-transform:uppercase;
  letter-spacing:.02em;font-size:20px;min-height:110px;position:relative}
.tm-hub::after{content:"";position:absolute;inset:14px;border:1px solid rgba(63,199,194,.22)}
.tm-n{background:var(--paper,#fff);border:0;text-align:left;cursor:pointer;padding:clamp(20px,2.4vw,30px);
  min-height:110px;transition:background .3s var(--ease),transform .3s var(--ease)}
.tm-n b{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--emerald)}
.tm-n h4{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:16px;margin:12px 0 0}
.tm-n p{margin:10px 0 0;font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;line-height:1.75;
  max-height:0;overflow:hidden;opacity:0;transition:max-height .45s var(--ease),opacity .35s var(--ease)}
.tm-n.on,.tm-n:hover{background:#F2F6F5;transform:translateY(-2px)}
.tm-n.on p,.tm-n:hover p,.tm-n:focus-visible p{max-height:120px;opacity:1}
.tm-n.on{box-shadow:inset 0 -2px 0 var(--emerald)}
.tm > .tm-n:last-child{grid-column:1/-1}

/* ---------- WEBINAR: tre passaggi club ---------- */
.stepc{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-ink,rgba(0,0,0,.12));
  border:1px solid var(--line-ink,rgba(0,0,0,.12));margin-top:30px}
.stepc-i{background:var(--paper,#fff);padding:clamp(22px,2.6vw,34px)}
.stepc-i b{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--emerald)}
.stepc-i h4{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:16px;margin:14px 0 10px}
.stepc-i p{margin:0;font-size:14.5px;line-height:1.7}

/* ---------- WEBINAR: prossima data ---------- */
.wnext{display:flex;flex-wrap:wrap;align-items:center;gap:18px 34px;border:1px solid var(--line-d);
  padding:clamp(20px,2.6vw,30px);margin-bottom:30px;background:#08100F}
.wnext-k{font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--ash-dark)}
.wnext-v{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(18px,2.2vw,26px);color:#fff}
.wnext-v em{font-style:normal;color:var(--emerald-lift)}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1024px){
  .pp{grid-template-columns:repeat(2,1fr)}
  .yt-grid{grid-template-columns:1fr}
  .yt-side{grid-template-columns:1fr 1fr;display:grid}
  .tm{grid-template-columns:repeat(2,1fr)}
  .tm-hub{grid-column:1/-1;grid-row:auto}
  .stepc{grid-template-columns:1fr}
}
@media (max-width:768px){
  .chain{grid-template-columns:1fr;gap:0}
  .chain::before{left:6px;right:auto;top:0;bottom:0;width:1px;height:auto}
  .chain::after{left:6px;top:0;width:1px;height:0;transition:height 1.6s var(--ease)}
  .chain.ch-on::after{width:1px;height:100%}
  .ch-i{text-align:left;padding:0 0 22px 28px}
  .ch-i i{position:absolute;left:0;top:4px;margin:0}
  .pp,.nsay,.yt-side,.tm{grid-template-columns:1fr}
  .views-tabs button{flex:1 1 45%}
  .pv{max-width:292px}
  .pv-n{font-size:8px;letter-spacing:.08em;gap:6px}
  .pv-n i{width:10px;height:10px}
  .pv-n--1,.pv-n--3{left:0}
  .pv-n--2,.pv-n--4{right:0;flex-direction:row-reverse}
  .tm-n p{max-height:none;opacity:1;overflow:visible}
}
@media(hover:none){
  .tm-n p{max-height:none;opacity:1;overflow:visible}
  .pp-v path{stroke-dashoffset:0}
  .pp-v circle{opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .chain::after,.ch-i i,.pp-v path,.tm-n,.tm-n p{transition:none}
  .chain.ch-on::after{width:100%}
  .ch-i i{transform:scale(1);opacity:1}
  .pp-v path{stroke-dashoffset:0}
  .tm-n p{max-height:none;opacity:1}
  .pv-c.beat{box-shadow:none}
}