/* Plush additions for the manifest-driven Works pages (templates/*.html).
   Loaded after responsive.css. Theme rules stay in style.css / responsive.css. */

/* --- Works overview: ribbon on desktop, masonry on phones ---
   Both layouts are in the markup; an inline script drops the unused one
   before core.js starts. These rules cover the moment before it runs. */
@media only screen and (min-width: 761px) {
	.plush-works-overview [data-plush-layout="masonry"] { display: none; }
}
@media only screen and (max-width: 760px) {
	.plush-works-overview [data-plush-layout="ribbon"] { display: none; }
}

/* Heading above the ribbon, which otherwise floats in an empty page */
.plush-overview-head {
	position: fixed;
	left: 0;
	bottom: calc(75vh + 18px); /* the medium ribbon is 50vh tall and centred, so its top edge is at 25vh */
	width: 100%;
	text-align: center;
	pointer-events: none;
	z-index: 3;
}
.plush-overview-head h1 {
	margin: 0;
	font-size: 60px;
	line-height: 65px;
	text-transform: uppercase;
}
.plush-overview-head h1 span {
	display: block;
	font-family: 'Montserrat', sans-serif;
	font-size: 14px;
	line-height: 20px;
	font-weight: 700;
	letter-spacing: 0.05em;
	color: #808080;
}
@media only screen and (max-width: 1200px), only screen and (max-height: 820px) {
	.plush-overview-head h1 { font-size: 40px; line-height: 44px; }
}

/* --- Works overview: the whole cover is the link ---
   render.py promotes .ashade-album-item__inner to an anchor, so these only have
   to undo what an anchor brings with it. The theme already scales the hovered
   tile, so the extra cue is the Explore button waking up rather than a second
   transform that would fight that scale - it carries opacity 0.7 and its own
   transition already, so this is the theme's own mechanism, not a new one. */
.plush-cover-link {
	display: block;
	color: inherit;
	text-decoration: none;
}
.ashade-album-item:hover .plush-cover-link .ashade-button {
	opacity: 1;
	color: #BBFF00;
	border-color: #BBFF00;
}

/* --- Placeholder tiles (inactive manifest entries) --- */
.plush-placeholder img {
	background: #1c1c20;
}
.ashade-album-item.plush-placeholder .ashade-album-item__overlay {
	display: none;
}
.plush-featured-grid .plush-placeholder {
	cursor: default;
}

