/**
 * Collection single.
 * Prefer shared tokens / components; page-specific layout lives here.
 */

body.single-collection .site-main {
	padding: 0;
}

.collection {
	background: var(--color-surface);
	color: var(--color-text);
}

/* ——— Hero ——— */

.collection__hero {
	border-bottom: 0;
}

.collection__hero-inner {
	display: flex;
	align-items: center;
	gap: var(--taf-section-pad);
}

.collection__cover {
	margin: 0;
	flex: 1 1 0;
	min-width: 0;
	aspect-ratio: 380 / 226;
	position: relative;
	overflow: visible;
}

.collection__cover::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 12px;
	left: 3.2%;
	background: linear-gradient(
		to bottom,
		rgba(6, 158, 191, 0.25),
		rgba(6, 158, 191, 0.5)
	);
	pointer-events: none;
}

.collection__cover img {
	position: absolute;
	top: 12px;
	left: 0;
	width: 96.9%;
	height: calc(100% - 12px);
	object-fit: cover;
	display: block;
}

.collection__cover::after {
	content: '';
	position: absolute;
	top: 12px;
	left: 0;
	width: 96.9%;
	height: calc(100% - 12px);
	background: linear-gradient(
		to bottom,
		rgba(6, 158, 191, 0),
		rgba(6, 158, 191, 0.5)
	);
	opacity: 0.8;
	pointer-events: none;
}

.collection__hero-copy {
	flex: 1 1 0;
	min-width: 0;
	max-width: 45rem;
	display: flex;
	flex-direction: column;
	gap: var(--taf-gutter-cards);
	padding-block: var(--taf-section-pad);
}

.collection__eyebrow {
	margin: 0;
	color: var(--color-text-inverse);
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.collection__title {
	margin: 0;
	color: var(--color-text-inverse);
}

.collection__lede {
	color: var(--color-text-inverse);
}

.collection__lede > *:first-child {
	margin-top: 0;
}

.collection__lede > *:last-child {
	margin-bottom: 0;
}

.collection__lede p {
	margin: 0 0 var(--taf-gutter-cards);
	font-family: var(--taf-font);
	font-weight: var(--font-light);
	font-size: var(--text-body-sm-size);
	line-height: var(--text-body-sm-line);
	color: var(--color-text-inverse);
}

.collection__lede p:last-child {
	margin-bottom: 0;
}

.collection__share {
	padding-inline: 0;
}

/* ——— Sections ——— */

.collection__section-title {
	margin: 0 0 var(--taf-gutter-cards);
	color: var(--color-text);
	max-width: 45rem;
}

.collection__research,
.collection__latest,
.collection__topics {
	padding-block: var(--taf-section-pad);
	border-bottom: 1px solid var(--color-border);
}

.collection__research .container,
.collection__latest .container {
	display: flex;
	flex-direction: column;
	gap: var(--taf-section-pad);
}

.collection__research .collection__section-title,
.collection__latest .collection__section-title {
	margin-bottom: 0;
}

.collection__research .news-slider {
	width: 100%;
}

.collection__latest-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--taf-gutter-section);
}

.collection__latest-grid .news-card {
	width: 100%;
	flex: none;
}

/* ——— CTA ——— */

.collection__cta {
	background: var(--taf-blue);
	color: var(--color-text-inverse);
	padding-block: clamp(4rem, 8vw, 7.8125rem);
	text-align: center;
}

.collection__cta-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(2.5rem, 5vw, 4.6875rem);
}

.collection__cta-copy {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.625rem;
	max-width: 80rem;
	width: 100%;
}

.collection__cta-eyebrow {
	margin: 0;
	color: var(--color-text-inverse);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.collection__cta-title {
	margin: 0;
	color: var(--color-text-inverse);
}

/* ——— Topics ——— */

.collection__topics-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--taf-gutter-ui);
	max-width: 45rem;
}

.collection__topics-list .pill {
	text-decoration: none;
}

.collection__topics-list a.pill:hover,
.collection__topics-list a.pill:focus-visible {
	filter: brightness(0.95);
}

@media (max-width: 1024px) {
	.collection__hero-inner {
		flex-direction: column;
		align-items: stretch;
	}

	.collection__hero-copy {
		padding-block: 0;
		max-width: none;
	}

	.collection__latest-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 768px) {
	.collection__latest-grid {
		grid-template-columns: 1fr;
	}
}