/*
 * Alcatrazes, layout novo (pedido da cliente de 2026-10-28): cabeçalho preto com submenu, home em
 * grade de fotos quadradas, matéria com banners em volta do texto, vinho #a0313a, texto #4F4F4F,
 * cinza #F2F2F2 e conteúdo quase da largura da tela. Títulos, menu e logo na Typold Bold; texto
 * na Mulish.
 * Sem JavaScript: o menu do celular abre com um checkbox, e o submenu, com :hover e :focus-within.
 */

/* Typold: fonte comercial da The Northern Block, enviada pela cliente (2026-11-04), que responde
   pela licença. Só o Bold, convertido do .otf para woff2 com os caracteres latinos. */
@font-face {
    font-family: "Typold";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("fonts/typold-latin-700-normal.woff2") format("woff2");
}
@font-face {
    font-family: "Mulish";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/mulish-latin-400-normal.woff2") format("woff2");
}
@font-face {
    font-family: "Mulish";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/mulish-latin-400-italic.woff2") format("woff2");
}
@font-face {
    font-family: "Mulish";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("fonts/mulish-latin-700-normal.woff2") format("woff2");
}

:root {
    --vinho: #a0313a;
    --vinho-escuro: #6e1f27;
    --texto: #4f4f4f;
    --cartao: #f2f2f2;
    --lateral: #e8e8e8;
    --escuro: #1a1a1a;
    --menu: #9a9a9a;
    --borda: #cfcfcf;
    --titulos: "Typold", "Helvetica Neue", Arial, sans-serif;
    --corpo: "Mulish", "Segoe UI", Arial, sans-serif;
    --largura: 1540px;
    --margem: 24px;
    --submenu: 190px; /* a margem à direita do menu, onde o submenu abre */
}

/* Base */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: #fff;
    color: var(--texto);
    font-family: var(--corpo);
    font-size: 1.125rem;
    line-height: 1.6;
    /* Palavra comprida (endereço colado no texto, tag como "#diadascriancascomhamburguer")
       quebra no fim da linha, em vez de alargar a página no celular. */
    overflow-wrap: break-word;
}

h1,
h2,
h3,
h4 {
    font-family: var(--titulos);
    font-weight: 700;
    line-height: 1.3;
    color: var(--texto);
}

a {
    color: var(--vinho);
}

a:hover {
    color: var(--vinho-escuro);
}

img {
    max-width: 100%;
    height: auto;
}

:focus-visible {
    outline: 3px solid var(--vinho);
    outline-offset: 2px;
}

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

.skip-link {
    position: absolute;
    left: 8px;
    top: -60px;
    z-index: 100;
    padding: 8px 12px;
    background: #fff;
    color: var(--vinho);
    font-family: var(--titulos);
    font-weight: 700;
}

.skip-link:focus {
    top: 8px;
}

.icon {
    width: 1em;
    height: 1em;
    fill: currentColor;
    vertical-align: -0.125em;
}

.empty {
    padding: 32px;
    background: var(--cartao);
}

.button {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 20px;
    background: var(--vinho);
    color: #fff;
    font-size: 0.95rem;
    text-decoration: none;
}

.button:hover {
    background: var(--vinho-escuro);
    color: #fff;
}

/* Cabeçalho: logo à esquerda, menu empilhado à direita (o submenu abre na margem livre à
   direita dele) e a frase do site embaixo, no centro. */

.site-header {
    background: #000;
    color: #fff;
    /* A faixa vinho do logo vai até a borda esquerda da tela, sem rolagem lateral; na vertical,
       um submenu comprido pode passar da borda de baixo. */
    overflow-x: clip;
}

.site-header__inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 32px;
    max-width: var(--largura);
    min-height: 136px;
    margin: 0 auto;
    padding: 12px var(--margem) 12px 0;
}

.logo {
    margin: 0 auto 0 0;
    font-size: 1.5rem;
    line-height: 1.4;
}

.logo a {
    position: relative;
    display: inline-block;
    padding: 13px 43px 9px;
    background: var(--vinho);
    color: #fff;
    font-family: var(--titulos);
    font-weight: 700;
    text-decoration: none;
}

