/**
 * Shared stylesheet for the theme's "card" block family (acf/card-hero and,
 * from Task 3b onward, the other 5 card variants). One file, enqueued
 * unconditionally on the front end and in the editor — see
 * the_mining_enqueue_block_assets() in functions.php. Simpler than
 * per-block conditional loading and the card family is small/lightweight
 * enough that this isn't a performance concern yet; revisit if the theme
 * grows many more block stylesheets.
 */

/* ---------------------------------------------------------------------- */
/* Card Hero (acf/card-hero)                                              */
/* ---------------------------------------------------------------------- */

.the-mining-card-hero {
	position: relative;
}

.the-mining-card-hero__link {
	display: block;
	position: relative;
	color: var(--wp--preset--color--white);
	text-decoration: none;
}

.the-mining-card-hero__media {
	position: relative;
	width: 100%;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background-color: var(--wp--preset--color--navy);
}

.the-mining-card-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Dark navy -> transparent gradient so the title/tag stay legible over
   any photo. */
.the-mining-card-hero__gradient {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		var(--wp--preset--color--navy) 0%,
		transparent 60%
	);
}

.the-mining-card-hero__content {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: var(--wp--preset--spacing--md);
}

/*
 * Category tag: the Figma reference shows a diagonal-cut pill. Simplified
 * to a rectangular pill with the theme's small border radius token — the
 * diagonal cut needs a clip-path/skew hack that adds real complexity for a
 * purely decorative detail, so the simpler shape was chosen (documented in
 * task-3a-report.md). Revisit with clip-path if design pushes back.
 */
.the-mining-card-hero__tag {
	display: inline-block;
	margin-bottom: var(--wp--preset--spacing--xs);
	padding: calc(var(--wp--preset--spacing--xs) - 1px) var(--wp--preset--spacing--sm);
	border-radius: var(--wp--custom--radius--sm);
	font-family: var(--wp--preset--font-family--roboto);
	font-size: var(--wp--preset--font-size--meta-categoria);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--white);
}

.the-mining-card-hero__tag--magenta {
	background-color: var(--wp--preset--color--magenta);
}

.the-mining-card-hero__tag--cyan {
	background-color: var(--wp--preset--color--cyan);
}

.the-mining-card-hero__tag--navy {
	background-color: var(--wp--preset--color--navy);
}

.the-mining-card-hero__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--oswald);
	font-size: var(--wp--preset--font-size--h2);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--white);
}

.the-mining-card-hero__link:hover .the-mining-card-hero__title {
	color: var(--wp--preset--color--cyan);
}

.the-mining-card-hero--empty {
	padding: var(--wp--preset--spacing--md);
	background-color: var(--wp--preset--color--gray-100);
	color: var(--wp--preset--color--ink-soft);
	font-style: italic;
}

/* ---------------------------------------------------------------------- */
/* Card Overlay Pequeno (acf/card-overlay-peq)                            */
/* ---------------------------------------------------------------------- */

/*
 * Same overlay pattern as Card Hero, compacted: ~300x190 reference
 * dimensions from Figma (name + size only, no pixel-precise spec — see
 * task-3b1-report.md), no excerpt, smaller title (h3 instead of h2),
 * tighter padding (sm instead of md).
 */

.the-mining-card-overlay-peq {
	position: relative;
}

.the-mining-card-overlay-peq__link {
	display: block;
	position: relative;
	color: var(--wp--preset--color--white);
	text-decoration: none;
}

.the-mining-card-overlay-peq__media {
	position: relative;
	width: 100%;
	aspect-ratio: 300 / 190;
	overflow: hidden;
	background-color: var(--wp--preset--color--navy);
}

.the-mining-card-overlay-peq__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.the-mining-card-overlay-peq__gradient {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		var(--wp--preset--color--navy) 0%,
		transparent 60%
	);
}

.the-mining-card-overlay-peq__content {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: var(--wp--preset--spacing--sm);
}

