/*
 * Studio page styles
 *
 * Rebuilt 2026-05-28 to match live (https://sterretroquay.com/studio/).
 * Each section's layout was measured with chrome-devtools-mcp; spec doc
 * (sterre-theme-specs/pages/studio.md) is being updated to reflect this
 * implementation.
 *
 * Five sections:
 *   .studio-hero            — flex row, text bottom-left + image right (full-bleed)
 *   .studio-statement       — flex column, centered single-column copy
 *   .studio-background      — flex row, image left + text right
 *   .studio-process-intro   — flex column, centered single-column copy
 *   .process-gallery        — sticky-scroll stacked-card animation (5 cards)
 *
 * Parallax & process-card scroll animation are in Task 13.
 */

/* ===== HERO =====
   Live behaviour: section is exactly 100vh. Fixed header overlays the
   hero image at the top — no padding-top is needed. The h2 sits at the
   bottom-left (align-items: flex-end) so it lands below the header line. */
.studio-hero {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: flex-end;
	min-height: 100vh;
}

.studio-hero__text {
	flex: 1 1 65%;
	padding: 0 var(--Space-m) var(--Space-m); /* ~32px — matches live's 31px */
	align-self: flex-end;
}

.studio-hero__statement {
	font-family: var(--font-body);     /* aktiv-grotesk */
	font-size: var(--heading-xl);      /* maxes at 5.69rem = 56.9px at >=1440px — matches live */
	font-weight: 400;
	line-height: 1.33;                 /* live measured 75.8/56.9 = 1.33 */
	margin: 0;
	max-width: var(--max-content-wide); /* 800px — matches live's ~814px h2 width */
	color: var(--text-primary-d-6);     /* matches live's heading color */
}

.studio-hero__statement .serif-accent {
	font-family: var(--font-heading); /* Quast */
	font-size: 0.75em;                /* live measured 42.7/56.9 = 0.75 */
	color: var(--text-primary-d-4);   /* live measured: serif slightly lighter than main heading */
}

.studio-hero__media {
	/* flex: 0 1 auto + min-width:0 lets the image SHRINK (rather than the text
	   getting crushed) as the row narrows. max-width caps it at ~45% of the
	   section so the text always keeps the majority of the row. */
	flex: 0 1 auto;
	min-width: 0;
	max-width: 35%;
	/* Image hugs the viewport's bottom-right corner (section is justify/align
	   flex-end) with Space-m breathing room from the right and bottom edges.
	   Margin (not padding) so flex-end aligns the margin box — keeping the
	   gap *inside* the viewport rather than spilling the image past the
	   section bottom. overflow stays visible (default) so the parallaxed
	   image can still drift down into the Artist Statement section.
	   LEFT margin (--Space-l) adds to the text block's --Space-m right padding
	   so the gap between copy and image is ~2.4× the bare padding. The margin
	   is part of the flex item's outer size, so the image shrinks to absorb it
	   rather than the text getting squeezed. */
	margin: 0 var(--Space-m) var(--Space-m) var(--Space-l);
}

.studio-hero-image {
	display: block;
	/* Scale to whichever limit binds first — 80vh tall OR the media's 45%
	   width — keeping aspect ratio. This way the image shrinks to share the
	   row instead of pushing the text out. */
	width: auto;
	height: auto;
	max-height: 80vh;
	max-width: 100%;
	object-fit: cover;
	will-change: transform;
}

@media (max-width: 767px) {
	.studio-hero {
		flex-direction: column;
		align-items: stretch;
		min-height: auto;
		padding-top: 0; /* the text block owns the first viewport now */
	}
	/* Text fills the WHOLE first viewport so the image only begins below the
	   fold. svh tracks the *visible* viewport (browser chrome retracted) so
	   there's no awkward gap before the image on iOS/Android. Statement sits
	   low (flex-end) to echo the desktop bottom-left placement. */
	.studio-hero__text {
		flex: 0 0 auto;
		min-height: 100vh;
		min-height: 100svh;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		padding: var(--header-offset-mobile) var(--Space-m) var(--Space-xl);
	}
	/* Image starts beneath the first viewport, framed by padding on all
	   sides so it isn't stretched edge-to-edge. */
	.studio-hero__media {
		flex: 0 0 auto;
		max-width: none;  /* drop the desktop 45% cap — full-width on mobile */
		height: auto;
		margin: 0;
		padding: 0 var(--Space-m) var(--Space-m);
	}
	.studio-hero-image {
		transform: none !important;
		width: 100%;
		height: auto;
		max-height: none;  /* drop the desktop 80vh cap — full-width image on mobile */
		max-width: none;
	}
}

