/* ===================================================================
   Rádio Web Fé São Borja — estilos
   =================================================================== */
:root {
  --brand-dark: #0d1b3e;
  --brand-accent: #f4b400;
  --cta-orange: #cc6a33;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

html, body { overflow-x: hidden; max-width: 100%; }

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #1f2937;
  margin: 0;
}

/* Conteúdo dinâmico (banco de dados) pode vir com textos longos/sem
   espaços — evita que estourem a largura da tela em telas pequenas. */
.hero__play-label,
.cta__heading, .cta__body,
.promo__heading, .promo__subtext,
.promo-green__heading, .promo-green__subtext,
.grid4__title {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Fallback caso o CDN do Bootstrap não carregue (mantém o H1 de SEO oculto) */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ===== HERO / TOPO ===== */
.hero { background: #0a0a0a; margin: 0; padding: 0; }

/* Imagem em largura total, sem margens, ocupando 100% da tela */
.hero__image { line-height: 0; margin: 0; padding: 0; }
.hero__img { width: 100%; height: auto; display: block; }

/* Player — div própria ACIMA da imagem, alinhada à direita, pequena e singela */
.hero__player {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .5rem;
  padding: .4rem 10px;
  background: #0a0a0a;
  min-width: 0;
}
.hero__play {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: #fff;
  color: #0a0a0a;
  font-size: 1.1rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease;
}
.hero__play:hover { transform: scale(1.06); }
.hero__play:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.hero__play.is-loading { animation: pulse 1s infinite; }
.hero__play-label {
  color: #fff;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .8rem;
  min-width: 0;
}

/* Bolinha vermelha que pisca enquanto o áudio toca — substitui o antigo
   texto "🔴 No ar — ao vivo", redundante com o rótulo "No ar agora"
   (.hero__now) logo abaixo. */
.hero__live-dot {
  display: none;
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e2402a;
}
.hero__live-dot.is-live {
  display: inline-block;
  animation: hero-live-pulse 1.6s ease-in-out infinite;
}
@keyframes hero-live-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .3; }
}

/* "No ar agora" — programação atual (cms_programacao), embaixo do player.
   Não é o mesmo elemento do #playerStatus: aquele é reescrito pelo JS ao
   tocar/pausar (assets/js/main.js) e perderia o título/locutor no primeiro
   clique; este fica fixo, alimentado só pelo PHP. */
.hero__now {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-end;
  text-align: right;
  gap: .3rem .5rem;
  padding: .5rem 10px .75rem;
  background: #0a0a0a;
  color: #fff;
  font-size: .85rem;
}
.hero__now-label {
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .7rem;
  color: rgba(255,255,255,.6);
}
.hero__now-title { font-weight: 700; }
.hero__now-locutor { color: rgba(255,255,255,.75); }

@keyframes pulse { 50% { opacity: .5; } }

/* ===== MÚSICA QUE APROXIMA (2 colunas, sem margens) ===== */
.cta {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--cta-orange);
  margin: 0;
}
@media (min-width: 768px) {
  .cta {
    grid-template-columns: 1fr 1fr;
    align-items: start; /* bloco da esquerda fica no topo mesmo se a direita crescer */
  }
}

.cta__text { padding: 3rem 1.5rem; }
@media (min-width: 768px) { .cta__text { padding: 4rem 3rem; } }

.cta__heading {
  font-family: "Anton", system-ui, sans-serif;
  text-transform: uppercase;
  color: #111;
  line-height: .92;
  letter-spacing: .01em;
  font-size: clamp(2.75rem, 7.5vw, 4.69rem);
  margin: 0 0 1.5rem;
}
.cta__heading span { display: block; }

.cta__body {
  font-family: "Baloo 2", system-ui, sans-serif;
  font-weight: 600;
  color: #111;
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  line-height: 1.5;
  max-width: 42ch;
  margin: 0;
}

/* Espaço do banner publicitário — placeholder estático até virar dinâmico */
.cta__ad { padding: 1.5rem; display: flex; min-width: 0; }
@media (min-width: 768px) { .cta__ad { padding: 3rem; } }

.cta__ad-placeholder {
  width: 100%;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 2px dashed rgba(0,0,0,.35);
  border-radius: .75rem;
  color: rgba(0,0,0,.55);
  font-weight: 600;
  padding: 1rem;
}

