/*
 * Attic Capital — full-bleed editorial layout for single-showcase.php.
 * Enqueued only when is_singular( 'showcase' ) — see functions.php.
 */

.ac-showcase {
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}

/* Opening title screen — the very first thing on the page, pure white, no
   image. Clears the fixed header, then centers title/meta/scroll-cue in
   the remaining viewport height. Deliberately 90vh, not 100vh: the reveal
   section's top (and the top of the shrunk photo, see __frame below) is
   already ~10vh into view on initial load, before any scrolling. */
.ac-showcase-hero-title {
	width: 100%;
	min-height: 90vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: var(--ac-bg);
	padding: 10rem 3rem 4rem;
	text-align: center;
}

/* "Scroll to explore" indicator — CSS-only bounce, no default easing. Sits
   at the bottom of the title screen, cueing the image reveal that follows. */
.ac-showcase-hero__scroll {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.85rem;
	/* Matches .ac-showcase-hero__byline's margin-top below, so the byline
	   sits evenly centered between the subtitle above and this below. */
	margin: 2rem 0 0;
}

.ac-showcase-hero__scroll-arrow {
	width: 0.5rem;
	height: 0.5rem;
	border-right: 1px solid var(--ac-ink);
	border-bottom: 1px solid var(--ac-ink);
	opacity: 0.5;
	animation: ac-scroll-bounce 1.8s var(--ac-ease-out) infinite;
}

/* transform, not margin-top: this element sits in the same centered flex
   column as the title. Animating margin changes the column's total content
   height every frame, so justify-content:center kept re-centering (and
   visibly shifting) the whole block, including the title, in a loop —
   that was the actual cause of the page "pulsing" on load. transform is
   purely visual and never affects layout/flow. */
@keyframes ac-scroll-bounce {
	0%,
	100% {
		opacity: 0.3;
		transform: rotate(45deg) translateY(0);
	}
	50% {
		opacity: 0.7;
		transform: rotate(45deg) translateY(0.5rem);
	}
}

.ac-showcase-hero__title {
	margin: 0 0 3rem;
	font-family: var(--ac-font-label);
	font-weight: 100;
	/* -15% over the previous clamp(3rem, 9vw, 8.5rem). */
	font-size: clamp(2.55rem, 7.65vw, 7.225rem);
	line-height: 0.95;
	letter-spacing: -0.02em;
	color: var(--ac-ink);
}

/* Subtitle under the title — same small tracked-out caps as the old
   Year/Category/Author meta row it replaced. */
.ac-showcase-hero__subtitle {
	margin: 0;
	font-family: var(--ac-font-label);
	/* +10% over the previous 0.7rem. */
	font-size: 0.77rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ac-ink);
	opacity: 0.6;
}

/* Second subtitle line (byline) — identical typography, evenly spaced
   between the subtitle above and the scroll cue below (both use 2rem). */
.ac-showcase-hero__byline {
	margin-top: 2rem;
}

/* Scroll-driven image reveal. The photo is always full width/full size —
   nothing scales, so its crop/framing never changes. At rest, a GSAP
   clip-path mask hides everything but a top-anchored, centered 60%-size
   box; as the user scrolls, that box's edges open outward until the full
   frame is visible — the same "grows to full size" look the old
   transform:scale() version had, just via masking a static image instead
   of resizing it. See assets/js/showcase-scroll.js. Falls back to the
   plain full image if JS fails to load, since __frame is sized 100%/100%
   either way and CSS itself applies no clipping — only the JS-driven
   "from" state does. */
.ac-showcase-reveal {
	position: relative;
	background: var(--ac-bg);
}

.ac-showcase-reveal__pin {
	/* Taller than a full viewport, so background-size:cover has more
	   room and crops less of the photo top/bottom. */
	height: 142.5vh;
	width: 100%;
	overflow: hidden;
}

.ac-showcase-reveal__frame {
	width: 100%;
	height: 100%;
	background-color: var(--ac-ink);
	background-size: cover;
	background-position: center;
}

