/*
 * LIEG — component styles
 *
 * Reusable visual primitives consumed by archive and single
 * templates. Every selector in this file is component-scoped
 * (prefixed with the component name) so it can be safely
 * extracted or moved without breaking unrelated UI.
 */

/* ── Page header (archive / single intro) ──────────────── */
.page-header {
	padding-block: var(--space-7) var(--space-6);
	position: relative;
	margin-bottom: var(--space-7);
}

.page-header::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: linear-gradient(
		90deg,
		transparent 0%,
		var(--color-brand-primary) 25%,
		var(--color-brand-accent) 75%,
		transparent 100%
	);
	opacity: 0.4;
}

.page-header__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-bold);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-brand-primary);
	margin-bottom: var(--space-3);
	padding: 6px 14px;
	background: var(--color-brand-soft-bg);
	border-radius: var(--radius-pill);
	border: 1px solid rgba(146, 56, 138, 0.2);
}

.page-header__eyebrow::before {
	content: '';
	display: inline-block;
	width: 6px;
	height: 6px;
	background: var(--color-brand-primary);
	border-radius: var(--radius-pill);
	box-shadow: 0 0 0 0 var(--color-brand-primary);
	animation: lieg-pulse 2.4s ease-in-out infinite;
}

@keyframes lieg-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(146, 56, 138, 0.6); }
	70%  { box-shadow: 0 0 0 8px rgba(146, 56, 138, 0); }
	100% { box-shadow: 0 0 0 0 rgba(146, 56, 138, 0); }
}

.page-header__title {
	margin: 0 0 var(--space-3);
	color: var(--color-brand-deep);
	font-family: var(--font-display);
	font-size: clamp(2rem, 4vw, 3rem);
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-tight);
	background: linear-gradient(
		90deg,
		var(--color-brand-deep) 0%,
		var(--color-brand-primary) 100%
	);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

.page-header__lede {
	font-size: var(--font-size-md);
	color: var(--color-text-muted);
	max-width: var(--measure-prose);
	margin: 0;
}

/* ── Card grid (archives) ───────────────────────────────── */
.card-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-5);
	list-style: none;
	margin: 0;
	padding: 0;
	align-items: stretch;
}

/* Without min-width: 0 on grid items, each cell sizes itself
 * to its content's intrinsic minimum width (e.g. an unbreakable
 * date-badge string or a long untitled excerpt). On wider view-
 * ports that intrinsic min-width can exceed 1fr and push the
 * whole grid wider than its container — producing a horizontal
 * page scroll at ~1036px and below for the atividades section.
 * Forcing min-width: 0 lets the track's 1fr (or repeat(2, 1fr))
 * actually clip the cell. */
.card-grid > * {
	min-width: 0;
}

@media (min-width: 1024px) {
	.card-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-6);
	}
}

/* ── Card ───────────────────────────────────────────────── */
.card {
	display: flex;
	flex-direction: column;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	height: 100%;
	transition:
		transform var(--duration-base) var(--ease-standard),
		box-shadow var(--duration-base) var(--ease-standard),
		border-color var(--duration-base) var(--ease-standard);
}

.card:hover,
.card:focus-within {
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
	border-color: var(--color-brand-primary-light);
}

.card__media {
	aspect-ratio: 4 / 3;
	background:
		linear-gradient(135deg,
			var(--color-brand-violet) 0%,
			var(--color-brand-primary) 55%,
			var(--color-brand-accent) 100%);
	color: var(--color-text-inverse);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
}

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

