/**
 * Lookbook module — editorial archive grid, season filter, single-story
 * cover + body typography, Shop the Look strip, prev/next navigation.
 *
 * Loaded only on Lookbook templates (archive-lookbook.php,
 * single-lookbook.php, taxonomy-lookbook_season.php) — see inc/enqueue.php.
 * Builds on tokens/base/layout/components/woocommerce; nothing here is
 * referenced by, or changes, Shop or Product.
 */

/* ---------------------------------------------------------------------
   Archive / season header
--------------------------------------------------------------------- */

.lookbook-header {
	padding-bottom: var(--space-lg);
	max-width: var(--container-narrow-max);
}

.lookbook-header__intro {
	font-size: var(--fs-md);
	color: var(--color-ink-muted);
	max-width: 40ch;
}

/* ---------------------------------------------------------------------
   Season filter — plain text pills, active state carried by an
   underline (matches .link's restrained treatment) rather than a filled
   pill, so it reads editorial rather than app-like.
--------------------------------------------------------------------- */

.lookbook-filter {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-md);
	padding-bottom: var(--space-lg);
	margin-bottom: var(--space-lg);
	border-bottom: var(--border-width) solid var(--color-line);
}

.lookbook-filter__item {
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: var(--ls-eyebrow);
	color: var(--color-ink-muted);
	padding-bottom: var(--space-3xs);
	border-bottom: var(--border-width-md) solid transparent;
}

.lookbook-filter__item:hover {
	color: var(--color-ink);
}

.lookbook-filter__item.is-active {
	color: var(--color-ink);
	border-bottom-color: var(--color-accent);
}

/* ---------------------------------------------------------------------
   Editorial grid — extends the generic .lookbook-grid (layout.css) and
   .lookbook-tile (components.css) with the feature tile, caption overlay
   and hover treatment this module needs; markup grows a __media/__caption
   wrapper the shared component rules already reach via descendant
   selectors, so nothing there had to change.
--------------------------------------------------------------------- */

.archive-lookbook .lookbook-grid {
	padding-bottom: var(--space-2xl);
}

.lookbook-tile__media {
	display: block;
	overflow: hidden;
	background: var(--color-paper-alt);
}

.lookbook-tile__media img {
	transition: transform var(--duration-base) var(--ease);
}

.lookbook-tile:hover .lookbook-tile__media img {
	transform: scale(1.03);
}

.lookbook-tile__caption {
	display: block;
}

.lookbook-tile__eyebrow {
	display: block;
	margin-top: var(--space-sm);
	font-size: var(--fs-2xs);
	text-transform: uppercase;
	letter-spacing: var(--ls-eyebrow);
	color: var(--color-ink-muted);
}

.lookbook-tile__excerpt {
	display: block;
	margin-top: var(--space-2xs);
	font-size: var(--fs-sm);
	color: var(--color-ink-muted);
	max-width: 48ch;
}

/* Feature tile — first entry on an unfiltered, unpaged archive view.
   Spans the full grid width and crops landscape instead of portrait. */
.lookbook-tile--feature {
	grid-column: 1 / -1;
}

.lookbook-tile--feature .lookbook-tile__media img {
	aspect-ratio: var(--ratio-wide);
}

.lookbook-tile--feature .lookbook-tile__title {
	font-size: var(--fs-xl);
}

@media (min-width: 1024px) {
	.lookbook-tile--feature .lookbook-tile__title {
		font-size: var(--fs-2xl);
	}
}

/* ---------------------------------------------------------------------
   Single story — full-bleed cover with an overlaid eyebrow/title/subtitle.
--------------------------------------------------------------------- */

.lookbook-entry__crumbs .breadcrumbs {
	padding-block: var(--space-md) 0;
}

.lookbook-entry__cover {
	position: relative;
	margin-top: var(--space-sm);
}

.lookbook-entry__cover-image {
	width: 100%;
	aspect-ratio: var(--ratio-hero);
	object-fit: cover;
}

.lookbook-entry__cover-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	background: linear-gradient(0deg, rgba(22, 19, 17, 0.7) 0%, rgba(22, 19, 17, 0) 45%);
	padding-bottom: var(--space-lg);
}

.lookbook-entry__eyebrow {
	display: block;
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: var(--ls-eyebrow);
	color: var(--color-paper);
	opacity: 0.85;
	margin-bottom: var(--space-2xs);
}

.lookbook-entry__title {
	color: var(--color-paper);
	font-size: var(--fs-2xl);
	max-width: 20ch;
}

.lookbook-entry__subtitle {
	color: var(--color-paper);
	opacity: 0.9;
	font-size: var(--fs-md);
	max-width: 45ch;
	margin-top: var(--space-sm);
}

