/**
 * Estilos do conteúdo editorial. Sem dependências externas. Usa os tokens do
 * design system, portanto funciona no modo escuro MANUAL ([data-theme="dark"])
 * e não apenas quando o sistema operacional está escuro. Dimensões de imagem
 * reservadas (previne CLS); reduced-motion respeitado.
 */
.ie-ed-single { max-width: var(--ie-container-narrow, 760px); }
.ie-ed-single__title { font-size: clamp( 1.6rem, 4vw, 2.4rem ); line-height: 1.2; }
.ie-ed-single__subtitle { font-size: 1.15rem; color: var(--ie-text-muted); }
.ie-ed-single__meta { font-size: .85rem; color: var(--ie-text-muted); display: flex; flex-wrap: wrap; gap: 1rem; }
.ie-ed-single__media img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--ie-radius); }
.ie-ed-single__credit { font-size: .78rem; color: var(--ie-text-muted); }
.ie-ed-single__summary {
	font-weight: 500;
	border-left: 4px solid var(--ie-brand-fg);
	background: var(--ie-surface);
	border-radius: 0 var(--ie-radius-sm) var(--ie-radius-sm) 0;
	padding: .75rem 1rem;
}
.ie-ed-single__points ul { padding-left: 1.2rem; }
.ie-ed-single__body { line-height: 1.75; }

.ie-breadcrumbs ol { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; padding: 0; font-size: .82rem; }
.ie-breadcrumbs li::after { content: '›'; margin-left: .35rem; color: var(--ie-border); }
.ie-breadcrumbs li:last-child::after { content: ''; }
.ie-breadcrumbs a { color: var(--ie-text-muted); }
.ie-breadcrumbs a:hover, .ie-breadcrumbs a:focus-visible { color: var(--ie-brand-fg); }
.ie-breadcrumbs span[aria-current="page"] { color: var(--ie-text); font-weight: 600; }

/* ---------- Cabeçalho dos arquivos/editorias ---------- */
.ie-ed-archive { padding-block: 1.75rem 3rem; }
.ie-ed-archive__hero { max-width: var(--ie-container-narrow, 760px); margin-bottom: 1.5rem; }
.ie-ed-archive__kicker {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-size: .78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--ie-brand-fg);
	margin-bottom: .5rem;
}
.ie-ed-archive__kicker .ie-icon { color: var(--ie-brand-fg); }
h1.ie-ed-archive__title { font-size: clamp(1.7rem, 4vw, 2.5rem); line-height: 1.15; margin: 0 0 .6rem; }
.ie-ed-archive__desc { color: var(--ie-text-muted); font-size: 1.02rem; }
.ie-ed-archive__desc p { margin: 0 0 .5rem; }
a.ie-ed-archive__back {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	margin-top: .75rem;
	font-size: .88rem;
	font-weight: 600;
	color: var(--ie-brand-fg);
}
a.ie-ed-archive__back:hover, a.ie-ed-archive__back:focus-visible { color: var(--ie-brand-fg-hover); text-decoration: none; }
a.ie-ed-archive__back svg { transition: transform var(--ie-transition-fast); }
a.ie-ed-archive__back:hover svg { transform: translateX(-3px); }

/* ---------- Filtro por editoria (chips) ---------- */
.ie-ed-filters {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-bottom: 1.75rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--ie-border);
}
a.ie-ed-filters__chip {
	display: inline-flex;
	align-items: center;
	padding: .4rem .9rem;
	border-radius: var(--ie-radius-pill);
	border: 1px solid var(--ie-border);
	background: var(--ie-surface);
	color: var(--ie-text-muted);
	font-size: .85rem;
	font-weight: 600;
	transition: background var(--ie-transition-fast), color var(--ie-transition-fast), border-color var(--ie-transition-fast), transform var(--ie-transition-fast);
}
a.ie-ed-filters__chip:hover, a.ie-ed-filters__chip:focus-visible {
	color: var(--ie-brand-fg);
	border-color: color-mix(in srgb, var(--ie-brand-fg) 45%, var(--ie-border));
	transform: translateY(-1px);
	text-decoration: none;
}
a.ie-ed-filters__chip.is-active,
a.ie-ed-filters__chip.is-active:hover,
a.ie-ed-filters__chip.is-active:focus-visible {
	background: var(--ie-brand-fill);
	border-color: var(--ie-brand-fill);
	/* --ie-brand-fill/--ie-brand-ink (não --ie-brand + var(--ie-bg)): --ie-brand
	   puro fica escuro demais para servir de preenchimento sólido (lê como
	   marrom); a tinta fixa --ie-brand-ink mantém contraste nos dois modos. */
	color: var(--ie-brand-ink);
}