.ac-showcase-body {
	width: 100%;
	/* No border-top (sat directly below the reveal image, the first image
	   block) or border-bottom (sat directly above the gallery, the second
	   image block) — both removed per request. */
}

.ac-showcase-body__content {
	max-width: 70ch;
	margin: 0 auto;
	padding: 9rem 2rem;
	font-family: var(--ac-font-display);
	font-size: 1.25rem;
	line-height: 1.7;
}

.ac-showcase-body__content p {
	margin: 0 0 2rem;
}

/* Podcast player embed — width matches the text column automatically
   (inherited from .ac-showcase-body__content's max-width: 70ch); this just
   adds consistent vertical spacing to match the surrounding paragraphs. */
.ac-showcase-body__content .ac-embed {
	margin: 3rem 0;
}

/* Vertical parallax image — also width-matched to the text column. The
   inner frame is taller than its container and offset upward at rest;
   assets/js/showcase-scroll.js slides it vertically within that overflow
   as the section scrolls through the viewport, so it never exposes empty
   space at the top/bottom edges while sliding. */
.ac-showcase-parallax {
	position: relative;
	width: 100%;
	/* +20% over the previous 46.08rem (38.4rem, 32rem originally). */
	height: 55.296rem;
	overflow: hidden;
	margin: 4rem 0;
}

.ac-showcase-parallax__inner {
	position: absolute;
	top: -12%;
	left: 0;
	width: 100%;
	height: 124%;
	background-color: var(--ac-ink);
	background-size: cover;
	background-position: center;
}

/* General blockquote styling (independent of the lede treatment below) —
   the imported article has several beyond just the opening one. */
.ac-showcase-body__content blockquote {
	margin: 3rem 0;
	padding-left: 2rem;
	border-left: 1px solid var(--ac-brass);
	font-style: italic;
}

.ac-showcase-body__content blockquote p {
	margin: 0 0 1rem;
}

/* Quote highlight — the opening paragraph (if the content starts with one)
   and every blockquote anywhere in the body (ac_wrap_lede_and_quotes() in
   functions.php), promoted to a larger size. Each word is individually
   faded/highlighted by GSAP as it scrolls into view (see
   assets/js/showcase-scroll.js); the ".ac-showcase-body__content
   p"/"blockquote" selectors above are more specific by element+class, so
   this needs the same specificity to actually override their margin. */
.ac-showcase-body__content p.ac-showcase-body__quote-highlight,
.ac-showcase-body__content blockquote.ac-showcase-body__quote-highlight {
	margin: 0 0 3rem;
	/* +10% over the previous clamp(1.75rem, 3vw, 2.75rem). */
	font-size: clamp(1.925rem, 3.3vw, 3.025rem);
	line-height: 1.45;
	/* Explicitly light, not the browser's normal/bold default — Fraunces
	   300 is loaded specifically for this. */
	font-weight: 300;
	/* Neither the italic nor the left border from the general blockquote
	   rule above should apply to the lede treatment. */
	font-style: normal;
	padding-left: 0;
	border-left: none;
}

/* Horizontal drag/swipe film-strip gallery. Native overflow-x scrolling
   handles touch swipe on mobile for free (browsers already do this
   smoothly); desktop click-and-drag is added in assets/js/showcase-scroll.js
   since browsers don't support that on a scrollable div out of the box. */
.ac-showcase-gallery {
	width: 100%;
	padding: 9rem 0;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	/* Hide the scrollbar — dragging/swiping is the intended interaction,
	   not a visible scrollbar track. */
	scrollbar-width: none;
	/* Settles on an image boundary after a drag/swipe/throw ends, instead
	   of resting wherever momentum happened to stop. Native touch scroll
	   already respects this with zero JS; desktop's throw physics are in
	   assets/js/showcase-scroll.js, which hands off to this for the final
	   glide-into-place once its own momentum decays. */
	scroll-snap-type: x mandatory;
}