@media (min-width: 1024px) {
	.lookbook-entry__cover-overlay {
		padding-bottom: var(--space-2xl);
	}

	.lookbook-entry__title {
		font-size: var(--fs-3xl);
	}
}

/* ---------------------------------------------------------------------
   Story body — flowing content column. Wide/Full-aligned core image
   blocks are allowed to break out of the narrow reading column (the
   theme already declares add_theme_support( 'align-wide' ) — this is
   the breakout math for it), blockquotes read as pull quotes, and the
   opening paragraph gets a quiet "lead" treatment.
--------------------------------------------------------------------- */

.lookbook-entry__body {
	padding-block: var(--space-xl) var(--space-2xl);
}

.lookbook-entry__body > p:first-of-type {
	font-size: var(--fs-md);
	color: var(--color-ink-muted);
}

.lookbook-entry__body blockquote {
	margin: var(--space-xl) auto;
	padding: 0 var(--space-lg);
	border: none;
	font-family: var(--font-display);
	font-size: var(--fs-lg);
	line-height: var(--lh-snug);
	text-align: center;
	max-width: 32ch;
}

.lookbook-entry__body blockquote cite {
	display: block;
	margin-top: var(--space-sm);
	font-family: var(--font-body);
	font-size: var(--fs-xs);
	font-style: normal;
	text-transform: uppercase;
	letter-spacing: var(--ls-eyebrow);
	color: var(--color-ink-muted);
}

.lookbook-entry__body figure {
	margin: var(--space-xl) 0;
}

.lookbook-entry__body figcaption {
	margin-top: var(--space-2xs);
	font-size: var(--fs-xs);
	color: var(--color-ink-muted);
	text-align: center;
}

.lookbook-entry__body .alignwide,
.lookbook-entry__body .alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: 50%;
	transform: translateX(-50%);
}

.lookbook-entry__body .alignwide {
	max-width: var(--container-wide-max);
}

.lookbook-entry__body .alignwide img,
.lookbook-entry__body .alignfull img {
	width: 100%;
}

/* Inline "shop the look" text link ([shop_product] shortcode output,
   inc/lookbook.php) — reads as prose with a quiet price tag, not a CTA. */
.inline-product-link {
	display: inline-flex;
	align-items: baseline;
	gap: var(--space-2xs);
	text-underline-offset: 0.2em;
	text-decoration: underline;
	text-decoration-color: var(--color-accent);
	color: var(--color-ink);
}

.inline-product-link:hover {
	text-decoration-color: currentColor;
}

.inline-product-link__price {
	font-size: var(--fs-xs);
	color: var(--color-ink-muted);
	text-decoration: none;
	white-space: nowrap;
}

/* ---------------------------------------------------------------------
   Shop the Look — reuses ul.products / .product-card (see
   /woocommerce/content-product.php) exactly as Collections does. Rating
   and add-to-cart controls are hidden in this context only, the same
   pattern homepage.css uses for the product rails: this module links to
   products, it doesn't grow a second Shop page. The Shop and Product
   templates themselves are untouched.
--------------------------------------------------------------------- */

.lookbook-shop-the-look {
	border-top: var(--border-width) solid var(--color-line);
}

.lookbook-shop-the-look ul.products li.product a.button,
.lookbook-shop-the-look ul.products li.product .added_to_cart,
.lookbook-shop-the-look ul.products li.product .star-rating {
	display: none;
}

/* ---------------------------------------------------------------------
   Previous / next — quiet three-column strip closing out the story.
--------------------------------------------------------------------- */

.lookbook-entry__nav {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-md);
	align-items: center;
	padding-block: var(--space-lg);
	border-top: var(--border-width) solid var(--color-line);
	text-align: center;
}

.lookbook-entry__nav-link--next {
	text-align: right;
}

.lookbook-entry__nav-link--prev {
	text-align: left;
}

.lookbook-entry__nav-label {
	display: block;
	font-size: var(--fs-2xs);
	text-transform: uppercase;
	letter-spacing: var(--ls-eyebrow);
	color: var(--color-ink-muted);
}

.lookbook-entry__nav-title {
	display: block;
	margin-top: var(--space-3xs);
	font-family: var(--font-display);
	font-size: var(--fs-sm);
}

.lookbook-entry__nav-all {
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: var(--ls-eyebrow);
	color: var(--color-ink-muted);
	order: -1;
}

.lookbook-entry__nav-all:hover {
	color: var(--color-ink);
}

@media (min-width: 768px) {
	.lookbook-entry__nav {
		grid-template-columns: 1fr auto 1fr;
	}

	.lookbook-entry__nav-all {
		order: 0;
	}
}