/**
 * Caldera — template-level composition.
 *
 * Components own their own look; this file arranges them into the page shapes the
 * design system describes (hero, page header, article, archive, empty state).
 */

/* =========================================================== Hero */

.caldera-hero {
	display: grid;
	gap: var(--spacing-40);
	align-items: center;
	margin-bottom: var(--section-gap);
}

@media (min-width: 1024px) {
	.caldera-hero {
		grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
		gap: var(--spacing-56);
	}
}

.caldera-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-8);
	margin-bottom: var(--spacing-20);
	padding: var(--spacing-4) var(--spacing-12);
	border: var(--border-hairline) solid var(--color-obsidian);
	border-radius: var(--radius-pills);
	font-size: var(--text-body-sm);
	line-height: var(--leading-body-sm);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/*
 * The signature 189px display headline. It is fluid rather than fixed so it can
 * hold its architectural scale on a 1440px monitor without overflowing a phone.
 */
.caldera-hero__title {
	margin: 0 0 var(--spacing-24);
	font-size: var(--text-display);
	line-height: var(--leading-display);
	letter-spacing: var(--tracking-heading);
	text-wrap: balance;
}

.caldera-hero__subtitle {
	max-width: 46ch;
	margin: 0 0 var(--spacing-32);
	font-size: var(--text-body);
	color: var(--text-muted);
}

.caldera-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-12);
	align-items: center;
}

.caldera-hero__visual {
	aspect-ratio: 4 / 3;
	min-height: 320px;
}

@media (max-width: 1023px) {
	.caldera-hero__visual {
		min-height: 240px;
	}
}

.caldera-hero__points {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-16) var(--spacing-32);
	padding: 0;
	margin: var(--spacing-32) 0 0;
	list-style: none;
	font-size: var(--text-body-sm);
	color: var(--text-muted);
}

.caldera-hero__points li {
	display: flex;
	align-items: center;
	gap: var(--spacing-8);
}

.caldera-hero__points svg {
	color: var(--color-ember);
	flex: none;
}

/* =========================================================== Page header */

.caldera-page-header {
	margin-bottom: var(--spacing-48);
}

.caldera-page-header__title {
	margin: 0;
	font-size: var(--text-heading-3xl);
	line-height: var(--leading-heading-3xl);
}

.caldera-page-header--large .caldera-page-header__title {
	font-size: var(--text-display);
	line-height: var(--leading-display);
}

.caldera-page-header--compact .caldera-page-header__title {
	font-size: var(--text-heading-2xl);
	line-height: var(--leading-heading-2xl);
}

.caldera-page-header__subtitle {
	max-width: 60ch;
	margin: var(--spacing-20) 0 0;
	color: var(--text-muted);
}

/* =========================================================== Single entry */

.caldera-entry-header {
	margin-bottom: var(--spacing-40);
}

.caldera-entry-header__tags {
	margin-bottom: var(--spacing-20);
}

.caldera-entry-header__title {
	margin: 0 0 var(--spacing-24);
	font-size: var(--text-entry-title);
	line-height: var(--leading-entry-title);
}

.caldera-entry-header__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-8) var(--spacing-16);
	align-items: center;
	font-family: var(--font-meta);
	font-size: var(--text-caption);
	color: var(--text-muted);
}

.caldera-entry-header__meta a {
	text-decoration: none;
}

.caldera-entry__hero {
	margin-bottom: var(--spacing-48);
	border-radius: var(--radius-cards);
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: var(--color-ember);
}

.caldera-entry__hero img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}

.caldera-entry__footer {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-16);
	align-items: center;
	justify-content: space-between;
	margin-top: var(--spacing-48);
	padding-top: var(--spacing-24);
	border-top: var(--border-hairline) dotted var(--border-color);
}

.caldera-entry__share {
	display: flex;
	gap: var(--spacing-8);
	align-items: center;
	padding: 0;
	margin: 0;
	list-style: none;
}

.caldera-entry__share a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: var(--border-hairline) solid var(--color-obsidian);
	border-radius: var(--radius-pills);
}

.caldera-entry__share a:hover {
	background: var(--color-ember);
	color: var(--color-obsidian);
}

/* Table of contents ------------------------------------------------------- */

.caldera-toc {
	padding: var(--spacing-24) var(--spacing-32);
	margin-bottom: var(--spacing-32);
	border-radius: var(--radius-cards);
	background: var(--surface-raised);
}

