/*
 * LIEG — single layout styles
 *
 * Loaded only on singular posts via the enqueue in functions.php.
 * Composes with components.css (entry-content, chip-group, chip)
 * for the body and footer regions.
 */

/* ── Light header (mirrors archive-header) ────────────────── */
.single-header {
	background: var(--color-bg-alt);
	padding-block: var(--space-5) var(--space-7);
	margin-bottom: var(--space-6);
	position: relative;
}

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

.single-header__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}

/* ── Back link (top of the header) ────────────────────────── */
.single-back {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-1) var(--space-3);
	color: var(--color-brand-primary);
	background: transparent;
	border: 1px solid rgba(158, 42, 110, 0.22);
	border-radius: var(--radius-pill);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	text-decoration: none;
	align-self: flex-start;
	transition:
		background var(--duration-fast) var(--ease-standard),
		color var(--duration-fast) var(--ease-standard),
		border-color var(--duration-fast) var(--ease-standard),
		transform var(--duration-fast) var(--ease-standard);
}

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

.single-back__icon {
	transition: transform var(--duration-fast) var(--ease-standard);
}

.single-back:hover .single-back__icon,
.single-back:focus-visible .single-back__icon {
	transform: translateX(-3px);
}

/* ── Header grid: media (left) + info (right) ─────────────── */
.single-header__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-5);
	align-items: start;
}

@media ( min-width: 768px ) {
	/* `auto` for the media column lets it shrink to the image's
	 * actual rendered width instead of expanding to fill 1fr —
	 * important for portrait images, where the old ratio left
	 * a big gap between the photo and the info column. The
	 * info column then takes the remaining space (1fr). */
	.single-header__grid {
		grid-template-columns: auto minmax(0, 1fr);
		gap: var(--space-6);
		align-items: center;
	}
}

/* When a wrapper template opts out of the header media frame
 * (e.g. the post single) the grid has only the .single-header__info
 * child. Collapse the two-column template so the info spans the
 * full width and the centered vertical alignment doesn't leave
 * the info floating awkwardly. */
.single-header__grid:not(:has(.single-header__media)) {
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
}

/* ── Media frame (featured image OR PDF cover) ────────────── */
.single-header__media {
	margin: 0;
	min-width: 0;
}

/* Outer frame: layout anchor only. It caps the image at the
 * intended horizontal extent (360px) and positions the PDF
 * download overlay in the bottom-right. No bg, no border, no
 * shadow — invisible so the image floats in the header. */
.single-media-frame {
	position: relative;
	display: inline-block; /* shrink to fit the contained image */
	max-width: 360px;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

/* Image: carries the soft shadow. max-width caps wide images,
 * max-height caps tall portraits so the header height stays
 * bounded regardless of source aspect ratio. The natural
 * width/height attributes on the <img> keep the aspect ratio
 * — combined with width:auto/height:auto the browser picks
 * the smaller scale so the image fits the constraints without
 * distortion. */
.single-media-frame__img {
	display: block;
	max-width: 360px;
	max-height: 270px;
	width: auto;
	height: auto;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
}

/* The PDF download chip overlays the bottom-right corner of
 * the frame. It's a real <a> with a target="_blank", so it
 * works without JS and is keyboard-focusable. */
.single-media-frame__pdf {
	position: absolute;
	right: var(--space-3);
	bottom: var(--space-3);
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-4);
	background: var(--color-brand-deep);
	color: var(--color-text-inverse);
	border-radius: var(--radius-pill);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-bold);
	letter-spacing: 0.04em;
	text-decoration: none;
	box-shadow: var(--shadow-md);
	transition:
		background var(--duration-fast) var(--ease-standard),
		transform var(--duration-fast) var(--ease-standard);
}

.single-media-frame__pdf:hover,
.single-media-frame__pdf:focus-visible {
	background: var(--color-brand-primary);
	color: var(--color-text-inverse);
	transform: translateY(-1px);
}

/* ── Info column (badges + title + meta) ──────────────────── */
.single-header__info {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	min-width: 0;
}

/* ── Badges row ───────────────────────────────────────────── */
.single-badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	align-items: center;
}

.single-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: 6px 14px;
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	line-height: 1;
	border-radius: var(--radius-pill);
	background: var(--color-brand-soft-bg);
	color: var(--color-brand-primary);
	border: 1px solid rgba(146, 56, 138, 0.2);
	text-decoration: none;
	transition:
		background var(--duration-fast) var(--ease-standard),
		color var(--duration-fast) var(--ease-standard),
		border-color var(--duration-fast) var(--ease-standard);
}

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

