/*
 * News unit-showcase gallery — a hero image with a column of thumbnails to the
 * side (stacked below on mobile). Every image is a [data-lightbox] member of
 * the "news-gallery" group, so clicking any opens the shared lightbox
 * (#liv-rig-lightbox) with its in-lightbox thumbnail strip.
 */

/* Pull the showcase up toward the end of the article so the gallery reads as
   part of the story. The default .liv-section padding stacks this section's
   top padding on top of the prose section's bottom padding (up to 8rem each),
   leaving a large empty band; tighten both at this boundary.
   NOTE: the showcase selector must out-specify plain `.liv-section`
   (sections.css is imported AFTER this file, so equal specificity would lose)
   — hence `.liv-section.liv-news-showcase`. */
.liv-section.liv-news-showcase {
	padding-block-start: clamp(0.5rem, 1vw, 1rem);
}
.liv-news-detail .liv-section--paper:has(+ .liv-news-showcase) {
	padding-bottom: clamp(0.75rem, 1.5vw, 1.5rem);
}

.liv-news-showcase__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(0.75rem, 1.5vw, 1.25rem);
}
@media (min-width: 768px) {
	.liv-news-showcase__grid {
		grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr);
		align-items: start;
	}
}

.liv-news-showcase__hero {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--liv-ink-800);
	border-radius: var(--r-md, 0.5rem);
	overflow: hidden;
	cursor: pointer;
	aspect-ratio: 16 / 10;
}
.liv-news-showcase__hero img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--liv-transition);
}
.liv-news-showcase__hero:hover img,
.liv-news-showcase__hero:focus-visible img {
	transform: scale(1.03);
}

.liv-news-showcase__thumbs {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
	gap: clamp(0.5rem, 1vw, 0.75rem);
}
@media (min-width: 768px) {
	/* Two-column panel sized to match the hero's height (symmetrical). The 2/3
	   ratio is exact for the current layout: hero:panel columns are 2.4:1, so
	   panel-width × 1.5 = hero-width × 10/16 = hero-height. Extra photos scroll
	   vertically within the panel. If the column split or hero ratio changes,
	   recompute this. The right padding keeps the scrollbar in its own lane,
	   clear of the images. */
	.liv-news-showcase__thumbs {
		grid-template-columns: repeat(2, 1fr);
		gap: 0.5rem;
		aspect-ratio: 2 / 3;
		overflow-y: auto;
		padding-right: 1.1rem;
		scrollbar-width: thin;
		scrollbar-color: var(--liv-leaf-500) rgba(255, 255, 255, 0.07);
		overscroll-behavior: contain;
	}
	.liv-news-showcase__thumbs > li { min-width: 0; }
}
/* Slim green scrollbar in its own channel, separated from the tiles by the
   panel's right padding (WebKit; Firefox uses scrollbar-color above). */
.liv-news-showcase__thumbs::-webkit-scrollbar { width: 9px; }
.liv-news-showcase__thumbs::-webkit-scrollbar-track {
	background: rgba(255, 255, 255, 0.07);
	border-radius: 5px;
}
.liv-news-showcase__thumbs::-webkit-scrollbar-thumb {
	background: var(--liv-leaf-500);
	border-radius: 5px;
}

.liv-news-showcase__thumb {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: var(--liv-ink-800);
	border-radius: var(--r-sm, 0.375rem);
	overflow: hidden;
	cursor: pointer;
	aspect-ratio: 4 / 3;
	transition: border-color var(--liv-transition), transform var(--liv-transition);
}
.liv-news-showcase__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.liv-news-showcase__thumb:hover,
.liv-news-showcase__thumb:focus-visible {
	border-color: var(--liv-leaf-300);
	transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
	.liv-news-showcase__hero img,
	.liv-news-showcase__thumb {
		transition: none;
	}
	.liv-news-showcase__hero:hover img,
	.liv-news-showcase__hero:focus-visible img { transform: none; }
	.liv-news-showcase__thumb:hover,
	.liv-news-showcase__thumb:focus-visible { transform: none; }
}