/* YouRadio - versione compatta (caricare DOPO style.css)
   Obiettivo: titolo + testo + "Explore Our Channels" + canali visibili subito, soprattutto su mobile. */

.lang-selector-wrapper { display: none !important; }

/* Banner ridotto: niente altezza a tutto schermo */
.cyber-hero { min-height: 0 !important; height: auto !important; padding: clamp(14px, 3.5vh, 34px) 16px 4px !important; }
.hero-content { margin: 0 auto !important; padding: 0 !important; max-width: 760px !important; text-align: center; }
.hero-content h1 { font-size: clamp(1.7rem, 7.5vw, 3.2rem) !important; line-height: 1.05 !important; margin: 0 0 6px !important; }
.hero-content p { font-size: clamp(.76rem, 2.7vw, 1rem) !important; line-height: 1.45 !important; margin: 0 auto !important; max-width: 56ch; }

/* Titolo sezione e pillole piu' piccoli e vicini */
.players-container { padding-top: 6px !important; margin-top: 0 !important; }
.section-title { font-size: clamp(1rem, 4.4vw, 1.8rem) !important; margin: 8px 0 8px !important; }
.pill { font-size: clamp(.62rem, 2.7vw, .8rem) !important; padding: .45em .9em !important; }

/* Pulsante Listen: testo piu' lungo, puo' andare a capo */
.btn-listen { white-space: normal; text-align: center; }

/* Pagina a tutto schermo: footer sempre in basso, il contenuto occupa lo spazio */
html { height: 100%; }
body { display: flex !important; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.players-container { flex: 1 0 auto; width: 100%; min-width: 0; } /* width:100% evita che il flex-column con margin:auto restringa il contenitore alla larghezza delle pillole (~1000px) */

/* Footer: elenco canali (SEO) + copyright */
.footer-container { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 6px !important; padding-top: 10px !important; padding-bottom: 10px !important; }
.footer-left, .footer-right { width: 100%; max-width: 900px; text-align: center; }
.footer-right p { margin: 0; font-size: .68rem; opacity: .7; }
.footer-channels ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0; }
.footer-channels li + li::before { content: "\00b7"; margin: 0 .55em; opacity: .4; }
.footer-channels a { display: inline-block; padding: 5px 0; font-size: .7rem; color: inherit; text-decoration: none; opacity: .78; white-space: nowrap; transition: opacity .2s; }
.footer-channels a:hover, .footer-channels a:focus-visible { opacity: 1; text-decoration: underline; }

@media (max-width: 600px) { /* una sola riga scorrevole al dito: compatta */
  .footer-channels ul { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .footer-channels ul::-webkit-scrollbar { display: none; }
  .footer-channels li { flex: 0 0 auto; }
}

@media (max-width: 480px) {
  .cyber-hero { padding: 12px 14px 2px !important; }
  .hero-content p { max-width: none !important; }
}