/* ============================================================
   popup.css — shared overlay for portfolio + available-works popups
   ============================================================
   Live reference (1440 viewport, captured 2026-05-28):
     popup (fixed inset 0): width 1440, height 810, z-index 10000
     backdrop: rgba(0,0,0,0.8), position absolute, full overlay
     content: max-height ~95vh, max-width 100%, padding 30px,
              background --color-surface, border-radius 8.5px,
              overflow auto, centered (40.5 from top, 36 from left)
     content-wrapper: flex-row, width 100%, height 100%
       .popup-gallery-side: width 60%, padding --Space-m
       .popup-details-side: width 40%, padding --Space-l, flex-col
     img:    object-fit cover, max-height ~567px, display block
     close:  absolute top/right ~57px, font-size 20px, color l-3
     prev:   absolute left ~45px, top 50% translateY -50%
     next:   absolute right ~45px, top 50% translateY -50%
     Mobile (<=991): gallery 90% / details stacks
     Mobile (<=767): gallery 100%, content-wrapper flex-direction column
   ============================================================ */

/* ─── Body lock when popup open ─── */
body.popup-open {
	overflow: hidden;
}

/* ─── Overlay shell ───
   Kept rendered at all times (visibility/opacity/pointer-events toggle rather
   than display:none) so the open transition can actually animate — a
   display:none→flex swap fires no transition because the element wasn't
   painted in its starting state. The content card blurs into focus (see
   .brx-popup-content below) while the dark backdrop fades in. */
.sterre-popup {
	position: fixed;
	inset: 0;
	z-index: var(--z-popup);
	display: flex;
	align-items: center;
	justify-content: center;
	visibility: hidden;
	opacity: 0;
	pointer-events: none; /* non-interactive while hidden — clicks pass through */
	transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}

.sterre-popup.is-open {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
	transition: opacity 0.5s ease, visibility 0s linear 0s;
}

/* Hidden state for unused live class — keep so any CSS targeting it works */
.sterre-popup.hide {
	display: none;
}

/* ─── Backdrop ─── */
.sterre-popup .brx-popup-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.8);
	cursor: pointer;
}

/* ─── Content card ───
   Live measurements at 1440×900:
     width 1368px = 95vw
     min-height 810px = 90vh  ← keeps the card tall even when content is short
     max-height 855px = 95vh
     padding 30px (≈ --Space-m at desktop)
     background rgb(251,251,251) = --color-surface-l-5
   Centered by the overlay's flex (justify-content: center, align-items: center). */
.sterre-popup .brx-popup-content {
	position: relative;
	z-index: 1;
	width: 95vw;
	max-width: 100%;
	min-height: 90vh;            /* MATCH LIVE — keeps consistent edge distance top/bottom */
	max-height: 95vh;
	padding: var(--Space-m);     /* 32px at desktop — close to live's 30px */
	background: var(--color-surface-l-5);
	border-radius: 0.85rem;
	overflow: auto;
	/* Flex column so the content wrapper can be vertically centered within the
	   tall (90vh) card. align/justify-center + overflow can clip the top when
	   content is tall, so the wrapper uses margin:auto instead (see below) —
	   that's scroll-safe (auto margins only consume positive free space). */
	display: flex;
	flex-direction: column;
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.15);
	/* Blur-in: the viewer pulls into focus as the popup opens, matching the
	   site's blur-reveal language (text reveals, page view-transitions). */
	filter: blur(20px);
	transition: filter 0.5s ease;
}

.sterre-popup.is-open .brx-popup-content {
	filter: blur(0);
}

/* Respect reduced-motion: snap to focus, no blur animation. */
@media (prefers-reduced-motion: reduce) {
	.sterre-popup .brx-popup-content {
		filter: none;
		transition: none;
	}
}

/* ─── Layout: image left, details right ─── */
.sterre-popup .popup-content-wrapper {
	display: flex;
	flex-direction: row;
	column-gap: 0;
	width: 100%;
	margin: auto 0;        /* vertically center the whole block within the tall card (scroll-safe) */
	min-height: 60vh;
	align-items: center;   /* center image + details relative to each other in the row */
	position: relative;
}

