@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@300;400;500;600;700;900&display=swap');
/* Font reale del brand, dal kit Adobe Fonts del sito (caricato anche via
   <link> nelle pagine). Il kit è limitato ai domini autorizzati: se il
   dominio corrente non è tra quelli, il font non si carica e si usa
   Archivo come riserva. Per autorizzare un nuovo dominio (o localhost):
   Adobe Fonts > il kit "mmd5ngh" > Impostazioni > Domini. */
@import url('https://use.typekit.net/mmd5ngh.css');

:root{
  /* colori esatti presi dal sito reale primaopoi.live */
  --purple:#8456f6;
  --cyan:#82dee4;
  --bg:#1b0216;
  --bg-raised:#2c0c3b;
  --bg-raised-2:#1e0e27;
  --bg-raised-3:#2b2130;
  --text:#f1eff5;
  --text-dim:#dcd4e2;
  --ink:#160321;

  /* Font reale del sito, dal kit Adobe Fonts; Archivo resta come riserva
     se il kit non è autorizzato sul dominio corrente. */
  --font:"neue-haas-grotesk-display","Archivo",Helvetica,Arial,sans-serif;
  --brand-gradient: linear-gradient(to top left, var(--purple) 0%, var(--cyan) 100%);
}

*{box-sizing:border-box;}

/* --- animazione fade in up ---------------------------------------------
   Unica animazione del sito, applicata a tutti gli elementi con
   data-anim (vedi anim.js), come nella reference. */
/* lo stato di partenza è dietro .js: senza JavaScript i contenuti
   restano visibili invece di rimanere trasparenti per sempre */
.js [data-anim]{opacity:0;transform:translate3d(0,40px,0);}
.js [data-anim].is-visible{
  opacity:1;
  transform:none;
  transition:opacity .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1);
}
@media (prefers-reduced-motion:reduce){
  .js [data-anim]{opacity:1;transform:none;transition:none;}
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text-dim);
  font-family:var(--font);
  line-height:1.55;
}
a{color:inherit;text-decoration:none;}
/* Breakpoint del sito reale: tablet fino a 1024px, mobile fino a 767px.
   Gli inset laterali sono quelli misurati su primaopoi.live a ogni tier. */
.wrap{max-width:1320px;margin:0 auto;padding:0;}
@media (max-width:1024px){ .wrap{padding:0 20px;} }
@media (max-width:767px){ .wrap{padding:0 16px;} }
body{overflow-x:hidden;}
section{padding:4rem 0;}
.latest-episodes{padding:9rem 0;background:var(--bg-raised-3);}
.about{background:var(--bg-raised-2);}
@media (max-width:767px){ .latest-episodes{padding:4rem 0;} }

/* Dimensioni dei titoli: valori discreti per tier, come sul sito reale
   (57/40/40 per il titolo di pagina, 32.8/30/24 per gli h2). */