.the-mining-card-overlay-peq__tag {
	display: inline-block;
	margin-bottom: var(--wp--preset--spacing--xs);
	padding: calc(var(--wp--preset--spacing--xs) - 1px) var(--wp--preset--spacing--sm);
	border-radius: var(--wp--custom--radius--sm);
	font-family: var(--wp--preset--font-family--roboto);
	font-size: var(--wp--preset--font-size--meta-categoria);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--white);
}

.the-mining-card-overlay-peq__tag--magenta {
	background-color: var(--wp--preset--color--magenta);
}

.the-mining-card-overlay-peq__tag--cyan {
	background-color: var(--wp--preset--color--cyan);
}

.the-mining-card-overlay-peq__tag--navy {
	background-color: var(--wp--preset--color--navy);
}

.the-mining-card-overlay-peq__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--oswald);
	font-size: var(--wp--preset--font-size--h3);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--white);
}

.the-mining-card-overlay-peq__link:hover .the-mining-card-overlay-peq__title {
	color: var(--wp--preset--color--cyan);
}

.the-mining-card-overlay-peq--empty {
	padding: var(--wp--preset--spacing--md);
	background-color: var(--wp--preset--color--gray-100);
	color: var(--wp--preset--color--ink-soft);
	font-style: italic;
}

/* ---------------------------------------------------------------------- */
/* Card Médio Vertical (acf/card-medio-vertical)                          */
/* ---------------------------------------------------------------------- */

/*
 * "Traditional" (non-overlay) vertical card: image on top (~280x160 ratio),
 * category tag BELOW the image, title, then a meta line (category + date)
 * below the title. Reference dimensions ~280x281 from Figma (name + size
 * only, no pixel-precise spec — see task-3b1-report.md for the
 * interpretation notes, including why the category name appears both as a
 * tag and again in the meta line).
 */

.the-mining-card-medio-vertical {
	background-color: var(--wp--preset--color--panel);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--sm);
	overflow: hidden;
}

.the-mining-card-medio-vertical__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.the-mining-card-medio-vertical__media {
	width: 100%;
	aspect-ratio: 280 / 160;
	overflow: hidden;
	background-color: var(--wp--preset--color--gray-100);
}

.the-mining-card-medio-vertical__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.the-mining-card-medio-vertical__content {
	padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md) var(--wp--preset--spacing--md);
}

.the-mining-card-medio-vertical__tag {
	display: inline-block;
	margin-top: var(--wp--preset--spacing--sm);
	margin-bottom: var(--wp--preset--spacing--xs);
	padding: calc(var(--wp--preset--spacing--xs) - 1px) var(--wp--preset--spacing--sm);
	border-radius: var(--wp--custom--radius--sm);
	font-family: var(--wp--preset--font-family--roboto);
	font-size: var(--wp--preset--font-size--meta-categoria);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--white);
}

.the-mining-card-medio-vertical__tag--magenta {
	background-color: var(--wp--preset--color--magenta);
}

.the-mining-card-medio-vertical__tag--cyan {
	background-color: var(--wp--preset--color--cyan);
}

.the-mining-card-medio-vertical__tag--navy {
	background-color: var(--wp--preset--color--navy);
}

.the-mining-card-medio-vertical__title {
	margin: 0 0 var(--wp--preset--spacing--xs);
	font-family: var(--wp--preset--font-family--oswald);
	font-size: var(--wp--preset--font-size--h3);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--ink);
}

.the-mining-card-medio-vertical__link:hover .the-mining-card-medio-vertical__title {
	color: var(--wp--preset--color--magenta);
}

.the-mining-card-medio-vertical__meta {
	font-family: var(--wp--preset--font-family--roboto);
	color: var(--wp--preset--color--ink-soft);
}

.the-mining-card-medio-vertical__meta-categoria {
	font-size: var(--wp--preset--font-size--meta-categoria);
	text-transform: uppercase;
}

.the-mining-card-medio-vertical__meta-separator {
	margin: 0 var(--wp--preset--spacing--xs);
}

