/* ==========================================================================
   Fora de Ângulo / layout.css
   Estrutura: containers, ritmo vertical e grids editoriais.
   Breakpoints: 40em (640px) · 48em (768px) · 64em (1024px) · 80em (1280px)
   Larguras e gutters vêm do theme.json (contentSize, wideSize,
   useRootPaddingAwareAlignments). Aqui ficam ritmo e composição.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Esqueleto
   -------------------------------------------------------------------------- */

.wp-site-blocks > * + * {
	margin-block-start: 0;
}

.fda-main {
	padding-block-end: var(--fda-space-section);
}

/* A Home termina na faixa amarela, colada ao rodapé. */
.fda-main.fda-home {
	padding-block-end: 0;
}

/* Filhos diretos de grids/flex do tema não herdam o margin do layout flow. */
:is(
	.fda-hero__card,
	.fda-hero__content,
	.fda-hero__media,
	.fda-split,
	.fda-split__main,
	.fda-split__aside,
	.fda-feature,
	.fda-feature__media,
	.fda-feature__content,
	.fda-row,
	.fda-row__content,
	.fda-rank,
	.fda-card,
	.fda-heading,
	.fda-band__inner,
	.fda-band__copy,
	.fda-footer__inner,
	.fda-footer__legal,
	.fda-header__inner,
	.fda-meta,
	.fda-byline,
	.fda-listing__header
) > * {
	margin-block: 0;
}

.fda-grid,
.fda-rows,
.fda-ranking,
.fda-hero__list,
.fda-feature-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* O Post Template usa layout flow: o margin entre <li> quebraria o alinhamento do grid. */
:is(.fda-grid, .fda-rows, .fda-ranking, .fda-hero__list, .fda-feature-list) > li {
	margin-block: 0;
}

/* Ritmo vertical entre seções da Home e das listagens. */
.fda-main > .fda-section,
.fda-main > .fda-split,
.fda-main > .fda-listing,
.fda-main > .fda-404 {
	margin-block-start: var(--fda-space-section);
}

.fda-main > .fda-ad,
.fda-main > .fda-ad-slot {
	margin-block-start: var(--fda-space-block);
}

.fda-main > .fda-ad + .fda-split {
	margin-block-start: var(--fda-space-block);
}

.fda-main > .fda-band {
	margin-block-start: var(--fda-space-section);
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.fda-header__inner {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2.5vw, 2.5rem);
	padding-block: clamp(1rem, 1.8vw, 1.5rem);
	border-block-end: var(--fda-line) solid var(--fda-rule);
}

.fda-header__inner > .fda-nav-primary {
	margin-inline-start: auto;
}

@media (max-width: 47.99em) {
	.fda-header__inner {
		gap: 0.5rem;
	}

	/* Mobile: logo · busca · menu */
	.fda-header__inner > .fda-header-search {
		order: 2;
		margin-inline-start: auto;
	}

	.fda-header__inner > .fda-nav-primary {
		order: 3;
		margin-inline-start: 0;
	}
}

/* --------------------------------------------------------------------------
   Hero: 36% conteúdo / 64% imagem
   -------------------------------------------------------------------------- */

.fda-hero {
	margin-block-start: clamp(1rem, 1.6vw, 1.5rem);
}

.fda-hero__card {
	display: grid;
	gap: clamp(1.75rem, 4vw, 2.25rem);
}

.fda-hero__media {
	position: relative;
	order: -1;
}

.fda-hero__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

@media (min-width: 48em) {
	.fda-hero__card {
		grid-template-columns: minmax(0, 36fr) minmax(0, 64fr);
		column-gap: clamp(1.5rem, 3vw, 3.5rem);
		align-items: start;
	}

	.fda-hero__media {
		order: 0;
	}

	.fda-hero__content {
		padding-block-start: clamp(0.5rem, 1.4vw, 1.25rem);
	}
}

/* --------------------------------------------------------------------------
   Grids de cards
   -------------------------------------------------------------------------- */

.fda-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(1.75rem, 3vw, 3rem) var(--fda-gap);
}

/*
 * Últimas histórias / relacionados
 * mobile: 1º card grande + demais compactos (miniatura à esquerda)
 * tablet: 1º card horizontal em largura total + 2 colunas
 * desktop: 3 colunas iguais (referência aprovada)
 */