.logo a::before {
    content: "";
    position: absolute;
    top: 0;
    right: 100%;
    bottom: 0;
    width: 100vw;
    background: var(--vinho);
}

.menu-toggle__input,
.menu-toggle {
    display: none;
}

.site-nav {
    position: relative;
    align-self: stretch;
    display: flex;
    align-items: center;
    padding-right: var(--submenu);
}

.site-nav__list {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-nav__list > li > a,
.site-nav__title {
    position: relative;
    display: block;
    max-width: 220px;
    padding: 1px 0;
    color: var(--menu);
    font-family: var(--titulos);
    font-size: 0.95rem;
    font-weight: 700;
    text-align: right;
    text-decoration: none;
    cursor: pointer;
}

.site-nav__list > li > .is-active,
.site-nav__list > li:hover > a,
.site-nav__list > li:hover > .site-nav__title,
.site-nav__list > li:focus-within > a,
.site-nav__list > li:focus-within > .site-nav__title {
    color: var(--vinho);
}

/* Com o mouse em cima, a linha vinho vai do item até a borda, por baixo do submenu. */
.site-nav__list > li:hover > a::after,
.site-nav__list > li:hover > .site-nav__title::after,
.site-nav__list > li:focus-within > a::after,
.site-nav__list > li:focus-within > .site-nav__title::after {
    content: "";
    position: absolute;
    left: 0;
    right: calc(-1 * var(--submenu));
    bottom: -3px;
    height: 2px;
    background: var(--vinho);
}

/* O submenu fica escondido sem sair do teclado: o Tab chega nele pelo item principal. Ao sair
   com o mouse, ele demora um pouco a sumir, para dar tempo de chegar até ele. */
.site-nav__sub {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: 2px;
    width: var(--submenu);
    margin: 0;
    padding: 0 0 0 16px;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s 0.3s, visibility 0s 0.45s;
}

.has-sub:hover > .site-nav__sub,
.has-sub:focus-within > .site-nav__sub {
    z-index: 2;
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

/* O fundo preto esconde a linha do item principal quando ela passa na altura de um subitem
   (no "serviços", com 4 subitens, ela riscava o último). */
.site-nav__sub a {
    display: block;
    padding-left: 8px;
    background: #000;
    color: var(--vinho);
    font-family: var(--titulos);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
    text-align: right;
    text-decoration: none;
}

.site-nav__sub a:hover,
.site-nav__sub a.is-active {
    color: #fff;
}

.social {
    display: flex;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--vinho);
    color: #fff;
    font-size: 16px;
}

.social a:hover {
    background: var(--vinho-escuro);
    color: #fff;
}

/* A frase do site, embaixo, no centro do cabeçalho. */

.tagline {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 14px;
    margin: 0;
    color: #fff;
    font-family: var(--titulos);
    font-size: 1rem;
    text-align: center;
    pointer-events: none;
}

/* Banners */

/* Os dois do alto (home, listas e LNSP): lado a lado quando cabem, cada um no meio da sua
   metade; em tela menor, um embaixo do outro. */
.banners-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: var(--largura);
    margin: 24px auto;
    padding: 0 var(--margem);
}

.banners-top .banner {
    width: 100%;
    max-width: 728px;
    margin: 0;
    padding: 0;
}

@media (min-width: 1500px) {
    .banners-top {
        flex-direction: row;
        justify-content: space-around;
    }
}

.divider {
    max-width: calc(var(--largura) - 2 * var(--margem));
    margin: 32px auto 0;
    border: 0;
    border-top: 1px solid var(--vinho);
}

.banner {
    max-width: var(--largura);
    margin: 32px auto;
    padding: 0 var(--margem);
    text-align: center;
}

.banner img {
    display: inline-block;
    vertical-align: middle;
}

/* Banner por código: o script do anunciante monta o anúncio com largura e altura fixas no style
   (a SenseAds faz uma caixa e uma imagem de 728 × 90, por exemplo). Na tela menor que o anúncio,
   ele encolhe sem cortar, como no site da Rádio Web Litoral; na maior, fica do tamanho dele. Um
   anúncio em iframe (HTML5) não encolhe por dentro, e a caixa corta o que sobrar. */
.banner--code {
    overflow: hidden;
}

.banner--code div,
.banner--code img {
    max-width: 100% !important;
    height: auto !important;
}