.the-mining-card-medio-vertical__meta-data {
	font-size: var(--wp--preset--font-size--meta-data);
}

.the-mining-card-medio-vertical--empty {
	padding: var(--wp--preset--spacing--md);
	background-color: var(--wp--preset--color--gray-100);
	color: var(--wp--preset--color--ink-soft);
	font-style: italic;
}

/* ---------------------------------------------------------------------- */
/* Card Lista Pequena (acf/card-lista-peq)                                */
/* ---------------------------------------------------------------------- */

/*
 * Compact horizontal "list item" card: ~80x80 square thumbnail on the
 * left, title + meta on the right. Reference ~360x80 dimensions from
 * Figma (name + size only, no pixel-precise spec — see task-3b1-report.md).
 * No colored category tag at this size (see render.php doc comment for the
 * documented interpretation); category name folded into the plain-text
 * meta line instead, same convention as Card Médio Vertical.
 */

.the-mining-card-lista-peq {
	background-color: var(--wp--preset--color--panel);
}

.the-mining-card-lista-peq__link {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--sm);
	color: inherit;
	text-decoration: none;
}

.the-mining-card-lista-peq__media {
	flex: 0 0 auto;
	width: 80px;
	height: 80px;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--sm);
	background-color: var(--wp--preset--color--gray-100);
}

.the-mining-card-lista-peq__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.the-mining-card-lista-peq__content {
	flex: 1 1 auto;
	min-width: 0;
}

.the-mining-card-lista-peq__title {
	margin: 0 0 var(--wp--preset--spacing--xs);
	font-family: var(--wp--preset--font-family--oswald);
	font-size: var(--wp--preset--font-size--h3);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--ink);
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.the-mining-card-lista-peq__link:hover .the-mining-card-lista-peq__title {
	color: var(--wp--preset--color--magenta);
}

.the-mining-card-lista-peq__meta {
	font-family: var(--wp--preset--font-family--roboto);
	color: var(--wp--preset--color--ink-soft);
}

.the-mining-card-lista-peq__meta-categoria {
	font-size: var(--wp--preset--font-size--meta-categoria);
	text-transform: uppercase;
}

.the-mining-card-lista-peq__meta-separator {
	margin: 0 var(--wp--preset--spacing--xs);
}

.the-mining-card-lista-peq__meta-data {
	font-size: var(--wp--preset--font-size--meta-data);
}

.the-mining-card-lista-peq--empty {
	padding: var(--wp--preset--spacing--md);
	background-color: var(--wp--preset--color--gray-100);
	color: var(--wp--preset--color--ink-soft);
	font-style: italic;
}

/* ---------------------------------------------------------------------- */
/* Card Horizontal (acf/card-horizontal)                                  */
/* ---------------------------------------------------------------------- */

/*
 * "Standard" feed card, the most-used variant across Home/Categoria/
 * Notícia feeds: rectangular thumbnail on the left, tag + title + meta on
 * the right. Reference ~600x130 dimensions from Figma (name + size only,
 * no pixel-precise spec — see task-3b2-report.md). Chose a rectangular
 * ~200x130 thumbnail ratio (rather than the ~130x130 square alternative
 * the brief also allows) to stay visually distinct from the square
 * thumbnail already used by Card Lista Pequena. Unlike Card Lista
 * Pequena, this variant keeps the colored category tag (brief asks for it
 * explicitly, and 130px of height has room for it).
 */

.the-mining-card-horizontal {
	background-color: var(--wp--preset--color--panel);
}

.the-mining-card-horizontal__link {
	display: flex;
	align-items: stretch;
	gap: var(--wp--preset--spacing--sm);
	color: inherit;
	text-decoration: none;
}

.the-mining-card-horizontal__media {
	flex: 0 0 auto;
	width: 200px;
	aspect-ratio: 200 / 130;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--sm);
	background-color: var(--wp--preset--color--gray-100);
}

