/* Blog archive (posts page): one featured post at full content width on
   top, the remaining posts in a two-column grid (Signo, 2026-09-18).
   The featured slot is the first loop post; sticky posts float there
   natively via the editor flag. Borderless editorial cards, same
   language as the Home "Lee también" teasers. Tokens only. */

.signo-posts {
	box-sizing: border-box;
	width: 100%;
	padding-block-start: var(--spacing-page-section);
	padding-block-end: var(--spacing-96);
	background: var(--color-background-page);
	color: var(--color-text-default);
}

/* Hero test (Signo, 2026-09-19/21): media 820 renders once. The base layer
   is a CSS-desaturated clone (no second download); the reveal layer shows
   the color original in a cursor spotlight (touch: diagonal tap wipe).
   Clicking swaps the roles through .is-swapped on the hero. */
.signo-hero--media {
	background: var(--color-background-inverse);
	cursor: pointer;
}

.signo-hero--media .signo-hero__media--mono {
	filter: grayscale(100%);
}

.signo-hero--media.is-swapped .signo-hero__media--mono {
	filter: none;
}

.signo-hero--media.is-swapped .signo-hero__media--reveal {
	filter: grayscale(100%);
}

.signo-hero--media .signo-hero__media--reveal {
	opacity: 0;
	transition: opacity 0.35s ease;
	-webkit-mask-image: radial-gradient(circle 12rem at var(--reveal-x, 50%) var(--reveal-y, 50%), #000 45%, transparent 100%);
	mask-image: radial-gradient(circle 12rem at var(--reveal-x, 50%) var(--reveal-y, 50%), #000 45%, transparent 100%);
}

.signo-hero--media .signo-hero__media--reveal.is-revealed {
	opacity: 1;
}

/* Touch: no cursor to follow — the spotlight mask is replaced by an
   oversized diagonal mask whose position sweeps the wipe. The transition
   lives on the idle state so a mid-wipe tap retargets smoothly (reversal). */
@media (hover: none), (pointer: coarse) {
	.signo-hero--media .signo-hero__media--reveal {
		opacity: 1;
		transition: -webkit-mask-position 1.4s ease, mask-position 1.4s ease;
		-webkit-mask-image: linear-gradient(225deg, #000 42%, transparent 58%);
		mask-image: linear-gradient(225deg, #000 42%, transparent 58%);
		-webkit-mask-size: 250% 250%;
		mask-size: 250% 250%;
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		-webkit-mask-position: 0% 100%;
		mask-position: 0% 100%;
	}

	.signo-hero--media .signo-hero__media--reveal.is-wiping {
		-webkit-mask-position: 100% 0%;
		mask-position: 100% 0%;
	}
}

.signo-posts__head {
	margin-block-end: var(--spacing-heading-gap);
}

/* Featured post — whole content width. */
.signo-posts__featured {
	position: relative;
	display: grid;
	gap: var(--spacing-content-stack);
	margin-block-end: var(--spacing-64);
}

.signo-posts__featured-media {
	width: 100%;
	aspect-ratio: 5 / 3;
	height: auto;
	object-fit: cover;
	border-radius: var(--radius-card-media);
}

.signo-posts__featured-body {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-16);
}

/* Two-column grid for the remaining posts (site medium breakpoint, the
   same threshold as the Home teaser grid). */
.signo-posts__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--spacing-48);
}

.signo-posts__card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-16);
	min-width: 0;
}

.signo-posts__card-media {
	width: 100%;
	aspect-ratio: 3 / 2;
	height: auto;
	object-fit: cover;
	border-radius: var(--radius-card-media);
}

.signo-posts__card-body {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-8);
}

.signo-posts__excerpt {
	margin: 0;
	max-width: 75ch;
	color: var(--color-text-secondary);
}

.signo-posts__card .signo-posts__excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.signo-posts__meta {
	margin: 0;
	font-size: var(--text-small);
	color: var(--color-text-muted);
}

.signo-posts__empty {
	margin: 0;
	color: var(--color-text-secondary);
}

/* Whole-card link pattern (same as the Home teasers). */
.signo-posts__link {
	color: inherit;
	text-decoration: none;
}

.signo-posts__link::after {
	position: absolute;
	inset: 0;
	content: '';
}

.signo-posts__featured:hover .signo-posts__link,
.signo-posts__card:hover .signo-posts__link {
	color: var(--color-action-primary);
}

.signo-posts__link:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 2px;
}

@media (min-width: 48rem) {
	.signo-posts__featured-media {
		aspect-ratio: 2 / 1;
	}

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

/* Archive pagination — minimal Spanish prev/next (public page). */
.signo-posts__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-16);
	margin-block-start: var(--spacing-64);
}

.signo-posts__nav-status {
	font-size: var(--text-small);
	color: var(--color-text-muted);
}

.signo-posts__nav-link {
	color: var(--color-text-default);
	text-decoration: none;
	font-weight: var(--font-weight-500);
}

.signo-posts__nav-link:hover {
	color: var(--color-action-primary);
}

.signo-posts__nav-link:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 2px;
}

/* Photo attribution (Signo, 2026-09-23): small CC icon in the hero's
   bottom-right corner; clicking it reveals the credit text beside the
   icon. Reads on the darkened hero, so it uses inverse text colors. */
.signo-hero__credit {
	position: absolute;
	z-index: 20;
	inset-block-end: var(--spacing-8);
	inset-inline-end: var(--spacing-8);
	display: flex;
	align-items: center;
	gap: var(--spacing-8);
	justify-content: flex-end;
	max-width: min(100% - 2 * var(--spacing-16), 42ch);
}

.signo-hero__credit-toggle {
	display: grid;
	place-items: center;
	width: var(--spacing-24);
	height: var(--spacing-24);
	padding: 0;
	border: 0;
	border-radius: var(--radius-pill);
	/* Dark chip so the icon reads on light hero imagery (white-on-white
	   fix, 2026-09-23). */
	color: var(--color-text-inverse);
	background: color-mix(in srgb, var(--color-background-inverse) 78%, transparent);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
	cursor: pointer;
	opacity: 0.9;
	transition: opacity 0.2s ease;
}

.signo-hero__credit-toggle:hover,
.signo-hero__credit-toggle:focus-visible {
	opacity: 1;
	background: var(--color-background-inverse);
}

.signo-hero__credit-toggle:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 2px;
}

.signo-hero__credit-icon {
	width: var(--spacing-16);
	height: var(--spacing-16);
}

.signo-hero__credit-text {
	margin: 0;
	padding: var(--spacing-8) var(--spacing-12);
	border-radius: var(--radius-button);
	background: color-mix(in srgb, var(--color-background-inverse) 72%, transparent);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	color: var(--color-text-inverse);
	font-family: var(--font-body);
	font-size: var(--text-small);
	line-height: 1.4;
}

.signo-hero__credit-text a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}