/*!
 * AAAtrails — Tour photo gallery (Intrepid-style slider + lightbox).
 * Loaded only on single tour / activity views. Uses the theme's design
 * tokens (style.css :root) so it always matches the brand palette.
 *
 * @since 1.11.0
 */

/* -------------------------------------------------------------------------
 * OGACE terminal prompt chip (hero) + hero gallery button
 * ---------------------------------------------------------------------- */
.tour-hero__top {
	position: absolute;
	inset: 18px 18px auto;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	pointer-events: none;
}
.tour-hero__top > * { pointer-events: auto; }

.tour-terminal {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: ui-monospace, "SFMono-Regular", "Cascadia Code", "Roboto Mono", Menlo, Consolas, monospace;
	font-size: .74rem;
	letter-spacing: .02em;
	color: #ffedb8;
	background: rgba(24, 11, 2, .62);
	border: 1px solid rgba(238, 174, 5, .38);
	padding: 7px 12px;
	border-radius: 8px;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}
.tour-terminal__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--gold, #eeae05);
	box-shadow: 0 0 0 0 rgba(238, 174, 5, .6);
	animation: tourgal-pulse 2.4s ease-out infinite;
}
@keyframes tourgal-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(238, 174, 5, .55); }
	70%  { box-shadow: 0 0 0 7px rgba(238, 174, 5, 0); }
	100% { box-shadow: 0 0 0 0 rgba(238, 174, 5, 0); }
}

