/* =========================================================================
   AKROS — os Bastidores (15/10)

   Faixa azul-noite logo antes do Radar, «para parecer uma seção só»: o chão,
   o mosaico, o vão e o cabeçalho são os do Radar (radar.css, que os escreve
   para as duas). Aqui ficam só os cartões de mídia e a mídia ampliada.

   O cartão é BRANCO como o do Radar (a mesma tinta escura do papel): a
   mídia em cima, em 4:5 (o formato vertical dos reels, sem a altura toda de
   um 9:16, que não cabe numa tela de 712), e o título e a legenda embaixo.
   Carrega depois de carrossel.css e radar.css.
   ========================================================================= */

.bast__pilha{display:flex;flex-direction:column;gap:clamp(28px,4.4vh,52px)}

#bastidores .bast__c{
  --ink:#0A1F45;
  --body:#3A4A60;
  --pad:clamp(16px,1.3vw,22px);
  position:relative;
  display:flex;flex-direction:column;
  border:1px solid rgba(10,31,69,.08);
  border-radius:calc(16px * var(--r,1));
  background:#FFFFFF;
  overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 1px 2px rgba(4,12,28,.28),0 26px 50px -30px rgba(0,0,0,.85);
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease),opacity .6s var(--ease),transform .6s var(--ease);
  opacity:0;transform:translateY(14px);
  transition-delay:0s,0s,var(--d,0s),var(--d,0s);
}
#bastidores .bast__c.is-in{opacity:1;transform:none}
#bastidores .bast__c:hover,#bastidores .bast__c:focus-within{
  border-color:rgba(10,128,226,.6);
  box-shadow:0 0 0 3px rgba(10,128,226,.20),0 1px 2px rgba(4,12,28,.28),0 30px 54px -28px rgba(0,0,0,.9);
}
@media (prefers-reduced-motion:reduce){ #bastidores .bast__c{opacity:1;transform:none;transition:none} }
html:not(.js) #bastidores .bast__c{opacity:1;transform:none}

/* ---- a mídia ---- */
.bast__midia{position:relative;aspect-ratio:4/5;background:#050B16;overflow:hidden}
.bast__midia video,.bast__foto img{display:block;width:100%;height:100%;object-fit:cover;background:#050B16}
.bast__foto{
  display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:zoom-in;
}
.bast__foto img{transition:transform .5s var(--ease),opacity .3s var(--ease);opacity:.92}
.bast__foto:hover img,.bast__foto:focus-visible img{transform:scale(1.04);opacity:1}
.bast__foto:focus-visible{outline:none}
.bast__c:has(.bast__foto:focus-visible){box-shadow:0 0 0 3px rgba(10,128,226,.45),0 30px 54px -28px rgba(0,0,0,.9)}

/* o selo («Vídeo · 0:12» / «Foto») e os botões redondos do canto */
.bast__selo{
  position:absolute;top:12px;left:12px;z-index:2;pointer-events:none;
  padding:5px 10px;border-radius:100px;
  background:rgba(5,14,30,.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  color:#FFFFFF;font-size:.7rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;line-height:1;
}
.bast__amplia,.bast__lupa{
  position:absolute;top:10px;right:10px;z-index:2;
  display:grid;place-items:center;width:36px;height:36px;padding:0;
  border:0;border-radius:50%;
  background:rgba(5,14,30,.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  color:#FFFFFF;cursor:pointer;
  box-shadow:0 8px 18px -10px rgba(0,0,0,.8);
  transition:background-color .2s var(--ease),transform .2s var(--ease);
}
.bast__lupa{pointer-events:none}

/* 20/10 (os reels): a capa limpa com o play grande; o cartão inteiro é o
   botão. Aberto (1º play), saem o play e o selo, entram os controles do
   navegador e o vídeo aparece inteiro (contain) em vez do corte 4:5 */
.bast__toca{
  position:absolute;inset:0;z-index:2;
  display:grid;place-items:center;padding:0;border:0;
  background:linear-gradient(180deg,rgba(5,14,30,0) 55%,rgba(5,14,30,.35));
  color:#FFFFFF;cursor:pointer;
}
.bast__toca-bola{
  display:grid;place-items:center;width:64px;height:64px;
  border:1px solid rgba(255,255,255,.38);border-radius:50%;
  background:rgba(5,14,30,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 0 0 8px rgba(255,255,255,.08),0 14px 30px -12px rgba(0,0,0,.85);
  transition:background-color .2s var(--ease),transform .25s var(--ease);
}
.bast__toca svg{width:26px;height:26px;margin-left:3px;fill:currentColor}
.bast__toca:hover .bast__toca-bola,.bast__toca:focus-visible .bast__toca-bola{background:#0A80E2;border-color:rgba(255,255,255,.6);transform:scale(1.07)}
.bast__toca:focus-visible{outline:none}
.bast__toca:focus-visible .bast__toca-bola{outline:2px solid #FFFFFF;outline-offset:3px}
.bast__midia.is-aberto :is(.bast__toca,.bast__selo){display:none}
.bast__midia.is-aberto video{object-fit:contain}
.bast__amplia{z-index:3}
@media (prefers-reduced-motion:reduce){ .bast__toca-bola{transition:none} }
.bast__amplia:hover,.bast__foto:hover .bast__lupa{background:#0A80E2}
.bast__amplia:focus-visible{outline:2px solid #FFFFFF;outline-offset:2px}
.bast__amplia svg,.bast__lupa svg,.bast__fecha svg{
  width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}

/* ---- o texto ---- */
.bast__txt{padding:var(--pad);display:flex;flex-direction:column;gap:6px}
.bast__tit{
  margin:0;color:var(--ink);
  font-family:var(--titulo);font-weight:600;font-size:1.02rem;line-height:1.3;letter-spacing:-.005em;
}
.bast__leg{
  margin:0;color:var(--body);font-size:.86rem;line-height:1.5;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;
}

.bast__vazio{margin:0 auto;max-width:52ch;text-align:center;color:var(--body)}
.bast__vazio[hidden]{display:none}
html:not(.js) .bast__vazio{display:block}

/* ---- a mídia ampliada (<dialog>) ---- */
/* a base do site zera a margem de tudo, e a margem automática é o que
   centra o <dialog> na tela: devolve aqui */
.bast__caixa{
  position:fixed;inset:0;margin:auto;
  padding:0;border:0;background:none;color:#FFFFFF;
  max-width:min(92vw,980px);max-height:94vh;overflow:visible;
}
.bast__caixa::backdrop{background:rgba(4,12,28,.84);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.bast__moldura{position:relative;margin:0;display:flex;flex-direction:column;align-items:center;gap:14px}
.bast__palco{display:grid;place-items:center}
.bast__palco video,.bast__palco img{
  display:block;max-width:min(92vw,980px);max-height:min(78vh,1080px);width:auto;height:auto;
  border-radius:calc(14px * var(--r,1));background:#050B16;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.9);
}
.bast__moldura figcaption{max-width:min(92vw,620px);text-align:center;display:flex;flex-direction:column;gap:4px}
.bast__caixa-tit{font-family:var(--titulo);font-weight:600;font-size:1.05rem}
.bast__caixa-leg{color:rgba(255,255,255,.74);font-size:.9rem;line-height:1.5}
.bast__fecha{
  position:absolute;top:-6px;right:-6px;z-index:2;transform:translate(50%,-50%);
  display:grid;place-items:center;width:40px;height:40px;padding:0;
  border:1px solid rgba(255,255,255,.22);border-radius:50%;
  background:#0C2540;color:#FFFFFF;cursor:pointer;
}
.bast__fecha:hover{background:#0A80E2}
.bast__fecha:focus-visible{outline:2px solid #FFFFFF;outline-offset:2px}
@media (max-width:700px){ .bast__fecha{transform:none;top:-50px;right:0} }