/* --- Individual gallery: images scroll inside their section --- */
.plush-gallery-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 30px;
	margin: 0 0 24px 0;
}
.plush-gallery-head .ashade-intro {
	margin: 0;
	text-align: left;
}
.plush-gallery-head .ashade-learn-more {
	flex: none;
}
@media only screen and (max-width: 760px) {
	.plush-gallery-head {
		display: block;
	}
	.plush-gallery-head .ashade-learn-more {
		display: inline-block;
		margin-top: 12px;
	}
}
.plush-gallery-scroll {
	max-height: calc(100vh - 260px); /* header + intro above, breathing room below: the box fits one screen */
	min-height: 320px;
	overflow-y: auto;
	overscroll-behavior: auto;
	-webkit-overflow-scrolling: touch;
	padding-right: 10px;
	scrollbar-width: thin;
	scrollbar-color: #5c5c60 #17171b;
}
.plush-gallery-scroll::-webkit-scrollbar { width: 6px; }
.plush-gallery-scroll::-webkit-scrollbar-track { background: #17171b; }
.plush-gallery-scroll::-webkit-scrollbar-thumb { background: #5c5c60; }
/* Phones scroll the page itself: a nested scroll box swallows thumb-drags. */
@media only screen and (max-width: 760px) {
	.plush-gallery-scroll {
		max-height: none;
		min-height: 0;
		overflow-y: visible;
		padding-right: 0;
	}
}

/* --- Individual gallery: the featured-tile grid ---
   Three columns of 3:4 portrait cells with a 2x2 anchor dropped in every few
   rows, alternating side down the page. tools/render.py decides which entry is
   an anchor and writes each tile's desktop cell as --r/--c; this file only has
   to honour those at three columns and ignore them at two and one, which is why
   the narrow rules can fall back to plain auto-flow with a single override.

   An anchor is not given its own aspect-ratio on desktop: spanning two columns
   and two rows makes it (2c + gap) by (2 * 4c/3 + gap), about 0.755:1, so a 3:4
   photo loses well under a percent of its height. Letting the span define it
   keeps the anchor locked to the surrounding rows instead of drifting off them. */
.plush-featured-grid {
	--plush-grid-gap: 20px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--plush-grid-gap);
	align-content: start;
}
.plush-featured-grid > * {
	grid-column: var(--c) / span 1;
	grid-row: var(--r) / span 1;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	display: block;
	position: relative;
}
.plush-featured-grid > .plush-tile--anchor {
	grid-column: var(--c) / span 2;
	grid-row: var(--r) / span 2;
	aspect-ratio: auto;
}
/* The theme sizes gallery images from the justifiedGallery plugin, which no
   longer runs here, so the cell does the sizing and the photo fills it.

   The image is taken out of flow deliberately. Left in flow it contributes its
   own height, and since height:100% against an auto-height parent resolves to
   auto, a 3:4 photo inside an anchor made the anchor 721x962 - its own aspect -
   instead of the 721x955 the two spanned rows call for, stretching those rows
   and knocking the grid out of alignment. Absolute positioning lets the cell
   size come only from the aspect-ratio or the row span. */
.plush-featured-grid > * > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Two columns: an anchor gives up its row span and simply takes the full width,
   carrying its own 3:4 so nothing crops. With every tile back on auto-flow the
   side alternation has nothing to alternate between, which is the intent. */
@media only screen and (max-width: 1100px) {
	.plush-featured-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.plush-featured-grid > * {
		grid-column: auto;
		grid-row: auto;
	}
	.plush-featured-grid > .plush-tile--anchor {
		grid-column: 1 / -1;
		grid-row: auto;
		aspect-ratio: 3 / 4;
	}
}

/* One column: anchors stop being anchors and become ordinary 3:4 tiles, so the
   page is an even single-column stack with no tall crop anywhere. */
@media only screen and (max-width: 760px) {
	.plush-featured-grid {
		--plush-grid-gap: 14px;
		grid-template-columns: 1fr;
	}
	.plush-featured-grid > .plush-tile--anchor {
		grid-column: auto;
		aspect-ratio: 3 / 4;
	}
}

/* --- Individual gallery: pagination, phones only ---
   One column of 3:4 tiles makes a long gallery a very long scroll, so phones
   get pages. Desktop and tablet keep the continuous scroll and never see the
   control: the nav is built by the inline script in templates/gallery.html but
   only displayed here, and .is-paged-out only bites inside this query, so a tile
   left carrying the class after a resize is inert rather than invisible. */
.plush-gallery-pages {
	display: none;
}
@media only screen and (max-width: 760px) {
	.plush-gallery-pages {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		margin: 0 0 16px 0;
	}
	/* The second pager sits below the last tile, so its breathing room is above. */
	.plush-gallery-pages--foot {
		margin: 16px 0 0 0;
	}
	.plush-gallery-pages button {
		min-width: 40px;
		min-height: 40px;          /* a real tap target, not just a number */
		padding: 0 12px;
		border: 1px solid #2a2a31;
		border-radius: 6px;
		background: #17171b;
		color: #808080;
		font-family: 'Montserrat', sans-serif;
		font-size: 13px;
		font-weight: 700;
		cursor: pointer;
		transition: color 0.3s, border-color 0.3s;
	}
	.plush-gallery-pages button.is-current {
		color: #BBFF00;
		border-color: #BBFF00;
	}
	.plush-featured-grid > .is-paged-out {
		display: none;
	}
}

/* --- Works overview, tablet landscape (761-1366px) ---
   The desktop ribbon was tuned at >=1440, where 25vh happens to leave room for the
   heading between the header and the ribbon. In the landscape-tablet band the
   viewport is shorter, 25vh shrinks with it, and two things break: the heading
   climbs into the fixed nav, and the rotated card titles outgrow the card.

   Both fixes key off the same two facts:
   - 115px is the header height ashade.header.measure() reports, i.e. the transparent
     state, and it is constant at every breakpoint. Reserve that, never the compact
     .is-solid bar: the ribbon pages set body height to the window and never scroll,
     so the header stays at its full height for the whole visit.
   - ashade-ribbon.js gives each medium card an inline height of window.height()/2 and
     sets .ashade-album-item__title's width to that same value, so the card is always
     50vh tall and the rotated title is centred over exactly 50vh. The card's top edge
     is therefore the carousel's padding-top alone. */
@media only screen and (min-width: 761px) and (max-width: 1366px) {

	/* Heading: tucked 12px under the header, the same clearance desktop gives itself
	   at 1440. Anchoring the top (rather than the theme's 25vh bottom) is what keeps
	   it off the nav, since 25vh collapses with the viewport on a landscape tablet
	   and Safari's chrome takes another slice of that height. */
	.plush-works-overview .plush-overview-head {
		top: 127px; /* 115 header + 12 */
		bottom: auto;
	}

	/* Ribbon follows the heading down: 24px under it. The heading has two size tiers
	   and the box hugs whichever is active, so each tier gets its own figure and the
	   gap stays 24px either way. 234 = 127 + 83 (the 60px tier). */
	.plush-works-overview.ashade-albums-template--carousel .ashade-albums-carousel-wrap .ashade-albums-carousel.is-medium {
		padding-top: 234px;
	}
}

/* The shorter 40px heading tier, on the same terms as the font-size rule above:
   narrow, or short enough that the big tier was already stood down. 215 = 127 + 64 + 24. */
@media only screen and (min-width: 761px) and (max-width: 1200px),
       only screen and (min-width: 761px) and (max-width: 1366px) and (max-height: 820px) {
	.plush-works-overview.ashade-albums-template--carousel .ashade-albums-carousel-wrap .ashade-albums-carousel.is-medium {
		padding-top: 215px;
	}
}

/* Rotated titles: scale with the card instead of sitting at a fixed 30px. 30px is the
   theme size at a 512px card (a 1024px-tall viewport), which is 2.9vh of a 50vh card;
   the caps keep a viewport tall enough for the theme's own sizes identical to today and
   the floors stop the label going illegible. The longest current label, "Paint Work &
   Accident Repair", runs about 13.5x the font size plus the 50px lead-in, which stays
   inside a 50vh card down to roughly a 650px-tall viewport.

   This is not confined to the tablet band: the card is 50vh at every width, so a short
   desktop window clips the same way. 1440x900 sheared 3px off that label before this. */
@media only screen and (min-width: 761px) {
	.plush-works-overview .ashade-albums-carousel.is-medium .ashade-album-item__title h2 {
		font-size: clamp(16px, 2.9vh, 30px);
		line-height: 1.17;
	}
	.plush-works-overview .ashade-albums-carousel.is-medium .ashade-album-item__title h2 span {
		font-size: clamp(9px, 1.17vh, 12px);
		line-height: 1.25;
	}
	.plush-works-overview .ashade-albums-carousel.is-medium .ashade-album-item__title:before {
		top: clamp(11px, 1.66vh, 17px);
	}
}

/* --- Lightbox: keep the prev/next arrows on touch ---
   PhotoSwipe stamps either pswp--touch or pswp--notouch on the root once at init,
   from feature detection, and the default skin hangs "no arrows on touch screens"
   off it. The buttons are still built and still live - the UI binds onTap prev/next
   to them whatever the input - so on a phone they are invisible rather than absent,
   and nothing tells a visitor the gallery moves. Since the hiding is only that one
   CSS rule and plush.css loads after default-skin.css, plain rules of equal
   specificity win: no !important, and no change to the PhotoSwipe init options.

   Two skin rules are deliberately left alone. .pswp__ui--one-slide hides the arrows
   with display, so a one-image gallery still shows none, which is right. And the
   theme already sets opacity: 1 !important on both arrows, so the idle fade and the
   tap-to-toggle fade never reached them - visibility was all that was left. */
.pswp--touch .pswp__button--arrow--left,
.pswp--touch .pswp__button--arrow--right {
	visibility: visible;
	pointer-events: auto;
	/* 56px square, comfortably over the 44px minimum tap target, centred on its own
	   height rather than the skin's 100px-tall default box. */
	width: 56px;
	height: 56px;
	margin-top: -28px;
}
.pswp--touch .pswp__button--arrow--left {
	left: 8px;
}
.pswp--touch .pswp__button--arrow--right {
	right: 8px;
}
/* The photo runs full-bleed on a phone, so the glyph needs to carry its own
   background or it disappears into a bright image. A disc keeps it readable
   without putting a bar across the picture. */
.pswp--touch .pswp__button--arrow--left:before,
.pswp--touch .pswp__button--arrow--right:before {
	width: 44px;
	height: 44px;
	left: 50%;
	top: 50%;
	margin: -22px 0 0 -22px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.45);
	color: rgba(255, 255, 255, 0.9);
	font-size: 22px;
	line-height: 44px;
	text-align: center;
}