h2{font-weight:600;font-size:2.05rem;margin:0 0 1.2rem;color:#fff;}
.page-title{font-size:3.5625rem;margin:0 0 1.2rem;}
@media (max-width:1024px){
  h2{font-size:1.875rem;}
  .page-title{font-size:2.5rem;}
}
@media (max-width:767px){
  h2{font-size:1.5rem;}
  .page-title{font-size:2.5rem;}
}

.btn{
  font-family:var(--font);
  font-weight:600;
  font-size:1.125rem;
  padding:16px 32px;
  border-radius:100px;
  display:inline-block;
  border:none;
  cursor:pointer;
}
.btn-primary{background:var(--brand-gradient);color:var(--ink);}
/* più specifica di ".site-header nav a": senza, il colore dei link di
   navigazione (bianco) vincerebbe su quello del bottone (viola scuro). */
.site-header .btn-primary{color:var(--ink);}
.btn-dark{background:var(--bg);color:#fff;font-weight:500;}

/* --- header --- */
.site-header{
  border-bottom:1px solid rgba(255,255,255,0.08);
  position:sticky;
  top:0;
  background:rgba(27,2,22,0.9);
  backdrop-filter:blur(10px);
  z-index:10;
}
/* altezza header: 80px sul sito reale, 84px su mobile */
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:80px;
  padding:0;
}
/* logo a 120px da sinistra, gruppo nav+Subscribe a 120px da destra (stesso
   margine della hero sotto, per restare allineati); il resto del sito usa
   invece il contenitore centrato standard. Su tablet/mobile gli inset
   scendono a 48px/16px come sul sito reale. */
.site-header .wrap{
  max-width:none;
  margin-left:120px;
  margin-right:120px;
  padding:0;
}
@media (max-width:1024px){ .site-header .wrap{margin-left:48px;margin-right:48px;} }
@media (max-width:767px){
  .site-header .wrap{margin-left:16px;margin-right:16px;}
  .header-inner{height:84px;}
}
.logo-header{height:32px;width:auto;display:block;flex:none;}
/* Episodi, About e Subscribe vivono nello stesso <nav>, con lo stesso gap,
   così lo spazio tra Episodi-About è identico a quello tra About-Subscribe. */
.site-header nav{display:flex;align-items:center;gap:2.2rem;}
.site-header nav a{
  display:inline-block;
  position:relative;
  color:var(--text);
  font-weight:600;
  font-size:1rem;
  transition:opacity .15s;
  white-space:nowrap;
}
.site-header nav a:hover{opacity:0.75;}
/* riga viola sotto la voce della pagina in cui ci si trova */
.site-header nav a:not(.btn){padding-bottom:10px;}
.site-header nav a.active{color:#fff;}
.site-header nav a.active::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:3px;
  border-radius:100px;
  background:var(--purple);
}

@media (max-width:767px){
  .header-inner{gap:0.75rem;}
  .logo-header{height:22px;}
  .site-header nav{gap:1.1rem;}
  .site-header nav a{font-size:0.9rem;}
  .site-header .btn-primary{display:none;}
}

/* --- hero --- */
.hero{
  padding:0;
  background:radial-gradient(80% 80% at 50% 45%, var(--cyan) 0%, var(--purple) 66%, var(--bg-raised-2) 100%);
}
/* Contenitore della hero: 120px di margine per lato (non il contenitore
   centrato da 1320px), come misurato sul sito reale; 48px su tablet,
   16px su mobile. */
.hero .wrap{
  max-width:none;
  margin-left:120px;
  margin-right:120px;
  padding:0;
}
@media (max-width:1024px){ .hero .wrap{margin-left:48px;margin-right:48px;} }
@media (max-width:767px){ .hero .wrap{margin-left:16px;margin-right:16px;} }

/* Due colonne su desktop (31.39% testo / resto immagine, senza gap: sono le
   proporzioni reali del sito). Da 1024px in giù diventa una colonna sola. */
.hero-grid{
  display:grid;
  grid-template-columns:31.39% 1fr;
  align-items:center;
  gap:0;
  padding:0;
}
.hero-copy{align-self:center;}
@media (max-width:1024px){ .hero-grid{grid-template-columns:1fr;} }
/* su mobile il contenuto della hero parte 80px sotto l'header, come sul
   sito reale (sul selettore .hero .wrap, che è lo stesso elemento: è più
   specifico e altrimenti il suo padding:0 vincerebbe). */
@media (max-width:767px){ .hero .wrap{padding-top:80px;} }

/* il logo occupa l'85% della propria colonna a ogni risoluzione: è la
   proporzione che riproduce tutte le misure reali (482px a 2048, 320px a
   1440, 304px a 390). */
.logo-hero{width:85%;height:auto;display:block;margin-bottom:1.6rem;}
.claim{
  color:var(--bg-raised);
  font-weight:500;
  font-size:1.4375rem;
  line-height:1.5;
  margin:0 0 0.9rem;
}
#hero-cta{font-size:1.25rem;padding:12px 32px;}
@media (max-width:767px){
  /* su mobile il bottone occupa tutta la larghezza, come sul sito reale */
  #hero-cta{display:block;width:100%;text-align:center;}
}

/* L'immagine della hero NON va mai ritagliata: sul sito reale è una
   semplice immagine scalata (object-fit:fill, nessun contenitore che
   taglia). Riempie la sua colonna fino a un massimo di 1200px di
   larghezza, restando centrata, e l'altezza segue le sue proporzioni. */
.hero-art{display:block;}
.hero-art img{
  display:block;
  width:100%;
  max-width:1200px;
  height:auto;
  margin:0 auto;
}
@media (max-width:1024px){ .hero-art img{max-width:100%;} }

/* --- about / watch & subscribe --- */
.pill{
  display:inline-block;
  font-size:0.9375rem;
  line-height:1;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.04em;
  color:#fff;
  background:var(--brand-gradient);
  border-radius:100px;
  padding:8px 24px;
  margin:0 0 1.2rem;
}
/* solo in homepage: la label deve scomparire dal primo frame (il gradiente
   della hero sopra resta invariato, si sposta in basso solo la label).
   Lo stacco hero→label è 128px su desktop e 88px su tablet/mobile, come
   misurato sul sito reale; lo spazio sotto le icone lo pareggia. */
.hero + .about .pill{margin-top:4rem;}
.hero + .about{padding-bottom:8rem;}
@media (max-width:1024px){
  .hero + .about .pill{margin-top:1.5rem;}
  .hero + .about{padding-bottom:5.5rem;}
}
/* 32px su desktop, 30px su tablet, 24px su mobile: valori del sito reale */
.about-text{
  color:var(--text-dim);
  font-weight:300;
  font-size:2rem;
  line-height:1.5;
  max-width:70ch;
  margin:0 0 3rem;
  text-wrap:pretty;
}
@media (max-width:1024px){ .about-text{font-size:1.875rem;} }
@media (max-width:767px){ .about-text{font-size:1.5rem;} }
.about-text .hl{
  background:var(--brand-gradient);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  font-weight:500;
}
/* blocco introduttivo della pagina About: spazio verticale misurato dal sito reale (120px) */
.about-page{padding:7.5rem 0;}
@media (max-width:1024px){ .about-page{padding:4rem 0;} }
@media (max-width:767px){ .about-page{padding:3rem 0;} }

.platform-row{display:flex;gap:1rem;flex-wrap:wrap;}
.platform-row a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 40px 8px;
  border-radius:100px;
  background:var(--brand-gradient);
  transition:transform .15s;
}
.platform-row a:hover{transform:translateY(-2px);}
.platform-row img{width:28px;height:28px;display:block;filter:brightness(0);}

