/* tv/tv-portrait.css — Formato 9:16 (verticale) della TV RC88.
 * Quando il player ha la classe .tv-portrait (o l'embed ha is-tv-portrait),
 * la finestra diventa 9:16 e i componenti interni vengono riimpilati in
 * verticale: foto in alto, testo sotto, card internamente scorrevoli, con QR
 * e controlli ancorati così da non coprire né tagliare il testo. Nessuna
 * frase viene troncata o duplicata.
 */

/* ---- Cornice verticale 9:16 nell'embed standalone ---- */
html.is-tv-embed.is-tv-portrait .tv-root {
  min-height: 100vh;
  overflow-y: auto;
}
html.is-tv-embed.is-tv-portrait .tv-frame {
  width: min(100vw, calc(100vh * 9 / 16));
  height: 100vh;
  max-height: none;
  aspect-ratio: 9 / 16;
  max-width: 100vw;
  margin: 0 auto;
  padding: 0;
}
html.is-tv-embed.is-tv-portrait .tv-stage {
  max-height: 100vh;
  border-radius: 0;
}

/* ---- Cornice verticale anche in-app (toggle 16:9 / 9:16) ---- */
.tv-root.tv-portrait .tv-frame {
  width: min(100%, calc((100vh - 24px) * 9 / 16));
  aspect-ratio: 9 / 16;
  max-height: none;
}
.tv-root.tv-portrait .tv-stage {
  aspect-ratio: 9 / 16;
  max-height: none;
}

/* ---- Borgo / Tesoro: impila il contenuto in cima, scorrevole ---- */
.tv-root.tv-portrait .tv-content {
  justify-content: flex-start;
  gap: 12px;
  padding: clamp(16px, 4vw, 26px);
  padding-top: clamp(14px, 3.2vw, 22px);
  padding-bottom: clamp(96px, 26vw, 150px); /* spazio per QR + controlli */
  overflow-y: auto;
}
.tv-root.tv-portrait .tv-shade {
  background:
    linear-gradient(180deg, rgba(12, 10, 16, 0.62) 0%, rgba(12, 10, 16, 0.18) 30%, rgba(12, 10, 16, 0.82) 88%),
    linear-gradient(90deg, rgba(12, 10, 16, 0.5) 0%, rgba(12, 10, 16, 0.1) 100%);
}
.tv-root.tv-portrait .tv-hero {
  margin-top: 0;
}
.tv-root.tv-portrait .tv-hero,
.tv-root.tv-portrait .tv-topbar {
  max-width: 100%;
}
.tv-root.tv-portrait .tv-title {
  font-size: clamp(1.7rem, 9vw, 3rem);
  line-height: 1.06;
}
.tv-root.tv-portrait .tv-subtitle {
  font-size: clamp(1.3rem, 5.72vw, 1.51rem);
  max-width: none;
}
.tv-root.tv-portrait .tv-card,
.tv-root.tv-portrait .tv-capsules {
  max-width: none;
}

/* ---- Cartolina: titolo e riga leggibili sopra l'immagine ---- */
.tv-root.tv-portrait .tv-postcard-copy {
  padding: 0 clamp(16px, 5vw, 30px);
  max-height: 92%;
  overflow-y: auto;
  scrollbar-width: none;
}
.tv-root.tv-portrait .tv-postcard-title {
  font-size: clamp(1.9rem, 10vw, 3.3rem);
  line-height: 1.02;
}
.tv-root.tv-portrait .tv-postcard-line {
  font-size: clamp(1.17rem, 4.94vw, 1.37rem);
}

/* ---- Percorso: tappe in colonna, scorrevoli ---- */
.tv-root.tv-portrait .tv-route {
  padding: clamp(16px, 4vw, 24px);
  padding-bottom: clamp(96px, 26vw, 150px);
}
.tv-root.tv-portrait .tv-route-stops {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  min-height: 0;
}
.tv-root.tv-portrait .tv-stop {
  min-width: 0;
  width: 100%;
}
.tv-root.tv-portrait .tv-route-title {
  font-size: clamp(1.4rem, 7vw, 2rem);
}