.ac-showcase-gallery::-webkit-scrollbar {
	display: none;
}

.ac-showcase-gallery.is-dragging {
	/* Prevents text/image selection while dragging. */
	user-select: none;
}

/* scroll-snap-type: mandatory fights small incremental scrollLeft writes —
   the browser treats each one as its own completed scroll gesture and
   immediately snaps it back to the current image, since a 2-3px nudge
   never crosses the snap threshold. That silently defeated every frame of
   the eased drag/throw in assets/js/showcase-scroll.js (target kept
   climbing, current never moved). Snapping is switched off for the whole
   drag+throw and only re-enabled at the final settle. */
.ac-showcase-gallery.is-interacting {
	scroll-snap-type: none;
}

.ac-showcase-gallery__track {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	/* Generous separation between frames — cinematic pacing, not a dense strip. */
	gap: 4rem;
	padding: 0 3rem;
	width: max-content;
}

.ac-showcase-gallery__item {
	margin: 0;
	flex: 0 0 auto;
	height: 80vh;
	scroll-snap-align: start;
}

.ac-showcase-gallery__image {
	/* Full-size: sized by height, width follows the image's own aspect
	   ratio, rather than being cropped/stretched to a fixed box. Overrides
	   base.css's global img{max-width:100%}, which would otherwise shrink
	   these down to their flex item's (auto) width. */
	height: 100%;
	width: auto;
	max-width: none;
	-webkit-user-drag: none;
	/* Zero border radius, no drop-shadow — hard edges only, per brand rules. */
	border-radius: 0;
	box-shadow: none;
}

/* Specifications — categorized label/value grid, Valor-style. */
.ac-showcase-specs {
	width: 100%;
	/* No border-top — that hairline sat directly below the gallery (the
	   second image block); removed per request. */
}

.ac-showcase-specs__inner {
	max-width: 90rem;
	margin: 0 auto;
	padding: 8rem 3rem;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
	gap: 4rem 5rem;
}

.ac-showcase-specs__group-title {
	margin: 0 0 1.5rem;
	font-family: var(--ac-font-label);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ac-brass);
}

.ac-showcase-specs__rows {
	margin: 0;
}

.ac-showcase-specs__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 2rem;
	padding: 1.1rem 0;
	border-bottom: 1px solid var(--ac-line);
}

.ac-showcase-specs__row:first-child {
	border-top: 1px solid var(--ac-line);
}

.ac-showcase-specs__row dt {
	margin: 0;
	flex-shrink: 0;
	font-family: var(--ac-font-label);
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--ac-ink);
	opacity: 0.55;
}

.ac-showcase-specs__row dd {
	margin: 0;
	font-family: var(--ac-font-display);
	font-size: 1.05rem;
	color: var(--ac-ink);
	text-align: right;
}

/* Mobile fixes. Two issues showed up testing at ~390px wide (found via a
   scripted mobile-viewport screenshot pass, not guessed):
   1. The lede's desktop-tuned minimum size (clamp floor 1.925rem) is large
      enough on a narrow screen that as it scrolls past, it's visibly
      colliding with the fixed transparent header (logo/menu circle) for a
      noticeable stretch, rather than clearing it quickly. Bigger top
      clearance + a smaller mobile-specific size both shrink that window.
   2. The title screen's 90vh + 10rem top padding was tuned against a wide
      desktop aspect ratio; on a tall narrow phone it left a large dead gap
      between the content and the bottom of the section. */
@media (max-width: 600px) {
	.ac-showcase-hero-title {
		min-height: 80vh;
		padding: 7rem 1.5rem 3rem;
	}

	.ac-showcase-body__content {
		padding: 12rem 1.5rem 6rem;
	}

	.ac-showcase-body__content p.ac-showcase-body__quote-highlight,
	.ac-showcase-body__content blockquote.ac-showcase-body__quote-highlight {
		font-size: 1.5rem;
	}
}