/* CMWR V3.0 · shared · 04-apoiadores */
/* Cidade + Web Rádio — V5.0 | Sessão 04 — Quem toca junto
   Base visual aprovada. Elementos funcionais permanecem em HTML/CSS/JS.
*/

.sponsors-section {
  position: relative;
  z-index: 4;
  width: 100%;
  overflow: hidden;
  background: #160807;
  color: #f5dfb6;
}

.sponsors-scene {
  position: relative;
  isolation: isolate;
  width: 100vw;
  aspect-ratio: 1881 / 836;
  margin-inline: auto;
  overflow: hidden;
  border-radius: var(--scene-radius);
  background: #150907;
}

.sponsors-background {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  user-select: none;
  -webkit-user-drag: none;
}

/* -------------------------------------------------------
   LOGO OFICIAL — assinatura discreta sobre a estante.
   ------------------------------------------------------- */
.s04-shelf-trophy {
  position: absolute;
  z-index: 7;
  left: 86.55%;
  top: 8.45%;
  width: 5.55%;
  height: 8.20%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  pointer-events: none;
  filter: drop-shadow(0 .16vw .20vw rgba(0,0,0,.48));
}

.s04-shelf-trophy img {
  position: absolute;
  left: 50%;
  top: 0;
  width: 100%;
  height: auto;
  max-height: 82%;
  object-fit: contain;
  transform: translateX(-50%);
  opacity: .88;
  filter:
    brightness(.90)
    saturate(.82)
    sepia(.05)
    drop-shadow(0 .08vw .08vw rgba(0,0,0,.72));
}

/* -------------------------------------------------------
   PORTA-MALAS — quatro apoiadores em destaque.
   ------------------------------------------------------- */
.trunk-rack {
  position: absolute;
  z-index: 8;
  inset: 0;
  pointer-events: none;
}

.sponsor-card {
  position: absolute;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  overflow: visible;
  border: 1px solid transparent;
  border-radius: .16vw;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  pointer-events: auto;
  transform-origin: 50% 50%;
  transition:
    transform .16s ease,
    filter .16s ease,
    box-shadow .16s ease,
    border-color .16s ease;
}

.trunk-card {
  top: 57.66%;
  width: 5.32%;
  height: 11.00%;
}

.trunk-card[data-slot="0"] { left: 50.50%; }

.trunk-card[data-slot="1"] { left: 56.76%; }

.trunk-card[data-slot="2"] { left: 62.79%; }

.trunk-card[data-slot="3"] { left: 69.06%; }

