/**
 * Corevia — content templates.
 *
 * Enqueued only on requests the theme's own fallback templates render: the blog
 * index, archives, search, 404 and singular views. A page whose document is
 * owned by a builder never downloads it.
 *
 * @package Corevia
 * @since   1.0.0
 */

/* ==========================================================================
   1. Page and archive headers
   ========================================================================== */

.corevia-page-header {
	margin-block-end: var(--theme-space-lg);
	padding-block-end: var(--theme-space-md);
	border-block-end: var(--theme-border-width) solid var(--theme-border);
}

.corevia-page-header__title {
	margin-block-end: var(--theme-space-xs);
}

.corevia-page-header__description {
	max-inline-size: 60ch;
	margin-block-end: 0;
	color: var(--theme-muted);
}

/* ==========================================================================
   2. Breadcrumbs
   ========================================================================== */

.corevia-breadcrumbs {
	margin-block-end: var(--theme-space-md);
	color: var(--theme-muted);
	font-size: var(--theme-text-sm);
}

.corevia-breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5em;
	margin: 0;
	padding: 0;
	list-style: none;
}

.corevia-breadcrumbs__list li {
	display: flex;
	align-items: center;
	gap: 0.5em;
	margin: 0;
}

.corevia-breadcrumbs a {
	color: var(--theme-muted);
	text-decoration: none;
}

.corevia-breadcrumbs a:hover {
	color: var(--theme-primary);
	text-decoration: underline;
}

.corevia-breadcrumbs__sep {
	color: var(--theme-border);
}

/* ==========================================================================
   3. Entries
   ========================================================================== */

.corevia-entry {
	margin-block-end: var(--theme-space-lg);
}

.corevia-entry__title {
	margin-block-end: var(--theme-space-xs);
}

/*
 * A card title is a label in a listing, not the page's own title. Left at the
 * h2 step it sets at up to 2.6rem, which wraps to four or five lines inside a
 * grid column and buries the excerpt below the fold.
 */
.corevia-card__title {
	font-size: var(--theme-text-xl);
	line-height: var(--theme-leading-tight);
}

.corevia-entry__title a {
	color: var(--theme-heading);
	text-decoration: none;
}

.corevia-entry__title a:hover {
	color: var(--theme-primary);
}

.corevia-entry__thumbnail {
	margin-block-end: var(--theme-space-md);
	border-radius: var(--theme-radius-md);
	overflow: hidden;
}

/*
 * The intrinsic ratio is only applied to archive cards, where a uniform grid is
 * the point. Singular posts keep the image's natural ratio so nothing is
 * cropped away from an author's chosen artwork.
 */
.corevia-card__thumbnail img {
	inline-size: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.corevia-entry-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4em 1em;
	margin-block-end: var(--theme-space-sm);
	color: var(--theme-muted);
	font-size: var(--theme-text-sm);
}

.corevia-entry-meta a {
	color: inherit;
	text-decoration: none;
}

.corevia-entry-meta a:hover {
	color: var(--theme-primary);
	text-decoration: underline;
}

.corevia-entry-meta__item {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
}

.corevia-entry__footer {
	margin-block-start: var(--theme-space-lg);
	padding-block-start: var(--theme-space-md);
	border-block-start: var(--theme-border-width) solid var(--theme-border);
	color: var(--theme-muted);
	font-size: var(--theme-text-sm);
}

.corevia-entry__terms + .corevia-entry__terms {
	margin-block-start: 0.35em;
}

/* Read-more sits on the baseline of the excerpt, not as a heavy button. */
.corevia-more-link {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	font-size: var(--theme-text-sm);
	font-weight: 600;
	text-decoration: none;
}

.corevia-more-link:hover {
	text-decoration: underline;
}

/*
 * A wide table must scroll inside its own box; it must never widen the page.
 *
 * A twelve-column data table is perfectly ordinary in a post, and left alone it
 * pushes the document wider than the viewport — which on a phone means the
 * whole page scrolls sideways, not just the table.
 *
 * The scroll has to live on a wrapper, not on the table: `display: block` would
 * make the table itself scrollable, but it also drops the table formatting
 * context, so the rows shrink to their content instead of filling the measure.
 * The block editor already supplies a wrapper (<figure class="wp-block-table">);
 * for classic and builder tables `corevia_wrap_content_tables()` adds one.
 *
 * `.corevia-flow` scopes this to content the theme lays out, so a builder's own
 * table widget is left entirely alone.
 */
