/* ===========================
   SynapSenseS – Exercises CSS (prod)
   =========================== */
:root{
  --brand-start:#7c3aed; --brand-end:#a78bfa; --text:#1f2937; --muted:#6b7280;
  --card-bg:rgba(255,255,255,.86); --radius:20px; --shadow:0 10px 25px rgba(0,0,0,.08);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}

body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:url('/images/lab-bg.jpg') center/cover fixed no-repeat;
  color:var(--text);
  /* parallax leggerissimo (disabilitato con prefers-reduced-motion) */
  background-position:50% 0%;
  animation:bgfloat 38s ease-in-out infinite alternate;
}
@keyframes bgfloat{from{background-position:50% 0%}to{background-position:50% 12%}}
@media (prefers-reduced-motion:reduce){ body{animation:none} }

/* ===== HEADER ===== */
.lab-header{
  background:linear-gradient(90deg,var(--brand-start),#8b5cf6,var(--brand-end));
  color:#fff; padding:1rem 1.25rem 1.2rem; position:sticky; top:0; z-index:20;
  box-shadow:0 8px 28px rgba(124,58,237,.35);
}
.head-top{
  display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap;
}
.lab-logo{
  height:clamp(28px,5vw,48px); width:auto; display:block;
  filter:drop-shadow(0 6px 14px rgba(124,58,237,.35));
  transform:translateZ(0);
}

/* Titolo con “gloss” IDENTICO alla index */
.page-title{
  margin:0; font-weight:800; text-align:center;
  font-size:clamp(1.35rem,3.2vw,2.15rem);
  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; pointer-events:none;
  animation:gloss 3.8s linear infinite;
}
@keyframes gloss{0%{background-position:-60% 0}100%{background-position:160% 0}}

/* ===== MAIN ===== */
main{ padding:0 }
@media (min-width:821px){
  main{
    min-height:calc(100svh - 120px);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
  }
}
@media (max-width:820px){
  main{
    min-height:calc(100svh - 120px);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
  }
}

/* ===== DESKTOP (>=821px): SLIDER ORIZZONTALE ===== */
@media (min-width:821px){
  #deck{ position:relative; width:100%; padding:18px 0 30px; }
  #deck .carousel-track{
    display:grid; grid-auto-flow:column;
    grid-auto-columns:min(84vw, 680px);
    gap:16px; overflow-x:auto; -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory; scroll-padding:0 8vw;
    padding:6px 8vw 18px;
  }
  #deck .slide{
    position:relative; height:clamp(320px,56vh,560px);
    border-radius:20px; overflow:hidden; scroll-snap-align:center;
    transform:scale(.92); opacity:.65;
    transition:transform .35s ease, opacity .35s ease, box-shadow .35s ease;
    box-shadow:var(--shadow); background:var(--card-bg); backdrop-filter:blur(8px);
  }
  #deck .slide.active{ transform:scale(1); opacity:1; box-shadow:0 18px 42px rgba(0,0,0,.18) }
  #deck .slide img{ width:100%; height:100%; object-fit:cover; display:block }
  #deck .slide h4{
    position:absolute; left:12px; bottom:12px; margin:0; padding:8px 12px; border-radius:12px;
    color:#fff; background:rgba(0,0,0,.45); font-weight:700; backdrop-filter:blur(3px);
  }

  /* frecce + dots */
  #deck .car-arrow{
    position:absolute; top:50%; transform:translateY(-50%); z-index:10; width:44px; height:44px;
    border-radius:50%; border:none; cursor:pointer; background:#fff; box-shadow:0 6px 18px rgba(0,0,0,.18);
    font-size:28px; line-height:44px; pointer-events:auto;
  }
  #deck .car-arrow.prev{ left:14px }  #deck .car-arrow.next{ right:14px }
  #deck .car-arrow:hover{ transform:translateY(-50%) scale(1.06) }

  #deck .car-dots{ display:flex; gap:8px; justify-content:center; margin-top:10px }
  #deck .car-dots .dot{ width:9px; height:9px; border-radius:50%; border:none; background:#d9cfe6; cursor:pointer }
  #deck .car-dots .dot.active{ background:var(--brand-start) }

  #deck .carousel-track::-webkit-scrollbar{ height:10px }
  #deck .carousel-track::-webkit-scrollbar-thumb{ background:#e6e0ee; border-radius:8px }
}

