/*
 * SAKENJOY -- Selection Presentation Integration
 * Build Package 5 -- Landing + Detail stylesheet
 *
 * Mobile-first, no framework. Colors are literal F-03 Global Design System
 * tokens (F-03_GLOBAL_DESIGN_SYSTEM.md Section 1) rather than the active
 * Astra theme's global color palette -- the Astra palette is a site-wide,
 * shared resource whose slot values can change for reasons unrelated to
 * Selection, so this package holds its own literal token values to stay
 * F-03-correct regardless of future Astra Customizer changes. Enqueued only
 * on the two templates this package owns (sj-selection-presentation.php),
 * never site-wide.
 */

.sj-selection-landing,
.sj-selection-detail {
	max-width: 72rem;
	width: 100%;
	margin: 0 auto;
	padding: 1.5rem 1rem 3rem;
	box-sizing: border-box;
}

.sj-selection-landing *,
.sj-selection-detail * {
	box-sizing: inherit;
}

.sj-selection-landing__title,
.sj-selection-detail__title {
	font-size: 1.75rem;
	line-height: 1.25;
	margin: 0 0 1.25rem;
	color: #2B2723;
	word-break: break-word;
}

/* ---------- Filter form ---------- */

.sj-selection-filter-form {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin: 0 0 2rem;
	padding: 1rem;
	border: 1px solid #DCD3C2;
	border-radius: 0.5rem;
}

.sj-selection-filter-group {
	border: 0;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	column-gap: 1.5rem;
}

@media ( min-width: 768px ) {
	.sj-selection-filter-group {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( min-width: 1200px ) {
	.sj-selection-filter-group {
		grid-template-columns: repeat( 3, 1fr );
	}
}

.sj-selection-filter-group__legend {
	grid-column: 1 / -1;
	font-family: "Noto Serif TC", serif;
	font-weight: 500;
	font-size: 1rem;
	margin: 0 0 0.5rem;
	padding: 0;
	color: #5C564C;
}

.sj-selection-filter-choice {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 44px;
	padding: 0.25rem 0;
	cursor: pointer;
}

.sj-selection-filter-choice input[type="checkbox"] {
	width: 1.25rem;
	height: 1.25rem;
	flex: 0 0 auto;
}

.sj-selection-filter-choice__label {
	font-size: 0.95rem;
}

.sj-selection-filter-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
	margin-top: 0.5rem;
}

.sj-selection-filter-apply {
	min-height: 44px;
	padding: 0.6rem 1.25rem;
	border: 0;
	border-radius: 4px;
	background: #003070;
	color: #FAF7F1;
	font-size: 1rem;
	cursor: pointer;
}

.sj-selection-filter-apply:hover {
	background: #001F4D;
}

.sj-selection-filter-apply:focus-visible {
	background: #001F4D;
	outline: 3px solid #FAF7F1;
	outline-offset: 2px;
}

.sj-selection-filter-clear {
	font-size: 0.9rem;
	color: #003070;
	text-decoration: none;
}

.sj-selection-filter-clear:hover,
.sj-selection-filter-clear:focus-visible {
	text-decoration: underline;
}

/* ---------- Empty state ---------- */

.sj-selection-empty-state {
	padding: 1.5rem 1rem;
	border: 1px dashed #DCD3C2;
	border-radius: 0.5rem;
	color: #5C564C;
	text-align: center;
}

/* ---------- Result cards ---------- */

.sj-selection-card-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}