.sterre-popup .popup-gallery-side {
	width: 60%;
	padding: var(--Space-m);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.sterre-popup .popup-details-side {
	width: 40%;
	padding: var(--Space-l);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	row-gap: var(--Space-s);
	text-align: center;
}

/* ─── Image ─── */
.sterre-popup .popup-img {
	display: block;
	max-width: 100%;
	max-height: 70vh;
	width: auto;
	height: auto;
	object-fit: cover;
}

/* ─── Thumb strip (alternate views) ───
   Live structure (.thumbnail-gallery inside .popup-details-side):
     - position: static (in normal flow, NOT absolute)
     - display: flex, flex-direction: row
     - justify-content: center, align-items: flex-start
     - column-gap: 8px (= --Space-3xs at 1440)
     - margin: 32px 0 0 0 (= --Space-m top, no other margins)
     - height: 63px (the thumb height)

   .popup-details-side uses justify-content: space-between to push
   the strip to the bottom of the column.

   Each thumb is 63×63px (6.3rem). Active opacity 1, inactive 0.4.
   JS auto-hides the strip when only 1 image is set. */
.sterre-popup .popup-thumb-strip {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: flex-start;
	column-gap: var(--Space-3xs); /* 8px at 1440 — matches live */
	margin: var(--Space-m) 0 0 0; /* 32px top — matches live */
}

.sterre-popup .popup-thumb {
	width: 6.3rem;      /* 63px — matches live exactly */
	height: 6.3rem;
	padding: 0;
	border: none;
	background: var(--color-surface);
	cursor: pointer;
	overflow: hidden;
	opacity: 0.4;       /* live measured: inactive thumbs at 0.4 */
	transition: opacity 0.2s ease;
}

.sterre-popup .popup-thumb:hover,
.sterre-popup .popup-thumb:focus-visible {
	opacity: 0.75;
}

.sterre-popup .popup-thumb.is-active {
	opacity: 1;
	cursor: default;
}

.sterre-popup .popup-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ─── Title + meta ─── */
.sterre-popup .popup-details-top {
	display: flex;
	flex-direction: column;
	align-items: center;
	row-gap: var(--Space-4xs);
}

/* Title h3 — live: Quast 24px weight 500 lh 56.9px color rgb(39,39,38). */
.sterre-popup .popup-title {
	font-family: var(--font-heading);
	font-size: 2.4rem;                /* 24px — between --heading-xs and --heading-s, literal to match live exactly */
	font-weight: 500;                  /* live measured */
	line-height: 2.37;                 /* 56.9 / 24 — live's tall line-height creates breathing room above */
	color: var(--text-primary-d-4);    /* rgb(39,39,38) — matches live */
	margin: var(--Space-xs) 0 0;       /* 16px top */
	text-align: center;
}

/* Year — live: aktiv-grotesk 12px weight 400 lh 1.7 color rgb(62,62,59). */
.sterre-popup .popup-year {
	font-family: var(--font-body);
	font-size: var(--body-s);           /* 12px */
	line-height: 1.7;                   /* 20.4/12 */
	color: var(--text-primary);         /* rgb(62,62,59) — NOT l-2 like before */
	margin: 0;
}

/* Description body — materials/dimensions (BIGGER than year, NOT body-s).
   Live: aktiv-grotesk 16px lh 32px color rgb(23,23,21) = --text-primary-d-7. */
.sterre-popup .popup-description {
	font-family: var(--font-body);
	color: var(--text-primary-d-7);
	text-align: center;
}

.sterre-popup .popup-description p {
	font-size: var(--body-m);           /* 16px — matches live */
	line-height: 2;                     /* 32/16 */
	margin: 0 0 var(--Space-xs);
}

.sterre-popup .popup-description p:last-child {
	margin-bottom: 0;
}

/* ─── Available Works extras: price + cart button ─── */
.sterre-popup--available .popup-price-block {
	display: flex;
	flex-direction: column;
	align-items: center;
	row-gap: var(--Space-xs);
	width: 100%;
}

.sterre-popup--available .popup-availability {
	min-height: 1em;
}

/* Sold label — live: aktiv-grotesk 12px weight 400 (NOT 700) NO uppercase
   NO letter-spacing. Just plain text in the brand red. The list-row
   .red was already plain-styled; align the popup version too. */
.sterre-popup--available .popup-availability .red {
	font-family: var(--font-body);
	font-size: var(--body-s);          /* 12px at desktop */
	font-weight: 400;
	line-height: 1.7;                  /* 20.4 / 12 — matches live */
	color: var(--color-primary);
	text-transform: none;
	letter-spacing: normal;
}

.sterre-popup--available .popup-price {
	display: flex;
	align-items: center;
	justify-content: center;
	column-gap: var(--Space-xs);
}

/* Live: available price aktiv-grotesk 12px weight 700 color rgb(62,62,59).
   The .small-text base sets font-weight: 400 and the span inherits the
   body's d-6 color — override BOTH explicitly here. */
.sterre-popup--available .price-available.small-text {
	font-weight: 700;
	color: var(--text-primary);          /* rgb(62,62,59) — matches live */
}

/* Sold popup price: weight 400, NO line-through (live's popup doesn't
   strike through — only the list row does). Same plain text style as
   year/dimensions. The "Sold" red label above it carries the state. */
.sterre-popup--available .price-sold.small-text {
	font-weight: 400;
	text-decoration: none;
	color: var(--text-primary);
}

/* "Purchase" button — live values inspected directly:
     font-family: aktiv-grotesk
     font-size: 9px (= --body-xs at desktop)
     font-weight: 400
     text-transform: uppercase
     letter-spacing: 0.5px
     background: rgb(45, 45, 45) = --color-surface-d-9
     color: rgb(220, 220, 219) = --text-primary-l-9
     padding: 4.5px 9px (no clean token at these values — literal)
     border-radius: 17px = --Radius-s
     border: 0
     display: flex with column-gap: 10px (for icon + text)
   The pill is tiny on purpose — Sterre's design feels less e-commerce
   and more like a quiet inline action. */
.sterre-popup--available .add-to-cart-btn {
	display: inline-flex;
	align-items: center;
	column-gap: 1rem;                       /* 10px — live measured */
	padding: 0.45rem 0.9rem;                /* 4.5px 9px */
	background: var(--color-surface-d-9);
	color: var(--text-primary-l-9);
	border: 0;
	border-radius: var(--Radius-s);          /* 17px at desktop */
	font-family: var(--font-body);
	font-size: var(--body-xs);               /* 9px at desktop */
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	cursor: pointer;
	transition: background var(--transition-fast), color var(--transition-fast);
}

.sterre-popup--available .add-to-cart-btn:hover {
	background: var(--text-primary-d-7);     /* slightly darker than the default for hover feedback */
}

.sterre-popup--available .add-to-cart-btn:focus-visible {
	outline: none;
	border-color: var(--text-primary);
}

.sterre-popup--available .add-to-cart-btn.in-cart {
	background: var(--text-primary-l-4);
	cursor: default;
}

/* ─── Close button (top-right corner) ───
   Live: position: absolute relative to the overlay (which fills viewport),
   top: 63px, right: 63px. We use position: fixed (anchored to viewport)
   for the same visual result without depending on overlay being positioned.
   --Space-xl = 64px at desktop, matches live's 63 within 1px. */
.sterre-popup .popup-close-button {
	position: fixed;
	top: var(--Space-xl);
	right: var(--Space-xl);
	width: 3rem;
	height: 3rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	color: var(--text-primary-l-3);  /* rgb(115,115,112) — matches live */
	cursor: pointer;
	z-index: 1000;
	transition: color var(--transition-fast);
	padding: 0;
}

.sterre-popup .popup-close-button:hover,
.sterre-popup .popup-close-button:focus-visible {
	color: var(--text-primary-d-4);
	outline: none;
}

/* ─── Prev / next arrows ───
   Live: position: absolute relative to the overlay (viewport-sized).
   left/right: 45.2px = --Space-l. Vertically centered (50%).
   We use position: fixed (anchored to viewport) — same visual without
   depending on the overlay being positioned. */
.sterre-popup .popup-prev-post,
.sterre-popup .popup-next-post {
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	width: 4rem;
	height: 4rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	color: var(--text-primary-l-3);  /* rgb(115,115,112) — matches live */
	cursor: pointer;
	z-index: 10;
	transition: color var(--transition-fast);
	padding: 0;
}

/* Shared icon — used inside prev / next / close buttons.
   Live measured glyph heights:
     - arrows: 21.3px (Ionicons font-size)
     - close:  20px   (slightly smaller than arrows)
   Default size matches arrows; close button overrides below. */
.sterre-popup .popup-arrow-icon {
	width: 2.13rem;  /* 21.3px — matches live arrow glyph */
	height: 2.13rem;
	display: block;
}

.sterre-popup .popup-close-button .popup-arrow-icon {
	width: 2rem;     /* 20px — matches live close glyph */
	height: 2rem;
}

.sterre-popup .popup-prev-post {
	left: var(--Space-l);  /* 45.2px — matches live */
}

.sterre-popup .popup-next-post {
	right: var(--Space-l);  /* 45.2px — matches live */
}

.sterre-popup .popup-prev-post:hover,
.sterre-popup .popup-next-post:hover,
.sterre-popup .popup-prev-post:focus-visible,
.sterre-popup .popup-next-post:focus-visible {
	color: var(--text-primary-d-4);
	outline: none;
}

/* ─── Tablet LANDSCAPE (≤991px): widen the image column a touch ───
   Scoped to landscape so it never fights the portrait stacking rule below. */
@media (max-width: 991px) and (orientation: landscape) {
	.sterre-popup .popup-gallery-side {
		width: 90%;
	}
}

/* ─── PORTRAIT (phones + tablets held upright): stack image above details ───
   Orientation-driven, not width-driven: any device in PORTRAIT up to tablet
   size stacks (image above, text below); anything in LANDSCAPE keeps the
   desktop row layout (handled by the default .popup-content-wrapper rule).
   This is what makes:
     - tablet portrait      → stacked (like mobile)
     - tablet landscape     → row (like desktop)
     - mobile portrait      → stacked
     - mobile landscape     → row (like desktop)
   The 1024px cap keeps it to phone/tablet portrait widths (covers the 12.9"
   iPad Pro at 1024px) without affecting tall/narrow desktop windows beyond it. */
@media (orientation: portrait) and (max-width: 1024px) {
	.sterre-popup .popup-content-wrapper {
		flex-direction: column;
		/* vertical centering handled by margin:auto on the base rule; just
		   switch to a stacked column here. */
	}

	.sterre-popup .popup-gallery-side,
	.sterre-popup .popup-details-side {
		width: 100%;
	}
}

/* ─── Tablet PORTRAIT only (768–1024px, upright) ───
   1. Slightly smaller gallery image so it clears the left/right arrows and
      leaves more breathing room beneath the details/thumbnails.
   2. Center the details column's content as one group (was space-between,
      which crowded the thumb strip against the bottom). */
@media (orientation: portrait) and (min-width: 768px) and (max-width: 1024px) {
	.sterre-popup .popup-img {
		max-height: 42vh;   /* down from the 70vh default — narrower (clears arrows) + shorter */
	}

	.sterre-popup .popup-details-side {
		justify-content: center;   /* evenly centered top-to-bottom instead of pinned bottom */
	}
}

/* ─── Mobile shell (≤767px): edge-to-edge content card ───
   Width-driven (small screens), independent of orientation. Handles the
   full-viewport card chrome + arrow insets; the row-vs-column direction is
   decided by the orientation rules above. */
@media (max-width: 767px) {
	.sterre-popup .brx-popup-content {
		width: 100vw;
		max-width: 100vw;
		max-height: 100vh;
		height: 100vh;
		border-radius: 0;
		padding: var(--Space-xs);
	}

	.sterre-popup .popup-gallery-side,
	.sterre-popup .popup-details-side {
		padding: var(--Space-s);
	}

	.sterre-popup .popup-img {
		max-height: 55vh;
	}

	.sterre-popup .popup-prev-post {
		left: var(--Space-xs);
	}

	.sterre-popup .popup-next-post {
		right: var(--Space-xs);
	}
}