/* Autoipnosi — stile IDENTICO a training.css (solo contenuti diversi) */
:root{
  --brand1:#7c3aed; --brand2:#8b5cf6; --brand3:#06b6d4;
  --brand-grad:linear-gradient(100deg,var(--brand1),var(--brand2) 45%,var(--brand3));
  --grad: var(--brand-grad);
  --text:#0f172a; --muted:#6b7280; --card:#ffffffcc; --radius:18px;
  --shadow:0 14px 36px rgba(2,6,23,.08);
  --title-shine-duration: 6s;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:#eef2f6 url("/images/lab-bg.jpg") center / cover fixed no-repeat;
}
.container{max-width:1180px;margin:0 auto;padding:0 16px}

/* ===== Header (uguale a Training) ===== */
.ta-header{
  position: sticky; top:0; z-index:50;
  background:var(--grad); color:#fff;
  box-shadow:0 2px 10px rgba(124,58,237,.25);
}
.ta-header__inner{
  min-height:88px; display:grid; gap:12px; padding:0 16px;
  grid-template-columns:1fr auto 1fr; align-items:center;
}
.ta-brand{display:flex;align-items:center;gap:12px;justify-self:center}
.ta-header__icon{width:42px;height:42px;display:block;filter:drop-shadow(0 6px 10px rgba(0,0,0,.28))}
h1.title{
  margin:0; font-weight:900; letter-spacing:.2px; white-space:nowrap;
  font-size:clamp(22px,3.2vw,34px); color:#fff; position:relative;
}
.title--gloss::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.55) 15%,transparent 30%);
  background-size:200% 100%;
  mix-blend-mode:screen; animation:gloss var(--title-shine-duration) linear infinite;
  pointer-events:none;
}
@keyframes gloss{from{background-position-x:200%} to{background-position-x:-200%}}
.ta-header__cta{justify-self:end}
@media (max-width:640px){
  .ta-header__inner{grid-template-columns:auto 1fr auto}
  .ta-header__icon{width:36px;height:36px}
  .ta-brand{gap:10px}
}