/* ===== LINHAS 3, 5, 6 (azul / vermelha / preta): 2 colunas via Bootstrap
   (.row.g-0 > .col-12.col-md-6), fundo ocupa 100% da largura ===== */
.promo { margin: 0; }
.promo--blue { background: #4c5d70; }
.promo--red { background: #e2402a; }
.promo--black { background: #000; }

.promo__media {
  padding: 1rem .75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}
.promo__text { padding: 1.5rem 1.5rem 3rem; }
@media (min-width: 768px) {
  .promo__media { padding: 1.5rem; }
  .promo__text { padding: 3rem; }
}

.promo__img {
  width: 100%;
  height: auto;
  display: block;
}
.promo__img--card {
  border-radius: 1.25rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

.promo__heading {
  font-family: "Anton", system-ui, sans-serif;
  text-transform: uppercase;
  line-height: .95;
  letter-spacing: .01em;
  font-size: clamp(2rem, 5vw, 3.25rem);
  margin: 0 0 1rem;
}
.promo__heading--green { color: #8fcf3f; }
.promo__heading--white { color: #fff; }

.promo__subtext {
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1.4;
  font-size: clamp(.9rem, 1.4vw, 1.05rem);
  max-width: 40ch;
  margin: 0;
}
.promo__subtext--green { color: #8fcf3f; }
.promo__subtext--white { color: #fff; }

/* ===== LINHA 4 (verde #7ed957): 2 colunas via Bootstrap
   (.row.g-0 > .col-12.col-md-6) — banner à esquerda, texto à direita ===== */
.promo-green { background: #7ed957; margin: 0; }

.promo-green__media {
  padding: 1rem .75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}
.promo-green__text { padding: 1.5rem 1.5rem 3rem; }
@media (min-width: 768px) {
  .promo-green__media { padding: 1.5rem; }
  .promo-green__text { padding: 3rem; }
}

.promo-green__heading {
  font-family: "Anton", system-ui, sans-serif;
  text-transform: uppercase;
  color: #111;
  line-height: .95;
  font-size: clamp(1.6rem, 3.6vw, 2.4rem);
  margin: 0 0 1.75rem;
}

.promo-green__subtext {
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  color: #111;
  line-height: 1.4;
  font-size: clamp(.85rem, 1.3vw, 1rem);
  max-width: 40ch;
  margin: 0;
}

/* ===== Espaços reservados (placeholder) — reutilizados nas linhas
   3, 4, 5, 7, 8 e 9 até o conteúdo real ser enviado/integrado ===== */
.placeholder-box {
  width: 100%;
  min-height: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  text-align: center;
  border: 2px dashed rgba(0,0,0,.35);
  border-radius: .75rem;
  color: rgba(0,0,0,.55);
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 600;
  font-size: .85rem;
  padding: 1rem;
  transition: background-color .15s ease;
}
.placeholder-box:hover { background-color: rgba(0,0,0,.04); }
.placeholder-box i { font-size: 1.5rem; }

.placeholder-box--light {
  border-color: rgba(255,255,255,.45);
  color: rgba(255,255,255,.75);
}
.placeholder-box--light:hover { background-color: rgba(255,255,255,.06); }

/* Sem banner cadastrado naquela posição: nem borda, nem ícone, nem texto —
   só o espaço vazio, com a cor de fundo da própria seção por trás. */
.placeholder-box--blank,
.cta__ad-placeholder--blank {
  border: none;
  background: transparent;
}
.placeholder-box--blank:hover,
.cta__ad-placeholder--blank:hover { background-color: transparent; }

/* ===== Carrossel de banners (Bootstrap Carousel) — usado nas posições
   nivel-1..5 do painel quando há 2+ banners ativos na mesma posição ao
   mesmo tempo. Com 0 ou 1 banner ativo nada disso entra em jogo: o PHP usa
   a <img>/placeholder de sempre (ver bannerCarouselTag() e
   bannerGridCarouselTag() em modules/pages/home.php). ===== */
.banner-carousel {
  width: 100%; /* .cta__ad / .promo__media / .promo-green__media são flex de
                  1 filho só — sem isso o carrossel encolheria pro conteúdo
                  em vez de preencher a coluna, como a <img> antiga fazia
                  via width:100%. */
}

/* Fundo circular escuro atrás das setas padrão do Bootstrap (brancas), pra
   continuar legível tanto sobre banners claros quanto escuros — o que fica
   atrás das setas é a imagem do banner, não a cor da seção. */
.banner-carousel .carousel-control-prev-icon,
.banner-carousel .carousel-control-next-icon {
  background-color: rgba(0, 0, 0, .45);
  border-radius: 50%;
  background-size: 55% 55%;
  background-position: center;
}

.banner-carousel .carousel-indicators {
  margin-bottom: .5rem;
}
.banner-carousel .carousel-indicators [data-bs-target] {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .5);
  background-color: rgba(255, 255, 255, .6);
  opacity: 1;
}
.banner-carousel .carousel-indicators .active {
  background-color: #fff;
  border-color: rgba(0, 0, 0, .8);
}

/* ===== LINHAS 7, 8, 9: grades de 4 colunas via Bootstrap
   (.row.g-0 > .col-6.col-md-3) ===== */
.grid4 { margin: 0; padding: 2.5rem 1rem; }
@media (min-width: 768px) { .grid4 { padding: 3.5rem 2rem; } }
.grid4--black { background: #000; }
.grid4--burnt { background: #e0590b; }

.grid4__title {
  font-family: "Anton", system-ui, sans-serif;
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  font-size: clamp(1.6rem, 4vw, 2.5rem);
  margin: 0 0 2rem;
}
.grid4--burnt .grid4__title { color: #111; }

.grid4__col { padding: .5rem; min-width: 0; }

/* ===== Vídeo em destaque (linha 7) — embed do YouTube responsivo,
   80% da largura da tela, altura acompanha (aspect-ratio) ===== */
.video-embed {
  position: relative;
  width: 80%;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: .75rem;
  overflow: hidden;
  background: #000;
}
.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ===== Miniatura de vídeo (linha 10, "Músicas mais tocadas") —
   quadro retrato em pill, capa + play + título ===== */
.video-tile { display: block; width: 100%; text-decoration: none; }
.video-tile__media {
  position: relative;
  display: block;
  width: 100%;
  line-height: 0;
  overflow: hidden;
  border-radius: .5rem;
}
.video-tile__media img { display: block; width: 100%; height: auto; }
.video-tile__play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
  font-size: clamp(1.75rem, 10vw, 2.75rem);
  line-height: 1;
  color: rgba(255,255,255,.95);
  text-shadow: 0 2px 10px rgba(0,0,0,.6);
  pointer-events: none;
  transition: transform .15s ease, color .15s ease;
}
.video-tile:hover .video-tile__play { transform: translate(-50%, -50%) scale(1.12); color: #fff; }
.video-tile__title {
  display: block;
  margin-top: .6rem;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 600;
  font-size: .8rem;
  line-height: 1.35;
  text-align: center;
  color: #fff;
  background: rgba(0,0,0,.32);
  padding: .35rem .6rem;
  border-radius: .5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Linha 9 ("Músicas mais tocadas"): quadro retrato com borda rosa e
   título em pill contornado, no estilo de referência enviado. */
.grid4--burnt .video-tile__media {
  aspect-ratio: 3 / 4;
  border-radius: 1rem;
  border: 2px solid var(--tile-accent, #f6b8dd);
  background: #000;
}
.grid4--burnt .video-tile__media img { height: 100%; object-fit: cover; }
.grid4--burnt .video-tile__title {
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--tile-accent, #f6b8dd);
  background: transparent;
  border: 2px solid var(--tile-accent, #f6b8dd);
  border-radius: 999px;
  padding: .55rem .9rem;
}

/* ===== Efeito de revelação suave ao rolar a página ===== */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none; opacity: 1; transform: none; }
}

/* ===== RODAPÉ ===== */
.footer {
  background: #000;
  color: #cbd5e1;
  padding: 1.75rem 1rem;
}
.footer__social a {
  color: #cbd5e1;
  font-size: 1.4rem;
  margin: 0 .5rem;
  transition: color .15s ease;
}
.footer__social a:hover { color: var(--brand-accent); }
.footer__text { font-size: .9rem; }

/* ===== Assinatura de desenvolvimento (dentro do rodapé, mesmo fundo) ===== */
.site-credit {
  display: flex;
  justify-content: flex-end;
  padding-top: .5rem;
  margin-top: .75rem;
  border-top: 1px solid rgba(255,255,255,.12);
}
.site-credit a { display: inline-flex; opacity: .55; transition: opacity .15s ease; }
.site-credit a:hover { opacity: .9; }
.site-credit img { height: 22px; width: auto; display: block; }