/* Complementos editoriais do portal público AFEC. */
.hero {
  background:
    linear-gradient(90deg, rgba(8, 27, 49, .98) 0%, rgba(8, 27, 49, .91) 36%, rgba(8, 27, 49, .21) 69%, rgba(8, 27, 49, .05)),
    url('/imagens/afec-esporte-cultura-hero.png') center / cover;
}

.hero-lateral {
  max-width: 250px;
  display: grid;
  gap: 12px;
}

.hero-destaque { max-width: none; }

.imagem-ilustrativa {
  font-size: .68rem;
  line-height: 1.35;
  color: #d8e2e9;
}

.caminho-institucional {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 80px;
  background: #fff;
}

.caminho-texto { padding-top: 24px; }

.cultura-em-foco {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(280px, .9fr);
  gap: clamp(34px, 7vw, 96px);
  align-items: center;
  background: #fff;
}

.cultura-imagem { position: relative; }
.cultura-imagem img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; }
.cultura-imagem small { position: absolute; right: 10px; bottom: 8px; padding: 3px 7px; background: rgba(8, 27, 49, .78); color: #fff; font-size: .68rem; }

.imagem-pagina { position: relative; margin: 42px 0 0; max-width: 960px; }
.imagem-pagina img { display: block; width: 100%; max-height: 460px; object-fit: cover; border-radius: 4px; }
.imagem-pagina figcaption { position: absolute; right: 10px; bottom: 8px; padding: 3px 7px; background: rgba(8, 27, 49, .78); color: #fff; font-size: .68rem; }

.documentos { margin-top: 48px; }
.documentos > h2 { font-size: clamp(1.9rem, 3vw, 3rem); line-height: 1.08; letter-spacing: -.04em; margin: 0 0 22px; }
.documento { min-height: 210px; display: flex; flex-direction: column; }
.documento h3 { font-size: 1.25rem; margin: 0 0 10px; }
.documento .link-seta { margin-top: auto; }
.destaque-pagina { margin-top: 48px; padding: clamp(30px, 5vw, 64px); background: linear-gradient(125deg, #102d50, #173f60); color: #fff; border-radius: 4px; }
.destaque-pagina > div { max-width: 740px; }
.destaque-pagina h2 { font-size: clamp(2rem, 3vw, 3.2rem); letter-spacing: -.04em; margin: 0 0 16px; }
.destaque-pagina p:not(.sobrel) { color: #dce7ee; max-width: 650px; font-size: 1.06rem; }
.destaque-pagina .sobrel { color: #b9d8bf; }
.rodape-principal { grid-template-columns: 1.3fr .7fr .7fr 1fr; }

@media (max-width: 1050px) {
  .caminho-institucional, .cultura-em-foco { grid-template-columns: 1fr; gap: 34px; }
  .rodape-principal { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  .hero-lateral { margin-top: 50px; }
  .rodape-principal { grid-template-columns: 1fr; }
}