/* -----------------------------------------------------------------------
   Galleries (inc/galleries.php) — photos, videos and podcast episodes.
   Loaded only where one can actually appear. RTL-first, logical properties.

   The same three components serve a wide profile column and a narrow
   sidebar widget, so every grid is driven by --sg-cols (set inline from the
   widget's column setting) with an auto-fit floor underneath it: a two-column
   request inside a 300px sidebar collapses to one on its own.
   ----------------------------------------------------------------------- */

.shivuk-gallery {
	--sg-cols: 3;
	--sg-gap: clamp(0.6rem, 1.4vw, 0.95rem);

	margin-block: clamp(1.5rem, 3vw, 2.25rem);
}

.shivuk-gallery__title {
	margin: 0 0 0.9rem;
	font-size: clamp(1.1rem, 1rem + 0.6vw, 1.4rem);
	font-weight: 800;
	letter-spacing: -0.02em;
}

.shivuk-gallery__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, calc((100% - (var(--sg-cols) - 1) * var(--sg-gap)) / var(--sg-cols))), 1fr));
	gap: var(--sg-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.shivuk-gallery__item {
	margin: 0;
	min-inline-size: 0;
}

/* --- Photos -------------------------------------------------------------- */

.shivuk-shot {
	display: block;
	inline-size: 100%;
	padding: 0;
	border: 0;
	border-radius: 14px;
	overflow: hidden;
	background: var(--shivuk-color-surface);
	cursor: zoom-in;
	aspect-ratio: 4 / 3;
	box-shadow: var(--shivuk-shadow-sm);
	transition: transform 0.3s var(--shivuk-ease), box-shadow 0.3s var(--shivuk-ease);
}

.shivuk-shot__img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s var(--shivuk-ease);
}

.shivuk-shot:hover {
	box-shadow: var(--shivuk-shadow-md);
	transform: translateY(-2px);
}

.shivuk-shot:hover .shivuk-shot__img {
	transform: scale(1.05);
}

.shivuk-shot:focus-visible {
	outline: 2px solid var(--shivuk-color-accent);
	outline-offset: 3px;
}

.shivuk-shot__caption {
	display: block;
	margin-block-start: 0.4rem;
	font-size: 0.8rem;
	line-height: 1.45;
	color: var(--shivuk-color-muted);
}

/* --- Videos -------------------------------------------------------------- */

.shivuk-video {
	position: relative;
	display: block;
	inline-size: 100%;
	padding: 0;
	border: 0;
	border-radius: 14px;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	cursor: pointer;
	text-align: start;
	text-decoration: none;
	/* The fallback field behind a poster-less provider (Vimeo), and the tint
	   a YouTube thumbnail sits on while it loads. */
	background: linear-gradient(145deg, #123553, #071624);
	box-shadow: var(--shivuk-shadow-sm);
	transition: transform 0.3s var(--shivuk-ease), box-shadow 0.3s var(--shivuk-ease);
}

.shivuk-video:hover {
	transform: translateY(-2px);
	box-shadow: var(--shivuk-shadow-md);
}

.shivuk-video:focus-visible {
	outline: 2px solid var(--shivuk-color-accent);
	outline-offset: 3px;
}

.shivuk-video__poster {
	position: absolute;
	inset: 0;
}

.shivuk-video__poster img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
	/* YouTube's hqdefault is 4:3 with black bars; cover + a slight scale drops
	   them off the tile instead of showing letterboxing inside a 16:9 frame. */
	transform: scale(1.02);
	transition: transform 0.5s var(--shivuk-ease), filter 0.35s var(--shivuk-ease);
}

.shivuk-video:hover .shivuk-video__poster img {
	transform: scale(1.06);
	filter: brightness(0.88);
}

.shivuk-video__play {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	transform: translate(50%, -50%);
	display: grid;
	place-items: center;
	inline-size: 58px;
	block-size: 58px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: #0d2033;
	box-shadow: 0 10px 26px rgba(4, 12, 20, 0.45);
	transition: transform 0.3s var(--shivuk-ease), background-color 0.3s var(--shivuk-ease);
}

.shivuk-video__play svg {
	inline-size: 24px;
	block-size: 24px;
	/* The glyph points the way the video runs, not the way the page reads. */
	transform: scaleX(-1);
}

.shivuk-video:hover .shivuk-video__play {
	background: var(--shivuk-color-accent);
	color: var(--shivuk-color-accent-contrast);
	transform: translate(50%, -50%) scale(1.08);
}

