/* =====================================================================
   Treetale Home — Lookbook page layout
   Documented 3rd scoped-CSS exception (alongside plp.css + product.css):
   the Lookbook page REUSES the PLP card/tile styles (plp.css, scoped to
   `.plp-page` — the msf/lookbook-grid block renders its own `.plp-page`
   wrapper). This file owns ONLY the page-level layout — the hero→grid
   rhythm, the grid wrapper width/gutter and small responsive tweaks —
   which cannot be expressed in theme.json alone.

   Loaded only on is_page('lookbook') (functions.php), AFTER custom.css so
   the page-scoped look wins. Scoped to `body.lookbook-page`. Keep < 5KB.
   ===================================================================== */

/* Main column. The hero pattern bleeds edge-to-edge under the sticky
   header (no top padding); the page gets bottom rhythm before the footer.
   overflow-x: clip contains the full-bleed grid breakout (below) without
   creating a scroll container or breaking sticky descendants. */
body.lookbook-page main.page-lookbook-main {
	padding-top: 0;
	padding-bottom: clamp(64px, 8vw, 112px);
	overflow-x: clip;
}

/* The full-bleed hero cover already owns its bottom fade; give the first
   content block below it (usually the lookbook-grid) generous breathing
   room. Higher specificity than the constrained-layout blockGap. */
body.lookbook-page main.page-lookbook-main .wp-block-cover:first-child {
	margin-bottom: clamp(48px, 6vw, 88px);
}

/* Lookbook grid wrapper — mirrors the PLP /shop/ `.grid-wrap` EXACTLY: a
   full-bleed grid, edge-to-edge minus the global --site-gutter (80 / 48 / 20px
   across breakpoints — byte-identical to the .grid-wrap padding in plp.css), so
   the cards render at the same size as the shop grid (NOT capped at 1280px).
   The wrapper breaks out of the constrained post-content via the viewport-margin
   technique (50% is the content box, 50vw the viewport → the negative margin
   equals the root padding, pulling the wrapper to the viewport edge regardless
   of how the page nests constrained / global-padding layers). The column counts
   + gaps come from `.plp-page .grid-4` in plp.css, so they stay in lockstep. */
body.lookbook-page main.page-lookbook-main .lookbook-grid {
	/* !important beats WP's `.is-layout-constrained > * { margin: auto !important }`
	   so the grid truly breaks out of the constrained body to the viewport edge. */
	max-width: none !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	padding: 32px var(--site-gutter) 80px;
}

/* Vertical rhythm between any further stacked sections on the page. */
body.lookbook-page main.page-lookbook-main .lookbook-grid + .lookbook-grid {
	margin-top: clamp(48px, 6vw, 88px);
}

/* Editorial-tile excerpt (the "co / jak / dlaczego" line, pulled from the
   linked post). The tile copy is white-on-veil via plp.css; this only sets
   the type scale + rhythm that plp.css leaves at browser defaults. */
body.lookbook-page .ed-tile .copy .excerpt {
	margin: 0 0 14px;
	font-size: 0.8125rem;
	font-weight: 300;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.85);
	max-width: 42ch;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Desktop-only column override: the block emits `--cols` on .grid-4 (not an
   inline grid-template), so plp.css's mobile breakpoints still collapse it. */
@media (min-width: 1025px) {
	body.lookbook-page .lookbook-grid .grid-4 {
		grid-template-columns: repeat(var(--cols, 4), 1fr);
	}
}

/* Tighten the hero→grid gap on small screens. */
@media (max-width: 768px) {
	body.lookbook-page main.page-lookbook-main .wp-block-cover:first-child {
		margin-bottom: 40px;
	}
	body.lookbook-page main.page-lookbook-main .lookbook-grid + .lookbook-grid {
		margin-top: 40px;
	}
}