.banner--code iframe {
    max-width: 100% !important;
}

/* Os da matéria ficam nas colunas em volta do texto (veja "Matéria e página"). */
.article--post .banner {
    margin: 0;
    padding: 0;
}

/* Lateral e grade de fotos */

.with-sidebar {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 40px 80px;
    align-items: start;
    max-width: var(--largura);
    margin: 32px auto;
    padding: 0 var(--margem);
}

.with-sidebar__main {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
}

.sidebar {
    grid-column: 1;
    grid-row: 1;
    padding: 36px 32px;
    background: var(--cartao);
}

.search {
    display: flex;
    margin-bottom: 32px;
    border: 1px solid var(--borda);
    background: #fff;
}

.search input {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
    border: 0;
    background: transparent;
    color: var(--texto);
    font: inherit;
    font-size: 0.95rem;
}

.search input::placeholder {
    font-family: var(--titulos);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
}

.search button {
    padding: 0 12px;
    border: 0;
    background: transparent;
    color: var(--texto);
    font-size: 1.1rem;
    cursor: pointer;
}

.search--wide {
    max-width: 480px;
    margin: 24px 0 0;
}

.sidebar__section + .sidebar__section {
    margin-top: 40px;
}

.sidebar__title {
    margin: 0 0 12px;
    color: var(--escuro);
    font-size: 1.15rem;
}

/* "últimas:": marcador quadrado vinho e, com o mouse em cima, uma moldura vinho. */
.sidebar__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sidebar__list li {
    position: relative;
    padding: 2px 4px 2px 16px;
    border: 2px solid transparent;
    line-height: 1.35;
}

.sidebar__list li::before {
    content: "";
    position: absolute;
    top: 0.65em;
    left: 4px;
    width: 5px;
    height: 5px;
    background: var(--vinho);
}

.sidebar__list li:hover,
.sidebar__list li:focus-within {
    border-color: var(--vinho-escuro);
}

.sidebar__list a {
    display: block;
    color: var(--texto);
    font-size: 0.9rem;
    text-decoration: none;
}

.list-header {
    margin-bottom: 12px;
    padding: 32px 56px;
    background: var(--cartao);
}

/* O nome da lista no centro (pedido da cliente de 2026-11-05); o perfil do autor continua à esquerda. */
.list-header__label {
    margin: 0 0 4px;
    color: var(--vinho);
    font-family: var(--titulos);
    font-size: 0.85rem;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
}

.list-header__title {
    margin: 0;
    font-size: 2.2rem;
    text-align: center;
}

.list-header__description {
    margin: 12px 0 0;
    text-align: center;
}

/* Título que diminui com a caixa para caber numa linha (a LNSP, no modelo "grade de fotos").
   "LNSP - litoral norte de São Paulo" na Typold Bold ocupa 16,2 vezes o tamanho da letra:
   5,9% da caixa por letra deixa uma folga, e cabe até no celular de 320 px. No computador, fica
   no tamanho das outras listas. */
.list-header--fit {
    container-type: inline-size;
}

.list-header--fit .list-header__title {
    font-size: clamp(0.875rem, 5.9cqi, 2.2rem);
}

.with-sidebar__main > .content {
    margin: 24px 0 32px;
}

/* O texto em cima da grade de fotos (a LNSP), no centro como o título. */
.content--intro {
    text-align: center;
}

.list-header .author-box {
    margin-top: 20px;
    border: 0;
    padding: 0;
}

/* Grade de fotos quadradas: 4 colunas; 2 no tablet; 1 no celular. */
.grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 34px 28px;
}

.card__link {
    position: relative;
    display: block;
    aspect-ratio: 1;
    background: var(--cartao);
}

.card__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

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

/* Com o mouse em cima (ou o foco do teclado), uma moldura vinho escuro em volta da foto. */
.card__link:hover,
.card__link:focus-visible {
    outline: 10px solid var(--vinho-escuro);
    outline-offset: 5px;
}

@media (max-width: 1099px) {
    .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Grade de 3 (a LNSP): os 3 lado a lado até o tablet; no celular, um embaixo do outro. */
.grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 599px) {
    .grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.article__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    font-size: 0.9rem;
}