/* Eyebrow badge (Integrante / Evento / Publicação …) anchors
 * the row as the canonical "type" label. To keep the header
 * feeling light (matching the archive header's bg-alt wash),
 * the eyebrow uses the soft-pink fill from the design system
 * rather than the brand-deep fill. The single-badge--accent
 * variant below is the strong filled chip for taxonomy terms. */
.single-badge--eyebrow {
	background: var(--color-brand-soft-bg);
	color: var(--color-brand-primary);
	border-color: rgba(146, 56, 138, 0.2);
}

.single-badge--eyebrow::before {
	background: var(--color-brand-primary);
}

/* Accent badge — first taxonomy term — fills the chip with the
 * primary brand colour so it reads as the dominant type tag. */
.single-badge--accent {
	background: var(--color-brand-primary);
	color: var(--color-text-inverse);
	border-color: var(--color-brand-primary);
}

.single-badge--accent::before {
	background: var(--color-text-inverse);
}

.single-badge--meta:hover,
.single-badge--meta:focus-visible {
	background: var(--color-brand-primary-light);
	color: var(--color-text-inverse);
	border-color: var(--color-brand-primary);
}

.single-badge--accent:hover,
.single-badge--accent:focus-visible {
	background: var(--color-brand-primary-dark);
	color: var(--color-text-inverse);
	border-color: var(--color-brand-primary-dark);
}

/* ── Title ────────────────────────────────────────────────── */
.single-header__title {
	margin: 0;
	font-family: var(--font-display);
	color: var(--color-brand-deep);
	font-size: clamp(1.75rem, 3.2vw + 0.5rem, 2.75rem);
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-tight);
	word-break: break-word;
}

/* ── Meta list (label/value pairs) ──────────────────────────
 * Definition list so the relationship between label and value
 * is semantic. Renders as a 2-column grid: label on the left,
 * value on the right. On mobile they stack into rows.
 */
.single-meta {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-2) var(--space-4);
	margin: 0;
	padding: var(--space-4) 0 0;
	border-top: 1px solid var(--color-border);
}

@media ( min-width: 480px ) {
	.single-meta {
		grid-template-columns: max-content 1fr;
		gap: var(--space-3) var(--space-5);
	}
}

.single-meta__item {
	display: contents;
}

.single-meta__label {
	margin: 0;
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-bold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-brand-primary);
	white-space: nowrap;
}

.single-meta__value {
	margin: 0;
	font-size: var(--font-size-sm);
	color: var(--color-text);
	min-width: 0;
	word-break: break-word;
}

.single-meta__link {
	color: var(--color-brand-primary);
	text-decoration: none;
}

.single-meta__link:hover,
.single-meta__link:focus-visible {
	color: var(--color-brand-primary-dark);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

/* The date badge (evento) ships with its own dark surface; let
 * it sit inline without inheriting the link color. */
.single-meta__value .date-badge {
	width: fit-content;
}

/* ── Body content ───────────────────────────────────────────
 * The wrap carries the .container class so it follows the
 * site-wide gutter + max-width on its own. Don't override
 * margin-inline here — the .container class handles centering.
 *
 * Exception: when the body sits inside the .single-with-rail
 * grid (post single), it is already inside a .container so the
 * nested .container constraint would double-constrain the width
 * and break alignment with the rail's grid columns. Strip the
 * container behaviour in that case.
 */
.single-content-wrap {
	margin-block: var(--space-6) var(--space-7);
}

.single-with-rail .single-content-wrap,
.single-with-rail .single-footer {
	max-width: none;
	width: auto;
	padding-inline: 0;
	margin-inline: 0;
}

.single-content {
	max-width: var(--measure-prose);
	margin-inline: 0;
}

/* ── Footer (taxonomy chip groups) ────────────────────────── */
.single-footer {
	max-width: var(--measure-prose);
	margin-inline: auto;
	margin-bottom: var(--space-8);
	padding-top: var(--space-5);
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

/* Same exception as above for the footer inside the rail grid:
 * the auto-margin centering moves it off the left edge, which
 * we don't want when it sits in a flex/grid column. */
.single-with-rail .single-footer {
	margin-inline: 0;
}