.sponsor-card__cover {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.sponsor-card__veil {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: .18vw;
  padding: .38vw;
  border-radius: inherit;
  color: #fff7e8;
  text-align: center;
  background: linear-gradient(180deg, rgba(7,8,9,.08), rgba(7,8,9,.78));
  opacity: 0;
  transition: opacity .14s ease;
}

.sponsor-card__play {
  width: clamp(22px, 2vw, 40px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,239,202,.64);
  border-radius: 50%;
  background: rgba(7,9,10,.44);
  color: rgba(255,241,207,.88);
  font: 900 clamp(11px,1vw,19px)/1 Arial,sans-serif;
}

.sponsor-card__name {
  max-width: 100%;
  font: 900 clamp(7px,.56vw,11px)/1.05 Arial,sans-serif;
  text-shadow: 0 1px 2px #000;
}

.sponsor-card__desc {
  max-width: 100%;
  color: #f0dcb8;
  font: 600 clamp(5px,.39vw,8px)/1.15 Arial,sans-serif;
  text-shadow: 0 1px 2px #000;
}

.sponsor-info {
  position:absolute; z-index:29; left:46.4%; top:79%; width:32%;
  box-sizing:border-box; display:grid; gap:.25em; padding:.55em .8em;
  border:1px solid #e9bb79; border-radius:5px;
  background:rgba(15,18,19,.93); color:#fff4e4;
  text-align:center; box-shadow:0 6px 18px #000b;
  opacity:0; visibility:hidden; pointer-events:none;
}
.sponsor-info.is-visible { opacity:1; visibility:visible; }
.sponsor-info strong { font:900 clamp(10px,.8vw,15px)/1.2 Arial,sans-serif; }
.sponsor-info small { font:600 clamp(9px,.63vw,12px)/1.25 Arial,sans-serif; color:#f0dcb8; }
@media(max-width:900px) { .sponsor-info { display:none; } }

.sponsor-card:hover,
.sponsor-card:focus-visible,
.sponsor-card.is-playing {
  z-index: 18;
  transform: scale(1.055);
  filter: brightness(1.06) saturate(1.03);
  border-color: rgba(255,225,171,.58);
  box-shadow:
    0 .34vw .95vw rgba(0,0,0,.60),
    0 0 .58vw rgba(246,189,91,.36);
  outline: none;
}

.sponsor-card:hover .sponsor-card__veil,
.sponsor-card:focus-visible .sponsor-card__veil,
.sponsor-card.is-playing .sponsor-card__veil {
  opacity: 1;
}

/* -------------------------------------------------------
   ESTANTE LATERAL — 3 x 3, totalmente frontal.
   Os valores abaixo são os alinhamentos finais aprovados.
   ------------------------------------------------------- */
.sponsor-shelf {
  position: absolute;
  z-index: 7;
  left: 82.24%;
  top: 20.10%;
  width: 14.67%;
  height: 47.13%;
  pointer-events: none;
}

.sponsor-shelf__viewport,
.sponsor-shelf__track {
  position: absolute;
  inset: 0;
}

.sponsor-shelf__track {
  pointer-events: none;
}

.shelf-card,
.ad-vacancy {
  position: absolute;
  box-sizing: border-box;
  width: 30.43%;
  height: 24.37%;
  overflow: visible;
  border: 1px solid transparent;
  border-radius: .10vw;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  pointer-events: auto;
  transform-origin: 50% 50%;
  transition:
    transform .15s ease,
    filter .15s ease,
    box-shadow .15s ease,
    border-color .15s ease;
}

/* Colunas — alinhamento manual final. */
.shelf-card:nth-child(3n+1),
.ad-vacancy:nth-child(3n+1) { left: -2.80%; }

.shelf-card:nth-child(3n+2),
.ad-vacancy:nth-child(3n+2) { left: 37.30%; }

.shelf-card:nth-child(3n),
.ad-vacancy:nth-child(3n) { left: 77.04%; }

/* Linhas. */
.shelf-card:nth-child(-n+3),
.ad-vacancy:nth-child(-n+3) { top: 0%; }

.shelf-card:nth-child(n+4):nth-child(-n+6),
.ad-vacancy:nth-child(n+4):nth-child(-n+6) { top: 38.32%; }

.shelf-card:nth-child(n+7),
.ad-vacancy:nth-child(n+7) { top: 75.89%; }

.shelf-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.shelf-card:hover,
.shelf-card:focus-visible,
.ad-vacancy:hover,
.ad-vacancy:focus-visible {
  z-index: 20;
  transform: scale(1.055);
  filter: brightness(1.08);
  border-color: rgba(255,225,171,.54);
  box-shadow:
    0 .25vw .75vw rgba(0,0,0,.55),
    0 0 .45vw rgba(243,183,82,.30);
  outline: none;
}

/* Vagas coloridas da própria arte recebem apenas a camada funcional. */
.ad-vacancy {
  display: grid;
  place-items: center;
  padding: .24vw;
  color: #fff3d6;
  text-align: center;
  text-decoration: none;
}

.ad-vacancy__text {
  display: grid;
  gap: .02vw;
  place-items: center;
  opacity: 0;
  transform: translateY(.12vw);
  transition: opacity .14s ease, transform .14s ease;
  text-shadow: 0 1px 2px #000, 0 0 .22vw #000;
}

.ad-vacancy:hover .ad-vacancy__text,
.ad-vacancy:focus-visible .ad-vacancy__text {
  opacity: 1;
  transform: translateY(0);
}

.ad-vacancy__small {
  font: 800 clamp(5px,.38vw,8px)/1 Arial,sans-serif;
  text-transform: uppercase;
}

.ad-vacancy__brand {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: .06em;
  font: 900 clamp(6px,.48vw,10px)/.95 "Arial Black",Arial,sans-serif;
  letter-spacing: -.045em;
}

.ad-vacancy__brand b {
  color: #ff673f;
  font-size: 1.18em;
}

/* Navegação só aparece quando houver mais de uma página de apoiadores. */
.sponsor-shelf__nav {
  position: absolute;
  right: -2%;
  top: 31%;
  width: 7.8%;
  display: grid;
  place-items: center;
  gap: .13vw;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
}

.sponsor-shelf.has-pages .sponsor-shelf__nav {
  opacity: 1;
  pointer-events: auto;
}

.sponsor-shelf__nav button {
  width: 100%;
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid rgba(222,166,91,.58);
  border-radius: 50%;
  background: rgba(36,18,9,.78);
  color: #f0c779;
  cursor: pointer;
  font: 900 clamp(6px,.50vw,10px)/1 Arial,sans-serif;
}

.sponsor-shelf__nav button:disabled {
  opacity: .22;
  cursor: default;
}

#shelf-page {
  display: none;
}

/* -------------------------------------------------------
   PLACA ANUNCIE AQUI — HTML/CSS sobre o para-choque.
   ------------------------------------------------------- */
.sponsor-ad {
  position: absolute;
  z-index: 10;
  left: 56.40%;
  top: 72.05%;
  width: 12.0%;
  height: 4.55%;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  border: 1px solid rgba(231,186,105,.72);
  border-radius: .22vw;
  background: linear-gradient(180deg, rgba(22,23,23,.96), rgba(4,6,7,.97));
  color: #f4cd89;
  text-decoration: none;
  box-shadow:
    inset 0 0 .26vw rgba(255,227,166,.07),
    0 .16vw .34vw rgba(0,0,0,.48);
}

.sponsor-ad span {
  font: 900 clamp(8px,.66vw,13px)/1 "Arial Black",Arial,sans-serif;
  letter-spacing: .07em;
}

.sponsor-ad:hover,
.sponsor-ad:focus-visible {
  color: #fff0be;
  border-color: #f4cc83;
  box-shadow:
    0 0 .58vw rgba(245,184,80,.40),
    inset 0 0 .30vw rgba(255,228,174,.08);
  outline: none;
}

/* -------------------------------------------------------
   JUKEBOX — feedback da vinheta.
   O globo da sala permanece somente na imagem-base aprovada.
   ------------------------------------------------------- */
.jukebox-light {
  position: absolute;
  z-index: 3;
  left: 3.2%;
  top: 36.5%;
  width: 12.0%;
  height: 37.0%;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(ellipse at 20% 45%, rgba(255,54,78,.68), transparent 38%),
    radial-gradient(ellipse at 82% 45%, rgba(55,218,255,.72), transparent 38%),
    radial-gradient(ellipse at 50% 14%, rgba(255,233,135,.55), transparent 42%);
  mix-blend-mode: screen;
}

.sponsors-section.is-playing .jukebox-light {
  animation: jukebox-glow 1.2s ease-in-out infinite alternate;
}

@keyframes jukebox-glow {
  from { opacity: .22; }
  to { opacity: .68; }
}

.jingle-stop {
  position: absolute;
  z-index: 15;
  left: 8.05%;
  top: 68.45%;
  width: 2.35%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(239,211,163,.74);
  border-radius: 50%;
  background: rgba(8,10,11,.72);
  color: #f6e6c4;
  box-shadow: 0 0 .32vw rgba(0,0,0,.48);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
}

.sponsors-section.is-playing .jingle-stop {
  opacity: 1;
  pointer-events: auto;
}

.jingle-stop:hover,
.jingle-stop:focus-visible {
  transform: scale(1.08);
  outline: none;
}

.jukebox-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Capa viaja visualmente até a jukebox ao iniciar a vinheta. */
.lp-flight {
  position: absolute;
  z-index: 30;
  display: none;
  width: 5.7%;
  aspect-ratio: 1;
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(255,224,171,.70);
  box-shadow: 0 .25vw .75vw rgba(0,0,0,.60);
  pointer-events: none;
}

.lp-flight.is-flying {
  display: block;
  animation: lp-to-jukebox .68s cubic-bezier(.2,.8,.25,1) forwards;
}

@keyframes lp-to-jukebox {
  to {
    left: 7.1%;
    top: 48.0%;
    width: 3.5%;
    transform: rotate(0deg);
    opacity: .15;
  }
}

@media (prefers-reduced-motion: reduce){
.sponsors-section.is-playing .jukebox-light,
  .lp-flight.is-flying {
    animation: none !important;
  }
.sponsor-card,
  .shelf-card,
  .ad-vacancy,
  .sponsor-shelf__nav {
    transition: none;
  }
.s04-shelf-trophy {
    filter: none;
  }
}

/* =======================================================
   MOBILE — SESSÃO 04 / TV DE CANAIS
   Cenário físico: sessao04-fundo-mobile.webp (TRAVADO)
   Conteúdo mutável: HTML/CSS/JS.
   ======================================================= */

.sponsors-background--mobile,
.mobile-tv-ui {
  display: none;
}