.byline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.byline .icon {
    color: var(--vinho);
    font-size: 1.2rem;
}

.byline a {
    color: var(--texto);
}

/* Paginação */

.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 28px 0;
}

.pagination__numbers {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pagination__number,
.pagination__gap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 6px;
    font-family: var(--titulos);
    font-size: 0.85rem;
    font-weight: 700;
}

.pagination__number {
    border: 2px solid var(--texto);
    color: var(--texto);
    text-decoration: none;
}

.pagination__number.is-current,
.pagination__number:hover {
    background: var(--texto);
    color: #fff;
}

.pagination__steps {
    display: flex;
    gap: 8px;
}

.pagination__step {
    padding: 8px 14px;
    background: var(--cartao);
    color: var(--escuro);
    font-family: var(--titulos);
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
}

.pagination__step:hover {
    background: var(--texto);
    color: #fff;
}

/* Matéria e página */

.article {
    max-width: 800px;
    margin: 40px auto 48px;
    padding: 0 var(--margem);
}

.article__title {
    margin: 0 0 16px;
    font-size: clamp(1.9rem, 4vw, 3rem);
}

.article__header {
    margin-bottom: 32px;
}

/* Quadro de outro site embaixo do texto da página (a previsão do Windguru, por exemplo). O quadro
   mais largo que a tela rola de lado dentro da caixa, sem alargar a página no celular. */
.embed {
    margin-top: 32px;
    overflow-x: auto;
}

.embed--preview {
    padding: 24px;
    border: 1px dashed var(--borda);
    background: var(--cartao);
    text-align: center;
}

/* Matéria: dois 300×250 à esquerda, o texto no meio e o 400×500 à direita. O título ocupa as três
   colunas. A última linha é flexível, para o texto comprido não afastar os banners um do outro. O
   texto chega a 760 px, e as colunas ficam no centro: sem banner de um lado, a coluna dele sai
   (veja logo abaixo). */
.article--post {
    display: grid;
    grid-template-columns: 300px minmax(0, 760px) 400px;
    justify-content: center;
    grid-template-rows: auto auto auto 1fr auto;
    grid-template-areas:
        "head head  head"
        "l1   text  right"
        "l2   text  right"
        ".    text  right"
        ".    after .";
    gap: 0 48px;
    align-items: start;
    max-width: var(--largura);
}

.article--post .article__header { grid-area: head; }
.article--post .article__body { grid-area: text; }
.article--post .banner--post_left_1 { grid-area: l1; margin-bottom: 24px; }
.article--post .banner--post_left_2 { grid-area: l2; }
.article--post .banner--post_right { grid-area: right; }
.article--post .article__after { grid-area: after; }

/* A foto da matéria, em cima do texto, na largura dele. */
.article__photo {
    margin: 0 0 32px;
}

.article__photo img {
    display: block;
    width: 100%;
}

/* Lado sem banner: a coluna vazia sai, e o que sobra fica no centro. */
@media (min-width: 1280px) {
    .article--post.article--no-right {
        grid-template-columns: 300px minmax(0, 760px);
        grid-template-areas:
            "head head"
            "l1   text"
            "l2   text"
            ".    text"
            ".    after";
    }

    .article--post.article--no-left {
        grid-template-columns: minmax(0, 760px) 400px;
        grid-template-areas:
            "head  head"
            "text  right"
            "text  right"
            "text  right"
            "after .";
    }
}

/* Sem nenhum banner: uma coluna só, como uma página. */
@media (min-width: 900px) {
    .article--post.article--no-left.article--no-right {
        grid-template-columns: minmax(0, 760px);
        grid-template-areas:
            "head"
            "text"
            "text"
            "text"
            "after";
    }
}

.article--post .byline a {
    color: var(--vinho);
    font-family: var(--titulos);
    font-weight: 700;
    text-decoration: none;
}

/* Tablet (660 a 1279 px): os dois 300×250 lado a lado, logo abaixo do título, e o 400×500 à
   direita do texto (900 px ou mais) ou depois dele. A grade vira uma fila que quebra linha: o
   ::after é uma quebra da largura inteira entre os banners e o texto, e "order" põe as peças na
   ordem da tela (no HTML, o segundo 300×250 vem depois do texto, por causa do celular). Com um
   só dos dois, ele fica sozinho no centro. */
