/**
 * Digi-Analogi Manual Gallery - front-end styles.
 *
 * Deliberately uses only the theme's own --da-* custom properties (defined
 * in the digi-analogi theme's main.css :root, always present on any page
 * this stylesheet loads on) - no new color/radius/shadow values of its
 * own, so the gallery reads as part of the same design system rather than
 * a bolted-on "WordPress gallery" look. All spacing/sizing uses logical
 * properties (margin-inline, padding-inline, inset-inline-*) so RTL works
 * correctly with no separate [dir="rtl"] overrides anywhere in this file.
 *
 * @package Digi_Analogi_Manual_Gallery
 */

.da-manual-gallery {
	margin-block-start: clamp(2.5rem, 6vw, 4rem);
	padding-block-start: clamp(2rem, 5vw, 3rem);
	border-block-start: 1px solid var(--da-border, rgba(255, 255, 255, 0.12));
}

.da-manual-gallery-title {
	margin-block-end: 1.25rem;
}

.da-manual-gallery-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 640px) {
	.da-manual-gallery-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 960px) {
	.da-manual-gallery-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 1.25rem;
	}
}

/* The role="listitem" wrapper around each button (added so the button
   itself keeps its native, unoverridden "button" accessible role - see
   render_gallery_item_image()/render_gallery_item_video()) is the actual
   sized/bordered grid item; the button inside just fills it exactly.
   Deliberately NOT display:contents - that has a history of some browser/
   screen-reader combinations dropping an ARIA role from an element with
   display:contents, which would silently reintroduce the exact
   accessibility bug this wrapper exists to fix. This costs nothing:
   two real, normally-laid-out boxes (wrapper + button) look and behave
   identically to the single styled button this replaced. */
.da-manual-gallery-item-wrap {
	display: block;
	position: relative;
	inline-size: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--da-surface, #24272e);
	border: 1px solid var(--da-border, rgba(255, 255, 255, 0.12));
	border-radius: var(--da-radius-medium, 18px);
	box-shadow: var(--da-shadow-soft, 0 18px 50px rgba(0, 0, 0, 0.18));
	transition:
		transform var(--da-transition, 180ms ease),
		border-color var(--da-transition, 180ms ease);
}

.da-manual-gallery-item {
	display: block;
	position: relative;
	inline-size: 100%;
	block-size: 100%;
	padding: 0;
	margin: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
}

/* Deliberately NOT hover-only: the same visual affordance is available on
   keyboard focus (:focus-visible below) and works identically on touch
   devices, which have no hover state at all. The lift/border-color effect
   applies to the WRAPPER (the actually-sized/bordered box) via :has(),
   triggered by hover/focus-visible on the inner button. */
.da-manual-gallery-item-wrap:has(.da-manual-gallery-item:hover),
.da-manual-gallery-item-wrap:has(.da-manual-gallery-item:focus-visible) {
	transform: translateY(-4px);
	border-color: rgba(184, 115, 51, 0.45);
}

/* The focus ring lives on the WRAPPER, not the button: the wrapper has
   overflow:hidden (to crop the image/video poster to its rounded corners),
   which clips an outward outline drawn on a DESCENDANT extending past its
   own box - an element's own outline is never clipped by its own
   overflow, so applying it to the wrapper itself (via the button's
   :focus-visible state, same :has() pattern as the lift effect above)
   keeps the ring fully visible instead of silently cropping it away. */