@media ( min-width: 640px ) {
	.sj-selection-card-grid {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( min-width: 960px ) {
	.sj-selection-card-grid {
		grid-template-columns: repeat( 3, 1fr );
	}
}

.sj-selection-card {
	border: 1px solid #DCD3C2;
	border-radius: 0.5rem;
	padding: 1rem;
	background: #ffffff;
}

.sj-selection-card__title {
	margin: 0;
	font-size: 1.1rem;
	line-height: 1.35;
	word-break: break-word;
}

.sj-selection-card__link {
	color: #2B2723;
	text-decoration: none;
}

.sj-selection-card__link:hover,
.sj-selection-card__link:focus-visible {
	text-decoration: underline;
}

.sj-selection-card__link--no-link {
	color: #5C564C;
}

/* ---------- Pagination ---------- */

.sj-selection-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 2rem;
}

.sj-selection-pagination__page {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 0.5rem;
	border: 1px solid #DCD3C2;
	border-radius: 0.375rem;
	text-decoration: none;
	color: #2B2723;
}

.sj-selection-pagination__page--current {
	background: #003070;
	border-color: #003070;
	color: #FAF7F1;
	font-weight: 600;
}

/* ---------- Detail template ---------- */

/* W3 (PR-IMG-02): Product image (additive, presentation only) */

/*
 * Package 5 (B+ Compact Editorial Rail) -- FROZEN values, accepted by the
 * Product Owner 2026-09-10. Desktop image max-height (500px), mobile image
 * max-height (420px), the desktop breakpoint (900px), image max-width
 * (320px), column gutter (52px), Facts max-width (540px), and no-image
 * readable width (760px) are all final -- see
 * SELECTION_DETAIL_REDESIGN_FINAL_CLOSURE_2026-09-10_v1.0.md (SANDBOX) for
 * the closure record. Any future change to these values is a new,
 * separately authorized design change, not a Round 1 tuning pass.
 *
 * px is used for every one of the sizes above (not rem):
 * Phase 1 confirmed this site's Astra body font-size Customizer setting is
 * 15px, not the usual 16px browser default, which would silently skew any
 * rem-based value here.
 */

.sj-selection-detail__identity {
	margin: 0 0 30px;
}

.sj-selection-detail__identity .sj-selection-detail__title {
	margin: 0 0 8px;
}

.sj-selection-detail__producer-name {
	margin: 0;
}

.sj-selection-detail__image-wrap {
	margin: 0 0 28px;
}

.sj-selection-detail__image {
	display: block;
	width: 70%;
	max-width: 320px;
	height: auto;
	max-height: 420px; /* frozen: mobile image cap */
	margin: 0 auto;
	border-radius: 0.5rem;
	/* object-fit: contain is required here, not decorative: per CSS2.1
	 * 10.4, a definite percentage `width` combined with `max-height` does
	 * NOT recompute width when the height clamp engages, which distorts
	 * the image (confirmed live -- a 267x800 source rendered as a
	 * non-ratio 320x500 box without this). contain letterboxes the actual
	 * pixels inside that box instead, so the full image always renders
	 * undistorted and uncropped -- this is not object-fit: cover (which
	 * crops) and is explicitly still allowed under the B+ image rules. */
	object-fit: contain;
}

/* Desktop B+ two-column layout: image rail beside a stacked
 * Title+Producer / Facts+Dimensions+Content information column. Only
 * activates for --has-image (the modifier is derived in PHP from the same
 * boolean that gates whether a <figure> exists at all -- see
 * sj-selection-detail-template.php), so a no-image Product always stays
 * single-column at every viewport, and this rule can never apply to a
 * page with no actual <figure> in the DOM. Frozen breakpoint: 900px. */
@media ( min-width: 900px ) {
	.sj-selection-detail__article--has-image {
		display: grid;
		grid-template-columns: 320px 1fr;
		grid-template-areas:
			"image identity"
			"image info";
		column-gap: 52px;
		align-items: start;
	}

	.sj-selection-detail__article--has-image .sj-selection-detail__image-wrap {
		grid-area: image;
		margin: 0;
		/* Round 2: vertical centering within the rail. The parent's own
		 * align-items:start (still governing identity/info) is left alone,
		 * so Title still starts at the same level as before -- this only
		 * overrides the image column's own alignment. For a near-full-
		 * height image (e.g. a max-height-bound tall bottle) the visible
		 * shift is a few px and reads as unchanged; for a short image
		 * (e.g. a wide/square artwork far shorter than the rail) this is
		 * the difference between "stuck at the top" and centered. */
		align-self: center;
	}

	.sj-selection-detail__article--has-image .sj-selection-detail__identity {
		grid-area: identity;
	}

	.sj-selection-detail__article--has-image .sj-selection-detail__info {
		grid-area: info;
	}

	.sj-selection-detail__article--has-image .sj-selection-detail__image {
		width: 100%;
		max-width: 320px;
		max-height: 500px; /* frozen: desktop image cap */
	}
}

/* No-image collapse: no rail column exists (no grid activates), and the
 * single information column is capped to a comfortable editorial reading
 * width instead of stretching across the full Detail container. Round 2:
 * the block itself is horizontally centered on the page (margin:auto) --
 * the text inside stays left-aligned (no text-align change), this only
 * centers the narrower block within the wider Detail container. */
.sj-selection-detail__article--no-image {
	max-width: 760px;
	margin: 0 auto;
}

/* W4: Sparse Product Facts (additive, presentation only) */

.sj-selection-detail__facts {
	margin: 0 0 1.25rem;
	max-width: 540px;
}

.sj-selection-detail__facts-heading {
	font-size: 1rem;
	margin: 0 0 0.5rem;
	color: #5C564C;
}

.sj-selection-detail__facts-list {
	margin: 0;
}

.sj-selection-detail__facts-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding: 0.35rem 0;
	border-bottom: 1px solid #DCD3C2;
}

.sj-selection-detail__facts-row:last-child {
	border-bottom: 0;
}

.sj-selection-detail__facts-label {
	flex: 0 0 6rem;
	font-weight: 600;
	color: #5C564C;
}

.sj-selection-detail__facts-value {
	flex: 1 1 12rem;
	margin: 0;
	word-break: break-word;
}

.sj-selection-detail__dimension {
	margin: 0 0 1.25rem;
}

.sj-selection-detail__dimension-heading {
	font-size: 1rem;
	margin: 0 0 0.5rem;
	color: #5C564C;
}

.sj-selection-detail__tag-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.sj-selection-detail__tag {
	padding: 0.35rem 0.75rem;
	border-radius: 999px;
	background: #F3EEE4;
	color: #5C564C;
	font-size: 0.9rem;
}

.sj-selection-detail__content {
	margin-top: 1.5rem;
	line-height: 1.7;
	word-break: break-word;
}

.sj-selection-detail__content img {
	max-width: 100%;
	height: auto;
}