@media (min-width: 660px) and (max-width: 1279px) {
    .article--post {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: flex-start;
        column-gap: 24px;
    }

    .article--post::after {
        content: "";
        flex-basis: 100%;
        order: 35;
    }

    .article--post .article__header { order: 10; flex-basis: 100%; }
    .article--post .banner--post_left_1 { order: 20; }
    .article--post .banner--post_left_2 { order: 30; }
    .article--post .article__body { order: 40; flex: 1 1 100%; min-width: 0; }
    .article--post .banner--post_right { order: 50; }
    .article--post .article__after { order: 60; flex-basis: 100%; }

    .article--post .banner--post_left_1,
    .article--post .banner--post_left_2 {
        width: 300px;
        margin: 0 0 32px;
    }

    .article--post .banner--post_right {
        width: 400px;
        max-width: 100%;
        margin: 32px 0 0;
    }

    /* Sem o 400×500, tudo fica na largura do texto, como numa página. */
    .article--post.article--no-right {
        max-width: 800px;
    }
}

@media (min-width: 900px) and (max-width: 1279px) {
    .article--post .article__body {
        flex-basis: calc(100% - 448px);
    }

    .article--post .banner--post_right {
        margin: 0 0 0 24px;
    }
}

@media (max-width: 659px) {
    .article--post {
        display: block;
    }

    .article--post .banner {
        margin: 24px 0;
    }
}

.article__meta {
    justify-content: flex-start;
    margin: 0;
}

.content {
    font-size: 1.15rem;
    line-height: 1.7;
}

.content::after {
    content: "";
    display: block;
    clear: both;
}

.content p,
.content ul,
.content ol,
.content blockquote {
    margin: 0 0 1.1em;
}

.content h2 {
    margin: 1.6em 0 0.6em;
    font-size: 1.6rem;
}

.content h3,
.content h4 {
    margin: 1.4em 0 0.5em;
    font-size: 1.3rem;
}

.content blockquote {
    padding-left: 20px;
    border-left: 4px solid var(--vinho);
    font-style: italic;
}

.content hr {
    margin: 2em 0;
    border: 0;
    border-top: 1px solid var(--borda);
}

.content figure {
    margin: 1.5em 0;
}

.content figure img {
    display: block;
    width: 100%;
}

.content figure.align-left {
    float: left;
    width: 45%;
    margin: 0.3em 24px 16px 0;
}

.content figure.align-right {
    float: right;
    width: 45%;
    margin: 0.3em 0 16px 24px;
}

.content figcaption {
    margin-top: 8px;
    color: #6b6b6b;
    font-size: 0.85rem;
    line-height: 1.5;
}

.content .credit {
    font-style: italic;
}

.content figure.video {
    position: relative;
    clear: both; /* o player é absoluto e cobriria uma figura lateral logo antes dele */
    aspect-ratio: 16 / 9;
}

.content figure.video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.terms {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 32px 0 0;
}

.terms + .terms {
    margin-top: 12px;
}

.terms__label {
    margin-right: 8px;
    color: var(--vinho);
    font-family: var(--titulos);
    font-size: 1.1rem;
    font-weight: 700;
}

.terms a {
    min-width: 0; /* tag comprida encolhe e quebra, em vez de passar da tela */
    padding: 6px 12px;
    background: var(--cartao);
    color: var(--texto);
    font-size: 0.9rem;
    text-decoration: none;
    text-transform: uppercase;
}

.terms a:hover {
    background: var(--vinho);
    color: #fff;
}

.about-author {
    margin-top: 48px;
}

.about-author__title {
    margin: 0 0 16px;
    font-size: 1.8rem;
}

.author-box {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    padding: 28px;
    border: 1px solid var(--borda);
}

.author-box__photo {
    flex: none;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
}

.author-box__name {
    margin: 0 0 8px;
    font-size: 1.2rem;
}

.author-box__name a {
    color: var(--texto);
}

.author-box__bio {
    margin: 0 0 16px;
}

/* Fim da matéria: leia também (foto pequena e título à vista), anterior / próxima e a busca. */
.more-posts {
    margin-top: 48px;
}

.more-posts__title {
    margin: 0 0 16px;
    font-size: 1.8rem;
}