/* ===== Bottoni base (uguali) ===== */
.btn{display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;text-decoration:none;font-weight:800;border-radius:999px;box-shadow:0 10px 26px rgba(16,24,40,.18)}
.btn--pill{padding:10px 16px;background:var(--brand-grad);color:#fff;position:relative;isolation:isolate;transition:transform .15s}
.btn--pill:hover{transform:translateY(-1px)}
.btn--pill::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;
  background:conic-gradient(from 0deg,#7c3aed33,#8b5cf655,#06b6d433,#7c3aed33);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:.7;z-index:-1
}
.btn--ghost{padding:10px 16px;background:#ffffff;color:var(--brand1);border:1px solid #e5e7eb}
.btn--ghost:hover{box-shadow:0 10px 24px rgba(124,58,237,.16)}

/* ===== Intro / descrizione ===== */
main{padding:clamp(20px,4vw,44px) 0}
.intro-card{
  background:#fff;border:1px solid #e5e7eb;border-radius:18px;box-shadow:var(--shadow);
  padding:clamp(16px,3.6vw,24px);margin-bottom:clamp(18px,3vw,28px)
}
.ta-info{display:grid;gap:16px;grid-template-columns:1fr;align-items:stretch;margin-bottom:8px}
.ta-info__box{background:#fff;border:1px solid #e5e7eb;border-radius:16px;box-shadow:var(--shadow);padding:16px 18px}
.ta-info__box h2{margin:0 0 8px;font-weight:900}
#intro-text{margin:8px 0 0;color:var(--text);line-height:1.6;font-size:16px}
.tip{margin-top:14px;color:var(--muted);line-height:1.55}

/* Icone inline animate (stesse classi) */
.ic{display:inline-block;width:18px;height:18px;vertical-align:-3px;margin:0 4px;filter:drop-shadow(0 3px 6px rgba(0,0,0,.18))}
@keyframes breath{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.ic-breath{background:radial-gradient(circle at 50% 45%,#fff 0 7px,transparent 8px), var(--brand-grad); border-radius:10px; animation:breath 3s ease-in-out infinite}
.ic-heart{background:var(--brand-grad); clip-path:path("M9 16 C 2 10, 9 5, 9 7 C 9 5, 16 10, 9 16 Z"); animation:pulse 1.8s ease-in-out infinite}
.ic-sun{background:radial-gradient(circle,#fff 0 6px,transparent 8px),var(--brand-grad);border-radius:50%;animation:spin 6s linear infinite}
.ic-snow{background:conic-gradient(from 0deg,#fff 0 25%,transparent 25% 50%,#fff 50% 75%,transparent 75% 100%), var(--brand-grad);border-radius:6px;animation:floatY 4.2s ease-in-out infinite}

/* ===== Cards grid ===== */
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(14px,2.2vw,22px)}
.card{
  position:relative;isolation:isolate;overflow:hidden;background:var(--card);backdrop-filter:blur(8px);
  border:1px solid #e5e7eb;border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 16px;
  transition:transform .12s ease, box-shadow .2s ease, border-color .2s ease
}
.card:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(0,0,0,.12);border-color:#e2e8f0}
.card img{width:100%;height:150px;object-fit:cover;border-radius:12px}
.card h3{margin:10px 0 6px;font-size:18px;font-weight:900}
.card p{margin:0 0 10px;color:var(--muted);font-size:14px;line-height:1.55}

/* === Harmonization pulsanti card (identici a Training) === */
.card .card-actions{display:flex;gap:10px;flex-wrap:wrap}
.card .btn{font-size:15px}
.card .btn.listen,
.card .btn.pause{
  background: var(--brand-grad);
  color:#fff;
  padding:10px 16px;
  border-radius:9999px;
}
.card .btn.stop{
  background:#fff;
  color:var(--brand1);
  border:2px solid var(--brand1);
  padding:10px 16px;
  border-radius:9999px;
}
.card .btn.more{
  background:#fff;
  color:#0f172a;
  border:1px solid #e5e7eb;
  padding:10px 16px;
  border-radius:9999px;
}
.card .btn:hover{transform:translateY(-1px)}
.card .btn:active{transform:scale(.95)}

/* ===== Modale dettaglio (identica logica) ===== */
.detail{
  position:fixed; inset:0;
  background:rgba(2,6,23,.60); backdrop-filter:blur(3px);
  display:none; z-index:200;
}
/* nascondi quando hidden... */
.detail[hidden]{display:none}
/* ...e MOSTRA quando viene tolto hidden (come Training) */
.detail:not([hidden]){display:block}

.detail__content{
  background:#fff;color:#0f172a;border-radius:18px;
  max-width:760px;margin:clamp(16px,4vw,28px) auto;padding:clamp(16px,3.2vw,24px);
  box-shadow:0 18px 44px rgba(2,6,23,.28);
  max-height:90vh; overflow-y:auto;
  -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  padding-bottom:calc(24px + env(safe-area-inset-bottom));
}
.detail h1,.detail h2{color:#7c3aed;margin:10px 0}
.detail ol,.detail ul{margin-left:1.25rem}
.detail__actions{display:flex;gap:10px;justify-content:flex-end;margin-top:12px;flex-wrap:wrap}

/* Immagine in modale: responsiva e non enorme (come Training) */
.detail__img{
  max-width:100%;
  width:100%;
  height:auto;
  max-height:48vh;
  object-fit:cover;
  border-radius:12px;
  margin:12px 0;
  opacity:0; transform:scale(.97);
  animation:fadeIn .5s ease forwards;
}
@keyframes fadeIn{to{opacity:1; transform:scale(1)}}

/* ===== Media bar (seek) ===== */
.media-bar{display:flex;align-items:center;gap:10px;margin:10px 0 14px}
.media-bar .time{font-variant-numeric:tabular-nums;font-size:13px;color:var(--muted);min-width:48px;text-align:right}
.media-bar input[type="range"]{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:999px;background:#e5e7eb;outline:none;box-shadow:inset 0 0 0 1px #e5e7eb,0 4px 10px rgba(2,6,23,.08)}
.media-bar input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--brand-grad);border:0;box-shadow:0 2px 8px rgba(2,6,23,.25);margin-top:-5px}
.media-bar input[type="range"]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;border:0;background:var(--brand-grad);box-shadow:0 2px 8px rgba(2,6,23,.25)}
.media-bar input[type="range"]{background-image:linear-gradient(100deg,var(--brand1),var(--brand2) 45%,var(--brand3));background-size:var(--fill,0%) 100%;background-repeat:no-repeat}

/* Chiudi sticky in basso (come Training) */
#m-close{
  position:sticky;
  bottom:max(8px, env(safe-area-inset-bottom));
  display:block;
  margin:12px auto 0;
  background:#fff;
  border:1px solid #e5e7eb;
  z-index:1;
}

/* ===== Body no-scroll quando modale aperta ===== */
body.no-scroll{overflow:hidden}

/* Responsive & motion */
@media (max-width:640px){
  .card img{height:140px}
  .detail__actions .btn{font-size:16px; padding:12px 16px}
}
@media (prefers-reduced-motion:reduce){
  .btn--pill::before,.card::before,.card::after,.ic-breath,.ic-heart,.ic-sun,.ic-snow{animation:none !important;transition:none !important}
}
/* Pulsanti modale: dimensioni chiare anche su mobile (come training) */
.detail__actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-start;margin-top:12px}
.detail__actions .btn{font-size:15px;padding:10px 16px}
@media (max-width:480px){
  .detail__actions .btn{font-size:16px;padding:12px 16px}
}

/* Seek bar sotto i pulsanti (già così nell’HTML) — add un piccolo margine */
.media-bar{margin:12px 0 8px}

/* “Chiudi” centrato e STICKY come in training, con ombra e safe-area */
.btn-close{
  position: sticky;
  bottom: max(8px, env(safe-area-inset-bottom));
  display: block;
  margin: 10px auto 0;
  font-size: 18px;
  font-weight: 800;
  padding: 12px 22px;
  border-radius: 9999px;
  background: #fff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 14px 28px rgba(2,6,23,.12);
  z-index: 1;
}

/* Maggior respiro in fondo, così i controlli non “toccano” il bordo su mobile */
.detail__content{
  padding-bottom: calc(28px + env(safe-area-inset-bottom));
}

/* Immagine: non oltre metà viewport, come training */
.detail__img{
  max-width:100%; width:100%; height:auto;
  max-height:48vh; object-fit:cover; border-radius:12px; margin:12px 0;
}

/* Contrasto area controlli su sfondi lunghi (leggero fade) */
@media (max-width:640px){
  .detail__content{
    background:
      linear-gradient(to bottom, #fff 0 80%, rgba(255,255,255,.96) 80% 100%);
  }
}
/* --- MODALE: pulsanti identici a Training --- */
.detail__actions .btn { font-size:16px; padding:12px 16px }   /* come training su mobile */
@media (min-width:561px){
  .detail__actions .btn { font-size:15px; padding:10px 16px } /* come training su desktop */
}

/* “Chiudi” con stesso look (testo viola, centrato, sticky) */
.btn-close{
  color: var(--brand1);
  background:#fff;
  border:1px solid #e5e7eb;
  box-shadow:0 14px 28px rgba(2,6,23,.12);
}

/* --- CARD: pulsante Stop come in Training (chip bianca con testo viola, bordo leggero) --- */
.card .btn.stop{
  background:#fff;
  color:var(--brand1);
  border:1px solid #e5e7eb;   /* prima era 2px viola: ora come training */
  padding:10px 16px;
  border-radius:9999px;
  box-shadow:0 6px 14px rgba(15,23,42,.08);
}

/* CARD: uniforma font/padding anche per gli altri bottoni */
.card .btn.listen,
.card .btn.pause,
.card .btn.more{
  padding:10px 16px;
  font-size:15px;
}