.caldera-toc__title {
	margin: 0 0 var(--spacing-12);
	font-family: var(--font-body);
	font-size: var(--text-body-sm);
	font-weight: var(--font-weight-medium);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.caldera-toc ol {
	padding-left: var(--spacing-20);
	margin: 0;
	font-size: var(--text-body-sm);
}

/* =========================================================== Archives */

.caldera-archive-intro {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-24);
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: var(--spacing-40);
}

.caldera-archive-count {
	font-family: var(--font-meta);
	font-size: var(--text-caption);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--text-muted);
}

/* Filter bar --------------------------------------------------------------- */

.caldera-filter-bar {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-8);
	align-items: center;
	padding: var(--spacing-12);
	margin-bottom: var(--spacing-32);
	border-radius: var(--radius-pills);
	background: var(--surface-raised);
}

.caldera-filter-bar__label {
	padding-inline: var(--spacing-12);
	font-family: var(--font-meta);
	font-size: var(--text-caption);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--text-muted);
}

.caldera-filter-bar button,
.caldera-filter-bar a {
	padding: var(--spacing-8) var(--spacing-16);
	border: var(--border-hairline) solid transparent;
	border-radius: var(--radius-pills);
	background: transparent;
	font-family: var(--font-body);
	font-size: var(--text-body-sm);
	font-weight: var(--font-weight-medium);
	text-decoration: none;
	cursor: pointer;
}

.caldera-filter-bar button:hover,
.caldera-filter-bar a:hover {
	border-color: var(--color-obsidian);
}

.caldera-filter-bar [aria-pressed='true'],
.caldera-filter-bar [aria-current='page'] {
	background: var(--color-ember);
	color: var(--color-obsidian);
}

.caldera-filter-status {
	margin-left: auto;
	padding-inline: var(--spacing-12);
	font-family: var(--font-meta);
	font-size: var(--text-caption);
	color: var(--text-muted);
}

/* =========================================================== Empty state */

.caldera-empty {
	max-width: 620px;
	padding: var(--spacing-56) var(--card-padding);
	margin-inline: auto;
	border-radius: var(--radius-cards);
	background: var(--surface-raised);
	text-align: center;
}

.caldera-empty__title {
	margin: 0 0 var(--spacing-16);
	font-size: var(--text-heading-lg);
	line-height: var(--leading-heading-lg);
}

.caldera-empty__message {
	margin: 0 0 var(--spacing-24);
	color: var(--text-muted);
}

.caldera-empty .caldera-search-form {
	margin-bottom: var(--spacing-24);
}

/* =========================================================== 404 */

.caldera-404 {
	display: grid;
	gap: var(--spacing-40);
	align-items: center;
	margin-block: var(--spacing-32) var(--section-gap);
}

@media (min-width: 1024px) {
	.caldera-404 {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		gap: var(--spacing-64);
	}
}

.caldera-404__code {
	margin: 0 0 var(--spacing-16);
	font-family: var(--font-display);
	font-size: var(--text-display);
	font-weight: var(--font-weight-regular);
	font-feature-settings: 'ss06', 'ss10';
	line-height: var(--leading-display);
	letter-spacing: var(--tracking-heading);
	color: var(--color-ember);
}

.caldera-404__title {
	margin: 0 0 var(--spacing-16);
	font-size: var(--text-heading-2xl);
	line-height: var(--leading-heading-2xl);
}

.caldera-404__text {
	max-width: 46ch;
	margin: 0 0 var(--spacing-32);
	color: var(--text-muted);
}

.caldera-404__visual {
	aspect-ratio: 1 / 1;
	min-height: 280px;
}

.caldera-404__suggestions {
	margin-top: var(--spacing-40);
}

.caldera-404__suggestions h2 {
	font-size: var(--text-heading);
	line-height: var(--leading-heading);
}

/* =========================================================== Author */

.caldera-author-header {
	display: grid;
	gap: var(--spacing-32);
	margin-bottom: var(--spacing-48);
}

@media (min-width: 900px) {
	.caldera-author-header {
		grid-template-columns: minmax(0, 1fr) 300px;
		align-items: start;
		gap: var(--spacing-56);
	}
}

.caldera-author-header__name {
	margin: 0 0 var(--spacing-16);
	font-size: var(--text-heading-3xl);
	line-height: var(--leading-heading-3xl);
}

.caldera-author-header__bio {
	max-width: 62ch;
	margin: 0 0 var(--spacing-24);
	color: var(--text-muted);
}

.caldera-author-stats {
	display: grid;
	gap: var(--spacing-16);
	grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}

.caldera-author-avatar img {
	border-radius: var(--radius-cards);
	width: 100%;
	height: auto;
}

/* =========================================================== Partner strip */