@media (max-width: 39.99em) {
	.fda-grid--latest,
	.fda-grid--ruled {
		gap: 0;
	}

	.fda-grid--latest > li + li,
	.fda-grid--ruled > li + li {
		margin-block-start: 1.25rem;
		padding-block-start: 1.25rem;
		border-block-start: var(--fda-line) solid var(--fda-border);
	}

	.fda-grid--latest > li:first-child,
	.fda-grid--ruled > li:first-child {
		padding-block-end: 0.25rem;
	}

	:is(.fda-grid--latest, .fda-grid--ruled) > li:not(:first-child) .fda-card {
		display: grid;
		grid-template-columns: 7.5rem minmax(0, 1fr);
		grid-template-rows: auto auto 1fr;
		column-gap: 1rem;
		align-content: start;
	}

	:is(.fda-grid--latest, .fda-grid--ruled) > li:not(:first-child) .fda-card__image {
		grid-row: 1 / span 3;
		margin-block-end: 0;
	}

	:is(.fda-grid--latest, .fda-grid--ruled) > li:not(:first-child) .fda-card__image img,
	:is(.fda-grid--latest, .fda-grid--ruled) > li:not(:first-child) .fda-image-fallback {
		aspect-ratio: 1;
	}

	:is(.fda-grid--latest, .fda-grid--ruled) > li:not(:first-child) .fda-card__excerpt {
		display: none;
	}
}

@media (min-width: 40em) {
	.fda-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 40em) and (max-width: 63.99em) {
	.fda-grid--latest > li:first-child,
	.fda-grid--ruled > li:first-child {
		grid-column: 1 / -1;
	}

	:is(.fda-grid--latest, .fda-grid--ruled) > li:first-child .fda-card {
		display: grid;
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
		grid-template-rows: auto auto 1fr;
		column-gap: var(--fda-gap);
		align-content: start;
	}

	:is(.fda-grid--latest, .fda-grid--ruled) > li:first-child .fda-card__image {
		grid-row: 1 / span 3;
		margin-block-end: 0;
	}
}

@media (min-width: 64em) {
	.fda-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	/* "Vale sair do óbvio": colunas separadas por fios verticais. */
	.fda-grid--ruled {
		column-gap: var(--fda-gap-l);
	}

	.fda-grid--ruled > li {
		position: relative;
	}

	.fda-grid--ruled > li:not(:nth-child(3n + 1))::before {
		content: "";
		position: absolute;
		inset-block: 0;
		inset-inline-start: calc(var(--fda-gap-l) / -2);
		border-inline-start: var(--fda-line) solid var(--fda-border);
	}
}

/* --------------------------------------------------------------------------
   Outro olhar para o cotidiano + Mais lidas
   -------------------------------------------------------------------------- */

.fda-split {
	--fda-split-gap: clamp(2rem, 3.6vw, 4.5rem);
	display: grid;
	gap: var(--fda-space-section);
}

@media (min-width: 40em) and (max-width: 63.99em) {
	/* Tablet: ranking e publicidade lado a lado, sob o conteúdo principal. */
	.fda-split__aside {
		display: grid;
		grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
		column-gap: var(--fda-gap-l);
		align-items: start;
	}

	.fda-split__aside > .fda-heading {
		grid-column: 1 / -1;
	}

	.fda-split__aside > .fda-ad {
		margin-block-start: 1rem;
	}
}

@media (min-width: 64em) {
	.fda-split {
		grid-template-columns: minmax(0, 2.6fr) minmax(16rem, 1fr);
		column-gap: var(--fda-split-gap);
	}

	.fda-split__aside {
		position: relative;
	}

	/* Fio vertical entre coluna principal e lateral. */
	.fda-split__aside::before {
		content: "";
		position: absolute;
		inset-block: 0;
		inset-inline-start: calc(var(--fda-split-gap) / -2);
		border-inline-start: var(--fda-line) solid var(--fda-border);
	}
}

.fda-feature {
	display: grid;
	gap: clamp(1.25rem, 3vw, 2rem);
	padding-block: clamp(1rem, 2vw, 1.5rem) clamp(1.5rem, 3vw, 2.25rem);
}

