/*
 * Post lists (core/post-template). Variants by class on the template:
 *   .cp-cards            news feed: horizontal cards, first one leads on wide screens
 *   .cp-cards--compact   rail lists: small thumbnail and title
 *   .cp-cards--grid      bands: 2–4 column grid of stacked cards
 *   .cp-destacados       "Hoy se habla de…": one lead, two side stories
 */
.wp-block-post-template:where(.cp-cards, .cp-cards--compact, .cp-cards--grid, .cp-destacados) {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	margin: 0;
	padding: 0;
	list-style: none;

	& > li {
		margin: 0;
		min-inline-size: 0;
	}
}

/* Sizes grow with the screen from 390px to 640px (the old one-step breakpoint's values at each end). */
.cp-card {
	--cp-card-thumb: clamp(9rem, 38.4vw - 0.36rem, 15rem);
	--cp-card-gap: clamp(0.875rem, 0.485rem + 1.6vw, 1.125rem);
	--cp-card-pad: clamp(0.75rem, 0.555rem + 0.8vw, 0.875rem);
	position: relative;
	display: grid;
	grid-template-columns: var(--cp-card-thumb) minmax(0, 1fr);
	gap: var(--cp-card-gap);
	align-items: start;
	block-size: 100%;
	padding: var(--cp-card-pad);
	border-radius: var(--cp-radius);
	background: var(--cp-screen);
	overflow: clip;
	transition: background-color var(--cp-duration-quick) var(--cp-ease-out);

	@media (hover: hover) and (pointer: fine) {
		&:hover {
			background: light-dark(oklch(98.9% 0.006 31.1), oklch(24.1% 0.008 285.8));
		}
	}

	/* Pressing the title's overlay activates the card too. */
	&:active {
		background: light-dark(oklch(98.9% 0.006 31.1), oklch(24.1% 0.008 285.8));
	}

	& > * {
		margin: 0;
	}

	/* The ring outlines the whole card, image included, outside its rounded corners: drawn
	   inside (-3px), the image above it hid its top half. */
	&:has(:focus-visible) {
		outline: 3px solid var(--cp-focus);
		outline-offset: 2px;
	}

	/* The link's own ring goes transparent (never removed) while the card carries it. */
	&:has(:focus-visible) a:focus-visible {
		outline: 2px solid transparent;
	}
}

.cp-card__media {
	margin: 0;
	/* Clip is no scroll container, so the 16:9 box would grow to a tall image's min-content height. */
	min-block-size: 0;
	overflow: clip;
	border-radius: var(--cp-radius-sm);
	background: var(--cp-screen-sunk);
	aspect-ratio: 16 / 9;

	& a {
		display: block;
		block-size: 100%;
	}

	& img {
		display: block;
		inline-size: 100%;
		block-size: 100%;
		object-fit: cover;
	}
}

.cp-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	min-inline-size: 0;

	& > * {
		margin: 0;
	}
}

.cp-card__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.0625rem, 0.8675rem + 0.8vw, 1.1875rem);
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -0.005em;
	/* Beside the thumb a phone gives the title ~180px: a word that can't fit there («Supermegaincursiones»)
	   is hyphenated instead of cut without a mark; words under 16 letters never are. */
	hyphens: auto;
	hyphenate-limit-chars: 16 6 6;

	& a {
		color: var(--cp-ink);
		text-decoration: none;

		/* The whole card is the hit area. */
		&::after {
			content: "";
			position: absolute;
			inset: 0;
		}
	}

	@media (hover: hover) and (pointer: fine) {
		.cp-card:hover & a {
			color: var(--cp-accent);
		}
	}
}

.cp-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.125rem 0.625rem;
	color: var(--cp-ink-soft);
	font-size: 0.8125rem;
	line-height: 1.4;

	& > * {
		margin: 0;
		font-size: inherit;
	}

	& .wp-block-post-terms {
		position: relative;
		z-index: 1;
		font-weight: 500;

		/* Inline padding: a hit area of at least 24px tall (WCAG 2.5.8) without moving the line. */
		& a {
			padding-block: 0.3125rem;
			color: var(--cp-accent);
			text-decoration: none;

			@media (hover: hover) and (pointer: fine) {
				&:hover {
					text-decoration: underline;
				}
			}
		}

		& .wp-block-post-terms__separator {
			color: var(--cp-ink-soft);
		}
	}
}