.caldera-partners {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-24);
	padding: var(--card-padding);
	border-radius: var(--radius-cards);
	background: var(--surface-raised);
}

.caldera-partners__item {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 auto;
	min-width: 120px;
	max-height: 40px;
}

.caldera-partners__item img {
	max-height: 40px;
	width: auto;
	object-fit: contain;
	filter: grayscale(1);
	opacity: 0.75;
	transition: opacity var(--duration-base) var(--ease-out);
}

.caldera-partners__item:hover img {
	opacity: 1;
}

/* =========================================================== CTA band */

.caldera-cta__inner {
	display: grid;
	gap: var(--spacing-32);
	align-items: center;
}

@media (min-width: 1024px) {
	.caldera-cta__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--spacing-64);
	}
}

.caldera-cta__title {
	margin: 0 0 var(--spacing-16);
	font-size: var(--text-heading-2xl);
	line-height: var(--leading-heading-2xl);
}

.caldera-cta__text {
	max-width: 48ch;
	margin: 0;
	color: var(--color-chalk-70);
}

/* =========================================================== Comments */

.caldera-comments__title {
	font-size: var(--text-heading-lg);
	line-height: var(--leading-heading-lg);
}

/* =========================================================== Utilities */

.caldera-visually-flat {
	box-shadow: none !important;
}

.caldera-stack {
	display: flex;
	flex-direction: column;
	gap: var(--element-gap);
}

.caldera-cluster {
	display: flex;
	flex-wrap: wrap;
	gap: var(--element-gap);
	align-items: center;
}

.caldera-muted {
	color: var(--text-muted);
}

.caldera-mt-0 {
	margin-top: 0;
}

.caldera-mb-0 {
	margin-bottom: 0;
}

/* ===========================================================================
 * Core template hierarchy
 *
 * Everything below arranges existing components into the page shapes the classic
 * templates need. No new colours, no shadows — tokens only.
 * ======================================================================== */

/* ---------------------------------------------------------- Layout column */

/*
 * Grid children default to min-content width, which lets a long word or a wide
 * table push the sidebar off screen. Zero min-width pins the main column.
 */
.caldera-layout__main {
	min-width: 0;
}

/* ------------------------------------------------------------- Post cards */

.caldera-card__terms {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-8);
}

/* The lead card on the blog index: wide crop stacked on phones, side-by-side
   once there is room for the headline to hold its scale beside the image. */
.caldera-home__lead {
	margin-bottom: var(--spacing-32);
}

@media (min-width: 768px) {
	.caldera-card--lead {
		flex-direction: row;
		align-items: stretch;
	}

	.caldera-card--lead .caldera-card__media {
		flex: 1 1 52%;
		aspect-ratio: auto;
		min-height: 320px;
	}

	.caldera-card--lead .caldera-card__body {
		flex: 1 1 48%;
		justify-content: center;
	}
}

.caldera-card--lead .caldera-card__title {
	font-size: var(--text-heading-lg);
	line-height: var(--leading-heading-lg);
}

/* --------------------------------------------------------- Single article */

.caldera-entry__hero {
	position: relative;
	margin-inline: 0;
}

.caldera-entry__hero-caption {
	position: absolute;
	inset: auto 0 0 0;
	padding: var(--spacing-12) var(--spacing-24);
	background: var(--surface-inverse);
	color: var(--text-on-inverse);
	font-family: var(--font-meta);
	font-size: var(--text-caption);
	line-height: var(--leading-caption);
}

.caldera-entry__tags {
	margin-top: var(--spacing-40);
}

.caldera-entry__footer-note {
	margin: 0;
	font-family: var(--font-meta);
	font-size: var(--text-caption);
	line-height: var(--leading-caption);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.caldera-related {
	margin-top: var(--section-gap);
}

/* Multi-page posts and pages ------------------------------------------------ */

.caldera-page-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-8);
	align-items: center;
	margin-top: var(--spacing-40);
	font-size: var(--text-body-sm);
}

.caldera-page-links__label {
	font-family: var(--font-meta);
	font-size: var(--text-caption);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--text-muted);
}

.caldera-page-links a,
.caldera-page-links > span:not(.caldera-page-links__label) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding-inline: var(--spacing-12);
	border-radius: var(--radius-pills);
	background: var(--surface-raised);
	text-decoration: none;
}

.caldera-page-links > span:not(.caldera-page-links__label) {
	background: var(--color-ember);
	color: var(--color-obsidian);
}

/* ------------------------------------------------------------- Prose width */

/* Full Width pages trade the reading measure for the whole container. */
.caldera-prose--wide {
	max-width: none;
}