/* ---------- Card em destaque (lead) ---------- */
.ie-ed-lead { margin-bottom: 1.75rem; }
.ie-ed-card--lead {
	flex-direction: row;
	align-items: stretch;
}
.ie-ed-card--lead .ie-ed-card__media { flex: 0 0 46%; }
.ie-ed-card--lead .ie-ed-card__media img { aspect-ratio: 16 / 11; }
.ie-ed-card--lead .ie-ed-card__body { flex: 1; padding: 1.5rem; justify-content: center; gap: .55rem; }
.ie-ed-card--lead .ie-ed-card__title { font-size: clamp(1.3rem, 2.6vw, 1.8rem); }
.ie-ed-card--lead .ie-ed-card__excerpt { font-size: .98rem; -webkit-line-clamp: 3; }
@media (max-width: 720px) {
	.ie-ed-card--lead { flex-direction: column; }
	.ie-ed-card--lead .ie-ed-card__media { flex: none; }
}

.ie-ed-grid { display: grid; grid-template-columns: repeat( auto-fill, minmax( 260px, 1fr ) ); gap: var(--ie-gap); }
.ie-ed-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--ie-border);
	border-radius: var(--ie-radius);
	overflow: hidden;
	background: var(--ie-surface);
	transition: transform var(--ie-transition), box-shadow var(--ie-transition), border-color var(--ie-transition);
}
.ie-ed-card:hover, .ie-ed-card:focus-within {
	transform: translateY(-4px);
	box-shadow: var(--ie-shadow-md);
	border-color: color-mix(in srgb, var(--ie-brand-fg) 35%, var(--ie-border));
}
.ie-ed-card__media { overflow: hidden; display: block; }
.ie-ed-card__media img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; transition: transform var(--ie-transition-slow); }
.ie-ed-card:hover .ie-ed-card__media img { transform: scale(1.03); }
.ie-ed-card__media--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 16 / 9;
	background: var(--ie-surface-strong);
	color: var(--ie-text-muted);
}
.ie-ed-card__body { padding: .85rem; display: flex; flex-direction: column; gap: .35rem; }
.ie-ed-card__kind { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ie-brand-fg); font-weight: 700; }
h3.ie-ed-card__title { font-size: 1.05rem; margin: 0; color: var(--ie-text); }
h3.ie-ed-card__title a { color: var(--ie-text); }
h3.ie-ed-card__title a:hover, h3.ie-ed-card__title a:focus-visible { color: var(--ie-brand-fg); text-decoration: none; }
.ie-ed-card:hover h3.ie-ed-card__title a { color: var(--ie-brand-fg); }
.ie-ed-card__excerpt {
	font-size: .88rem;
	color: var(--ie-text-muted);
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.ie-ed-card__meta { font-size: .76rem; color: var(--ie-text-muted); margin: 0; }

.ie-ed-author { display: flex; gap: .8rem; align-items: flex-start; border-top: 1px solid var(--ie-border); padding-top: 1rem; margin-top: 1.5rem; }
.ie-ed-author__photo { border-radius: 50%; width: 64px; height: 64px; object-fit: cover; }
.ie-ed-author__name { font-weight: 600; margin: 0; }
.ie-ed-author__specialties { display: flex; flex-wrap: wrap; gap: .3rem; list-style: none; padding: 0; font-size: .78rem; }
.ie-ed-author__specialties li { background: var(--ie-surface-strong); border-radius: var(--ie-radius-pill); padding: .1rem .5rem; }

.ie-ed-sources { margin-top: 1.5rem; font-size: .9rem; }
.ie-ed-sources__date { color: var(--ie-text-muted); }
.ie-ed-correction {
	background: var(--ie-warning-soft);
	border-left: 4px solid var(--ie-warning);
	border-radius: 0 var(--ie-radius-sm) var(--ie-radius-sm) 0;
	padding: .6rem .8rem;
	margin: 1rem 0;
}
.ie-ed-related { margin-top: 1.5rem; }
.ie-ed-related__kind { font-size: .72rem; color: var(--ie-text-muted); }

.ie-ed-glossary__nav { display: flex; flex-wrap: wrap; gap: .3rem; margin: 1rem 0; }
.ie-ed-glossary__nav a, .ie-ed-glossary__nav span { min-width: 2rem; text-align: center; padding: .25rem; border-radius: var(--ie-radius-sm); }
.ie-ed-glossary__nav a:hover { background: var(--ie-surface-strong); color: var(--ie-brand-fg); text-decoration: none; }
.ie-ed-glossary__nav span[aria-disabled="true"] { color: var(--ie-text-muted); opacity: .6; }
.ie-ed-glossary__list { columns: 2; }

@media (max-width: 560px) { .ie-ed-glossary__list { columns: 1; } }

@media ( prefers-reduced-motion: reduce ) {
	.ie-ed-single *, .ie-ed-card, .ie-ed-card * { transition: none !important; animation: none !important; }
}