:where(.corevia-flow .wp-block-table),
:where(.corevia-table-scroll) {
	overflow-x: auto;
	max-inline-size: 100%;
}

/*
 * The wrapper is a scroll container, which makes it focusable for keyboard
 * users in browsers that follow WCAG 2.1 SC 2.1.1 — so it needs a visible focus
 * ring like anything else that can hold focus.
 */
.corevia-table-scroll:focus-visible {
	outline: var(--theme-focus-ring) solid var(--theme-primary);
	outline-offset: var(--theme-focus-offset);
}

/* ==========================================================================
   4. Archive grid
   ========================================================================== */

.corevia-archive {
	display: grid;
	gap: var(--theme-space-lg);
}

/*
 * The listing reflows on its own width, not the viewport's, so the same markup
 * is correct with a sidebar, without one, and dropped into a builder's narrow
 * column.
 *
 * This is intrinsic sizing rather than a container query, deliberately. A
 * container query cannot be answered by the element that declares the
 * container — `@container` only ever matches an ancestor — so querying
 * `.corevia-archive` from `.corevia-archive--grid` would never fire, and the
 * grid on an archive that is its own container would silently stay at one
 * column. `auto-fit` needs no ancestor to cooperate, adds no containment, and
 * introduces no breakpoint.
 *
 * `min()` guards the narrow end: without it a track floor wider than the
 * container overflows instead of collapsing to one column.
 */
.corevia-archive--grid {
	grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
}

.corevia-archive--grid-3 {
	grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
}

.corevia-card {
	display: flex;
	flex-direction: column;
	margin-block-end: 0;
}

.corevia-card__thumbnail {
	margin-block-end: var(--theme-space-sm);
	border-radius: var(--theme-radius-md);
	overflow: hidden;
}

.corevia-card__excerpt > :last-child {
	margin-block-end: 0;
}

/* ==========================================================================
   5. Pagination and post navigation
   ========================================================================== */

.corevia-pagination {
	margin-block-start: var(--theme-space-lg);
	padding-block-start: var(--theme-space-md);
	border-block-start: var(--theme-border-width) solid var(--theme-border);
}

.corevia-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem;
}

/*
 * `paginate_links( 'type' => 'list' )` puts the SAME `page-numbers` class on the
 * <ul> and on every link inside it. A bare `.page-numbers` selector therefore
 * styles the container as though it were a button — a bordered 2.5rem box with
 * the whole list crammed into it — and leaves the list markers showing. The
 * container and the items have to be addressed separately.
 */
.corevia-pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.corevia-pagination li {
	margin: 0;
}

.corevia-pagination a.page-numbers,
.corevia-pagination span.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 2.5rem;
	min-block-size: 2.5rem;
	padding-inline: 0.5rem;
	border: var(--theme-border-width) solid var(--theme-border);
	border-radius: var(--theme-radius-sm);
	color: var(--theme-text);
	font-size: var(--theme-text-sm);
	text-decoration: none;
}

.corevia-pagination a.page-numbers:hover {
	border-color: var(--theme-primary);
	color: var(--theme-primary);
}

.corevia-pagination .page-numbers.current {
	border-color: var(--theme-primary);
	background-color: var(--theme-primary);
	color: var(--theme-primary-contrast);
	font-weight: 600;
}

.corevia-pagination .page-numbers.dots {
	border-color: transparent;
}

.corevia-post-nav {
	display: grid;
	gap: var(--theme-space-md);
	margin-block-start: var(--theme-space-lg);
	padding-block-start: var(--theme-space-md);
	border-block-start: var(--theme-border-width) solid var(--theme-border);
}