.the-mining-card-horizontal__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.the-mining-card-horizontal__content {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.the-mining-card-horizontal__tag {
	display: inline-block;
	align-self: flex-start;
	margin-bottom: var(--wp--preset--spacing--xs);
	padding: calc(var(--wp--preset--spacing--xs) - 1px) var(--wp--preset--spacing--sm);
	border-radius: var(--wp--custom--radius--sm);
	font-family: var(--wp--preset--font-family--roboto);
	font-size: var(--wp--preset--font-size--meta-categoria);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--white);
}

.the-mining-card-horizontal__tag--magenta {
	background-color: var(--wp--preset--color--magenta);
}

.the-mining-card-horizontal__tag--cyan {
	background-color: var(--wp--preset--color--cyan);
}

.the-mining-card-horizontal__tag--navy {
	background-color: var(--wp--preset--color--navy);
}

.the-mining-card-horizontal__title {
	margin: 0 0 var(--wp--preset--spacing--xs);
	font-family: var(--wp--preset--font-family--oswald);
	font-size: var(--wp--preset--font-size--h3);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--ink);
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.the-mining-card-horizontal__link:hover .the-mining-card-horizontal__title {
	color: var(--wp--preset--color--magenta);
}

.the-mining-card-horizontal__meta {
	font-family: var(--wp--preset--font-family--roboto);
	color: var(--wp--preset--color--ink-soft);
}

.the-mining-card-horizontal__meta-categoria {
	font-size: var(--wp--preset--font-size--meta-categoria);
	text-transform: uppercase;
}

.the-mining-card-horizontal__meta-separator {
	margin: 0 var(--wp--preset--spacing--xs);
}

.the-mining-card-horizontal__meta-data {
	font-size: var(--wp--preset--font-size--meta-data);
}

.the-mining-card-horizontal--empty {
	padding: var(--wp--preset--spacing--md);
	background-color: var(--wp--preset--color--gray-100);
	color: var(--wp--preset--color--ink-soft);
	font-style: italic;
}

/* ---------------------------------------------------------------------- */
/* Card Matéria (acf/card-materia)                                        */
/* ---------------------------------------------------------------------- */

/*
 * The tallest, most "complete" card in the family: image on top, tag
 * below the image (non-overlay, same convention as Card Médio Vertical),
 * h2 title (larger than Card Médio Vertical's h3 to differentiate the
 * taller card), and a short excerpt paragraph — the only card in the
 * family with room for one. Reference ~360x384 dimensions from Figma
 * (name + size only, no pixel-precise spec — see task-3b2-report.md).
 */

.the-mining-card-materia {
	background-color: var(--wp--preset--color--panel);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--sm);
	overflow: hidden;
}

.the-mining-card-materia__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.the-mining-card-materia__media {
	width: 100%;
	aspect-ratio: 360 / 200;
	overflow: hidden;
	background-color: var(--wp--preset--color--gray-100);
}

.the-mining-card-materia__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.the-mining-card-materia__content {
	padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md) var(--wp--preset--spacing--md);
}

.the-mining-card-materia__tag {
	display: inline-block;
	margin-top: var(--wp--preset--spacing--sm);
	margin-bottom: var(--wp--preset--spacing--xs);
	padding: calc(var(--wp--preset--spacing--xs) - 1px) var(--wp--preset--spacing--sm);
	border-radius: var(--wp--custom--radius--sm);
	font-family: var(--wp--preset--font-family--roboto);
	font-size: var(--wp--preset--font-size--meta-categoria);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--white);
}

.the-mining-card-materia__tag--magenta {
	background-color: var(--wp--preset--color--magenta);
}

.the-mining-card-materia__tag--cyan {
	background-color: var(--wp--preset--color--cyan);
}

.the-mining-card-materia__tag--navy {
	background-color: var(--wp--preset--color--navy);
}

.the-mining-card-materia__title {
	margin: 0 0 var(--wp--preset--spacing--sm);
	font-family: var(--wp--preset--font-family--oswald);
	font-size: var(--wp--preset--font-size--h2);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--ink);
}