.related {
    display: grid;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.related__link {
    display: flex;
    gap: 16px;
    align-items: center;
    color: var(--texto);
    text-decoration: none;
}

.related__image {
    flex: none;
    width: 96px;
    height: 96px;
    object-fit: cover;
    background: var(--cartao);
}

.related__title {
    min-width: 0;
    font-family: var(--titulos);
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.3;
}

.related__link:hover .related__title,
.related__link:focus-visible .related__title {
    color: var(--vinho);
}

.post-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 32px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--borda);
}

.post-nav__link {
    display: flex;
    flex: 1 1 240px;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    color: var(--texto);
    text-decoration: none;
}

.post-nav__link--next {
    text-align: right;
}

/* Só a próxima (na matéria mais antiga): fica à direita, como quando há as duas. */
.post-nav__link--next:first-child {
    margin-left: auto;
    flex-grow: 0;
}

.post-nav__label {
    color: var(--vinho);
    font-family: var(--titulos);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
}

.post-nav__title {
    font-weight: 700;
}

.post-nav__link:hover .post-nav__title,
.post-nav__link:focus-visible .post-nav__title {
    color: var(--vinho);
}

.more-posts .search {
    margin: 32px 0 0;
}

/* Colaboradores */

.people {
    margin: 40px 0 0;
    padding: 0;
    list-style: none;
}

.person {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    margin-bottom: 12px;
    padding: 24px;
    background: var(--cartao);
}

.person__photo {
    flex: none;
    width: 120px;
    height: 150px;
    object-fit: cover;
}

.person__photo--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--lateral);
    color: var(--vinho);
    font-size: 3rem;
}

.person__name {
    margin: 0 0 8px;
    font-size: 1.3rem;
}

.person__name a {
    color: var(--texto);
    text-decoration: none;
}

.person__name a:hover {
    color: var(--vinho);
}

.person__bio {
    margin: 0 0 8px;
    font-size: 1rem;
}

.person__link {
    font-family: var(--titulos);
    font-size: 0.9rem;
    font-weight: 700;
}

/* Vídeos e editais */

.wide {
    max-width: var(--largura);
    margin: 40px auto 48px;
    padding: 0 var(--margem);
}

.wide--narrow {
    max-width: 900px;
}

.page-title {
    margin: 0 0 32px;
    color: var(--vinho);
    font-size: 2.4rem;
}

.videos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: 32px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.video-card__thumb {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--escuro);
}

.video-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-card__play {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(160, 48, 58, 0.9);
    color: #fff;
    font-size: 32px;
    transform: translate(-50%, -50%);
}

.video-card__title {
    margin: 16px 0 4px;
    font-size: 1.2rem;
}

.video-card__title a {
    color: var(--texto);
    text-decoration: none;
}

.video-card__date {
    margin: 0 0 8px;
    font-size: 0.85rem;
}

.video-card__description {
    margin: 0;
    font-size: 1rem;
}

.editais + .editais {
    margin-top: 48px;
}

.editais__title {
    margin: 0 0 16px;
    font-size: 1.5rem;
}

.edital {
    margin-bottom: 12px;
    padding: 24px 28px;
    border-left: 4px solid var(--vinho);
    background: var(--cartao);
}

.editais--encerrados .edital {
    border-left-color: var(--borda);
    opacity: 0.8;
}

.edital__title {
    margin: 0 0 4px;
    font-size: 1.25rem;
}

.edital__info {
    margin: 0 0 12px;
    font-size: 0.95rem;
}

.edital__description {
    margin: 0 0 12px;
}

.edital__links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    margin: 0;
    font-family: var(--titulos);
    font-size: 0.9rem;
    font-weight: 700;
}

.error-detail {
    overflow-x: auto;
    padding: 16px;
    background: var(--cartao);
    font-size: 0.8rem;
}

/* Rodapé */

.site-footer {
    margin-top: 48px;
    padding: 40px var(--margem);
    background: var(--escuro);
    color: var(--lateral);
    text-align: center;
}

.social--footer {
    justify-content: center;
    margin-bottom: 20px;
}

.site-footer__email {
    margin: 0 0 8px;
    font-family: var(--titulos);
    font-weight: 700;
}

