/* video-page-mobile.css */
/* Attivo SOLO su schermi <= 768px */

:root{
  --verde-acqua: #00C9A7;
  --rosso-mela: #E63946;
  --bianco: #ffffff;
  --grigio: #f5f5f5;
  --panna: #F7F3EE;

  --text: #111827;
  --muted: #4B5563;
  --muted2: #6B7280;

  --surface: rgba(255,255,255,0.94);
  --border: rgba(17,24,39,0.14);
  --shadow: 0 14px 35px rgba(0,0,0,0.12);

  --radius: 18px;
  --radius2: 14px;
}

/* Fondo più “wellness” su mobile */
body.video-page{
  background: linear-gradient(180deg, var(--panna), var(--grigio));
  color: var(--text);
}

/* Header sticky pulito (se il tuo style.css lo supporta) */
.main-header{
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}

/* HERO: più compatto e leggibile */
.video-hero{
  padding: 16px 14px 6px !important;
  text-align: left !important;
}

.video-hero h1{
  font-size: 22px !important;
  line-height: 1.15 !important;
  margin: 0 0 10px !important;
  color: var(--rosso-mela);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.video-hero p{
  font-size: 14.5px !important;
  line-height: 1.65 !important;
  color: var(--muted) !important;
  margin: 0 !important;
  max-width: 100% !important;
}

/* Video: a tutta larghezza, senza margini eccessivi */
.video-wrapper{
  max-width: 100% !important;
  margin: 14px auto 0 !important;
  padding: 0 12px !important;
}

.video-frame{
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
  overflow: hidden !important;
}

/* Info: card leggibile */
.video-info{
  max-width: 100% !important;
  margin: 14px auto 0 !important;
  padding: 0 12px 22px !important;
}

/* Se la .card viene da style.css, la rendiamo “mobile-friendly” */
.video-info .card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px !important;
}

.video-info h2{
  font-size: 17px !important;
  margin: 0 0 10px !important;
}

.video-info ul{
  padding-left: 18px !important;
  margin: 10px 0 0 !important;
  color: var(--muted) !important;
}

.video-info li{
  margin-bottom: 8px !important;
  line-height: 1.5 !important;
  font-size: 14.5px !important;
}

/* Bottoni: full width e comodi da premere */
.video-actions{
  margin-top: 14px !important;
  display: grid !important;
  gap: 10px !important;
}

.video-actions .btn{
  width: 100% !important;
  justify-content: center;
  padding: 14px 14px !important;
  font-size: 15.5px !important;
  border-radius: 999px !important;
}

/* Helper text: più leggibile */
.video-info .helper-text{
  margin-top: 14px !important;
  font-size: 13.5px !important;
  line-height: 1.6 !important;
  color: var(--muted2) !important;
}