.the-mining-card-materia__link:hover .the-mining-card-materia__title {
	color: var(--wp--preset--color--magenta);
}

.the-mining-card-materia__excerpt {
	margin: 0;
	font-family: var(--wp--preset--font-family--roboto);
	font-size: var(--wp--preset--font-size--excerpt);
	line-height: 1.5;
	color: var(--wp--preset--color--ink-soft);
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

.the-mining-card-materia--empty {
	padding: var(--wp--preset--spacing--md);
	background-color: var(--wp--preset--color--gray-100);
	color: var(--wp--preset--color--ink-soft);
	font-style: italic;
}

/* ---------------------------------------------------------------------- */
/* Faixa de Seção (acf/secao-flag)                                        */
/* ---------------------------------------------------------------------- */

/*
 * Section-title bar: colored background, uppercase Oswald Bold title on
 * the left (label-faixa-secao token), optional "Mais →" link on the
 * right. Reference ~800x50 from Figma (secao/flag).
 */

.the-mining-secao-flag {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--sm);
	padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md);
	color: var(--wp--preset--color--white);
}

.the-mining-secao-flag--magenta {
	background-color: var(--wp--preset--color--magenta);
}

.the-mining-secao-flag--cyan {
	background-color: var(--wp--preset--color--cyan);
}

.the-mining-secao-flag--navy {
	background-color: var(--wp--preset--color--navy);
}

.the-mining-secao-flag__titulo {
	margin: 0;
	font-family: var(--wp--preset--font-family--oswald);
	font-size: var(--wp--preset--font-size--label-faixa-secao);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--white);
}

.the-mining-secao-flag__link {
	flex: 0 0 auto;
	font-family: var(--wp--preset--font-family--roboto);
	font-size: var(--wp--preset--font-size--meta-legenda);
	font-weight: 700;
	color: var(--wp--preset--color--white);
	text-decoration: none;
	white-space: nowrap;
}

.the-mining-secao-flag__link:hover {
	text-decoration: underline;
}

.the-mining-secao-flag--empty {
	padding: var(--wp--preset--spacing--md);
	background-color: var(--wp--preset--color--gray-100);
	color: var(--wp--preset--color--ink-soft);
	font-style: italic;
}

/* ---------------------------------------------------------------------- */
/* Citação em Destaque (acf/citacao)                                      */
/* ---------------------------------------------------------------------- */

/*
 * Simple pull quote with a magenta left border for visual emphasis, used
 * inside an article body. Reference ~600x54 from Figma (molecula/citacao).
 */

.the-mining-citacao {
	margin: var(--wp--preset--spacing--md) 0;
	padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md);
	border-left: 4px solid var(--wp--preset--color--magenta);
	background-color: var(--wp--preset--color--gray-100);
}

.the-mining-citacao__texto {
	margin: 0;
	font-family: var(--wp--preset--font-family--roboto);
	font-size: var(--wp--preset--font-size--excerpt);
	font-style: italic;
	line-height: 1.5;
	color: var(--wp--preset--color--ink);
}

.the-mining-citacao__autor {
	display: block;
	margin-top: var(--wp--preset--spacing--xs);
	font-family: var(--wp--preset--font-family--roboto);
	font-size: var(--wp--preset--font-size--meta-legenda);
	font-style: normal;
	color: var(--wp--preset--color--ink-soft);
}

.the-mining-citacao--empty {
	padding: var(--wp--preset--spacing--md);
	background-color: var(--wp--preset--color--gray-100);
	color: var(--wp--preset--color--ink-soft);
	font-style: italic;
}

/* ---------------------------------------------------------------------- */
/* Banner Publicitário (acf/banner-ad)                                    */
/* ---------------------------------------------------------------------- */

/*
 * Advertising banner: image (optionally wrapped in a link) with a small
 * "Publicidade" caption above it for editorial transparency, standard
 * practice on news sites. Seen on the Home prototype between the hero and
 * the category sections.
 */