/* ===== ARTIST STATEMENT =====
   Live structure:
   - Section: flex column, left-aligned, padding-left ≈ Space-l (45px)
   - h6 label sits at x=45 (right at section's left padding)
   - Body container has additional left padding (~45px) so paragraphs
     start at x=90 — visually offset from the label.
   - Gap between h6 and body ≈ 90px (Space-2xl).
   - Line-height on body paragraphs: 2.0 (32px on 16px).
   - h6 has text-decoration: underline. */
.studio-statement {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	min-height: 100vh;
	padding: var(--Space-3xl) var(--Space-2xl) var(--Space-3xl) var(--Space-l);
}

.studio-statement__inner {
	max-width: var(--max-content-medium); /* 760px — slightly wider than live's 711 so cols come out ~335 matching live's 334 */
	width: 100%;
}

/* H6 section labels — used in statement, background, process-intro.
   Live: lowercase 12px aktiv-grotesk + underline.
   NB: no margin-bottom — the gap between h6 and body is set by
   the BODY's padding-top (matches live's pattern). */
.studio-statement__label h3,
.studio-background__label h3,
.studio-process-intro__label h3 {
	font-family: var(--font-body);
	font-size: var(--body-s); /* maxes at 1.2rem = 12px at >=1440 */
	font-weight: 400;
	color: var(--text-primary-d-6); /* matches live's h6 color */
	text-decoration: underline;
	margin: 0;
}

/* Statement + Background body: TWO-COLUMN newspaper flow from a single field.
   CSS multi-column (not Grid): the WYSIWYG text pours into 2 balanced columns
   automatically. column-fill: balance evens the column heights and, when the
   line count is odd, leaves the LEFT column one line taller (browser default).
   A paragraph break is just a <p> — it never forces a column switch; the
   browser breaks columns only where balancing decides.
   Live at 1440: 2 columns × 334px with ~43px gap (Space-l ≈ 45px).
   Process intro stays single-column (no extra padding). */
.studio-statement__body,
.studio-background__body {
	column-count: 2;
	column-gap: var(--Space-l);
	column-fill: balance;
}

/* Statement body sits at x=90 (offset Space-l from h6 at x=45).
   Body has its own padding-left to keep paragraphs aligned with the
   start of the second visual layer. Trade-off: column widths come out
   slightly narrower than live's 334 (mine ~310) since available width
   shrinks. Acceptable visual match. */
.studio-statement__body {
	padding-left: var(--Space-l);
	padding-top: var(--Space-2xl); /* ~90px gap below label, matches live */
}

.studio-statement__body p,
.studio-background__body p,
.studio-process-intro__body p {
	font-family: var(--font-body);
	font-size: var(--body-m);
	line-height: 2;            /* live measured 32px / 16px = 2.0 */
	margin: 0;
}

/* Paragraph spacing for the multi-column statement/bio bodies.
   margin-BOTTOM only (never top) so a paragraph that lands at the top of
   column 2 sits flush — no leading blank line (point #4). 2em == one full
   line at line-height:2. Last paragraph drops its bottom margin so a column
   never carries trailing space. */
.studio-statement__body p,
.studio-background__body p {
	margin-bottom: 2em;
}
.studio-statement__body p:last-child,
.studio-background__body p:last-child {
	margin-bottom: 0;
}

/* Tablet only (768–1250px): collapse to ONE column so the text reads as a
   single continuous block (paragraph gaps only where the editor put them).
   Constrain to ~the original column width and keep it left-aligned so the copy
   stays clear of the parallaxed hero image on the right (no overlap), leaving
   the image to drift exactly as it does on desktop. Reset to full width at
   mobile (<=767px below), where the hero image sits below the fold. */
@media (max-width: 1250px) {
	.studio-statement__body,
	.studio-background__body {
		column-count: 1;
		max-width: var(--max-content-narrow);
	}
}

@media (max-width: 767px) {
	/* Single continuous column on mobile, full width: the tablet column cap is
	   dropped since the hero image is below the fold and can't overlap. */
	.studio-statement__body,
	.studio-background__body {
		column-count: 1;
		max-width: none;
	}
	.studio-statement {
		min-height: auto;
		padding: var(--Space-xl) var(--Space-m);
	}
	.studio-statement__body {
		/* Heading stays flush left at the section padding; paragraphs get a
		   symmetric horizontal indent so the copy sits inside the heading. */
		padding-left: var(--Space-s);
		padding-right: var(--Space-s);
		padding-top: var(--Space-l); /* consistent label→body gap across sections */
	}
}