/*
 * A Guía card's Juego icon before «Guía · {Juego}» (inc/CardKind.php; decorative, the name is
 * text): the app icon at 20px with the game-icon corners and inner hairline, centred on the
 * label's capitals and pulled 2px into the line on each side, so the meta line keeps its height.
 * Every version out of flow, pinned to the box: no image changes its size (CLS 0). The icon and
 * «Guía» never wrap apart.
 */
.cp-card__lead {
	white-space: nowrap;
}

.cp-card__game {
	--cp-card-game: 20px;
	position: relative;
	display: inline-block;
	inline-size: var(--cp-card-game);
	block-size: var(--cp-card-game);
	margin-block: -0.125rem;
	margin-inline-end: 0.3125rem;
	overflow: clip;
	border-radius: var(--cp-radius-game-icon);
	outline: 1px solid light-dark(oklch(0 0 none / 0.1), oklch(1 0 none / 0.1));
	outline-offset: -1px;
	background: var(--cp-screen-sunk);
	vertical-align: middle;
	vertical-align: calc(0.5cap - 0.5 * var(--cp-card-game) + 0.125rem);

	& > .cp-art-stack,
	& img {
		position: absolute;
		inset: 0;
		display: block;
		inline-size: 100%;
		block-size: 100%;
	}

	& img {
		object-fit: contain;
	}
}

.cp-card__excerpt {
	display: none;
	color: var(--cp-ink-soft);
	font-size: 0.9375rem;
	line-height: 1.5;

	& p {
		margin: 0;
	}

	& .wp-block-post-excerpt__more-text {
		display: none;
	}
}

@media (min-width: 640px) {
	.cp-card__excerpt {
		display: block;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: clip;
	}
}

/* A page of the site embedded in content (core Embeds\PostCard; owner 2026-10-20): the feed's
   horizontal card, outlined, since it sits on the reading screen rather than in a feed. The
   /embed/ document draws the same card for the editor's preview (embed.css). */
.cp-card--embed {
	block-size: auto;
	border: 1px solid var(--cp-line);
}

/* Rail lists: tight thumbnails, no excerpt. */
.cp-cards--compact {
	gap: 0;

	& .cp-card {
		grid-template-columns: 5.5rem minmax(0, 1fr);
		gap: 0.75rem;
		padding-block: 0.625rem;
		padding-inline: 0;
		border-radius: 0;
		background: transparent;
		border-block-end: 1px solid var(--cp-line);
	}

	& li:last-child .cp-card {
		border-block-end: 0;
	}

	& .cp-card__title {
		font-size: 0.9375rem;
		line-height: 1.3;
	}

	& .cp-card__excerpt {
		display: none;
	}
}

/* Bands: stacked cards in a grid. */
.cp-cards--grid {
	grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
	gap: var(--wp--preset--spacing--40);

	& .cp-card {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.625rem;
		padding-block: 0 0.875rem;
		padding-inline: 0;
		overflow: clip;
	}

	& .cp-card__media {
		border-radius: 0;
	}

	& .cp-card__body {
		padding-inline: 0.875rem;
	}

	& .cp-card__title {
		font-size: 1.125rem;
	}

	& .cp-card__excerpt {
		display: none;
	}
}

/* Beat core's flow-layout margins inside cards (same specificity, later wins is not guaranteed). */
.cp-card.cp-card > *,
.cp-card .cp-card__body.cp-card__body > *,
.cp-card .cp-card__meta.cp-card__meta > * {
	margin-block: 0;
}

/* One category per card: the first; never the legacy "Destacados" flag category. */
.cp-card__meta .wp-block-post-terms {
	& a[href*="/cat/destacado/"],
	& a[href*="/cat/destacado/"] + .wp-block-post-terms__separator,
	& .wp-block-post-terms__separator,
	& a:not(:first-of-type) {
		display: none;
	}

	& a[href*="/cat/destacado/"]:first-of-type + .wp-block-post-terms__separator + a {
		display: inline;
	}
}

