/* Seção abertura: ajustes do redesenho de 16/10 (um arquivo por seção, para o time trabalhar em paralelo).
   Cobre o cabeçalho, a abertura (foto, vídeo, frase, portas, notificação) e a barra fixa da cidadã. */

/* ---------- desktop ---------- */
@media (min-width: 821px) {
  .cab {
    padding-block: 20px;
  }
  /* a abertura enche a tela (pedido do Maicon, 16/10) */
  .abertura-foto {
    height: 100svh;
    min-height: 640px;
  }
  .abertura-foto > picture img,
  .abertura-video {
    object-position: 50% 12%;
    transform-origin: 50% 12%;
  }
  .abertura-foto::after {
    background:
      linear-gradient(to bottom, rgba(10, 10, 9, 0.55), rgba(10, 10, 9, 0) 22%),
      linear-gradient(to top, rgba(10, 10, 9, 0.86) 0%, rgba(10, 10, 9, 0.5) 40%, rgba(10, 10, 9, 0) 68%),
      linear-gradient(to right, rgba(10, 10, 9, 0.5), rgba(10, 10, 9, 0) 55%);
  }
  /* título, frase e portas num bloco só, em fluxo, preso embaixo (17/10, pedido do Maicon): a frase cola no título,
     as portas se afastam da frase e os dois botões ficam lado a lado. Os vãos seguem o corpo do título (0,32 e 0,7
     dele: 20 e 44 px a 1440), na proporção 1:2. Sem posições fixas, a frase em 3 linhas (janela estreita) empurra o
     título para cima em vez de encostar nele. A base fica na margem lateral, como o cartão: a mesma moldura nos quatro
     lados e uma linha de base só. A paralaxe sobe o bloco inteiro e o cartão juntos, para nada se descolar ao rolar */
  .abertura-texto {
    position: absolute;
    z-index: 3;
    left: var(--margem);
    right: var(--margem);
    bottom: var(--margem);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    translate: 0 var(--sobe, 0px);
    /* o bloco ocupa a largura toda e passa por cima do cartão: o clique atravessa o vão, só o texto e os botões o pegam */
    pointer-events: none;
  }
  .abertura-texto > * {
    pointer-events: auto;
  }
  .abertura h1,
  .abertura-lede,
  .portas {
    position: static;
    translate: none;
  }
  /* a frase e os botões param 40 px antes do cartão (360 px na margem direita). Abaixo de ~935 px de largura os dois
     botões não cabem lado a lado nesse espaço e o segundo desce para outra linha */
  .abertura-lede {
    margin-top: calc(var(--f1) * 0.32);
    max-width: min(640px, calc(100% - 400px));
  }
  .portas {
    margin-top: calc(var(--f1) * 0.7);
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    max-width: calc(100% - 400px);
  }
  .notif-pouso {
    left: auto;
    right: var(--margem);
    top: auto;
    bottom: var(--margem);
    width: 360px;
  }
  .notif {
    translate: 0 var(--sobe, 0px);
  }
}
@keyframes chega {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.96);
  }
}

/* ---------- celular ---------- */
@media (max-width: 820px) {
  /* cabeçalho de 56 px; uma só ação: a barra fixa leva a "Recebi uma mensagem" */
  .cab {
    padding: max(12px, env(safe-area-inset-top, 0px)) var(--margem) 12px;
    min-height: 56px;
    gap: 12px;
  }
  .cab nav a:not(.so-desk) {
    display: none;
  }
  .cab .palavra {
    width: 104px;
    padding-block: 11px;
    margin-block: -11px;
    box-sizing: content-box;
    height: auto;
  }
  .cab.solida {
    padding-top: max(8px, env(safe-area-inset-top, 0px));
    padding-bottom: 8px;
    min-height: 52px;
  }

  /* foto, frase e as duas portas enchem a primeira tela: a foto ocupa o que sobra */
  .abertura {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
  }
  .abertura-foto {
    flex: 1 1 auto;
    height: auto;
    min-height: 320px;
  }
  /* o casal no alto e o rosto do João acima da notificação, de 360 a 430 px */
  .abertura-foto > picture img,
  .abertura-video {
    object-position: 50% 68%;
  }
  .abertura h1 {
    padding: 20px var(--margem) 0;
    font-size: clamp(32px, 9vw, 38px);
  }
  .portas {
    padding: 4px var(--margem) 20px;
  }
  .porta {
    padding: 12px 0;
    gap: 8px;
  }
  .porta + .porta {
    border-top: 0;
    padding-top: 4px;
  }
  .porta .btn {
    height: 52px;
    min-height: 52px;
  }
  .porta p {
    font-size: 14px;
    line-height: 20px;
  }
  .porta-orgao .btn-vidro {
    box-shadow: inset 0 0 0 2px var(--tinta);
  }

  /* notificação: embaixo da foto, duas linhas de prévia, abre para cima */
  .notif-pouso {
    left: 12px;
    right: 12px;
    bottom: 12px;
  }
  .notif-txt span {
    font-size: 14px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .notif-mais-dentro {
    max-height: 140px;
  }
  .pausa-video {
    top: calc(max(12px, env(safe-area-inset-top, 0px)) + 56px);
    right: 12px;
  }

  /* barra fixa: cartão flutuante de 56 px, some perto do rodapé */
  body.casa {
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  }
  .barra-cidada {
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    min-height: 56px;
    padding: 8px 8px 8px 20px;
    border-radius: 16px;
    background: rgba(20, 21, 19, 0.92);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    font-size: 15px;
    box-shadow: 0 12px 28px -12px rgba(0, 0, 0, 0.5);
  }
  .barra-cidada b {
    min-width: 96px;
    padding: 0 18px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .js .barra-cidada {
    transform: translateY(calc(100% + 32px));
  }
  .js .barra-cidada.ve {
    transform: none;
  }
}