/* ---------------------------------------------------------------- Archives */

.caldera-archive-description {
	max-width: 60ch;
	color: var(--text-muted);
}

.caldera-archive-description > :last-child {
	margin-bottom: 0;
}

.caldera-search-again {
	flex: 1 1 320px;
	max-width: 520px;
}

/* The category term description, in a Limestone card. */
.caldera-term-card {
	padding: var(--card-padding);
	margin-bottom: var(--spacing-32);
	border-radius: var(--radius-cards);
	background: var(--surface-raised);
}

.caldera-term-card__body > :first-child {
	margin-top: 0;
}

.caldera-term-card__body > :last-child {
	margin-bottom: 0;
}

/* --------------------------------------------------------------------- 404 */

.caldera-404__search {
	max-width: 480px;
	margin-bottom: var(--spacing-24);
}

.caldera-404__actions {
	margin: 0;
}

/* ------------------------------------------------------------------ Author */

.caldera-author-header__body {
	min-width: 0;
}

/* On wide screens the avatar sits in the narrow second column, so it should not
   grow past the width the design gives it. */
.caldera-author-avatar {
	max-width: 300px;
}

.caldera-author-outro {
	margin-top: var(--section-gap);
}

/* ---------------------------------------------------------------- Comments */

.caldera-comment__reply {
	display: inline-flex;
	margin-top: var(--spacing-12);
}

.caldera-comments .comment-content > :first-child {
	margin-top: 0;
}

.caldera-comments .comment-content > :last-child {
	margin-bottom: 0;
}

.caldera-comments .comment-awaiting-moderation {
	color: var(--color-ember);
}

.caldera-comments .comment-reply-title {
	margin-bottom: var(--spacing-24);
	font-size: var(--text-heading);
	line-height: var(--leading-heading);
}

.caldera-comments .comment-respond label {
	font-size: var(--text-body-sm);
	font-weight: var(--font-weight-medium);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--text-muted);
}

/* ---------------------------------------------------- Landing page template */

.caldera-landing-bar {
	padding-block: var(--spacing-20);
	background: var(--surface-canvas);
}

.caldera-landing-bar__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-16);
}

.caldera-landing-bar__nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-16);
	padding: 0;
	margin: 0;
	list-style: none;
	font-size: var(--text-body-sm);
	font-weight: var(--font-weight-medium);
}

.caldera-landing-bar__nav a {
	text-decoration: none;
}

/*
 * The bar above is only 20px of padding and a logo, so with no top padding here
 * the first heading started hard against it — on a page whose first block is a
 * display-scale title, that read as a rendering fault rather than a choice.
 */
.caldera-landing-main {
	padding-block: var(--spacing-48) var(--section-gap);
}

/* The optional title header supplies its own opening measure, so it stands down
   to avoid stacking a second one on top of the main padding. */
.caldera-landing__header {
	padding-block: var(--spacing-16) var(--spacing-40);
}

.caldera-landing__title {
	margin: 0;
	font-size: var(--text-display);
	line-height: var(--leading-display);
	text-wrap: balance;
}

/*
 * The landing content is deliberately unconstrained: blocks centre themselves at
 * container width, and anything marked alignfull runs edge to edge.
 */
.caldera-landing__content > * {
	width: min(100% - (var(--gutter) * 2), var(--page-max-width));
	margin-inline: auto;
}

/*
 * Text blocks are narrowed to a readable measure but keep the left edge of the
 * wide blocks above them. Centring them independently gave the page two
 * different left margins — headings at the container edge, body copy indented a
 * further 260px — which read as a broken grid rather than a narrower column.
 * The left margin here resolves to whatever offset the wide column already has.
 */
.caldera-landing__content > p,
.caldera-landing__content > ul,
.caldera-landing__content > ol,
.caldera-landing__content > blockquote {
	width: min(100% - (var(--gutter) * 2), var(--content-max-width));
	margin-inline: max(var(--gutter), calc((100% - var(--page-max-width)) / 2)) auto;
}

.caldera-landing__content > .alignfull {
	width: 100%;
	max-width: none;
	border-radius: 0;
}

.caldera-landing-legal {
	padding-block: var(--spacing-32);
	background: var(--surface-inverse);
	color: var(--text-on-inverse);
	font-size: var(--text-body-sm);
}

.caldera-landing-legal a {
	text-decoration: none;
}

.caldera-landing-legal a:hover {
	color: var(--color-ember);
}

.caldera-landing-legal__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-16);
}

.caldera-landing-legal .caldera-footer-copyright {
	margin: 0;
	color: var(--color-chalk-70);
}