.cp-card__meta {
	align-items: baseline;
}

/* A bumped item's callout (theme CardKind::note(); owner 2026-10-17 mock): the «Actualizado»
   pill moves from the title into a tinted box under the meta row, the bump's note after it; no
   «Novedad» label. Feed cards only: they show the callout and hide the title's pill
   (`--listed`, so the marker shows once); rails, grids, tiles and Hoy keep the title's pill.
   Inline flow, not a flex row: the note runs after the pill and wraps under it, so a narrow
   phone card never squeezes it into a one-word column. The pill sits on the note's baseline,
   inset by --pad from the box's start and top, and the box's corners are concentric with it:
   the pill's radius (0.675 of its font size, theme.css `.cp-actualizado`) plus --pad. Never
   clipped. No note: the pill alone, without the box. No side stripe. */
.cp-card__nota {
	display: none;
}

.cp-cards {
	& .cp-card__nota {
		--pill: 0.8125rem;
		--pad: 0.3125rem;

		display: block;
		inline-size: fit-content;
		max-inline-size: 100%;
		box-sizing: border-box;
		padding-block: var(--pad);
		padding-inline: var(--pad) 0.75rem;
		border-radius: calc(var(--pill) * 0.675 + var(--pad));
		background: color-mix(in oklch, var(--cp-accent) 9%, var(--cp-screen));
		color: var(--cp-ink);
		font-size: 0.9375rem;
		line-height: 1.5;
		overflow-wrap: break-word;
	}

	& .cp-card__nota--solo {
		padding-block: 0;
		padding-inline: 0;
		background: none;
	}

	& .cp-card__nota .cp-actualizado {
		margin-inline-end: 0.25em; /* plus the space badge() prints after it: about 0.5em */
		font-size: var(--pill);
		vertical-align: baseline;
	}

	& .cp-actualizado--listed {
		display: none;
	}
}

/* Phones (the excerpt's breakpoint): a bumped card's callout spans the card under its thumbnail
   and text (owner 2026-10-17: «on mobile we should break out of the thumbnail float»). The
   body's blocks join the card's grid (`display: contents`): title and meta in the text column,
   a filler row for a thumbnail taller than them, then the callout across both columns.
   `cp-card--nota` comes from the server (theme CardKind::card()), so the card is laid out this
   way from its first paint. */
@media (max-width: 639px) {
	.cp-cards .cp-card--nota {
		grid-template-rows: auto auto 1fr auto;
		row-gap: 0.375rem; /* the body's own gap between title and meta */

		& > .cp-card__media {
			grid-row: 1 / 4;
		}

		& > .cp-card__body {
			display: contents;

			& > * {
				grid-column: 2;
			}
		}

		& .cp-card__nota {
			grid-row: 4;
			grid-column: 1 / -1;
			margin-block-start: calc(var(--cp-card-gap) - 0.375rem);
		}
	}
}

/* Hide "Hoy se habla de…" until there are destacados. */
.cp-hoy:not(:has(.wp-block-post-template > li)) {
	display: none;
}

/*
 * "Hoy se habla de…": an art mosaic. Each story is its picture, with the title
 * at its foot over an eased gradient scrim. Every text line sits on alpha
 * ≥ 0.60 black (≥ 5.7:1 for white text even over pure white art) plus a
 * text shadow, so legibility never depends on the art. Phones (owner 2026-10-14:
 * «show everything at once», no sideways scroll): the lead across the top, the
 * others in two columns of compact cards; with an odd number of those, the free
 * cell at the end is the trainer's stage (charm.css). ≥ 640px: the lead across
 * the top, three below. ≥ 1024px: the lead spans two rows; the top-right cell
 * is the trainer's stage.
 */