@media (min-width: 40em) {
	.corevia-post-nav {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.corevia-post-nav__link {
	display: block;
	color: var(--theme-heading);
	text-decoration: none;
}

.corevia-post-nav__label {
	display: block;
	margin-block-end: 0.2em;
	color: var(--theme-muted);
	font-size: var(--theme-text-xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.corevia-post-nav__title {
	font-weight: 600;
}

.corevia-post-nav__link:hover .corevia-post-nav__title {
	color: var(--theme-primary);
}

.corevia-post-nav__item--next {
	text-align: end;
}

/* ==========================================================================
   6. Author, search and empty states
   ========================================================================== */

.corevia-author-box {
	display: flex;
	gap: var(--theme-space-md);
	margin-block-start: var(--theme-space-lg);
	padding: var(--theme-space-md);
	border-radius: var(--theme-radius-md);
	background-color: var(--theme-surface);
}

.corevia-author-box__avatar img {
	border-radius: var(--theme-radius-full);
}

.corevia-author-box__name {
	margin-block-end: 0.25em;
	font-size: var(--theme-text-lg);
}

.corevia-author-box__bio {
	margin-block-end: 0;
	color: var(--theme-muted);
	font-size: var(--theme-text-sm);
}

.corevia-no-results {
	max-inline-size: 46rem;
	padding-block: var(--theme-space-lg);
}

.corevia-error-404 {
	max-inline-size: 46rem;
	padding-block: var(--theme-space-xl);
	text-align: center;
	margin-inline: auto;
}

.corevia-error-404__code {
	display: block;
	margin-block-end: var(--theme-space-sm);
	color: var(--theme-border);
	font-size: clamp(4rem, 2rem + 9vw, 8rem);
	font-weight: 800;
	line-height: 1;
}

.corevia-error-404 .corevia-search-form {
	max-inline-size: 26rem;
	margin-inline: auto;
	margin-block-start: var(--theme-space-md);
}

.corevia-error-404__links {
	margin-block-start: var(--theme-space-lg);
}

/* ==========================================================================
   7. Core blocks the theme has an opinion about
   ==========================================================================

   Corevia does not declare `wp-block-styles`, so core's ~25 KB of opinionated
   block CSS never loads. That is the right trade for a builder-first theme, but
   it means a handful of blocks arrive with no layout at all — a gallery would
   stack one image per row, and a media-and-text block would put its two halves
   in sequence rather than side by side.

   What follows is the minimum that makes those blocks structurally correct. It
   sets layout, not decoration: no colours, no borders, no shadows, nothing that
   competes with a builder or a child theme. Everything is wrapped in `:where()`
   so a single class overrides any of it.
   ========================================================================== */

/* ------------------------------------------------------------------ Gallery */

:where(.wp-block-gallery) {
	display: flex;
	flex-wrap: wrap;
	gap: var(--theme-space-sm);
	margin-block-end: var(--theme-space-md);
	padding: 0;
	list-style: none;
}

:where(.wp-block-gallery > .wp-block-image) {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	justify-content: center;
	position: relative;
	margin: 0;
	/*
	 * Core sets the column count with `--wp--style--unstable-gallery-gap` and
	 * the `columns-N` class. Without core's stylesheet the class means nothing,
	 * so the basis is computed from it here.
	 */
	flex-basis: 0;
	min-inline-size: 12rem;
}

:where(.wp-block-gallery > .wp-block-image) img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

:where(.wp-block-gallery.is-cropped) .wp-block-image {
	align-self: inherit;
}

:where(.wp-block-gallery.columns-1 > .wp-block-image) {
	min-inline-size: 100%;
}

:where(.wp-block-gallery.columns-2 > .wp-block-image) {
	min-inline-size: calc(50% - var(--theme-space-sm));
}

:where(.wp-block-gallery.columns-3 > .wp-block-image) {
	min-inline-size: calc(33.333% - var(--theme-space-sm));
}

:where(.wp-block-gallery.columns-4 > .wp-block-image) {
	min-inline-size: calc(25% - var(--theme-space-sm));
}

/* The classic [gallery] shortcode, still present in older content. */
:where(.gallery) {
	display: flex;
	flex-wrap: wrap;
	gap: var(--theme-space-sm);
	margin-block-end: var(--theme-space-md);
}

:where(.gallery .gallery-item) {
	flex: 1 1 12rem;
	margin: 0;
	text-align: center;
}

:where(.gallery .gallery-caption) {
	color: var(--theme-muted);
	font-size: var(--theme-text-sm);
}

/* ------------------------------------------------------- Media and text */

:where(.wp-block-media-text) {
	display: grid;
	grid-template-columns: 50% 1fr;
	align-items: center;
	gap: var(--theme-space-md);
	margin-block-end: var(--theme-space-md);
}

:where(.wp-block-media-text.has-media-on-the-right) {
	grid-template-columns: 1fr 50%;
}

:where(.wp-block-media-text.has-media-on-the-right) .wp-block-media-text__media {
	order: 2;
}

:where(.wp-block-media-text__media) img,
:where(.wp-block-media-text__media) video {
	inline-size: 100%;
}

:where(.wp-block-media-text__content) > :last-child {
	margin-block-end: 0;
}

/*
 * The stacked breakpoint is a real media query rather than a container query
 * because the block can sit anywhere, including outside any container the
 * theme controls. 600px matches the width core itself stacks at, so content
 * migrating from a theme that loads core styles behaves the same.
 */
@media (max-width: 599px) {
	:where(.wp-block-media-text:not(.is-stacked-on-mobile)) {
		grid-template-columns: 1fr;
	}

	:where(.wp-block-media-text) {
		grid-template-columns: 1fr;
	}

	:where(.wp-block-media-text.has-media-on-the-right) .wp-block-media-text__media {
		order: 0;
	}

	/*
	 * Honouring `columns-3` or `columns-4` at 320px produces 88px thumbnails —
	 * technically what the block asked for, and useless to look at. Two columns
	 * is the narrowest that still reads as a gallery rather than a list.
	 */
	:where(.wp-block-gallery.columns-3 > .wp-block-image),
	:where(.wp-block-gallery.columns-4 > .wp-block-image),
	:where(.wp-block-gallery.columns-5 > .wp-block-image),
	:where(.wp-block-gallery.columns-6 > .wp-block-image) {
		min-inline-size: calc(50% - var(--theme-space-sm));
	}
}

/* ------------------------------------------------------ Audio, video, embed */

:where(.wp-block-audio, .wp-block-video, .wp-block-embed) {
	margin-block-end: var(--theme-space-md);
}

:where(.wp-block-audio) audio {
	inline-size: 100%;
	min-inline-size: 0;
}

:where(.wp-block-video) video {
	inline-size: 100%;
}

/*
 * `responsive-embeds` theme support makes core wrap embeds in
 * `.wp-block-embed__wrapper` with an aspect-ratio padding hack. The iframe
 * inside it needs to be positioned for that to work.
 */
:where(.wp-block-embed__wrapper) {
	position: relative;
}

/*
 * Core gates these on a `wp-embed-responsive` class it puts on <body> when the
 * theme declares `responsive-embeds`. The aspect classes already say what ratio
 * the embed is, so the rule does not depend on that gate: an embed dropped into
 * a context without the body class still keeps its shape.
 */
:where(.wp-block-embed.wp-embed-aspect-16-9 .wp-block-embed__wrapper) {
	aspect-ratio: 16 / 9;
}

:where(.wp-block-embed.wp-embed-aspect-4-3 .wp-block-embed__wrapper) {
	aspect-ratio: 4 / 3;
}

:where(.wp-block-embed.wp-embed-aspect-21-9 .wp-block-embed__wrapper) {
	aspect-ratio: 21 / 9;
}

:where(.wp-block-embed.wp-embed-aspect-1-1 .wp-block-embed__wrapper) {
	aspect-ratio: 1 / 1;
}

:where(.wp-block-embed__wrapper) > iframe {
	inline-size: 100%;
	block-size: 100%;
}

/* ------------------------------------------------------------------ Columns */

:where(.wp-block-columns) {
	display: flex;
	flex-wrap: wrap;
	gap: var(--theme-space-md);
	margin-block-end: var(--theme-space-md);
	align-items: normal;
}

:where(.wp-block-column) {
	flex-grow: 1;
	min-inline-size: 0;
	flex-basis: 100%;
}

@media (min-width: 782px) {
	:where(.wp-block-columns:not(.is-not-stacked-on-mobile)) > .wp-block-column {
		flex-basis: 0;
	}
}

:where(.wp-block-columns.is-not-stacked-on-mobile) > .wp-block-column {
	flex-basis: 0;
}

:where(.wp-block-column) > :last-child {
	margin-block-end: 0;
}

/* -------------------------------------------------------------- Group, cover */

:where(.wp-block-group) > :last-child {
	margin-block-end: 0;
}

:where(.wp-block-cover) {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	min-block-size: 26rem;
	padding: var(--theme-space-lg);
	overflow: hidden;
	margin-block-end: var(--theme-space-md);
}

:where(.wp-block-cover) .wp-block-cover__image-background,
:where(.wp-block-cover) video.wp-block-cover__video-background {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	z-index: 0;
}

:where(.wp-block-cover) .wp-block-cover__inner-container {
	position: relative;
	z-index: 1;
	inline-size: 100%;
}

/* ------------------------------------------------------------------- Lists */

:where(.wp-block-list) {
	margin-block-end: var(--theme-space-md);
}

/* ------------------------------------------------------------- File, buttons */

:where(.wp-block-file) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--theme-space-sm);
	margin-block-end: var(--theme-space-md);
}

:where(.wp-block-buttons) {
	display: flex;
	flex-wrap: wrap;
	gap: var(--theme-space-sm);
	margin-block-end: var(--theme-space-md);
}

:where(.wp-block-buttons.is-vertical) {
	flex-direction: column;
	align-items: flex-start;
}