/* ===== BIO (image left + text right) =====
   Live structure on the right side of the section:
     - Outer wrapper: flex column, justify-content:center (vertically
       centers the label + body block as a group), padding-top ~90px.
     - h6 label: align-self: flex-end (right-aligned within wrapper),
       just 17px tall, NO own padding.
     - Body container: padding-top ~90px creates the visual gap below
       the label, then 2 paragraphs side-by-side.
   The label+gap+body group is then vertically centered as a unit.
*/
.studio-background {
	display: flex;
	flex-direction: row;
	align-items: center;
	min-height: 100vh;
}

.studio-bio-image {
	flex: 0 0 30%;
	width: 30%;
	/* No explicit height — match live, which lets the IMG size itself
	   from its natural aspect ratio + content width + padding. With width:
	   30% (432px at 1440), content width = 432-90.5 = 341.5, then height
	   is derived from natural aspect (993/800 ≈ 1.241) → content height
	   ~424, total IMG height ~605 (= live). object-fit: cover is now
	   essentially a no-op since the content area matches natural aspect. */
	height: auto;
	object-fit: cover;
	display: block;
	will-change: transform;
	/* Live: IMG itself has padding 90.5 0 90.5 90.5 (top/right/bottom/left).
	   With box-sizing: border-box, this insets the image content from the
	   top, bottom, and LEFT edges of its layout box. */
	padding: var(--Space-2xl) 0 var(--Space-2xl) var(--Space-2xl);
}

.studio-background__text {
	flex: 1 1 auto;                            /* fill remaining width after image (live ~1045px) */
	align-self: stretch;                       /* fill section height so justify-content works */
	display: flex;
	flex-direction: column;
	justify-content: center;                   /* vertically center the label + body as a group */
	padding: var(--Space-2xl) var(--Space-2xl) 0; /* matches live's 90.5/90.5/0 outer-wrapper padding */
}

.studio-background__label {
	align-self: flex-end;                      /* right-aligned within wrapper (live's corner annotation) */
}

.studio-background__body {
	padding-top: var(--Space-2xl);             /* ~90px gap between h6 and first paragraph row (matches live's body container padding-top) */
	padding-left: var(--Space-s);              /* ~23 each side shrinks body content area so cols come out ~369 ≈ live's 364 */
	padding-right: var(--Space-s);
}

@media (max-width: 767px) {
	.studio-background {
		flex-direction: column;
		align-items: stretch;
		min-height: auto;
	}
	.studio-background__text {
		flex: 0 0 auto;
		padding: var(--Space-xl) var(--Space-m); /* uniform with statement + process-intro */
	}
	/* Label left-aligned to match 'Artist Statement' (was right-aligned). */
	.studio-background__label {
		align-self: flex-start;
		text-align: left;
	}
	.studio-background__body {
		padding-top: var(--Space-l);
		/* Symmetric paragraph indent (heading stays flush left). */
		padding-left: var(--Space-s);
		padding-right: var(--Space-s);
	}
	/* Show the WHOLE image (no 50vh crop), centred, with slightly more side
	   padding than the hero image (Space-l > Space-m) so it reads a touch
	   smaller / more framed. */
	.studio-bio-image {
		flex: 0 0 auto;
		align-self: center;
		width: 100%;
		height: auto;
		max-height: none;
		object-fit: contain;
		padding: 0 var(--Space-l) var(--Space-l);
		transform: none !important;
	}
}

/* ===== PROCESS INTRO =====
   Live: section is flex column, justify-content: flex-end, align-items: center.
   The label + body wrappers are CENTERED horizontally, but the paragraph
   text itself is LEFT-aligned (lines start flush at the column's left edge,
   not centered). Live's body container has padding-top: 90.5px which is
   what creates the gap below the h6 label. */
.studio-process-intro {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	min-height: 70vh;
	padding: var(--Space-3xl) var(--Space-2xl);
	/* no text-align: center — paragraph text is left-aligned within the
	   centered column, matching live */
}

.studio-process-intro__body {
	max-width: var(--max-content-narrow); /* 432px — matches live's narrower intro paragraph */
	padding-top: var(--Space-2xl);        /* ~90px gap below h6 (matches live's body container padding-top) */
}

@media (max-width: 767px) {
	/* Left-align the label + body like the other sections (was centred). */
	.studio-process-intro {
		min-height: auto;
		align-items: flex-start;
		justify-content: flex-start;
		/* Smaller bottom padding tightens the gap before the first card. */
		padding: var(--Space-xl) var(--Space-m) var(--Space-m);
	}
	.studio-process-intro__body {
		max-width: none;            /* full width, uniform with other text blocks */
		padding-top: var(--Space-l); /* consistent label→body gap */
		/* Symmetric paragraph indent (heading stays flush left). */
		padding-left: var(--Space-s);
		padding-right: var(--Space-s);
	}
}