.wp-block-post-template.cp-destacados {
	--cp-scrim: oklch(17.89% 0.0077 346.23);
	/* The trainer's phone stage is sized from this gap (charm.css). */
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.5rem;
	max-inline-size: none;

	& > li:first-child {
		grid-column: 1 / -1;
	}

	& .cp-card {
		grid-template: auto / minmax(0, 1fr);
		gap: 0;
		padding: 0;
		overflow: clip;
		background: var(--cp-scrim);

		@media (hover: hover) and (pointer: fine) {
			&:hover {
				background: var(--cp-scrim);
			}
		}
	}

	& .cp-card__media {
		grid-area: 1 / 1;
		min-block-size: 0;
		border-radius: 0;
		background: var(--cp-scrim);
	}

	& .cp-card__body {
		grid-area: 1 / 1;
		align-self: end;
		position: relative;
		z-index: 1;
		gap: 0.25rem;
		/* The top 3.5rem is the fade; text starts where the scrim is already 0.60. */
		padding-block: 3.5rem 0.75rem;
		padding-inline: 0.875rem;
		background: linear-gradient(
			to bottom,
			oklch(0% 0 none / 0) 0,
			oklch(0% 0 none / 0.05) 0.9rem,
			oklch(0% 0 none / 0.18) 1.75rem,
			oklch(0% 0 none / 0.38) 2.6rem,
			oklch(0% 0 none / 0.6) 3.5rem,
			oklch(0% 0 none / 0.72) calc(3.5rem + (100% - 3.5rem) * 0.5),
			oklch(0% 0 none / 0.85) 100%
		);
		color: oklch(100% 0 none);
		text-shadow: 0 1px 2px oklch(0% 0 none / 0.5);
	}

	& .cp-card__title {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: clip;
		font-family: var(--wp--preset--font-family--display);
		font-size: 1.0625rem;
		font-weight: 800;
		line-height: 1.22;
		letter-spacing: -0.005em;

		& a {
			color: oklch(100% 0 none);
		}

		/* A bumped story (owner 2026-10-17: «just add the Actualizado badge above the title»): the
		   pill on its own line, one more line for the clamp so the title keeps all of its own. */
		&:has(> .cp-actualizado) {
			-webkit-line-clamp: 4;
		}

		& .cp-actualizado {
			display: flex;
			inline-size: fit-content;
			margin-block-end: 0.375rem;
			font-size: 0.75rem;
		}
	}

	@media (hover: hover) and (pointer: fine) {
		& .cp-card:hover .cp-card__title a {
			color: oklch(100% 0 none);
			text-decoration: underline;
			text-decoration-thickness: 2px;
		}
	}

	& .cp-card__meta {
		color: oklch(100% 0 none / 0.85);
		font-size: 0.8125rem;

		& .wp-block-post-terms a {
			color: oklch(100% 0 none / 0.85);
		}

		/* Always on the dark scrim: the light hairline in both schemes. */
		& .cp-card__game {
			outline-color: oklch(1 0 none / 0.15);
		}
	}

	& .cp-card__meta .wp-block-post-date {
		color: inherit;
	}

	& .cp-card__excerpt {
		display: none;
	}

	& > li:first-child {
		& .cp-card__title {
			font-size: 1.1875rem;
			font-weight: 900;
			line-height: 1.15;
		}
	}
}

@media (min-width: 640px) {
	.wp-block-post-template.cp-destacados {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 0.75rem;

		& > li:first-child {
			& .cp-card__media {
				/* lint-allow: important — beats the aspect-ratio core's featured-image block prints in its style attribute */
				aspect-ratio: 21 / 9 !important;
			}

			& .cp-card__body {
				padding-block: 4rem 1rem;
				padding-inline: 1.25rem;
			}

			& .cp-card__title {
				font-size: var(--wp--preset--font-size--large);
				-webkit-line-clamp: 2;

				&:has(> .cp-actualizado) {
					-webkit-line-clamp: 3;
				}
			}
		}
	}
}