.the-mining-banner-ad {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--xs);
	text-align: center;
}

.the-mining-banner-ad__label {
	font-family: var(--wp--preset--font-family--roboto);
	font-size: var(--wp--preset--font-size--meta-legenda);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--gray-600);
}

.the-mining-banner-ad__link {
	display: block;
	max-width: 100%;
}

.the-mining-banner-ad__img {
	display: block;
	max-width: 100%;
	height: auto;
}

.the-mining-banner-ad--empty {
	padding: var(--wp--preset--spacing--md);
	background-color: var(--wp--preset--color--gray-100);
	color: var(--wp--preset--color--ink-soft);
	font-style: italic;
}

/* ---------------------------------------------------------------------- */
/* Seção de Categoria (acf/secao-categoria)                               */
/* ---------------------------------------------------------------------- */

/*
 * "Engine" block: reuses acf/secao-flag (title bar), acf/card-hero (first
 * post) and acf/card-horizontal (remaining posts) via render_block() --
 * see inc/template-tags.php. This block only lays those reused blocks out;
 * it introduces no new card markup of its own.
 *
 * Two-column layout (main grid + optional sidebar) mirrors the Home/
 * Categoria page structure from the Figma reference (organismo/grade-
 * categoria): sidebar is a fixed-ish column next to a flexible main column,
 * collapsing to a single column on narrow viewports.
 */

.the-mining-secao-categoria {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--lg);
	margin: var(--wp--preset--spacing--xl) 0;
}

.the-mining-secao-categoria--com-sidebar {
	flex-direction: row;
	align-items: flex-start;
}

.the-mining-secao-categoria__main {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--md);
	min-width: 0;
	flex: 1 1 auto;
}

.the-mining-secao-categoria__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--wp--preset--spacing--md);
}

.the-mining-secao-categoria__hero {
	grid-column: 1 / -1;
}

.the-mining-secao-categoria__lista {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--wp--preset--spacing--md);
}

.the-mining-secao-categoria__sidebar {
	flex: 0 0 320px;
	width: 320px;
}

@media (max-width: 782px) {
	.the-mining-secao-categoria--com-sidebar {
		flex-direction: column;
	}

	.the-mining-secao-categoria__sidebar {
		flex-basis: auto;
		width: 100%;
	}

	.the-mining-secao-categoria__lista {
		grid-template-columns: 1fr;
	}
}

.the-mining-secao-categoria--empty {
	padding: var(--wp--preset--spacing--md);
	background-color: var(--wp--preset--color--gray-100);
	color: var(--wp--preset--color--ink-soft);
	font-style: italic;
}

/* ---------------------------------------------------------------------- */
/* Recente & Em Alta (acf/recente-em-alta)                                */
/* ---------------------------------------------------------------------- */

/*
 * Sidebar widget: fixed title ("RECENTE" or "EM ALTA", picked by the
 * editor via the `modo_padrao` ACF field -- no front-end tab JS, see
 * render.php docblock) above a stack of reused acf/card-lista-peq cards.
 * Title styled like the secao-flag title bar (same label-faixa-secao
 * font-size token + Oswald Bold) for visual family, on a navy background
 * of its own since this block isn't wrapped by a secao-flag instance.
 */

.the-mining-recente-em-alta__titulo {
	margin: 0 0 var(--wp--preset--spacing--sm);
	padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md);
	background-color: var(--wp--preset--color--navy);
	font-family: var(--wp--preset--font-family--oswald);
	font-size: var(--wp--preset--font-size--label-faixa-secao);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--white);
}

.the-mining-recente-em-alta__lista {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--sm);
}

.the-mining-recente-em-alta--empty {
	padding: var(--wp--preset--spacing--md);
	background-color: var(--wp--preset--color--gray-100);
	color: var(--wp--preset--color--ink-soft);
	font-style: italic;
}