/* ===== PROCESS GALLERY (5 stacked cards, JS-driven scroll in Task 13) ===== */
.process-gallery {
	position: relative;
	min-height: 400vh;        /* Entry fills most of the sticky range (no dead hold). 400vh is the top of the original 280-400vh tuning range. */
	margin-top: -200px;       /* visual overlap with previous section */
}

.cards-wrapper {
	position: sticky;
	top: 80px;                /* below the fixed header */
	height: calc(100vh - 80px);
	width: 100%;
	overflow: visible;
	pointer-events: none;
}

.process-card {
	pointer-events: auto;
	position: absolute;
	width: 25vw;
	display: flex;
	flex-direction: column;
	gap: var(--Space-m);
	will-change: transform;
}

/* Horizontal positions — 5 cards: 5vw start + (N-1) × 16vw spacing.
   Was 4 cards × 20vw in earlier version; live has 5. */
.card-1 { left: 5vw;  z-index: 1; }
.card-2 { left: 21vw; z-index: 2; }
.card-3 { left: 37vw; z-index: 3; }
.card-4 { left: 53vw; z-index: 4; }
.card-5 { left: 69vw; z-index: 5; }

.process-card img {
	width: 100%;
	height: auto;
	object-fit: cover;
	display: block;
}

.process-card .caption {
	font-family: var(--font-body);
	font-size: var(--body-s);
	line-height: 1.25;
	color: var(--text-primary-l-3);
	text-align: center;
}

/* WYSIWYG captions may wrap in <p> — strip default margins so caption text sits flush */
.process-card .caption p {
	margin: 0;
}

/* Desktop only (>1250px): left-align the caption with a left indent so it sits
   toward the right of the image rather than centered under it. Tablet/mobile
   keep the centered base rule above. */
@media (min-width: 1251px) {
	.process-card .caption {
		text-align: left;
		padding-left: var(--Space-l);
	}
}

/* ── Tablet (768–1250px): larger, more-overlapped process cards ──
   Same horizontal-spread animation as desktop (buildDesktop), but each card
   is ~100% bigger (25vw → 50vw) and the lefts are recomputed so the stack's
   OUTER edges stay exactly where they were on the inherited desktop values:
     left edge  = card-1 left            = 5vw  (unchanged)
     right edge = card-5 left + width    = 44 + 50 = 94vw (unchanged)
   Even spacing between the 5 cards = (44 − 5) / 4 = 9.75vw, which also
   increases the overlap (50 − 9.75 ≈ 40vw per card vs 9vw before). */
@media (min-width: 768px) and (max-width: 1250px) {
	.process-card {
		width: 50vw;
	}
	.card-1 { left: 5vw; }
	.card-2 { left: 14.75vw; }
	.card-3 { left: 24.5vw; }
	.card-4 { left: 34.25vw; }
	.card-5 { left: 44vw; }
}

/* ── Mobile: scroll-driven stacked-card deck (JS: studio-process-cards.js) ──
   Same sticky + GSAP mechanism as desktop, but cards are near-full-width and
   stack vertically (newer card sits a sliver higher than the previous, set by
   JS) with only a SLIGHT horizontal fan: first nudged left, last nudged right,
   even 3vw step. 84vw wide + left 2vw…14vw ⇒ symmetric 2vw outer margins. */
@media (max-width: 767px) {
	.process-gallery {
		min-height: 480vh;   /* generous scroll room so each of the 5 cards enters slowly (less touch-sensitive) */
		margin-top: 0;
	}
	.cards-wrapper {
		top: var(--header-offset-mobile);
		height: calc(100svh - var(--header-offset-mobile));
	}
	.process-card {
		width: 84vw;
		gap: var(--Space-xs);
	}
	.card-1 { left: 2vw;  z-index: 1; }
	.card-2 { left: 5vw;  z-index: 2; }
	.card-3 { left: 8vw;  z-index: 3; }
	.card-4 { left: 11vw; z-index: 4; }
	.card-5 { left: 14vw; z-index: 5; }
}

/* ── Reduced motion (any width): no scroll animation, plain vertical stack.
   Placed LAST so it overrides the animated desktop + mobile rules above. ── */
@media (prefers-reduced-motion: reduce) {
	.process-gallery {
		min-height: auto;
		padding: var(--Space-l) var(--Space-m);
		margin-top: 0;
	}
	.cards-wrapper {
		position: relative;
		top: auto;
		height: auto;
		overflow: visible;
		display: flex;
		flex-direction: column;
		gap: var(--Space-xl);
	}
	.process-card {
		position: relative !important;
		width: 100% !important;
		left: 0 !important;
		transform: none !important;
	}
}