/* === SynapSenseS — Exercises (allineato ad Autoipnosi) === */
: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;
}

/* Skip link for accessibility */
.skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  background: var(--brand1);
  color: white;
  padding: 8px;
  text-decoration: none;
  border-radius: 4px;
  z-index: 1000;
  transition: top 0.3s;
}
.skip-link:focus {
  top: 6px;
}
.container{max-width:1180px;margin:0 auto;padding:0 16px}

/* ===== Header (identico ad Autoipnosi) ===== */
.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 (identici) ===== */
.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:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  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}
.spark{margin-right:4px}

/* ===== Cards grid ===== */
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,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; background-color: #f0f3f5;}
.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}

.card .card-actions{display:flex;gap:10px;flex-wrap:wrap}
.card .btn{font-size:15px; padding:10px 16px; border-radius:9999px;}
.card .btn.listen, .card .btn.pause{ background: var(--brand-grad); color:#fff; }
.card .btn.stop{ background:#fff; color:var(--brand1); border:1px solid #e5e7eb; box-shadow:0 6px 14px rgba(15,23,42,.08); }
.card .btn.more{ background:#fff; color:#0f172a; border:1px solid #e5e7eb; }
.card .btn:hover{transform:translateY(-1px)}
.card .btn:active{transform:scale(.95)}

/* ===== Modale dettaglio ===== */
.detail{
  position:fixed; inset:0; background:rgba(2,6,23,.60); backdrop-filter:blur(3px);
  display:none; z-index:200;
}
.detail[hidden]{display:none}
.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:calc(100vh - 2 * clamp(16px, 4vw, 28px)); overflow-y:auto;
  -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
}
.detail__actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-start;margin-top:12px}
.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{display:flex;align-items:center;gap:10px;margin:12px 0 8px}
.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}

.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; color: var(--brand1); background:#fff; border:1px solid #e5e7eb;
  box-shadow:0 14px 28px rgba(2,6,23,.12); z-index: 1;
}
body.no-scroll{overflow:hidden}

.detail__title{margin:6px 0 10px;font-weight:800;letter-spacing:.2px;font-size:clamp(20px, 2.2vw, 26px);color:#7c3aed}
.detail__obj{margin:12px 0 18px;font-size:16px;line-height:1.7;color:#374151}
.detail__obj strong{color:#111827;font-weight:700}
.detail__steps{margin:0;padding-left:1.25rem;font-size:16px;line-height:1.7;color:#1f2937}
.detail__steps li{margin-bottom:10px}
.detail__tips{margin-top:16px;padding:12px 14px;border-left:4px solid #7c3aed;background:#f9fafb;border-radius:10px;font-size:15px;line-height:1.6;color:#374151;box-shadow:0 6px 18px rgba(2,6,23,.04)}
.detail__tips strong{color:#0b1020}

@media (prefers-reduced-motion: reduce) {
  .btn--pill::before, .title--gloss::after, .detail__img {
    animation: none !important;
    transition: none !important;
  }
}

/* --- (INCOLLATO DA TRAINING.CSS) STILI PER CONTENUTI PRO --- */

.card.is-pro {
  position: relative;
  /* Crea l'effetto "offuscato" per far capire che è bloccato */
  opacity: 0.6;
  filter: blur(1.5px);
  transition: all 0.2s ease-in-out;
}

.card.is-pro:hover {
  opacity: 0.8;
  filter: blur(0px); /* Al passaggio del mouse, si vede meglio */
}

/* Impedisce al link di sembrare cliccabile (coerente con il blocco) */
.card.is-pro:hover {
  transform: none;
  box-shadow: none;
}

/* h3 deve essere position:relative per posizionare il badge */
.card h3 {
  position: relative; 
}

/* Stile per il badge (ora .pro-badge-span) */
.card.is-pro .pro-badge-span {
  position: absolute;
  top: -6px; /* Aggiustare se necessario */
  right: -10px; /* Aggiustare se necessario */
  z-index: 10;
  
  /* Stile del badge */
  background-color: #7c3aed; /* Colore brand */
  color: white;
  font-family: var(--font-sans, 'Lato', 'Inter', sans-serif);
  font-weight: 700;
  font-size: 0.8em;
  padding: 5px 12px;
  border-radius: 20px;
  
  /* Filtro per renderlo leggibile */
  filter: none; 
  opacity: 1;
}


/* Nasconde l'effetto "luce puntatore" sulle card Pro (se presente) */
.card.is-pro::after {
  display: none !important;
}