.shivuk-video__title {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	padding: 2.2rem 0.9rem 0.7rem;
	color: #ffffff;
	font-size: 0.9rem;
	font-weight: 700;
	line-height: 1.4;
	background: linear-gradient(180deg, transparent, rgba(4, 12, 20, 0.85));
	/* Two lines maximum — a title is a label here, not a paragraph. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* The link fallback for an unrecognised host has no poster to sit on, so its
   title is centred under the play glyph instead of pinned to the bottom. */
.shivuk-video--link .shivuk-video__title {
	background: none;
	text-align: center;
}

.shivuk-video--playing {
	background: #000000;
	cursor: default;
}

.shivuk-video__frame {
	inline-size: 100%;
	block-size: 100%;
	border: 0;
	display: block;
}

/* --- Podcast episodes ---------------------------------------------------- */

.shivuk-episode {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 0.65rem;
	border: 1px solid var(--shivuk-color-border);
	border-radius: 16px;
	background: var(--shivuk-color-bg);
	color: inherit;
	text-decoration: none;
	block-size: 100%;
	transition:
		border-color 0.25s var(--shivuk-ease),
		box-shadow 0.25s var(--shivuk-ease),
		transform 0.25s var(--shivuk-ease);
}

.shivuk-episode:hover,
.shivuk-episode:focus-visible {
	transform: translateY(-2px);
	border-color: color-mix(in srgb, var(--shivuk-color-accent) 45%, var(--shivuk-color-border));
	box-shadow: var(--shivuk-shadow-md);
	color: inherit;
}

.shivuk-episode__art {
	flex: none;
	display: block;
	inline-size: 68px;
	block-size: 68px;
	border-radius: 12px;
	overflow: hidden;
	background: var(--shivuk-color-accent-soft);
}

.shivuk-episode__art img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
}

.shivuk-episode__glyph {
	display: grid;
	place-items: center;
	inline-size: 100%;
	block-size: 100%;
	color: var(--shivuk-color-accent);
}

.shivuk-episode__glyph svg {
	inline-size: 26px;
	block-size: 26px;
}

.shivuk-episode__body {
	flex: 1 1 auto;
	min-inline-size: 0;
}

.shivuk-episode__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.4;
	color: var(--shivuk-color-text);
}

.shivuk-episode:hover .shivuk-episode__title {
	color: var(--shivuk-color-accent);
}

.shivuk-episode__meta {
	display: block;
	margin-block-start: 0.2rem;
	font-size: 0.78rem;
	color: var(--shivuk-color-muted);
}

.shivuk-episode__play {
	flex: none;
	display: grid;
	place-items: center;
	inline-size: 34px;
	block-size: 34px;
	border-radius: 50%;
	background: var(--shivuk-color-accent-soft);
	color: var(--shivuk-color-accent);
	transition: background-color 0.25s var(--shivuk-ease), color 0.25s var(--shivuk-ease);
}

.shivuk-episode__play svg {
	inline-size: 16px;
	block-size: 16px;
	transform: scaleX(-1);
}

.shivuk-episode:hover .shivuk-episode__play {
	background: var(--shivuk-color-accent);
	color: var(--shivuk-color-accent-contrast);
}

/* --- Lightbox ------------------------------------------------------------ */

.shivuk-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(0.5rem, 2vw, 1.5rem);
	padding: clamp(1rem, 4vw, 3rem);
	background: rgba(4, 10, 18, 0.92);
	backdrop-filter: blur(6px);
}

.shivuk-lightbox[hidden] {
	display: none;
}

/* The page behind must not scroll under an open lightbox. */
body.shivuk-lightbox-open {
	overflow: hidden;
}

.shivuk-lightbox__figure {
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	max-block-size: 100%;
}

.shivuk-lightbox__img {
	max-inline-size: min(1100px, 100%);
	max-block-size: 78vh;
	object-fit: contain;
	border-radius: 10px;
	box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
}

.shivuk-lightbox__caption {
	margin: 0;
	max-inline-size: 70ch;
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.9rem;
	line-height: 1.6;
	text-align: center;
}

.shivuk-lightbox__caption[hidden] {
	display: none;
}

.shivuk-lightbox__close,
.shivuk-lightbox__nav {
	flex: none;
	display: grid;
	place-items: center;
	inline-size: 46px;
	block-size: 46px;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	color: #ffffff;
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s var(--shivuk-ease), transform 0.2s var(--shivuk-ease);
}

.shivuk-lightbox__close:hover,
.shivuk-lightbox__nav:hover {
	background: rgba(255, 255, 255, 0.2);
	transform: scale(1.06);
}

.shivuk-lightbox__close:focus-visible,
.shivuk-lightbox__nav:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 3px;
}

.shivuk-lightbox__close {
	position: absolute;
	inset-block-start: clamp(0.75rem, 2vw, 1.5rem);
	inset-inline-end: clamp(0.75rem, 2vw, 1.5rem);
	font-size: 1.9rem;
}

.shivuk-lightbox__nav[hidden] {
	display: none;
}

@media (max-width: 640px) {
	/* Thumb-reachable on a phone: the pager sits at the foot of the overlay
	   rather than at its far edges. */
	.shivuk-lightbox {
		flex-wrap: wrap;
	}

	.shivuk-lightbox__figure {
		order: -1;
		flex: 1 0 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.shivuk-shot,
	.shivuk-shot__img,
	.shivuk-video,
	.shivuk-video__poster img,
	.shivuk-video__play,
	.shivuk-episode,
	.shivuk-episode__play,
	.shivuk-lightbox__close,
	.shivuk-lightbox__nav {
		transition: none;
	}

	.shivuk-shot:hover,
	.shivuk-shot:hover .shivuk-shot__img,
	.shivuk-video:hover,
	.shivuk-video:hover .shivuk-video__poster img,
	.shivuk-episode:hover,
	.shivuk-lightbox__close:hover,
	.shivuk-lightbox__nav:hover {
		transform: none;
	}

	.shivuk-video:hover .shivuk-video__play {
		transform: translate(50%, -50%);
	}
}