/**
 * Alternatives block.
 *
 * Loaded only on requests that actually render the block — see
 * AlternativesBlock::maybe_enqueue_early().
 *
 * Two cascades have to be satisfied by one file. On a landing page the theme is
 * fully dequeued and lp.css is the entire cascade, so the custom properties
 * below resolve to the landing-page palette. On a themed page nothing defines
 * them and every var() falls back to its second argument. That is why every
 * token here carries a literal fallback: neither context is the "real" one.
 *
 * Type sizes come from the shared scale via --sy-fs-*, which both contexts now
 * declare: the theme's style.css aliases theme.json's presets, lp.css mirrors
 * the same seven values literally. The em multipliers this file used to carry
 * (1.15 / 0.95 / 0.8) resolved against two different bodies and so rendered at
 * two different sizes; they were rounded onto the nearest shared tier
 * on 2026-08-28.
 *
 * The visual brief is advice, not merchandising: no borders around items, no
 * badges, no accent colour on the container, no button. One hairline rule at the
 * top to separate it from the page above, and space to breathe.
 *
 * @package Sereneyuto\Core
 */

.syu-alt-block {
	margin: 3rem 0 0;
	padding: 2.25rem 0 0.5rem;
	border-top: 1px solid var(--rule, #d8ded2);
	color: var(--ink, #16201b);
	font-family: inherit;
	line-height: 1.6;
}

.syu-alt-inner {
	max-width: var(--measure, 680px);
	margin: 0 auto;
	padding: 0 var(--gutter, 1.25rem);
}

.syu-alt-heading {
	margin: 0 0 0.5rem;
	font-size: var( --sy-fs-lg, 1.125rem );
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--ink, #16201b);
}

.syu-alt-intro {
	margin: 0 0 1.75rem;
	max-width: 52ch;
	color: var(--ink-soft, #4a564e);
}

/* ── List ─────────────────────────────────── */

.syu-alt-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 1.6rem;
}

.syu-alt-item {
	display: flex;
	align-items: flex-start;
	gap: 0.9rem;
	margin: 0;
}

.syu-alt-body {
	/* Without this a long unbroken product name blows the grid column out. */
	min-width: 0;
}

.syu-alt-name {
	margin: 0 0 0.25rem;
	font-weight: 600;
	line-height: 1.35;
}

/*
 * The link is the product name itself, underlined on a hairline rather than
 * boxed into a button. A button here would read as the page's call to action
 * competing with the real one directly above the block.
 */
.syu-alt-name a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid var(--rule, #c9d1c4);
	padding-bottom: 1px;
}

.syu-alt-name a:hover,
.syu-alt-name a:focus-visible {
	border-bottom-color: currentColor;
}

.syu-alt-name a:focus-visible {
	outline: 2px solid var(--moss, #3f6249);
	outline-offset: 3px;
}

.syu-alt-brand {
	font-weight: 400;
	color: var(--ink-soft, #4a564e);
}

.syu-alt-reason {
	margin: 0;
	color: var(--ink-soft, #4a564e);
	font-size: var( --sy-fs-base, 1rem );
}

/* ── Optional thumbnail ───────────────────── */

/*
 * Fixed box, so a row reserves the same space whether the image has loaded,
 * failed, or was never set. Most rows have no image at all — the flex layout
 * simply has one fewer child and the text starts at the left edge.
 */
.syu-alt-thumb {
	flex: 0 0 56px;
	margin: 0;
	line-height: 0;
}

.syu-alt-img {
	display: block;
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: 2px;
	background: var(--paper-2, #eef0ea);
}

/* ── Footer of the block ──────────────────── */

.syu-alt-more {
	margin: 1.9rem 0 0;
	font-size: var( --sy-fs-base, 1rem );
}

.syu-alt-more a {
	color: var(--moss, #3f6249);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/*
 * Small, but sitting with the links rather than banished to the page footer.
 * Quiet is fine; hidden is not.
 */
.syu-alt-disclosure {
	margin: 0.7rem 0 0;
	font-size: var( --sy-fs-xs, 0.75rem );
	line-height: 1.5;
	color: var(--ink-soft, #4a564e);
}

/* ── Wider viewports ──────────────────────── */

/*
 * One column on mobile, always. Above 48em the list may run two-up if the
 * measure allows it; auto-fit means two items stay two items rather than being
 * stretched into a grid that implies a missing third.
 */
@media (min-width: 48em) {

	.syu-alt-list {
		grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
		gap: 1.75rem 2rem;
	}
}

@media (prefers-reduced-motion: no-preference) {

	.syu-alt-name a {
		transition: border-color 120ms ease;
	}
}

/* ── Partially illustrated lists ───────────────
   Added 2026-08-26. Thumbnails arrive one product at a time, so a list where
   some rows have an image and some do not is the normal state, not a transient
   one. Reserve the thumbnail slot on every row of such a list so the names line
   up. A fully text-only list never gets this class and keeps its flush-left
   layout, which is what the block was designed around. */
.syu-alt-list--thumbs .syu-alt-item:not(:has(.syu-alt-thumb))::before {
	content: "";
	flex: 0 0 56px;
	align-self: stretch;
}

/* Fallback for engines without :has(). Slightly looser: indents the body of
   every row instead of reserving a box, which lands in the same place. */
@supports not selector(:has(*)) {
	.syu-alt-list--thumbs .syu-alt-item {
		padding-left: calc(56px + 0.9rem);
	}
	.syu-alt-list--thumbs .syu-alt-thumb {
		margin-left: calc(-56px - 0.9rem);
	}
}