.tour-hero__gallery {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font: 600 .86rem/1 var(--font-body, sans-serif);
	color: var(--ink, #241407);
	background: rgba(255, 255, 255, .92);
	border: 1px solid rgba(255, 255, 255, .6);
	padding: 10px 15px;
	border-radius: 100px;
	cursor: pointer;
	box-shadow: 0 8px 22px -12px rgba(24, 11, 2, .6);
	transition: transform .15s ease, background .15s ease;
}
.tour-hero__gallery:hover { background: #fff; transform: translateY(-1px); }
.tour-hero__gallery svg { width: 17px; height: 17px; }

/* Anchor the hero top bar: single-tour.php adds .has-gallery on .tour-hero. */
.tour-hero.has-gallery { position: relative; }

/* -------------------------------------------------------------------------
 * Inline slider
 * ---------------------------------------------------------------------- */
.tourgal { --tourgal-radius: var(--radius, 14px); }
.tourgal__stage {
	position: relative;
	border-radius: var(--tourgal-radius);
	overflow: hidden;
	background: var(--paper-2, #fbedc4);
	box-shadow: var(--shadow-sm, 0 8px 20px -14px rgba(24, 11, 2, .3));
}
.tourgal__track {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	overflow-x: auto;
	-ms-overflow-style: none;
	scrollbar-width: none;
}
.tourgal__track::-webkit-scrollbar { display: none; }
.tourgal__slide {
	position: relative;
	flex: 0 0 100%;
	scroll-snap-align: center;
	aspect-ratio: 16 / 10;
	background: var(--paper-2, #fbedc4);
}
.tourgal__slide > img,
.tourgal__open > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.tourgal__open {
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
}
.tourgal__expand {
	position: absolute;
	right: 12px;
	bottom: 12px;
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	color: #fff;
	background: rgba(24, 11, 2, .55);
	border-radius: 10px;
	opacity: 0;
	transition: opacity .15s ease;
}
.tourgal__slide:hover .tourgal__expand { opacity: 1; }
.tourgal__expand svg { width: 18px; height: 18px; }

.tourgal__cap {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0;
	padding: 26px 16px 12px;
	font-size: .82rem;
	color: #fff;
	background: linear-gradient(180deg, rgba(24, 11, 2, 0), rgba(24, 11, 2, .72));
	pointer-events: none;
}

.tourgal__count {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	font: 600 .78rem/1 var(--font-body, sans-serif);
	color: #fff;
	background: rgba(24, 11, 2, .55);
	padding: 6px 11px;
	border-radius: 100px;
	letter-spacing: .02em;
}

.tourgal__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	color: var(--ink, #241407);
	background: rgba(255, 255, 255, .92);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	box-shadow: 0 8px 20px -10px rgba(24, 11, 2, .55);
	transition: background .15s ease, transform .15s ease;
	z-index: 2;
}
.tourgal__nav:hover { background: #fff; }
.tourgal__nav svg { width: 22px; height: 22px; }
.tourgal__nav--prev { left: 12px; }
.tourgal__nav--prev svg { transform: rotate(180deg); }
.tourgal__nav--next { right: 12px; }
.tourgal__nav[disabled] { opacity: .35; cursor: default; }

/* Thumbnails */
.tourgal__thumbs {
	display: flex;
	gap: 8px;
	margin-top: 10px;
	overflow-x: auto;
	padding-bottom: 4px;
	-ms-overflow-style: none;
	scrollbar-width: thin;
}
.tourgal__thumbs::-webkit-scrollbar { height: 6px; }
.tourgal__thumbs::-webkit-scrollbar-thumb { background: var(--line, #ecdca4); border-radius: 100px; }
.tourgal__thumb {
	flex: 0 0 auto;
	width: 92px;
	height: 62px;
	padding: 0;
	border: 2px solid transparent;
	border-radius: var(--radius-sm, 9px);
	overflow: hidden;
	cursor: pointer;
	background: var(--paper-2, #fbedc4);
	opacity: .7;
	transition: opacity .15s ease, border-color .15s ease;
}
.tourgal__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tourgal__thumb:hover { opacity: 1; }
.tourgal__thumb.is-active { opacity: 1; border-color: var(--gold, #eeae05); }

/* -------------------------------------------------------------------------
 * Lightbox
 * ---------------------------------------------------------------------- */
.tourgal-lb {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(12px, 3vw, 40px);
}
.tourgal-lb[hidden] { display: none; }
.tourgal-lb__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(16, 8, 2, .9);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}
.tourgal-lb__dialog {
	position: relative;
	z-index: 1;
	width: min(1100px, 100%);
	max-height: 100%;
}
.tourgal-lb__close {
	position: absolute;
	top: -6px;
	right: -6px;
	transform: translate(0, -100%);
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	color: #fff;
	background: rgba(255, 255, 255, .14);
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: 50%;
	cursor: pointer;
	transition: background .15s ease;
}
.tourgal-lb__close:hover { background: rgba(255, 255, 255, .28); }
.tourgal-lb__close svg { width: 20px; height: 20px; }
@media (max-width: 640px) {
	.tourgal-lb__close { top: 8px; right: 8px; transform: none; }
}

.tourgal--lightbox .tourgal__stage {
	border-radius: var(--radius, 14px);
	box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7);
}
.tourgal--lightbox .tourgal__slide { aspect-ratio: 16 / 9; background: #100802; }
.tourgal--lightbox .tourgal__slide > img { object-fit: contain; }
.tourgal--lightbox .tourgal__thumbs { justify-content: center; }

body.tourgal-open { overflow: hidden; }

/* -------------------------------------------------------------------------
 * Section wrapper for the inline slider on the tour page
 * ---------------------------------------------------------------------- */
.tour-gallery-section {
	margin-top: 26px;
}
.tour-gallery-section .tourgal { max-width: 100%; }

/* -------------------------------------------------------------------------
 * Card photo-count chip (front-page / archive cards)
 * ---------------------------------------------------------------------- */
.tour-card__photos {
	position: absolute;
	left: 12px;
	bottom: 12px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font: 600 .74rem/1 var(--font-body, sans-serif);
	color: #fff;
	background: rgba(24, 11, 2, .58);
	padding: 5px 9px;
	border-radius: 100px;
}
.tour-card__photos svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* -------------------------------------------------------------------------
 * Responsive + motion
 * ---------------------------------------------------------------------- */
@media (max-width: 640px) {
	.tourgal__nav { width: 38px; height: 38px; }
	.tourgal__thumb { width: 74px; height: 52px; }
	.tour-hero__gallery span { display: none; }
	.tour-hero__gallery { padding: 10px; }
}

@media (prefers-reduced-motion: reduce) {
	.tourgal__track { scroll-behavior: auto; }
	.tour-terminal__dot { animation: none; }
	.tour-hero__gallery { transition: none; }
}