/* ---------------------------------------------------------------------- */
/* Partials estruturais (Task 5): Breadcrumb, Meta do Post, Meta do Autor, */
/* Related Nav — blocos-wrapper sem campos ACF, só refletem o contexto    */
/* automático do post/categoria atual. Ver inc/template-tags.php.         */
/* ---------------------------------------------------------------------- */

.the-mining-breadcrumb {
	font-family: var(--wp--preset--font-family--roboto);
	font-size: var(--wp--preset--font-size--meta-legenda);
	color: var(--wp--preset--color--gray-600);
}

.the-mining-breadcrumb__link {
	color: var(--wp--preset--color--gray-600);
	text-decoration: none;
}

.the-mining-breadcrumb__link:hover {
	text-decoration: underline;
}

.the-mining-breadcrumb__current {
	color: var(--wp--preset--color--gray-600);
}

.the-mining-breadcrumb__separator {
	margin: 0 var(--wp--preset--spacing--xs);
	color: var(--wp--preset--color--gray-300);
}

.the-mining-meta-post {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--sm);
}

/* Same pill shape/typography as the card family's category tag (see
   .the-mining-card-hero__tag); no `cor_tag` field here (this partial has
   no editor-configurable fields at all), so it's fixed to "magenta". */
.the-mining-meta-post__categoria {
	display: inline-block;
	padding: calc(var(--wp--preset--spacing--xs) - 1px) var(--wp--preset--spacing--sm);
	border-radius: var(--wp--custom--radius--sm);
	font-family: var(--wp--preset--font-family--roboto);
	font-size: var(--wp--preset--font-size--meta-categoria);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--white);
	text-decoration: none;
}

.the-mining-meta-post__categoria--magenta {
	background-color: var(--wp--preset--color--magenta);
}

.the-mining-meta-post__categoria--cyan {
	background-color: var(--wp--preset--color--cyan);
}

.the-mining-meta-post__categoria--navy {
	background-color: var(--wp--preset--color--navy);
}

.the-mining-meta-post__data {
	font-family: var(--wp--preset--font-family--roboto);
	font-size: var(--wp--preset--font-size--meta-data);
	color: var(--wp--preset--color--gray-600);
}

.the-mining-meta-autor {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--sm);
}

.the-mining-meta-autor__avatar {
	border-radius: 50%;
	width: 48px;
	height: 48px;
}

.the-mining-meta-autor__info {
	display: flex;
	flex-direction: column;
}

.the-mining-meta-autor__nome {
	font-family: var(--wp--preset--font-family--roboto);
	font-size: var(--wp--preset--font-size--nav-menu);
	font-weight: 700;
	color: var(--wp--preset--color--ink);
}

.the-mining-meta-autor__data {
	font-family: var(--wp--preset--font-family--roboto);
	font-size: var(--wp--preset--font-size--meta-data);
	color: var(--wp--preset--color--gray-600);
}

.the-mining-related-nav {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--md);
	border-top: 1px solid var(--wp--preset--color--line);
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding: var(--wp--preset--spacing--md) 0;
}

.the-mining-related-nav__link {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--xs);
	max-width: 48%;
	text-decoration: none;
	color: var(--wp--preset--color--ink);
}

/* Edge case (oldest/newest post): the missing side's <a> is simply absent
   from the markup (see the_mining_related_nav() in inc/template-tags.php),
   so `justify-content: space-between` naturally pushes the remaining side
   to its own edge without leaving a gap. */
.the-mining-related-nav__link--next {
	margin-left: auto;
	text-align: right;
	align-items: flex-end;
}

.the-mining-related-nav__label {
	font-family: var(--wp--preset--font-family--roboto);
	font-size: var(--wp--preset--font-size--meta-categoria);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--magenta);
}

.the-mining-related-nav__title {
	font-family: var(--wp--preset--font-family--oswald);
	font-size: var(--wp--preset--font-size--h3);
	font-weight: 700;
	line-height: 1.3;
}