@media (min-width: 48em) {
	.fda-feature {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		align-items: center;
	}
}

.fda-rows > li {
	border-block-start: var(--fda-line) solid var(--fda-border);
}

.fda-row {
	display: grid;
	grid-template-columns: minmax(0, 8rem) minmax(0, 1fr);
	gap: 1rem;
	align-items: start;
	padding-block: 1rem;
}

@media (min-width: 40em) {
	.fda-row {
		grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
		gap: clamp(1.25rem, 2.6vw, 2rem);
		align-items: center;
		padding-block: 0.875rem;
	}
}

/* --------------------------------------------------------------------------
   Faixa final
   -------------------------------------------------------------------------- */

.fda-band__inner {
	display: grid;
	gap: 1.5rem;
	padding-block: clamp(2.25rem, 4.5vw, 3.25rem) 0;
}

@media (min-width: 48em) {
	.fda-band__inner {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		padding-block: clamp(1.5rem, 2.5vw, 2rem);
	}

	.fda-band__copy {
		padding-inline-start: clamp(0rem, 2.6vw, 2.5rem);
	}
}

/* --------------------------------------------------------------------------
   Rodapé
   -------------------------------------------------------------------------- */

.fda-footer__inner {
	display: grid;
	gap: 1.5rem;
	padding-block: clamp(2rem, 3.5vw, 2.75rem);
}

@media (min-width: 48em) {
	.fda-footer__inner {
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
		align-items: center;
		gap: var(--fda-gap-l);
	}

	.fda-footer__legal {
		justify-self: end;
		text-align: end;
	}
}

/* --------------------------------------------------------------------------
   Artigo e páginas
   O site é fluido; aqui ficam os limites LOCAIS de leitura:
   texto na medida de 44rem e mídia "larga" até --fda-wide-reading.
   -------------------------------------------------------------------------- */

.fda-article,
.fda-page {
	--wp--style--global--wide-size: var(--fda-wide-reading);
}

.fda-single .fda-article,
.fda-page-main .fda-page {
	padding-block-start: clamp(2rem, 5vw, 4rem);
}

/* Cabeçalho do artigo alinhado à coluna de leitura (mesma borda esquerda). */
.fda-article__header,
.fda-page__header {
	max-width: var(--fda-measure);
	margin-inline: auto;
}

.fda-article > .fda-article__image,
.fda-page > .fda-page__image {
	margin-block-start: clamp(2rem, 4vw, 3rem);
}

.fda-article > .fda-article__content,
.fda-page > .fda-page__content {
	margin-block-start: clamp(2rem, 4vw, 3rem);
}

.fda-article > .fda-ad {
	margin-block-start: var(--fda-space-block);
}

.fda-article > .fda-article__footer {
	margin-block-start: var(--fda-space-block);
}

.fda-single .fda-related {
	padding-block-start: var(--fda-space-section);
	border-block-start: var(--fda-line) solid var(--fda-border);
}

/* --------------------------------------------------------------------------
   Listagens (categoria, arquivo, busca, todas as histórias)
   -------------------------------------------------------------------------- */

.fda-listing__header {
	display: grid;
	gap: 0.75rem;
	padding-block-end: clamp(1.5rem, 3vw, 2.25rem);
	margin-block-end: clamp(2rem, 4vw, 3rem);
	border-block-end: var(--fda-line) solid var(--fda-rule);
}

.fda-listing__query > .fda-pagination {
	margin-block-start: var(--fda-space-section);
}

/* Páginas curtas (404, busca vazia, Contato): o rodapé fica no pé da janela. */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}

.wp-site-blocks > main {
	flex: 1 0 auto;
}

/*
 * Site novo ou com poucos posts: seções da Home sem nenhum item não deixam
 * títulos órfãos. (Queries vazias não renderizam o Post Template.)
 */
.fda-home :is(.fda-latest, .fda-obvio, .fda-cotidiano):not(:has(.wp-block-post-template)) {
	display: none;
}

@media (min-width: 64em) {
	.fda-split:not(:has(.fda-cotidiano .wp-block-post-template)) {
		grid-template-columns: minmax(0, 26rem);
	}

	.fda-split:not(:has(.fda-cotidiano .wp-block-post-template)) > .fda-split__aside::before {
		content: none;
	}
}