.site-footer__email a {
    color: #fff;
}

.site-footer__text {
    margin: 0;
    font-size: 0.9rem;
}

.editais-button {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 50;
    padding: 8px 12px;
    border-radius: 4px;
    background: var(--vinho);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    color: #fff;
    font-family: var(--titulos);
    font-size: 0.75rem;
    font-weight: 700;
    text-decoration: none;
}

.editais-button:hover {
    background: var(--vinho-escuro);
    color: #fff;
}

/* Tela média: a frase não cabe entre o logo e o menu, e passa para uma linha só dela, embaixo. */

@media (max-width: 1179px) {
    .site-header__inner {
        flex-wrap: wrap;
    }

    .tagline {
        position: static;
        order: 5;
        width: 100%;
        padding: 0 var(--margem);
    }
}

/* Tablet e celular */

@media (max-width: 900px) {
    :root {
        --margem: 16px;
    }

    .site-header__inner {
        flex-wrap: wrap;
        gap: 12px;
        min-height: 0;
        padding: 24px var(--margem) 16px 0;
    }

    .tagline {
        position: static;
        order: 5;
        width: 100%;
        padding-left: var(--margem);
        font-size: 0.95rem;
    }

    .logo {
        font-size: 1.3rem;
    }

    .logo a {
        padding: 10px 24px 7px;
    }

    .menu-toggle {
        margin-left: auto;
        order: 3;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        background: var(--vinho);
        cursor: pointer;
    }

    .menu-toggle__bars,
    .menu-toggle__bars::before,
    .menu-toggle__bars::after {
        display: block;
        width: 22px;
        height: 2px;
        background: #fff;
    }

    .menu-toggle__bars {
        position: relative;
    }

    .menu-toggle__bars::before,
    .menu-toggle__bars::after {
        content: "";
        position: absolute;
        left: 0;
    }

    .menu-toggle__bars::before {
        top: -7px;
    }

    .menu-toggle__bars::after {
        top: 7px;
    }

    .menu-toggle__input {
        display: block;
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    .menu-toggle__input:focus-visible + .menu-toggle {
        outline: 3px solid #fff;
        outline-offset: 2px;
    }

    .site-nav {
        order: 4;
        display: none;
        width: 100%;
        padding-right: 0;
        padding-left: var(--margem);
    }

    .menu-toggle__input:checked ~ .site-nav {
        display: block;
    }

    .site-nav__list {
        align-items: stretch;
        gap: 0;
        padding-top: 8px;
    }

    .site-nav__list > li > a,
    .site-nav__title,
    .site-nav__sub a {
        padding: 12px 0;
        max-width: none;
        border-bottom: 1px solid #333;
        font-size: 1rem;
        text-align: left;
    }

    .site-nav__list > li > a::after,
    .site-nav__list > li > .site-nav__title::after {
        display: none;
    }

    .site-nav__sub {
        position: static;
        width: auto;
        padding: 0 0 0 20px;
        align-items: stretch;
        gap: 0;
        opacity: 1;
        visibility: visible;
        transition: none;
    }

    .site-nav__sub a {
        color: var(--menu);
    }

    .site-nav__sub a.is-active {
        color: var(--vinho);
    }

    .with-sidebar {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    .with-sidebar__main,
    .sidebar {
        grid-column: 1;
        grid-row: auto;
    }

    .list-header {
        padding: 24px 20px;
    }

    .list-header__title {
        font-size: 1.7rem;
    }

    .content figure.align-left,
    .content figure.align-right {
        float: none;
        width: auto;
        max-width: none;
        margin: 1.5em 0;
    }

    .pagination__step {
        padding: 8px 10px;
    }

    .editais-button {
        right: 15px;
        bottom: 15px;
        padding: 12px 18px;
        font-size: 0.85rem;
    }

    .site-footer {
        padding-bottom: 88px; /* o botão "editais" não cobre o fim do rodapé */
    }
}

@media (max-width: 600px) {
    body {
        font-size: 1.05rem;
    }

    .content {
        font-size: 1.05rem;
    }

    .author-box,
    .person {
        flex-direction: column;
        gap: 16px;
        padding: 20px;
    }

    .person__photo {
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 3;
    }

    .page-title {
        font-size: 1.9rem;
    }
}