.da-manual-gallery-item-wrap:has(.da-manual-gallery-item:focus-visible) {
	outline: 3px solid var(--da-accent-light, #d79a5c);
	outline-offset: 3px;
}

.da-manual-gallery-img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

/* ---------------------------------------------------------------------
 * Video grid cards - poster/placeholder only; the real <video> element
 * (and its source) is never created until the lightbox actually opens.
 * A video card with a real poster looks IDENTICAL to an image card
 * (same .da-manual-gallery-img rule, object-fit:cover, same wrapper/
 * frame/hover/focus treatment) plus the play-icon overlay below - no
 * separate visual language, no visible filename anywhere (see
 * render_gallery_item_video() - the accessible name is carried entirely
 * via aria-label instead). Without a poster (no "Poster Image" ever set
 * for that attachment), this gradient placeholder reads as a deliberate
 * "video preview, no thumbnail yet" card - never a blank/broken/file-
 * icon look.
 * --------------------------------------------------------------------- */

.da-manual-gallery-video-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 100%;
	block-size: 100%;
	background: linear-gradient(135deg, var(--da-surface, #24272e) 0%, #14161a 100%);
	color: rgba(245, 243, 238, 0.35);
}

.da-manual-gallery-video-placeholder svg {
	width: 2.25rem;
	height: 2.25rem;
}

.da-manual-gallery-play-icon {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 3.25rem;
	block-size: 3.25rem;
	border-radius: 50%;
	background: rgba(16, 17, 20, 0.65);
	border: 1.5px solid rgba(245, 243, 238, 0.55);
	color: #fff;
	line-height: 1;
	pointer-events: none;
	transition: transform var(--da-transition, 180ms ease), background var(--da-transition, 180ms ease);
}

/* The play icon grows slightly on hover/focus, same trigger (the button)
   as the card's own lift effect - a small, deliberate "this is playable"
   affordance, not just a static badge. */
.da-manual-gallery-item-wrap:has(.da-manual-gallery-item:hover) .da-manual-gallery-play-icon,
.da-manual-gallery-item-wrap:has(.da-manual-gallery-item:focus-visible) .da-manual-gallery-play-icon {
	transform: translate(-50%, -50%) scale(1.08);
	background: rgba(184, 115, 51, 0.85);
}

/* The play-icon SVG's triangle is drawn slightly off-center in its own
   viewBox (a visual-balance convention for play glyphs) - nudge it back
   to true visual center within the circle. */
.da-manual-gallery-play-icon svg {
	margin-inline-start: 2px;
}

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

.da-manual-gallery-lightbox {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(1rem, 4vw, 3rem);
	background: rgba(16, 17, 20, 0.92);
	backdrop-filter: blur(6px);
}

/* gallery.js adds this class to <body> for exactly as long as the
   lightbox is open - without it, the page behind the modal keeps
   scrolling, which reads as a broken/leaky dialog. */
body.da-manual-gallery-lightbox-open {
	overflow: hidden;
}

.da-manual-gallery-lightbox[hidden] {
	display: none;
}

.da-manual-gallery-lightbox-figure {
	position: relative;
	max-inline-size: min(92vw, var(--da-wide-width, 1280px));
	max-block-size: 88vh;
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.da-manual-gallery-lightbox-img,
.da-manual-gallery-lightbox-video {
	max-inline-size: 100%;
	max-block-size: 88vh;
	inline-size: auto;
	block-size: auto;
	border-radius: var(--da-radius-small, 10px);
	box-shadow: var(--da-shadow-lifted, 0 24px 70px rgba(0, 0, 0, 0.28));
}

.da-manual-gallery-lightbox-video[hidden],
.da-manual-gallery-lightbox-img[hidden] {
	display: none;
}

.da-manual-gallery-lightbox-close,
.da-manual-gallery-lightbox-nav {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 3rem;
	block-size: 3rem;
	padding: 0;
	border: 1px solid var(--da-border-strong, rgba(255, 255, 255, 0.2));
	border-radius: 50%;
	background: rgba(36, 39, 46, 0.85);
	color: var(--da-paper, #f5f3ee);
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
	transition: background var(--da-transition, 180ms ease), transform var(--da-transition, 180ms ease);
}

.da-manual-gallery-lightbox-close:hover,
.da-manual-gallery-lightbox-nav:hover {
	background: var(--da-accent, #b87333);
}

.da-manual-gallery-lightbox-close:focus-visible,
.da-manual-gallery-lightbox-nav:focus-visible {
	outline: 3px solid var(--da-accent-light, #d79a5c);
	outline-offset: 2px;
}

.da-manual-gallery-lightbox-close {
	inset-block-start: clamp(0.5rem, 2vw, 1.5rem);
	inset-inline-end: clamp(0.5rem, 2vw, 1.5rem);
}

.da-manual-gallery-lightbox-nav--prev {
	inset-inline-start: clamp(0.25rem, 2vw, 1rem);
	inset-block-start: 50%;
	transform: translateY(-50%);
}

.da-manual-gallery-lightbox-nav--next {
	inset-inline-end: clamp(0.25rem, 2vw, 1rem);
	inset-block-start: 50%;
	transform: translateY(-50%);
}

.da-manual-gallery-lightbox-nav--prev:hover,
.da-manual-gallery-lightbox-nav--next:hover {
	transform: translateY(-50%);
}

.da-manual-gallery-lightbox-counter {
	position: absolute;
	inset-block-end: clamp(0.5rem, 2vw, 1.25rem);
	inset-inline-start: 50%;
	transform: translateX(-50%);
	padding: 0.35rem 0.9rem;
	border-radius: 999px;
	background: rgba(36, 39, 46, 0.85);
	color: var(--da-silver, #c9cdd4);
	font-size: 0.82rem;
}

html.is-rtl .da-manual-gallery-lightbox-counter {
	transform: translateX(50%);
}

.da-manual-gallery-lightbox-caption {
	margin-block-start: 0.75rem;
	max-inline-size: min(92vw, var(--da-wide-width, 1280px));
	text-align: center;
	color: var(--da-silver, #c9cdd4);
	font-size: 0.85rem;
}

.da-manual-gallery-lightbox-caption[hidden] {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.da-manual-gallery-item-wrap,
	.da-manual-gallery-play-icon,
	.da-manual-gallery-lightbox-close,
	.da-manual-gallery-lightbox-nav {
		transition: none;
	}
}