/* ---- Tradizione: testo sopra, foto sotto, impilati ---- */
.tv-root.tv-portrait .tv-tradition {
  grid-template-columns: 1fr;
  gap: 14px;
  padding: clamp(16px, 4vw, 24px);
  padding-bottom: clamp(96px, 26vw, 150px);
  overflow-y: auto;
}
.tv-root.tv-portrait .tv-tradition-left {
  overflow: visible;
}
.tv-root.tv-portrait .tv-tradition-right {
  min-height: 220px;
  order: -1;
}

/* ---- Quiz / Statistiche: centrati ma contenuti ---- */
.tv-root.tv-portrait .tv-quiz,
.tv-root.tv-portrait .tv-stats {
  padding: clamp(20px, 6vw, 40px);
  padding-bottom: clamp(96px, 26vw, 150px);
  overflow-y: auto;
  scrollbar-width: none;
}
.tv-root.tv-portrait .tv-quiz-q {
  font-size: clamp(1.5rem, 8vw, 2.4rem);
  max-width: none;
}
.tv-root.tv-portrait .tv-quiz-reveal {
  max-width: none;
}
.tv-root.tv-portrait .tv-stats-big {
  font-size: clamp(2.6rem, 16vw, 5rem);
}
.tv-root.tv-portrait .tv-stats-line {
  font-size: clamp(1.37rem, 6.5vw, 1.82rem);
  max-width: none;
}

/* ---- QR: compatto e sollevato sopra i controlli ---- */
.tv-root.tv-portrait .tv-qr {
  right: 12px;
  bottom: clamp(58px, 16vw, 84px);
  padding: 6px;
  gap: 4px;
}
.tv-root.tv-portrait .tv-qr img {
  width: 46px;
  height: 46px;
}
.tv-root.tv-portrait .tv-qr span {
  max-width: 64px;
  font-size: 0.55rem;
}

/* ---- Controlli: sempre visibili in basso, compatti ---- */
.tv-root.tv-portrait .tv-controls {
  bottom: 12px;
  gap: 8px;
  padding: 6px 10px;
}
.tv-root.tv-portrait .tv-controls button {
  font-size: 1rem;
  padding: 6px 8px;
}
.tv-root.tv-portrait .tv-progress-dots i {
  width: 5px;
  height: 5px;
}

/* ---- Footer di chiusura sollevato sopra i controlli ---- */
.tv-root.tv-portrait .tv-outro {
  padding-bottom: clamp(52px, 14vw, 78px);
}

/* ---- Su schermi piccoli: frame a tutta larghezza ---- */
@media (max-width: 480px) {
  .tv-root.tv-portrait .tv-frame {
    width: 100vw;
    aspect-ratio: 9 / 16;
  }
}

/* === RC88 verticali +30% v2 === */
.tv-root.tv-portrait .tv-subtitle {
  font-size: clamp(1.3rem, 5.72vw, 1.51rem) !important;
  line-height: 1.4 !important;
}
.tv-root.tv-portrait .tv-postcard-line {
  font-size: clamp(1.17rem, 4.94vw, 1.37rem) !important;
  line-height: 1.45 !important;
}
.tv-root.tv-portrait .tv-stats-line {
  font-size: clamp(1.37rem, 6.5vw, 1.82rem) !important;
  line-height: 1.4 !important;
}
.tv-root.tv-portrait .tv-card > p {
  font-size: clamp(1.17rem, 2.03vw, 1.48rem) !important;
  line-height: 1.4 !important;
}
.tv-root.tv-portrait .tv-capsule {
  font-size: clamp(0.98rem, 1.56vw, 1.17rem) !important;
}
.tv-root.tv-portrait .tv-quiz-q {
  font-size: clamp(1.95rem, 10.4vw, 3.12rem) !important;
}
.tv-root.tv-portrait .tv-route-title {
  font-size: clamp(1.82rem, 9.1vw, 2.6rem) !important;
}