/* --- episodi --- */
/* colore preso direttamente dallo screenshot del sito: leggermente più
   neutro/grigio del --bg-raised usato altrove (foto conduttori, testo
   hero), per questo è un valore a sé e non la variabile condivisa. */
.ep-date{color:#c7c2d3;font-size:0.875rem;font-weight:500;margin:0 0 0.5rem;}
.ep-title{color:#fff;font-weight:700;font-size:1.5rem;display:block;line-height:1.3;margin:0 0 0.6rem;}
.ep-body{color:#bab2cc;font-size:1rem;line-height:1.5;margin:0;}

/* un solo contenitore per episodio (hero compresa): un solo bordo bianco
   che avvolge sia l'immagine che il testo, mai due elementi separati. */
.episode-card{
  display:flex;
  flex-direction:column;
  border:2px solid #fff;
  border-radius:22px;
  overflow:hidden;
  background:#2a222f;
}
.episode-card .ep-thumb-wrap{display:block;aspect-ratio:16/9;}
.episode-card img{width:100%;height:100%;display:block;object-fit:cover;}
.episode-card .ep-text{padding:1.75rem;}

/* card in evidenza (ultimo episodio): stesso contenitore, ma in riga invece
   che in colonna — immagine ~58% a sinistra, testo libero a destra. */
#featured-episode .featured-card{
  flex-direction:row;
  align-items:stretch;
  margin-bottom:2rem;
}
#featured-episode .ep-thumb-wrap{
  flex:0 0 58%;
  aspect-ratio:auto;
}
#featured-episode .ep-text{
  flex:1 1 0;
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* griglia dei 3 episodi precedenti: stesso gap (32px) usato sia sopra
   (tra la hero e la griglia) che tra le 3 colonne — un unico ritmo,
   non due spaziature diverse. align-items:stretch (default del grid)
   pareggia automaticamente l'altezza delle 3 card. */
.episode-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:2rem;
}

