/* M7 Revista — layout: masthead, container editorial, banner e grade de destaques
   Arquitetura de portal: header (100%) → navegação → container centralizado → banner → destaques.
   O banner NÃO ocupa a viewport: tem proporção própria (16:6, 380–460px de altura no desktop).
   Composições do banner:
   < 640      coluna única: título → fotografia → texto → metadados/leitura
   640–899    título largo → fotografia panorâmica → texto | metadados/leitura
   ≥ 900      composição única: fotografia à direita fundida ao fundo, texto à esquerda */

/* ---------- masthead ---------- */
.masthead {
  position: relative;
  z-index: 20;
  background: var(--bg);
  transition: background-color .35s var(--ease);
}

.masthead__bar { border-bottom: 1px solid var(--line); }

/* o header ocupa 100% da largura; seu conteúdo segue o mesmo eixo do container editorial */
.masthead__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 60px;
  width: min(var(--maxw), calc(100% - 2 * var(--gutter)));
  margin-inline: auto;
}
.masthead__inner > :first-child { justify-self: start; }
.masthead__inner > :last-child  { justify-self: end; }

.masthead__nav {
  display: none;
  border-bottom: 1px solid var(--line);
}

@media (min-width: 1024px) {
  .masthead__inner { height: 68px; }
  .masthead__nav { display: block; }
}

/* ---------- container editorial ---------- */
main { flex: 1 0 auto; }

.container {
  width: min(var(--maxw), calc(100% - 2 * var(--gutter)));
  margin-inline: auto;
}

/* ---------- banner (matéria de capa) ---------- */
.banner {
  --pad: clamp(20px, 5vw, 32px);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  margin-top: clamp(20px, 2.4vw, 32px);
  container-type: inline-size;
}

/* mobile/tablet: os filhos de .banner__copy entram direto no grid para permitir reordenar */
.banner__copy { display: contents; }
.banner__kicker,
.banner__title,
.banner__dek,
.banner__foot { margin-inline: var(--pad); }

.banner__kicker { order: 1; margin-top: var(--pad); }
.banner__title  { order: 2; }
.banner__media  { order: 3; position: relative; margin: 26px 0 0; aspect-ratio: 5 / 4; }
.banner__dek    { order: 4; }
.banner__foot   { order: 5; margin-bottom: var(--pad); }

@media (min-width: 640px) {
  .banner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .banner__kicker,
  .banner__title,
  .banner__media { grid-column: 1 / -1; }
  .banner__media { margin-top: 32px; aspect-ratio: 16 / 8; }
  .banner__dek  { grid-column: 1; margin-right: calc(var(--pad) / 2); }
  .banner__foot { grid-column: 2; align-self: start; margin-left: calc(var(--pad) / 2); }
}

/* desktop: uma única composição — foto ancorada à direita, texto sobre a área escura à esquerda */
@media (min-width: 900px) {
  .banner {
    grid-template-columns: minmax(0, 1fr);
    aspect-ratio: 16 / 6;
    min-height: 380px;
  }
  .banner__copy {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: stretch;
    max-width: 47%;
    padding: clamp(24px, 2.6cqw, 34px) clamp(26px, 3cqw, 40px);
  }
  .banner__kicker,
  .banner__title,
  .banner__dek,
  .banner__foot { order: 0; grid-column: auto; margin: 0; align-self: auto; }

  .banner__media {
    order: 0;
    position: absolute;
    inset: 0;
    z-index: 0;
    margin: 0;
    aspect-ratio: auto;
  }
}