@media (min-width: 480px) {
	.card {
		flex-direction: row;
	}

	.card__media {
		aspect-ratio: auto;
		width: 180px;
		flex-shrink: 0;
		align-self: stretch;
	}

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

@media (min-width: 768px) {
	.card__media {
		width: 220px;
	}
}

@media (min-width: 1024px) {
	.card__media {
		width: 260px;
	}
}

.card__media-placeholder {
	font-family: var(--font-display);
	font-size: var(--font-size-3xl);
	font-weight: var(--font-weight-bold);
	color: var(--color-text-inverse);
	opacity: 0.85;
	letter-spacing: var(--letter-spacing-tight);
}

.card__body {
	padding: var(--space-5);
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	flex: 1;
}

.card__title {
	margin: 0;
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-bold);
	color: var(--color-brand-deep);
	line-height: var(--line-height-tight);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.card__title a {
	color: inherit;
	text-decoration: none;
}

.card__title a:hover,
.card__title a:focus-visible {
	color: var(--color-brand-primary);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

.card__excerpt {
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--font-size-sm);
	line-height: var(--line-height-normal);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.card__meta {
	margin-top: auto;
	padding-top: var(--space-3);
	border-top: 1px solid var(--color-border);
}

/* ── Past event card: muted appearance ──── */
.card--past {
	opacity: 0.65;
}

.card--past:hover,
.card--past:focus-within {
	opacity: 1;
}

.card--past .card__media img {
	filter: grayscale(0.5);
}

/* ── Meta strip (single posts) ──────────────────────────── */
.meta-strip {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	font-size: var(--font-size-sm);
	color: var(--color-text-muted);
	margin: var(--space-3) 0 var(--space-5);
}

.meta-strip__item {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
}

.meta-strip__item::before {
	content: "·";
	color: var(--color-border-strong);
	margin-right: var(--space-1);
}

.meta-strip__item:first-child::before {
	content: "";
	margin: 0;
}

.meta-strip__label {
	font-weight: var(--font-weight-medium);
	color: var(--color-text);
}

/* ── Chip / taxonomy badge ──────────────────────────────── */
.chip {
	display: inline-flex;
	align-items: center;
	padding: var(--space-1) var(--space-3);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-medium);
	line-height: 1;
	border-radius: var(--radius-pill);
	background: var(--color-brand-soft-bg);
	color: var(--color-brand-deep);
	text-decoration: none;
	transition:
		background var(--duration-fast) var(--ease-standard),
		color var(--duration-fast) var(--ease-standard);
}

.chip:hover,
.chip:focus-visible {
	background: var(--color-brand-primary);
	color: var(--color-text-inverse);
}

.chip--accent {
	background: var(--color-brand-primary);
	color: var(--color-text-inverse);
}

.chip--accent:hover,
.chip--accent:focus-visible {
	background: var(--color-brand-primary-dark);
}

.chip-group {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ── Single post body ───────────────────────────────────── */
.entry-content {
	max-width: var(--measure-prose);
	font-size: var(--font-size-md);
	line-height: var(--line-height-loose);
}

.entry-content > * + * {
	margin-top: var(--space-4);
}

.entry-content h2 {
	margin-top: var(--space-7);
}

.entry-content h3 {
	margin-top: var(--space-6);
}

.entry-content figure {
	margin: var(--space-5) 0;
}

.entry-content figcaption {
	font-size: var(--font-size-sm);
	color: var(--color-text-muted);
	text-align: center;
	margin-top: var(--space-2);
}

/* Containment of legacy inline-styled images.
 *
 * WXR imports from the legacy site carry inline `style="width:
 * NNNpx"` on <figure>/<img> elements (set by the legacy
 * page-builder for hard-coded column widths). Without
 * containment, those figures break out of the prose column
 * and push the layout horizontally.
 *
 * Two rules:
 *   1. Strip any inline width on the figure so it can be
 *      constrained by the column via `width: 100%`. The figure
 *      still centers its content (existing aligncenter class).
 *   2. Cap images at the column width — `max-width: 100%` plus
 *      `height: auto` keeps aspect ratio, and `width: 100%`
 *      lets the image fill the available space when the source
 *      is larger than the column.
 *
 * `max-inline-size` (logical) used where supported; falls back
 * to `max-width` for older engines. */
.entry-content figure,
.entry-content img {
	max-inline-size: 100%;
	max-width: 100%;
}

.entry-content figure {
	width: 100% !important;
}

.entry-content img {
	height: auto;
}

/* Legacy classes used by the legacy theme (alignleft/alignright/
 * aligncenter/alignnone, wp-caption, size-full, etc.) shouldn't
 * dictate width any more. Reset them so the column constraint
 * wins. */
.entry-content .alignleft,
.entry-content .alignright,
.entry-content .aligncenter,
.entry-content .alignnone,
.entry-content .wp-caption {
	display: block;
	float: none;
	margin-inline: auto;
}

.entry-content .wp-caption-text {
	font-size: var(--font-size-sm);
	color: var(--color-text-muted);
	text-align: center;
	margin-top: var(--space-2);
	padding: 0;
}

/* WordPress block-gallery used in legacy posts: keep the gallery
 * inside the column. The legacy theme had its own styles for
 * `wp-block-gallery`, but most of them are now unnecessary. */
.entry-content .wp-block-gallery {
	max-inline-size: 100%;
	max-width: 100%;
}

/* Tables in legacy posts: constrain horizontally and allow
 * scrolling instead of breaking the column. */
.entry-content table {
	max-inline-size: 100%;
	max-width: 100%;
	display: block;
	overflow-x: auto;
}

.entry-footer {
	max-width: var(--measure-prose);
	margin-top: var(--space-7);
	padding-top: var(--space-5);
	border-top: 1px solid var(--color-border);
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.entry-footer__label {
	font-size: var(--font-size-xs);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-text-muted);
	font-weight: var(--font-weight-bold);
}

/* ── Pagination ─────────────────────────────────────────── */
.pagination {
	margin-block: var(--space-8) var(--space-9);
	display: flex;
	justify-content: center;
}

.pagination .nav-links {
	display: inline-flex;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-3);
	background: var(--color-bg-alt);
	border-radius: var(--radius-pill);
}

.pagination a,
.pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	height: 2.25rem;
	padding: 0 var(--space-3);
	border-radius: var(--radius-pill);
	font-size: var(--font-size-sm);
	color: var(--color-brand-deep);
	text-decoration: none;
	font-weight: var(--font-weight-medium);
}