/* Su tablet il sito reale tiene le 3 colonne (gap 16px) e la card in
   evidenza resta in riga; solo sotto i 768px si passa a una colonna. */
@media (max-width:1024px){
  .episode-grid{gap:1rem;}
  #featured-episode .featured-card{margin-bottom:2rem;}
}
@media (max-width:767px){
  #featured-episode .featured-card{flex-direction:column;margin-bottom:1.5rem;}
  #featured-episode .ep-thumb-wrap{flex-basis:auto;width:100%;aspect-ratio:16/9;}
  .episode-grid{grid-template-columns:1fr;gap:1.5rem;}
}

.loading{color:var(--text-dim);}
.see-all{display:block;margin-top:1.2rem;color:var(--text-dim);font-weight:600;text-decoration:underline;text-underline-offset:3px;}
.see-all:hover{color:#fff;}

/* --- footer (misure e colori presi dal sito reale) --- */
.site-footer{background:#1e0e27;padding:48px 0 58px;}
.footer-inner{
  display:grid;
  grid-template-columns:40% 1fr;
  gap:48px;
}
.logo-footer{height:34px;width:auto;display:block;}
.footer-desc{color:#ddd3f0;font-size:1rem;font-weight:600;line-height:1.5;margin:20px 0 0;}
.footer-social{display:flex;gap:8px;flex-wrap:wrap;margin:44px 0 0;padding-left:10px;}
.footer-social a{display:block;transition:transform .15s;}
.footer-social a:hover{transform:translateY(-2px);}
.footer-social img{width:35px;height:35px;display:block;}
/* la colonna di destra parte 30px più in basso, come nel sito reale */
.footer-company{margin-top:30px;}
.footer-company-name{color:#f7f3ff;font-size:1.25rem;font-weight:600;line-height:1.5;margin:0;}
.footer-legal{color:#ddd3f0;font-size:1rem;font-weight:600;line-height:1.5;margin:14px 0 0;}

/* barra inferiore con le tre pillole */
.footer-bar{background:#3b3141;padding:24px 0;}
.footer-links{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;}
.footer-links a{
  display:inline-block;
  border:1px solid #fff;
  border-radius:100px;
  padding:8px 16px;
  color:#fff;
  font-size:1rem;
  font-weight:500;
  line-height:1;
  transition:background .15s;
}
.footer-links a:hover{background:rgba(255,255,255,0.12);}

@media (max-width:1024px){
  .footer-inner{grid-template-columns:1fr;gap:32px;}
  .footer-company{margin-top:0;}
  .footer-social{margin-top:28px;padding-left:0;}
}

/* --- pagina About: schede dei conduttori --- */
.hosts{background:var(--bg-raised-2);padding-top:0;}
/* niente riga divisoria tra i conduttori: nel sito reale sono separati
   solo dallo spazio */
.host-row{
  display:flex;
  gap:2.5rem;
  align-items:stretch;
  padding-top:3.5rem;
  padding-bottom:3.5rem;
}
.host-photo{
  flex:1 1 0;
  align-self:flex-start;
  max-width:660px;
  aspect-ratio:660/371.25;
  overflow:hidden;
  background:var(--bg-raised);
  border-radius:14px;
}
.host-photo img{width:100%;height:100%;display:block;object-fit:cover;}
.host-info{
  flex:1 1 0;
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:0.6rem;
}
.host-name{color:#fff;font-size:clamp(1.4rem, 1.6vw + 1rem, 2rem);font-weight:600;margin:0;}
.host-role{color:#9a89ac;font-size:1.125rem;font-weight:600;margin:0;}
.host-bio{color:#e7e5f0;font-size:clamp(1rem, 0.6vw + 0.9rem, 1.25rem);line-height:1.6;margin:0;}
.host-follow{color:#fff;font-size:clamp(1.2rem, 0.6vw + 1.05rem, 1.5rem);font-weight:600;margin:1rem 0 0;}

/* pillole social: sfondo gradiente brand, icona (bianca di partenza) resa nera con un filtro */
.host-social{display:flex;gap:0.9rem;}
.host-social a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0.75rem 1.5rem;
  border-radius:100px;
  background:var(--brand-gradient);
  transition:transform .15s;
}
.host-social a:hover{transform:translateY(-2px);}
.host-social img{width:26px;height:26px;display:block;filter:brightness(0);}

@media (max-width:1024px){
  .host-row{gap:1.5rem;}
}
@media (max-width:767px){
  .host-row{flex-direction:column;padding-top:2rem;padding-bottom:2rem;}
  .host-photo{max-width:100%;}
}

/* --- pagina "Tutti gli episodi" (/episodi) --------------------------- */
.episodes-page-bg{background:#1c0f26;padding:3.5rem 0 5rem;}
.episodes-page-title{color:#fff;font-weight:800;font-size:clamp(2.2rem, 3vw + 1rem, 3.25rem);margin:0 0 2.5rem;}

/* card della griglia: niente bordo (a differenza delle card della home),
   solo un lieve cambio di sfondo tra immagine e testo. */
.episodes-listing-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:2rem;
}
.listing-card{display:block;border-radius:14px;overflow:hidden;}
.listing-thumb{position:relative;aspect-ratio:16/9;background:#000;}
.listing-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.listing-play{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  width:52px;
  height:52px;
  border-radius:16px;
  background:rgba(19,4,32,0.55);
  display:flex;
  align-items:center;
  justify-content:center;
}
.listing-play svg{margin-left:3px;}
.listing-duration{
  position:absolute;
  right:14px;
  bottom:14px;
  background:rgba(0,0,0,0.75);
  color:#fff;
  font-weight:700;
  font-size:0.8125rem;
  padding:4px 10px;
  border-radius:6px;
  font-variant-numeric:tabular-nums;
}
.listing-text{background:#32263b;padding:1.375rem;}
.listing-title{
  color:#f7f5fa;
  font-weight:700;
  font-size:1.1875rem;
  line-height:1.35;
  margin:0 0 0.6rem;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.listing-meta{color:#b1abc6;font-size:0.9rem;margin:0;}

/* pulsante "Altri episodi": carica di seguito i restanti episodi.
   La regola con [hidden] serve perché il display impostato qui vince
   sull'attributo hidden: senza, il pulsante resterebbe visibile (e
   lascerebbe uno spazio vuoto) anche dopo aver caricato tutto. */
.load-more-wrap{display:flex;justify-content:center;margin-top:3rem;}
.load-more-wrap[hidden]{display:none;}
#load-more-episodes{
  background:var(--brand-gradient);
  color:var(--ink);
  font-weight:700;
}
#load-more-episodes:hover{transform:translateY(-2px);}
#load-more-episodes{transition:transform .15s;}

@media (max-width:1024px){
  .episodes-listing-grid{grid-template-columns:repeat(2, 1fr);gap:1.5rem;}
  .episodes-page-bg{padding:2.5rem 0 4rem;}
}
@media (max-width:767px){
  .episodes-listing-grid{grid-template-columns:1fr;gap:1.5rem;}
  .episodes-page-title{margin-bottom:1.5rem;}
  .load-more-wrap{margin-top:2rem;}
}