/*
 * Homepage (front-page.php). Loaded only on is_front_page() (see
 * inc/enqueue.php). Depends on the shared cascade: tokens -> base -> layout
 * -> components. Uses existing tokens only. Introduced in Phase 3B-4.
 * Mobile-first.
 *
 * Cinematic, dark, quiet, image-led. No boxed cards, no ecommerce grid, no
 * overlays, no carousel, no new JS. Sections stack in source order; each is
 * omitted entirely by front-page.php when its content type has no published
 * posts, so this file never needs to style an "empty" state.
 *
 * Shared primitive reused: .schusei-section-label (components.css).
 */

.schusei-front-page.schusei-main {
	max-width: var(--sch-width-full);
}

/* Content-section-to-content-section spacing (Film -> Photography ->
   Store) — reduced from the 3xl step. The hero keeps its own generous gap
   below, restored on whichever section actually follows it. */
.schusei-front-page > * + * {
	margin-top: var(--sch-space-2xl);
}

.schusei-front-hero + * {
	margin-top: var(--sch-space-3xl);
}

/* =================================================================== HERO */
/* Site-wide, independent of any Film or post — see inc/customizer.php. Image
   only: no title overlay, no link, no caption, no CTA. Native aspect ratio
   preserved (no object-fit, no forced height) — a ~2.39:1 CinemaScope
   source displays uncropped at any width. */
.schusei-front-hero__media {
	display: block;
	/* Bleed the hero to the edge of the (wide) homepage container by
	   cancelling .schusei-main's own gutter padding on this element only. */
	margin-inline: calc(var(--sch-gutter) * -1);
}

.schusei-front-hero__image {
	width: 100%;
	height: auto;
	display: block;
}

/* ================================================== SELECTED FILM / PHOTO */
/* Shared by template-parts/front-work-teaser.php for both sections. */
.schusei-front-work__header {
	margin-bottom: var(--sch-space-xl);
}

.schusei-front-work__grid {
	display: flex;
	flex-direction: column;
	gap: var(--sch-space-xl);
}

@media (min-width: 48em) {
	.schusei-front-work__grid {
		flex-direction: row;
		flex-wrap: wrap;
	}

	/* flex (not grid) so 1-3 items never leave a visible empty slot; each
	   item grows up to a cap instead of stretching to fill the row alone. */
	.schusei-front-work__item {
		flex: 1 1 16rem;
		max-width: 26rem;
	}
}

.schusei-front-work__item {
	position: relative;
	min-width: 0;
	margin: 0;
}

/* No box, no background, no forced ratio — same restrained treatment as the
   Film / Photography archive cards. */
.schusei-front-work__media {
	display: block;
}

.schusei-front-work__image {
	width: 100%;
	height: auto;
	transition: opacity var(--sch-duration-base) var(--sch-ease);
}

.schusei-front-work__placeholder {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	background-color: var(--sch-bg-raised);
	box-shadow: inset 0 0 0 1px var(--sch-border);
}

.schusei-front-work__item:hover .schusei-front-work__image,
.schusei-front-work__item:focus-within .schusei-front-work__image {
	opacity: 0.88;
}

.schusei-front-work__title {
	margin: var(--sch-space-sm) 0 0;
	font-size: var(--sch-text-heading);
	font-weight: 400;
	line-height: var(--sch-leading-snug);
	overflow-wrap: anywhere;
}

.schusei-front-work__link {
	color: var(--sch-text);
	text-decoration: none;
}

/* Stretch the title link over the whole item; a11y name stays the title. */
.schusei-front-work__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.schusei-front-work__link:focus-visible {
	outline: none;
}

.schusei-front-work__link:focus-visible::after {
	outline: 2px solid var(--sch-accent-warm);
	outline-offset: 4px;
}

.schusei-front-work__meta {
	margin: var(--sch-space-3xs) 0 0;
	font-size: var(--sch-text-micro);
	letter-spacing: var(--sch-tracking-wide);
	text-transform: uppercase;
	color: var(--sch-text-secondary);
}

.schusei-front-work__archive-link {
	margin-top: var(--sch-space-lg);
	font-size: var(--sch-text-micro);
	letter-spacing: var(--sch-tracking-wide);
	text-transform: uppercase;
}

.schusei-front-work__archive-link a {
	color: var(--sch-text-secondary);
	text-decoration: none;
}

.schusei-front-work__archive-link a:hover,
.schusei-front-work__archive-link a:focus-visible {
	color: var(--sch-text);
}

/* ==================================================== STORE TEASER (quiet) */
.schusei-front-store__list {
	margin-top: var(--sch-space-lg);
	display: flex;
	flex-direction: column;
	gap: var(--sch-space-lg);
}

.schusei-front-store__item {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: var(--sch-space-md);
}

.schusei-front-store__media {
	flex: 0 0 auto;
	width: 6rem;
}

@media (min-width: 40em) {
	.schusei-front-store__media {
		width: 8rem;
	}
}

.schusei-front-store__image {
	display: block;
	width: 100%;
	height: auto;
	transition: opacity var(--sch-duration-base) var(--sch-ease);
}

.schusei-front-store__placeholder {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	background-color: var(--sch-bg-raised);
	box-shadow: inset 0 0 0 1px var(--sch-border);
}

/* Same quiet image-dim as the Selected Film / Photography cards above. */
.schusei-front-store__item:hover .schusei-front-store__image,
.schusei-front-store__item:focus-within .schusei-front-store__image {
	opacity: 0.88;
}

.schusei-front-store__body {
	min-width: 0;
}

.schusei-front-store__title {
	margin: 0;
	font-size: var(--sch-text-body);
	font-weight: 400;
	overflow-wrap: anywhere;
}

.schusei-front-store__link {
	color: var(--sch-text);
	text-decoration: none;
}

.schusei-front-store__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.schusei-front-store__link:focus-visible {
	outline: none;
}

.schusei-front-store__link:focus-visible::after {
	outline: 2px solid var(--sch-accent-warm);
	outline-offset: 4px;
}

.schusei-front-store__meta {
	margin: var(--sch-space-3xs) 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--sch-space-2xs) var(--sch-space-sm);
	font-size: var(--sch-text-micro);
	letter-spacing: var(--sch-tracking-wide);
	text-transform: uppercase;
	color: var(--sch-text-secondary);
}

.schusei-front-store__archive-link {
	margin-top: var(--sch-space-lg);
	font-size: var(--sch-text-micro);
	letter-spacing: var(--sch-tracking-wide);
	text-transform: uppercase;
}

.schusei-front-store__archive-link a {
	color: var(--sch-text-secondary);
	text-decoration: none;
}

.schusei-front-store__archive-link a:hover,
.schusei-front-store__archive-link a:focus-visible {
	color: var(--sch-text);
}