.pagination a:hover,
.pagination a:focus-visible {
	background: var(--color-brand-primary);
	color: var(--color-text-inverse);
}

.pagination .current {
	background: var(--color-brand-primary);
	color: var(--color-text-inverse);
}

/* ── Empty state ────────────────────────────────────────── */
.empty-state {
	padding: var(--space-7) var(--space-5);
	margin-block: var(--space-6) var(--space-8);
	text-align: center;
	background: var(--color-bg-alt);
	border: 1px dashed var(--color-border-strong);
	border-radius: var(--radius-lg);
	color: var(--color-text-muted);
}

/* The "Limpar busca" link rendered by template-parts/blog/list.php
 * inside the empty state is a plain text link by default. Style
 * it as a pill CTA so the empty state has a clear next action.
 * Reuses the same register as .empty-state .btn defined in
 * archive.css: pill outline, brand-primary hover. */
.empty-state .blog-filters__clear {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	margin-top: var(--space-3);
	padding: var(--space-2) var(--space-5);
	background: transparent;
	color: var(--color-brand-primary);
	border: 1px solid var(--color-brand-primary);
	border-radius: var(--radius-pill);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-bold);
	text-decoration: none;
	transition:
		background var(--duration-fast) var(--ease-standard),
		color var(--duration-fast) var(--ease-standard);
}

.empty-state .blog-filters__clear:hover,
.empty-state .blog-filters__clear:focus-visible {
	background: var(--color-brand-primary);
	color: var(--color-text-inverse);
}

/* ── Event date badge (on cards) ────────────────────────── */
.date-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	max-width: 100%;
	padding: var(--space-1) var(--space-3);
	background: var(--color-brand-deep);
	color: var(--color-text-inverse);
	border-radius: var(--radius-sm);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-normal);
	/* white-space was nowrap previously, which forced the badge
	 * to overflow its parent card on narrow widths (e.g. when
	 * the date string includes long time ranges like
	 * "15–17 Set 2026 · 14h–18h"). Letting the badge wrap keeps
	 * it inside its column without compromising readability on
	 * wider columns. */
}

.date-badge__icon {
	flex-shrink: 0;
	width: 1em;
	height: 1em;
}

.date-badge__text {
	/* Inherits from .date-badge. Wraps onto a new line inside
	 * the badge when the column is too narrow to hold the full
	 * date string, which is the rare case where nowrap caused
	 * horizontal page scroll. */
}

.card__type {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	width: fit-content;
	margin-left: auto;
	padding: 6px 14px;
	background: var(--color-brand-soft-bg);
	color: var(--color-brand-primary);
	border-radius: var(--radius-pill);
	border: 1px solid rgba(146, 56, 138, 0.2);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	line-height: var(--line-height-normal);
}

.card__type::before {
	content: '';
	display: inline-block;
	width: 6px;
	height: 6px;
	background: var(--color-brand-primary);
	border-radius: var(--radius-pill);
}