@media (min-width: 1024px) {
	.wp-block-post-template.cp-destacados {
		grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr));
		grid-template-rows: repeat(2, 16rem);

		& > li:first-child {
			grid-area: 1 / 1 / 3 / 2;

			& .cp-card__body {
				padding-block: 5rem 1.25rem;
				padding-inline: 1.5rem;
			}

			& .cp-card__title {
				font-size: clamp(1.375rem, 1.75vw, 1.75rem);
				-webkit-line-clamp: 3;

				&:has(> .cp-actualizado) {
					-webkit-line-clamp: 4;
				}
			}
		}

		& > li:nth-child(2) {
			grid-area: 1 / 2;
		}

		& > li:nth-child(3) {
			grid-area: 2 / 2;
		}

		& > li:nth-child(4) {
			grid-area: 2 / 3;
		}

		& > li:nth-child(n + 5) {
			display: none;
		}

		/* Fixed rows: the art fills the whole card and the title sits on its foot. */
		& .cp-card__media,
		& > li:first-child .cp-card__media {
			grid-area: 1 / 1;
			/* lint-allow: important — beats the aspect-ratio core's featured-image block prints in its style attribute */
			aspect-ratio: auto !important;
			block-size: 100%;

			& a,
			& img {
				/* lint-allow: important — beats the height core's featured-image block prints on the link and image */
				block-size: 100% !important;
			}

			& img {
				/* lint-allow: important — beats the aspect-ratio core's featured-image block prints on the image */
				aspect-ratio: auto !important;
				object-fit: cover;
			}
		}

		& .cp-card {
			grid-template: minmax(0, 1fr) / minmax(0, 1fr);
		}
	}
}

/* Core gives post titles inline-block links, which defeat the line clamp; balanced
   wrapping drops the clamp's ellipsis in Chrome, so these titles wrap "pretty". */
.wp-block-post-template.cp-destacados .cp-card__title.wp-block-post-title {
	display: -webkit-box;
	text-wrap: pretty;

	& a {
		display: inline;
	}
}

/* Phones: the lead's art at 16:10, the compact cards' art filling a card at least 9rem
   tall (a three-line title and the date fit), under a shorter fade (2.5rem, still
   reaching 0.60 where the text starts). */
@media (max-width: 639px) {
	.wp-block-post-template.cp-destacados .cp-card__media {
		& a,
		& img {
			/* lint-allow: important — beats the height core's featured-image block prints on the link and image */
			block-size: 100% !important;
		}

		& img {
			/* lint-allow: important — beats the aspect-ratio core's featured-image block prints on the image */
			aspect-ratio: auto !important;
			object-fit: cover;
		}
	}

	.wp-block-post-template.cp-destacados > li:first-child .cp-card__media {
		/* lint-allow: important — beats the aspect-ratio core's featured-image block prints in its style attribute */
		aspect-ratio: 16 / 10 !important;
	}

	.wp-block-post-template.cp-destacados > li + li {
		& .cp-card {
			grid-template-rows: minmax(9rem, 1fr);
		}

		& .cp-card__media {
			/* lint-allow: important — beats the aspect-ratio core's featured-image block prints in its style attribute */
			aspect-ratio: auto !important;
			block-size: 100%;
			/* The art fills the card; only the 9rem floor and the text size it. */
			contain: size;
		}

		& .cp-card__body {
			gap: 0.125rem;
			padding-block-end: 0.625rem;
			padding-inline: 0.625rem;
		}

		& .cp-card__title {
			font-size: 0.9375rem;
			line-height: 1.2;
		}

		/* Owner 2026-10-14: «too much text on the smaller ones»: title and date only. The
		   label is a link: hidden for everyone, never a focus stop that shows nothing. */
		& .cp-card__meta {
			font-size: 0.75rem;

			& .wp-block-post-terms {
				display: none;
			}
		}
	}

	/* The fade reaches 1px past the card's foot, clipped by the card's rounded overflow, so
	   no subpixel row of the art (a 16:10 box is rarely whole pixels) shows under it. */
	.wp-block-post-template.cp-destacados .cp-card__body {
		margin-block-end: -1px;
		padding-block-start: 2.5rem;
		background: linear-gradient(
			to bottom,
			oklch(0% 0 none / 0) 0,
			oklch(0% 0 none / 0.08) 0.75rem,
			oklch(0% 0 none / 0.3) 1.6rem,
			oklch(0% 0 none / 0.6) 2.5rem,
			oklch(0% 0 none / 0.72) calc(2.5rem + (100% - 2.5rem) * 0.5),
			oklch(0% 0 none / 0.85) 100%
		);
	}
}

/* Posts without a featured image (many 2005–2018 posts): the text takes the whole card. */
.cp-card:not(:has(.cp-card__media)) {
	grid-template-columns: minmax(0, 1fr);
}