/* ===== MOBILE (<=820px): CAROUSEL 1-ALLA-VOLTA ===== */
@media (max-width:820px){
  #deck{ position:relative; width:100%; padding:10px 0 0; }
  #deck .carousel-track{
    display:grid; grid-auto-flow:column;
    grid-auto-columns:90vw;            /* una card per volta */
    gap:12px; overflow-x:auto; -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory; scroll-padding:0 5vw;
    padding:8px 5vw 12px;              /* “peek” della successiva */
  }
  #deck .slide{
    position:relative; height:clamp(220px,52vh,420px);
    border-radius:16px; overflow:hidden; scroll-snap-align:center;
    transform:scale(.98); opacity:.98;
    transition:transform .25s ease, opacity .25s ease, box-shadow .25s ease;
    box-shadow:var(--shadow); background:var(--card-bg); backdrop-filter:blur(6px);
  }
  #deck .slide.active{ transform:scale(1); opacity:1; box-shadow:0 14px 30px rgba(0,0,0,.18) }
  #deck .slide img{
    width:100%; height:100%; object-fit:cover; object-position:center center; /* centrata verticalmente */
    display:block;
  }
  #deck .slide h4{
    position:absolute; left:10px; bottom:10px; margin:0; padding:6px 10px; border-radius:12px;
    color:#fff; background:rgba(0,0,0,.5); font-weight:700; backdrop-filter:blur(3px); font-size:.95rem;
  }

  /* niente frecce su mobile: swipe */
  #deck .car-arrow{ display:none }
  #deck .car-dots{ display:flex; gap:6px; justify-content:center; margin-top:8px }
  #deck .car-dots .dot{ width:8px; height:8px; border-radius:50%; border:none; background:#d9cfe6 }
  #deck .car-dots .dot.active{ background:var(--brand-start) }
}

/* ===== BOTTONE IN FONDO PAGINA ===== */
.page-actions{
  width:100%; display:flex; justify-content:center;
  padding:14px 0 22px;
}
.home-button{
  position:relative;
  display:inline-block; background:#fff; color:var(--brand-start);
  padding:.6rem 1.2rem; border-radius:999px; font-weight:700; text-decoration:none;
  box-shadow:0 3px 10px rgba(0,0,0,.15); overflow:hidden;
}
/* sheen (luccichio) */
.home-button::before{
  content:""; position:absolute; inset:-120% 0 auto -120%;
  width:40%; height:300%;
  background:linear-gradient(120deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 100%);
  transform:skewX(-20deg) translateX(-130%);
  filter:blur(1px);
  animation:sheen 7s ease-in-out infinite;
}
.home-button:hover{ background:var(--brand-start); color:#fff }
.home-button:hover::before{ animation-duration:2.6s }
@keyframes sheen{
  0%{transform:skewX(-20deg) translateX(-130%)}
  60%{transform:skewX(-20deg) translateX(160%)}
  100%{transform:skewX(-20deg) translateX(160%)}
}
@media (prefers-reduced-motion:reduce){
  .home-button::before{animation:none}
}

/* ===== OVERLAY + AUDIO ===== */
.overlay{
  position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center;
  background:rgba(5,5,10,.55); animation:fadeIn .25s ease forwards; backdrop-filter:blur(3px);
}
.detail{
  width:min(940px, 92vw); max-height:92vh; background:var(--card-bg); backdrop-filter:blur(8px);
  border-radius:22px; box-shadow:0 14px 50px rgba(0,0,0,.25);
  padding:clamp(.8rem,1.5vw,1.4rem); display:flex; flex-direction:column; color:var(--text);
  overflow:auto; -webkit-overflow-scrolling:touch;
}
.detail h1{ margin:.4rem 0 1rem; font-size:clamp(1.25rem,3vw,2rem); color:var(--brand-start) }
.detail h2{ margin:1.2rem 0 .35rem; font-size:clamp(1rem,2.4vw,1.4rem); color:#4b286d }
.detail p, .detail li{ line-height:1.6 } .detail ol, .detail ul{ margin:.1rem 0 .8rem 1.2rem }

.audio{
  position:sticky; top:0; z-index:5;
  background:linear-gradient(90deg,var(--brand-start),var(--brand-end));
  border-radius:16px; padding:.65rem .75rem .7rem; box-shadow:0 6px 20px rgba(124,58,237,.35); margin-bottom:.6rem;
}
.audio .btnrow{ display:flex; gap:.55rem }
.a-btn{
  flex:1; border:0; border-radius:12px; background:rgba(255,255,255,.2); color:#fff; font-weight:700;
  padding:.7rem 1rem; letter-spacing:.2px; cursor:pointer;
}
.a-btn:hover{ background:rgba(255,255,255,.28) }
.progress{ display:flex; align-items:center; gap:.6rem; margin-top:.5rem }
.progress .time{ width:44px; text-align:center; color:#fff; font-weight:700 }
.progress input[type="range"]{ flex:1; accent-color:#fff }

.actions{ display:flex; gap:.6rem; margin-top:.6rem }
.actions a{
  flex:1; text-align:center; padding:.75rem 1rem; border-radius:12px; font-weight:700; text-decoration:none;
  background:#eee; color:#333;
}
.actions a:first-child{ background:var(--brand-start); color:#fff }
.actions a:hover{ filter:brightness(.98) }

@keyframes fadeIn{ from{opacity:0} to{opacity:1} }