/* Shared downward-arc hero curve — one custom property so every hero that
   uses it (.home-hero/.contact-hero/.about-hero/.content-page-hero) stays
   in sync, instead of repeating (and having to re-tune) the same
   clip-path in 4 places. The ellipse's rx controls how deep the corner cut
   is (bigger rx = shallower curve) — on desktop a fairly deep cut reads
   fine, but the same percentages look disproportionately "fat"/crude on
   a narrower tablet/phone screen (the curve's pixel depth stays similar
   while the box gets much narrower), so rx grows at each breakpoint to
   keep the curve looking shallow and proportional everywhere. --------- */
:root {
	--rbl-hero-arc: ellipse(80% 100% at 50% 0%);
}

@media (max-width: 900px) {
	:root {
		--rbl-hero-arc: ellipse(95% 100% at 50% 0%);
	}
}

@media (max-width: 640px) {
	:root {
		--rbl-hero-arc: ellipse(115% 100% at 50% 0%);
	}
}

/* Reset & base ------------------------------------------------------------ */
*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: var(--rbl-font-body);
	color: var(--rbl-color-text);
	background: var(--rbl-color-background);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--rbl-font-heading);
	margin: 0;
}

a {
	text-decoration: none;
	color: inherit;
}

img {
	max-width: 100%;
	display: block;
}

ul {
	list-style: none;
}

.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

@media (min-width: 640px) {
	.container {
		padding: 0 32px;
	}
}

@media (min-width: 1024px) {
	.container {
		padding: 0 48px;
	}
}

/* Same responsive edge padding as .container, but no max-width — for
   sections that should run full-bleed to the actual browser edges (like
   .featured-tours) while still keeping their content off the literal
   screen edge. */
.container-fluid {
	width: 100%;
	padding: 0 20px;
}

@media (min-width: 640px) {
	.container-fluid {
		padding: 0 32px;
	}
}

@media (min-width: 1024px) {
	.container-fluid {
		padding: 0 48px;
	}
}

/* Header topbar ------------------------------------------------------------ */
.header-topbar {
	background: var(--rbl-color-background);
	border-bottom: 1px solid var(--rbl-color-border);
}

.header-topbar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 8px 0;
	font-size: 12px;
}

.header-topbar-contact {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
}

.header-topbar-contact a,
.header-topbar-social a {
	color: var(--rbl-color-text-muted);
	transition: color 0.2s ease;
}

.header-topbar-contact a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.header-topbar-contact a:hover,
.header-topbar-social a:hover {
	color: var(--rbl-color-primary);
}

.header-topbar-contact svg {
	width: 13px;
	height: 13px;
	color: var(--rbl-color-secondary);
	flex-shrink: 0;
}

.header-topbar-social {
	display: flex;
	gap: 14px;
}

.header-topbar-social a {
	display: flex;
}

.header-topbar-social svg {
	width: 13px;
	height: 13px;
}

@media (max-width: 767px) {
	.header-topbar {
		display: none;
	}
}

/* Header ------------------------------------------------------------------ */
.site-header {
	background: var(--rbl-color-background);
	border-bottom: 1px solid var(--rbl-color-border);
	position: sticky;
	top: 0;
	z-index: 100;
	transition: box-shadow 0.25s ease;
}

.site-header.scrolled {
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 80px;
	padding: 12px 0;
}

.site-logo img {
	width: var(--rbl-logo-header-width, 160px);
	height: auto;
	display: block;
}

.site-logo-text {
	font-family: var(--rbl-font-heading);
	font-weight: 700;
	font-size: 20px;
	color: var(--rbl-color-primary);
}

.main-nav {
	margin-left: auto;
}

.header-actions {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-shrink: 0;
}

.main-nav .nav-list {
	display: flex;
	flex-wrap: nowrap;
	gap: 24px;
	margin: 0;
	padding: 0;
}

.main-nav .nav-list li {
	position: relative;
}

.main-nav a {
	position: relative;
	display: inline-block;
	white-space: nowrap;
	font-weight: 500;
	font-size: 15px;
	color: var(--rbl-color-text);
	transition: color 0.2s ease;
	padding-bottom: 4px;
}

.main-nav a::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 2px;
	background: var(--rbl-color-primary);
	transition: width 0.25s ease;
}

.main-nav a:hover {
	color: var(--rbl-color-primary);
}

.main-nav a:hover::after {
	width: 100%;
}

.btn-experiences {
	display: inline-block;
	background: var(--rbl-color-primary);
	color: #fff;
	padding: 12px 24px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 14px;
	white-space: nowrap;
	transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-experiences:hover {
	background: var(--rbl-color-secondary);
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
	color: var(--rbl-color-text);
}

.lang-switcher {
	display: flex;
	align-items: center;
	gap: 2px;
	background: var(--rbl-color-border);
	border-radius: 999px;
	padding: 3px;
}

.lang-switcher-btn {
	background: none;
	border: none;
	cursor: pointer;
	padding: 5px 12px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.03em;
	color: var(--rbl-color-text-muted);
	transition: background 0.2s ease, color 0.2s ease;
}

.lang-switcher-btn:hover {
	color: var(--rbl-color-text);
}

.lang-switcher-btn.is-active {
	background: var(--rbl-color-primary);
	color: #fff;
}


.mobile-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 40px;
	height: 40px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 8px;
}

.mobile-toggle span {
	width: 100%;
	height: 2px;
	background: var(--rbl-color-text);
	display: block;
}

/* Mobile side drawer -------------------------------------------------- */
.mobile-menu-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 998;
}

.mobile-menu-overlay.is-open {
	display: block;
}

.mobile-menu {
	position: fixed;
	top: 0;
	left: 0;
	height: 100vh;
	width: min(300px, 85vw);
	background: var(--rbl-color-mobile-menu-bg);
	color: rgba(255, 255, 255, 0.85);
	transform: translateX(-100%);
	transition: transform 0.3s ease;
	z-index: 999;
	display: flex;
	flex-direction: column;
	padding: 24px;
	overflow-y: auto;
}

.mobile-menu.is-open {
	transform: translateX(0);
}

.mobile-menu-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 32px;
}

.mobile-menu-logo img {
	width: 120px;
	height: auto;
	display: block;
}

.mobile-menu-logo .site-logo-text {
	font-family: var(--rbl-font-heading);
	font-weight: 700;
	font-size: 16px;
	color: #fff;
}

.mobile-menu-close {
	background: none;
	border: none;
	color: #fff;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	padding: 4px 8px;
	flex-shrink: 0;
}

.mobile-menu-nav {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
}

.mobile-menu-nav li {
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.mobile-menu-nav a {
	display: block;
	padding: 14px 0;
	font-weight: 500;
	font-size: 16px;
	color: #fff;
}

.mobile-menu-nav .btn-experiences {
	display: inline-block;
	margin-top: 12px;
	padding: 10px 20px;
}

.mobile-menu-contact {
	margin-top: auto;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	padding-top: 20px;
}

.mobile-menu-contact-list {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
}

.mobile-menu-contact-list li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 0;
	font-size: 14px;
}

.mobile-menu-contact-list a {
	color: rgba(255, 255, 255, 0.85);
}

.mobile-menu-contact-list svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	color: var(--rbl-color-secondary);
}

.mobile-menu-social {
	display: flex;
	gap: 10px;
}

.mobile-menu-social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.08);
	color: var(--rbl-color-secondary);
}

.mobile-menu-social svg {
	width: 14px;
	height: 14px;
}

@media (max-width: 1280px) {
	.main-nav,
	.btn-experiences-desktop {
		display: none;
	}

	.mobile-toggle {
		display: flex;
	}
}

/* Footer -------------------------------------------------------------- */
.site-footer {
	position: relative;
	/* Explicit stacking above .home-contact (see that section's own z-index)
	   — guarantees the footer's curved top edge always paints on top of
	   Home Contact's own extended background in their overlapping region,
	   regardless of any nested stacking contexts inside Home Contact. */
	z-index: 2;
	background-color: var(--rbl-color-footer-bg);
	background-image: var(--rbl-footer-bg-image, none);
	background-size: cover;
	background-position: center;
	background-blend-mode: multiply;
	color: rgba(255, 255, 255, 0.75);
	padding: 64px 0 0;
	/* Top edge curves upward in the middle (opposite direction from the
	   Contact hero's downward dip) — a multi-point polygon with fixed PX
	   offsets, not an ellipse() percentage: the footer's total height
	   varies a lot with content/screen size, so a percentage-based curve
	   would cut proportionally deeper on a short footer and barely show on
	   a tall one. Fixed offsets keep the same shallow arc regardless. */
	clip-path: polygon(
		0 36px, 12.5% 22px, 25% 11px, 37.5% 3px, 50% 0,
		62.5% 3px, 75% 11px, 87.5% 22px, 100% 36px,
		100% 100%, 0 100%
	);
}

.footer-cta {
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	padding-bottom: 32px;
	margin-bottom: 32px;
}

.footer-cta-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 20px;
}

.footer-cta-inner h3 {
	font-family: var(--rbl-font-heading);
	color: #fff;
	font-size: 22px;
	font-weight: 700;
	margin: 0;
}

.footer-cta-inner .btn-experiences {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.footer-cta-inner .btn-experiences svg {
	width: 16px;
	height: 16px;
}

.footer-tagline {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.55);
	font-style: italic;
	margin: -8px 0 16px;
}

.footer-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
	gap: 32px;
	padding-bottom: 48px;
}

.footer-col h3 {
	font-family: var(--rbl-font-heading);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	margin-bottom: 20px;
}

.footer-col p {
	margin: 0 0 10px;
	font-size: 14px;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.6);
}

.footer-col p strong {
	color: rgba(255, 255, 255, 0.9);
}

.footer-col a {
	color: rgba(255, 255, 255, 0.75);
	font-size: 14px;
	transition: color 0.2s ease;
}

.footer-col a:hover {
	color: #fff;
}

.footer-logo {
	display: inline-block;
	margin-bottom: 16px;
}

.footer-logo img {
	width: var(--rbl-logo-footer-width, 160px);
	height: auto;
	display: block;
}

.footer-logo .site-logo-text {
	display: inline-block;
	font-family: var(--rbl-font-heading);
	font-weight: 700;
	font-size: 18px;
	color: #fff;
}

.footer-link-list,
.footer-contact-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-link-list li,
.footer-contact-list li {
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	padding: 10px 0;
}

.footer-link-list li:first-child,
.footer-contact-list li:first-child {
	padding-top: 0;
}

.footer-link-list li:last-child,
.footer-contact-list li:last-child {
	border-bottom: none;
}

.footer-contact-list li {
	display: flex;
	align-items: center;
	gap: 10px;
}

.footer-contact-list svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	color: var(--rbl-color-secondary);
}

.footer-social-icons {
	display: flex;
	gap: 12px;
	margin-top: 16px;
}

.footer-social-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.08);
	color: var(--rbl-color-secondary);
	transition: background 0.2s ease, color 0.2s ease;
}

.footer-social-icon svg {
	width: 16px;
	height: 16px;
}

.footer-social-icon:hover {
	background: var(--rbl-color-secondary);
	color: var(--rbl-color-text);
}

.footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	padding: 20px 0;
	text-align: center;
}

.footer-bottom p {
	margin: 0;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.5);
}

.footer-bottom p a {
	color: rgba(255, 255, 255, 0.75);
	text-decoration: none;
}

.footer-bottom p a:hover {
	color: #fff;
}

@media (max-width: 900px) {
	.footer-grid {
		grid-template-columns: 1fr 1fr;
	}

	.footer-col-brand {
		grid-column: 1 / -1;
	}
}

@media (max-width: 560px) {
	.footer-grid {
		grid-template-columns: 1fr;
	}
}

/* Contact page -------------------------------------------------------- */
.contact-hero {
	position: relative;
	background-color: var(--rbl-color-primary);
	background-image: none;
	background-size: cover;
	background-position: center;
	background-blend-mode: multiply;
	min-height: 380px;
	display: flex;
	align-items: center;
	padding-bottom: 48px;
	/* Bottom edge curves into a shallow downward arc instead of a straight
	   cut — clip-path (not an overlay div matching the next section's
	   color) for the same reason the footer uses one: it works correctly
	   whether this hero's background ends up being a flat color or an
	   image, no risk of a color mismatch seam. */
	clip-path: var(--rbl-hero-arc);
}

.contact-hero-inner {
	text-align: center;
}

.contact-hero h1 {
	color: #fff;
	font-size: 40px;
	font-weight: 700;
}

@media (max-width: 640px) {
	.contact-hero {
		min-height: 280px;
		padding-bottom: 32px;
	}

	.contact-hero h1 {
		font-size: 30px;
	}
}

.contact-cards {
	background: var(--rbl-color-background);
}

.contact-cards-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-top: -56px;
	padding-bottom: 56px;
	position: relative;
	z-index: 2;
}

.contact-card {
	background: var(--rbl-color-background);
	border: 1px solid var(--rbl-color-border);
	border-radius: 16px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
	padding: 32px 24px;
	text-align: center;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.contact-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
}

.contact-card-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 999px;
	background: var(--rbl-color-primary);
	color: #fff;
	margin: 0 auto 16px;
}

.contact-card-icon svg {
	width: 24px;
	height: 24px;
}

.contact-card h3 {
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--rbl-color-text-muted);
	margin-bottom: 12px;
}

.contact-card-values {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.contact-card-values a {
	font-size: 16px;
	font-weight: 600;
	color: var(--rbl-color-text);
	transition: color 0.2s ease;
}

.contact-card-values a:hover {
	color: var(--rbl-color-primary);
}

.contact-card-social-icons {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-bottom: 16px;
}

.contact-social-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	background: var(--rbl-color-border);
	color: var(--rbl-color-primary);
	transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.contact-social-icon svg {
	width: 20px;
	height: 20px;
}

.contact-social-icon:hover {
	background: var(--rbl-color-primary);
	color: #fff;
	transform: translateY(-2px);
}

@media (max-width: 900px) {
	.contact-cards-grid {
		grid-template-columns: 1fr;
		margin-top: -32px;
	}
}

.contact-form-section {
	padding-bottom: 80px;
}

.contact-form-card {
	max-width: 720px;
	margin: 0 auto;
	background: var(--rbl-color-background);
	border: 1px solid var(--rbl-color-border);
	border-radius: 20px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.06);
	padding: 48px;
	text-align: center;
}

.contact-form-card h2 {
	font-size: 28px;
	font-weight: 700;
	margin-bottom: 8px;
}

.contact-form-subtitle {
	color: var(--rbl-color-text-muted);
	margin: 0 0 32px;
}

.contact-form-notice {
	border-radius: 10px;
	padding: 14px 18px;
	margin-bottom: 24px;
	font-size: 14px;
	font-weight: 600;
	text-align: left;
}

.contact-form-notice-success {
	background: rgba(34, 139, 34, 0.1);
	color: #1e7a1e;
	border: 1px solid rgba(34, 139, 34, 0.25);
}

.contact-form-notice-error {
	background: rgba(200, 40, 40, 0.08);
	color: #b02a2a;
	border: 1px solid rgba(200, 40, 40, 0.2);
}

.contact-form {
	text-align: left;
}

.contact-form-honeypot {
	position: absolute;
	left: -9999px;
	top: -9999px;
}

.contact-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

/* The shared contact form's Request a Quote pane inside the tour booking
   sidebar is always a narrow column (~350px) regardless of the page's own
   viewport width, so the 640px breakpoint below never kicks in there — the
   two-column Check-in/Check-out row (and Name/Email, Phone/Passengers)
   overflowed the sidebar even on a wide desktop screen. Force single-column
   unconditionally in this specific narrow context instead of widening the
   breakpoint (which would also affect the Contact page/Home Contact
   section's own, much wider, instances of this same shared form). */
.tour-sidebar .contact-form-row {
	grid-template-columns: 1fr;
}

@media (max-width: 640px) {
	.contact-form-row {
		grid-template-columns: 1fr;
	}

	.contact-form-card {
		padding: 32px 24px;
	}
}

.contact-form-field {
	margin-bottom: 20px;
}

.contact-form-field label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--rbl-color-text-muted);
	margin-bottom: 6px;
}

.contact-form-field input,
.contact-form-field textarea,
.contact-form-field select {
	width: 100%;
	padding: 12px 16px;
	border: 1px solid var(--rbl-color-border);
	border-radius: 10px;
	font-family: var(--rbl-font-body);
	font-size: 15px;
	color: var(--rbl-color-text);
	background: var(--rbl-color-background);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.contact-form-field input:focus,
.contact-form-field textarea:focus,
.contact-form-field select:focus {
	outline: none;
	border-color: var(--rbl-color-primary);
	box-shadow: 0 0 0 3px rgba(108, 29, 158, 0.12);
}

.contact-form-field textarea {
	resize: vertical;
}

.contact-form-submit {
	width: 100%;
	text-align: center;
	border: none;
	cursor: pointer;
}

/* Scroll-reveal entrance animations ------------------------------------ */
/* Reserved for below-the-fold content only — see scroll-reveal.js for why
   hero/first-viewport sections should never get data-reveal. */
[data-reveal] {
	opacity: 0;
	transition: opacity 0.5s ease, transform 0.5s ease;
}

[data-reveal="fade-up"] {
	transform: translateY(24px);
}

[data-reveal="fade-in"] {
	transform: none;
}

[data-reveal="zoom-in"] {
	transform: scale(0.94);
}

[data-reveal].is-visible {
	opacity: 1;
	transform: none;
}

[data-reveal][data-reveal-delay="1"] { transition-delay: 0.08s; }
[data-reveal][data-reveal-delay="2"] { transition-delay: 0.16s; }
[data-reveal][data-reveal-delay="3"] { transition-delay: 0.24s; }
[data-reveal][data-reveal-delay="4"] { transition-delay: 0.32s; }
[data-reveal][data-reveal-delay="5"] { transition-delay: 0.4s; }
[data-reveal][data-reveal-delay="6"] { transition-delay: 0.48s; }

@media (prefers-reduced-motion: reduce) {
	[data-reveal] {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* About Us page ---------------------------------------------------------- */
/* Reserved image space — shows a soft placeholder box at the right size/
   shape even before an image is uploaded, so the layout never looks broken
   while waiting for real photos. */
.about-image-placeholder {
	background: var(--rbl-color-border);
	border-radius: 16px;
	overflow: hidden;
}

.about-image-placeholder img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.about-eyebrow {
	display: inline-block;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--rbl-color-primary);
	margin-bottom: 10px;
}

.about-hero {
	position: relative;
	background-color: var(--rbl-color-primary);
	background-image: none;
	background-size: cover;
	background-position: center;
	background-blend-mode: multiply;
	min-height: 380px;
	display: flex;
	align-items: center;
	padding: 64px 0;
	clip-path: var(--rbl-hero-arc);
}

.about-hero-inner {
	text-align: center;
	max-width: 720px;
	margin: 0 auto;
}

.about-hero h1 {
	color: #fff;
	font-size: 40px;
	font-weight: 700;
}

.about-hero-desc {
	color: rgba(255, 255, 255, 0.9);
	font-size: 16px;
	line-height: 1.7;
	margin-top: 16px;
}

@media (max-width: 640px) {
	.about-hero {
		min-height: 280px;
	}

	.about-hero h1 {
		font-size: 30px;
	}
}

/* Our Story — text left, image right ------------------------------------- */
.about-story {
	padding: 80px 0;
}

.about-story-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: center;
}

.about-story-text h2 {
	font-size: 32px;
	font-weight: 700;
	margin-bottom: 20px;
}

.about-story-text p {
	font-size: 15px;
	line-height: 1.75;
	color: var(--rbl-color-text-muted);
	margin: 0 0 16px;
}

.about-story-text .btn-experiences {
	margin-top: 12px;
}

.about-story-image {
	aspect-ratio: 4 / 3;
	width: 100%;
}

@media (max-width: 900px) {
	.about-story-inner {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.about-story-image {
		order: -1;
	}
}

/* Stats bar ---------------------------------------------------------------- */
.about-stats {
	background: var(--rbl-color-footer-bg);
	padding: 48px 0;
}

.about-stats-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 40px;
}

.about-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	min-width: 120px;
}

.about-stat-num {
	font-family: var(--rbl-font-heading);
	font-size: 36px;
	font-weight: 700;
	color: #fff;
}

.about-stat-label {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.65);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-top: 6px;
}

/* Features ------------------------------------------------------------- */
.about-features {
	padding: 80px 0;
}

.about-section-heading {
	text-align: center;
	max-width: 640px;
	margin: 0 auto 48px;
}

.about-section-heading h2 {
	font-size: 30px;
	font-weight: 700;
}

.about-features-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 28px;
}

.about-feature-card {
	text-align: center;
	padding: 32px 20px;
	border: 1px solid var(--rbl-color-border);
	border-radius: 16px;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.about-feature-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
}

.about-feature-icon {
	width: 64px;
	height: 64px;
	margin: 0 auto 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
}

.about-feature-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 14px;
}

.about-feature-card h3 {
	font-size: 17px;
	font-weight: 700;
	margin-bottom: 8px;
}

.about-feature-card p {
	font-size: 14px;
	line-height: 1.6;
	color: var(--rbl-color-text-muted);
	margin: 0;
}

/* Why Choose Us — image left, text right ---------------------------------- */
.about-why {
	padding: 80px 0;
	background: #fafafa;
}

.about-why-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: center;
}

.about-why-image {
	aspect-ratio: 4 / 3;
	width: 100%;
}

.about-why-text h2 {
	font-size: 32px;
	font-weight: 700;
	margin-bottom: 16px;
}

.about-why-text p {
	font-size: 15px;
	line-height: 1.75;
	color: var(--rbl-color-text-muted);
	margin: 0 0 24px;
}

.about-why-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.about-why-list li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 15px;
	color: var(--rbl-color-text);
}

.about-why-check {
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	margin-top: 1px;
	padding: 3px;
	border-radius: 999px;
	background: var(--rbl-color-primary);
	color: #fff;
}

@media (max-width: 900px) {
	.about-why-inner {
		grid-template-columns: 1fr;
		gap: 32px;
	}
}

/* Simple content pages (Privacy Policy / Terms & Conditions / Complaints
   Book) — generalized copy of .about-hero's downward-arc treatment, under
   its own name since it's shared by pages that have nothing to do with
   "About". Background image, when present, is either the page's own (rare)
   hero_image_id or, more commonly, whatever image is already set on the
   Home hero — see rbl_get_home_hero_image_url(). ------------------------- */
.content-page-hero {
	position: relative;
	background-color: var(--rbl-color-primary);
	background-image: none;
	background-size: cover;
	background-position: center;
	background-blend-mode: multiply;
	min-height: 320px;
	display: flex;
	align-items: center;
	padding: 56px 0;
	clip-path: var(--rbl-hero-arc);
}

.content-page-hero-inner {
	text-align: center;
	max-width: 720px;
	margin: 0 auto;
}

.content-page-hero h1 {
	color: #fff;
	font-size: 36px;
	font-weight: 700;
}

.content-page-hero-desc {
	color: rgba(255, 255, 255, 0.9);
	font-size: 16px;
	line-height: 1.7;
	margin-top: 16px;
}

@media (max-width: 640px) {
	.content-page-hero {
		min-height: 240px;
	}

	.content-page-hero h1 {
		font-size: 28px;
	}
}

.content-page-body-section {
	padding: 64px 0 80px;
}

.content-page-body {
	max-width: 820px;
	margin: 0 auto;
	color: var(--rbl-color-text);
	font-size: 16px;
	line-height: 1.8;
}

.content-page-body h2 {
	font-size: 24px;
	font-weight: 700;
	margin: 40px 0 16px;
}

.content-page-body h2:first-child {
	margin-top: 0;
}

.content-page-body h3 {
	font-size: 19px;
	font-weight: 700;
	margin: 28px 0 12px;
}

.content-page-body p {
	margin: 0 0 18px;
}

.content-page-body ul,
.content-page-body ol {
	margin: 0 0 18px;
	padding-left: 24px;
}

.content-page-body li {
	margin-bottom: 8px;
}

.content-page-body a {
	color: var(--rbl-color-primary);
	text-decoration: underline;
}

.content-page-body blockquote {
	border-left: 3px solid var(--rbl-color-primary);
	padding-left: 18px;
	margin: 0 0 18px;
	color: var(--rbl-color-text-muted);
}

/* FAQ section — reusable accordion, see inc/faq-section.php. Built on
   native <details>/<summary> (not a JS-driven toggle) so answer text is
   always in the DOM whether an item is open or closed. --------------- */
.faq-section {
	padding: 64px 0 80px;
}

.faq-section-heading {
	text-align: center;
	max-width: 640px;
	margin: 0 auto 40px;
}

.faq-section-subtitle {
	color: var(--rbl-color-text-muted);
	margin-top: 8px;
}

.faq-category-group {
	max-width: 820px;
	margin: 0 auto 40px;
}

.faq-category-group:last-of-type {
	margin-bottom: 0;
}

.faq-category-title {
	font-size: 20px;
	font-weight: 700;
	margin-bottom: 16px;
	color: var(--rbl-color-primary);
}

.faq-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.faq-item {
	background: var(--rbl-color-background);
	border: 1px solid var(--rbl-color-border);
	border-radius: 12px;
	overflow: hidden;
}

.faq-question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 22px;
	cursor: pointer;
	font-size: 16px;
	font-weight: 600;
	color: var(--rbl-color-text);
	list-style: none;
}

.faq-question::-webkit-details-marker {
	display: none;
}

.faq-question::marker {
	content: '';
}

.faq-icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 999px;
	background: var(--rbl-color-border);
	color: var(--rbl-color-primary);
	transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.faq-icon svg {
	width: 16px;
	height: 16px;
}

.faq-item[open] .faq-question {
	border-bottom: 1px solid var(--rbl-color-border);
}

.faq-item[open] .faq-icon {
	transform: rotate(180deg);
	background: var(--rbl-color-primary);
	color: #fff;
}

.faq-answer-inner {
	padding: 18px 22px 22px;
	color: var(--rbl-color-text-muted);
	font-size: 15px;
	line-height: 1.7;
}

.faq-answer-inner p:last-child {
	margin-bottom: 0;
}

.faq-view-all {
	text-align: center;
	margin-top: 40px;
}

@media (max-width: 640px) {
	.faq-question {
		padding: 16px 18px;
		font-size: 15px;
	}

	.faq-answer-inner {
		padding: 16px 18px 18px;
	}
}

/* Home Hero — video or slider mode, see page-home.php. Deliberately no
   [data-reveal] anywhere in this section: it's the first-viewport content,
   and the scroll-reveal system is reserved for below-the-fold sections. -- */
.home-hero {
	position: relative;
	/* 100vh first as a fallback for browsers without dvh/calc(var()) support;
	   each rule after it overrides where supported. --rbl-header-height is
	   set by the inline script in header.php to the topbar + header row's
	   real rendered height (0px until that script runs, so this same rule
	   also covers the no-JS case). Subtracting it is what actually matters
	   here: .site-header sits in normal document flow above the hero (this
	   theme's header is always solid, never overlaid transparently over the
	   hero the way plt-leisure-theme's is), so a flat 100dvh hero plus the
	   header on top of it is taller than the viewport — the bottom of the
	   hero gets pushed below the fold and a visitor has to scroll to see
	   all of it. calc(100dvh - header height) makes header + hero together
	   exactly fill the viewport instead. No max-height cap on purpose: the
	   hero should always fill whatever's left of the viewport, however tall
	   the screen actually is, not top out at a fixed pixel value on large
	   monitors. */
	height: 100vh;
	height: calc(100vh - var(--rbl-header-height, 0px));
	height: calc(100dvh - var(--rbl-header-height, 0px));
	min-height: 480px;
	overflow: hidden;
	display: flex;
	align-items: center;
	background-color: var(--rbl-color-footer-bg);
	/* Same downward-arc bottom edge as every other hero in this theme
	   (.contact-hero/.about-hero/.content-page-hero) — ellipse() percentages
	   are fine here for the same reason they are on those: this box's
	   height, while tall, is still fixed per-viewport (not large/variable
	   like the footer's, which needs the fixed-pixel polygon() approach
	   instead). */
	clip-path: var(--rbl-hero-arc);
}

.home-hero-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
	border: none;
}

.home-hero-video-poster {
	background-size: cover;
	background-position: center;
}

/* Native <video>/poster-div fill the box via object-fit/background-size,
   but an <iframe> (YouTube/Vimeo) can't be object-fit'ed — instead it's
   oversized to a fixed 16:9 box and centered, so it always covers the
   container regardless of the container's own aspect ratio. */
.home-hero-video--youtube,
.home-hero-video--vimeo {
	position: absolute;
	inset: 0;
	overflow: hidden;
	z-index: 0;
}

.home-hero-video--youtube iframe,
.home-hero-video--vimeo iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 177.78vh;
	height: 56.25vw;
	min-width: 100%;
	min-height: 100%;
	transform: translate(-50%, -50%);
	border: none;
	pointer-events: none;
}

.home-hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.55) 100%);
	z-index: 1;
}

.home-hero-content {
	position: relative;
	z-index: 2;
	max-width: 640px;
	color: #fff;
}

.home-hero-eyebrow {
	display: inline-block;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--rbl-color-secondary);
	margin-bottom: 14px;
}

.home-hero-title {
	font-size: 52px;
	font-weight: 700;
	line-height: 1.15;
	margin-bottom: 18px;
}

.home-hero-desc {
	font-size: 17px;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.9);
	margin-bottom: 28px;
}

/* Slider mode ------------------------------------------------------------ */
.home-hero--slider .home-hero-slides {
	position: absolute;
	inset: 0;
}

.home-hero-slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-color: var(--rbl-color-footer-bg);
	opacity: 0;
	transition: opacity 1s ease;
	display: flex;
	align-items: center;
	z-index: 0;
}

.home-hero-slide.is-active {
	opacity: 1;
	z-index: 1;
}

.home-hero-nav {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 32px;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
}

.home-hero-arrow {
	background: rgba(255, 255, 255, 0.15);
	border: 1px solid rgba(255, 255, 255, 0.4);
	color: #fff;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.2s ease;
}

.home-hero-arrow:hover {
	background: rgba(255, 255, 255, 0.3);
}

.home-hero-dots {
	display: flex;
	gap: 10px;
}

.home-hero-dot {
	width: 10px;
	height: 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.4);
	border: none;
	cursor: pointer;
	padding: 0;
	transition: background 0.2s ease, transform 0.2s ease;
}

.home-hero-dot.is-active {
	background: #fff;
	transform: scale(1.2);
}

@media (max-width: 640px) {
	.home-hero-title {
		font-size: 34px;
	}

	.home-hero-desc {
		font-size: 15px;
	}

	.home-hero-nav {
		bottom: 20px;
	}
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

/* Featured Tours — horizontally scrolling card slider, see
   inc/featured-tours-section.php. Deliberately its own mechanism (native
   CSS scroll-snap + arrow buttons calling scrollBy()), not a copy of the
   Hero's crossfade slider or of plt-leisure-theme's own featured-tours
   design. ------------------------------------------------------------- */
.featured-tours {
	padding: 80px 0;
}

.featured-tours-heading {
	text-align: center;
	max-width: 640px;
	margin: 0 auto 48px;
}

.featured-tours-eyebrow {
	display: inline-block;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--rbl-color-primary);
	margin-bottom: 10px;
}

.featured-tours-title {
	font-size: 32px;
	font-weight: 700;
}

.featured-tours-subtitle {
	color: var(--rbl-color-text-muted);
	margin-top: 12px;
}

.featured-tours-slider-wrap {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
}

.featured-tours-viewport {
	flex: 1;
	overflow: hidden;
	padding: 4px 4px 12px;
}

.featured-tours-track {
	display: flex;
	gap: 24px;
	/* Moved via JS `transform: translateX()`, not native scrollLeft — see
	   featured-tours-slider.js for why (scrollLeft gets silently clamped to
	   0 by the browser whenever the content doesn't overflow its container,
	   which is common on this full-bleed section with only a few featured
	   tours, and was why autoplay previously did nothing). A real CSS
	   transition drives each discrete one-card step (autoplay or arrow
	   click) — this replaced an earlier continuous-pixel-per-frame drift,
	   which read as jittery/janky on mobile. */
	transition: transform 0.5s ease;
	will-change: transform;
}

.featured-tours-arrow {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	border: 1px solid var(--rbl-color-border);
	background: var(--rbl-color-background);
	color: var(--rbl-color-primary);
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.featured-tours-arrow:hover {
	background: var(--rbl-color-primary);
	color: #fff;
	transform: translateY(-2px);
}

.tour-card {
	flex: 0 0 300px;
	background: var(--rbl-color-background);
	border: 1px solid var(--rbl-color-border);
	border-radius: 16px;
	overflow: hidden;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.tour-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.1);
}

.tour-card-image {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	background: var(--rbl-color-border);
}

.tour-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tour-card-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	background: var(--rbl-color-secondary);
	color: var(--rbl-color-text);
	font-size: 12px;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 999px;
}

.tour-card-body {
	padding: 20px;
}

.tour-card-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 10px;
}

.tour-card-meta-item {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 12px;
	font-weight: 600;
	color: var(--rbl-color-text-muted);
}

.tour-card-meta-item svg {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}

.tour-card-title {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	margin-bottom: 10px;
}

.tour-card-title a {
	color: var(--rbl-color-text);
}

.tour-card-title a:hover {
	color: var(--rbl-color-primary);
}

.tour-card-rating {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 14px;
}

.tour-card-stars {
	position: relative;
	display: inline-block;
	font-size: 14px;
	line-height: 1;
	letter-spacing: 2px;
}

.tour-card-stars-bg {
	color: var(--rbl-color-border);
}

.tour-card-stars-fg {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	white-space: nowrap;
	color: var(--rbl-color-secondary);
}

.tour-card-reviews {
	font-size: 12px;
	color: var(--rbl-color-text-muted);
}

.tour-card-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-top: 14px;
	border-top: 1px solid var(--rbl-color-border);
}

.tour-card-price {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
}

.tour-card-price-from {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--rbl-color-text-muted);
}

.tour-card-price-old {
	font-size: 13px;
	color: var(--rbl-color-text-muted);
	text-decoration: line-through;
}

.tour-card-price-current {
	font-size: 20px;
	font-weight: 700;
	color: var(--rbl-color-primary);
}

.tour-card-btn {
	flex-shrink: 0;
	font-size: 13px;
	font-weight: 700;
	color: var(--rbl-color-primary);
	border: 1.5px solid var(--rbl-color-primary);
	border-radius: 999px;
	padding: 8px 16px;
	transition: background 0.2s ease, color 0.2s ease;
}

.tour-card-btn:hover {
	background: var(--rbl-color-primary);
	color: #fff;
}

.featured-tours-view-all {
	text-align: center;
	margin-top: 48px;
}

@media (max-width: 640px) {
	.featured-tours {
		padding: 56px 0;
	}

	.featured-tours-title {
		font-size: 26px;
	}

	/* Arrows move below the card instead of sitting beside it — keeping
	   them as flex siblings ate ~150px of the viewport's width just for two
	   44px buttons, forcing a narrow card even after centering it. Moving
	   them under the card frees it to use nearly the section's full width,
	   matching how the Tours archive's own single-column mobile card looks
	   ("tal cual como se ve la card en celular de archive tours") — arrows
	   stay visible (still needed once autoplay pauses on touch), just
	   relocated to a row of their own via CSS Grid areas (no markup change
	   needed: DOM order stays prev/viewport/next, only the visual position
	   changes). */
	.featured-tours-slider-wrap {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			"viewport viewport"
			"prev next";
		gap: 16px;
	}

	.featured-tours-viewport {
		grid-area: viewport;
	}

	.featured-tours-prev {
		grid-area: prev;
		justify-self: start;
	}

	.featured-tours-next {
		grid-area: next;
		justify-self: end;
	}

	.tour-card {
		/* One full card, centered — now only the section's own
		   .container-fluid padding (20px × 2) and the viewport's own
		   4px × 2 padding need subtracting, since the arrows no longer
		   share this row. */
		flex-basis: calc(100vw - 48px);
	}
}

/* Home Story teaser — full-bleed edge-to-edge section (deliberately NOT
   wrapped in .container like every other section on this page), reusing
   the About page's own Our Story content in condensed form: same
   eyebrow/title, only the first paragraph, a square image (About's own is
   a tall rectangle) instead of About's own CTA/second paragraph. -------- */
.home-story-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.home-story-text {
	display: flex;
	align-items: center;
	/* Footer bg color at 10% opacity, not full opacity, so the column reads
	   as a soft tint instead of plain white — color-mix() keeps this tied
	   to whatever footer color is actually configured in the admin rather
	   than a hardcoded tint; the rgba() line right before it is only a
	   fallback (using the same default footer color as everywhere else in
	   this theme) for browsers old enough not to support color-mix(). */
	background-color: rgba(0, 27, 2, 0.1);
	background-color: color-mix(in srgb, var(--rbl-color-footer-bg) 10%, transparent);
}

.home-story-text-inner {
	max-width: 480px;
	padding: 64px 8%;
}

.home-story-eyebrow {
	display: inline-block;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--rbl-color-primary);
	margin-bottom: 10px;
}

.home-story-title {
	font-size: 34px;
	font-weight: 700;
	line-height: 1.2;
	margin-bottom: 18px;
}

.home-story-desc {
	color: var(--rbl-color-text-muted);
	line-height: 1.75;
	margin-bottom: 28px;
}

.home-story-image {
	position: relative;
	aspect-ratio: 1 / 1;
	background: var(--rbl-color-border);
	overflow: hidden;
}

.home-story-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

@media (max-width: 900px) {
	.home-story-grid {
		grid-template-columns: 1fr;
	}

	.home-story-text-inner {
		max-width: none;
		padding: 48px 6%;
	}
}

/* Blog section — 3-card grid, see inc/blog-section.php. -------------------- */
.blog-section {
	padding: 80px 0;
	/* Same footer-green-at-10%-opacity tint as .home-story-text. */
	background-color: rgba(0, 27, 2, 0.1);
	background-color: color-mix(in srgb, var(--rbl-color-footer-bg) 10%, transparent);
}

.blog-section-heading {
	text-align: center;
	max-width: 640px;
	margin: 0 auto 48px;
}

.blog-section-eyebrow {
	display: inline-block;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--rbl-color-primary);
	margin-bottom: 10px;
}

.blog-section-title {
	font-size: 32px;
	font-weight: 700;
}

.blog-section-subtitle {
	color: var(--rbl-color-text-muted);
	margin-top: 12px;
}

.blog-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}

.blog-card {
	background: var(--rbl-color-background);
	border: 1px solid var(--rbl-color-border);
	border-radius: 16px;
	overflow: hidden;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.blog-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.1);
}

.blog-card-image {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	background: var(--rbl-color-border);
}

/* Category badge + meta row — additions used by the archive/single
   templates on top of the .blog-card markup already shipped for the Home
   Blog teaser (inc/blog-section.php), scoped so they never change that
   teaser's own look (it doesn't wrap its date in .blog-card-meta or add
   a .blog-card-cat badge at all). */
.blog-card-cat {
	position: absolute;
	top: 12px;
	left: 12px;
	background: var(--rbl-color-secondary);
	color: var(--rbl-color-text);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 4px 10px;
	border-radius: 999px;
}

.blog-card-meta {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 10px;
}

.blog-card-meta .blog-card-date,
.blog-card-meta .blog-card-read-time {
	display: inline;
	margin-bottom: 0;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--rbl-color-text-muted);
}

.blog-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.blog-card-body {
	padding: 24px;
}

.blog-card-date {
	display: block;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--rbl-color-text-muted);
	margin-bottom: 10px;
}

.blog-card-title {
	font-size: 19px;
	font-weight: 700;
	line-height: 1.35;
	margin-bottom: 12px;
}

.blog-card-title a {
	color: var(--rbl-color-text);
}

.blog-card-title a:hover {
	color: var(--rbl-color-primary);
}

.blog-card-excerpt {
	font-size: 14px;
	line-height: 1.7;
	color: var(--rbl-color-text-muted);
	margin-bottom: 16px;
}

.blog-card-link {
	font-size: 13px;
	font-weight: 700;
	color: var(--rbl-color-primary);
	position: relative;
}

.blog-card-link::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -3px;
	width: 0;
	height: 2px;
	background: var(--rbl-color-primary);
	transition: width 0.25s ease;
}

.blog-card-link:hover::after {
	width: 100%;
}

.blog-view-all {
	text-align: center;
	margin-top: 48px;
}

@media (max-width: 900px) {
	.blog-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {
	.blog-section {
		padding: 56px 0;
	}

	.blog-section-title {
		font-size: 26px;
	}
}

/* Testimonials — infinite autoplay slider, see inc/testimonials-section.php
   and assets/js/testimonials-slider.js (same transform-driven mechanism as
   Featured Tours, own dedicated classes). ------------------------------ */
.testimonials-section {
	padding: 80px 0;
}

.testimonials-heading {
	text-align: center;
	max-width: 640px;
	margin: 0 auto 48px;
}

.testimonials-eyebrow {
	display: inline-block;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--rbl-color-primary);
	margin-bottom: 10px;
}

.testimonials-title {
	font-size: 32px;
	font-weight: 700;
}

.testimonials-subtitle {
	color: var(--rbl-color-text-muted);
	margin-top: 12px;
}

.testimonials-slider-wrap {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
}

.testimonials-viewport {
	flex: 1;
	overflow: hidden;
	padding: 4px 4px 12px;
}

.testimonials-track {
	display: flex;
	gap: 24px;
	/* Same discrete one-card-step-per-transition mechanism as
	   .featured-tours-track — see that rule's own comment. */
	transition: transform 0.5s ease;
	will-change: transform;
}

.testimonials-arrow {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	border: 1px solid var(--rbl-color-border);
	background: var(--rbl-color-background);
	color: var(--rbl-color-primary);
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.testimonials-arrow:hover {
	background: var(--rbl-color-primary);
	color: #fff;
	transform: translateY(-2px);
}

.testimonial-card {
	flex: 0 0 340px;
	/* Footer-green at 10% opacity, same tint as .home-story-text/
	   .blog-section, not a solid dark fill — a full-opacity dark card read
	   as too harsh/"tosco" against the rest of the page. Text goes back to
	   the site's normal (dark) text colors instead of white to stay legible
	   and sober on this much lighter background. */
	background-color: rgba(0, 27, 2, 0.1);
	background-color: color-mix(in srgb, var(--rbl-color-footer-bg) 10%, transparent);
	border-radius: 16px;
	padding: 32px;
	display: flex;
	flex-direction: column;
}

.testimonial-text {
	font-size: 15px;
	line-height: 1.75;
	color: var(--rbl-color-text);
	margin-bottom: 24px;
	flex: 1;
}

.testimonial-text p:last-child {
	margin-bottom: 0;
}

/* Quote icon replaces the avatar entirely — sits next to the author's
   name/role at the bottom instead of a photo. */
.testimonial-author {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-top: 20px;
	border-top: 1px solid var(--rbl-color-border);
}

.testimonial-quote-icon {
	flex-shrink: 0;
	width: 28px;
	height: 21px;
	color: var(--rbl-color-secondary);
}

.testimonial-author-info {
	display: flex;
	flex-direction: column;
}

.testimonial-name {
	font-size: 15px;
	font-weight: 700;
	color: var(--rbl-color-text);
}

.testimonial-role {
	font-size: 13px;
	color: var(--rbl-color-text-muted);
}

@media (max-width: 640px) {
	.testimonials-section {
		padding: 56px 0;
	}

	.testimonials-title {
		font-size: 26px;
	}

	/* Same "arrows move below the card" fix as .featured-tours-slider-wrap's
	   own mobile rule — see that rule's comment for the full reasoning. */
	.testimonials-slider-wrap {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			"viewport viewport"
			"prev next";
		gap: 16px;
	}

	.testimonials-viewport {
		grid-area: viewport;
	}

	.testimonials-prev {
		grid-area: prev;
		justify-self: start;
	}

	.testimonials-next {
		grid-area: next;
		justify-self: end;
	}

	.testimonial-card {
		/* One full card, centered — only the section's own .container-fluid
		   padding (20px × 2) and the viewport's own 4px × 2 padding need
		   subtracting now that the arrows no longer share this row. */
		flex-basis: calc(100vw - 48px);
	}
}

/* Home Contact section — same full-bleed 2-column structure/proportions as
   .home-story-grid above it, form instead of an image on the right. This is
   the LAST section before the footer, so the whole section's own background
   is the same solid --rbl-color-footer-bg as the footer itself — but
   matching the *color* alone wasn't actually enough: the footer's top edge
   is the shared downward-curving clip-path (var(--rbl-hero-arc)), which
   clips away the footer's own top corners without changing its box height,
   so what shows through that clipped area is whatever sits BEHIND both
   elements (the page's own white background), regardless of what color the
   section above happens to be — the two sections are adjacent in normal
   flow, not overlapping, so there's nothing of Home Contact's own
   background actually present in that clipped region for the color match
   to help with. The real fix is geometric: extra padding-bottom plus an
   equal negative margin-bottom pushes this section's own painted
   background down underneath where the footer's curve clips away — the
   footer (later in DOM order) still paints its own curved shape on top
   normally, but now Home Contact's matching-color background is what shows
   through the clipped corners instead of raw white. */
.home-contact {
	position: relative;
	/* Explicitly stacked below .site-footer's own z-index: 2, so the
	   footer's curved top edge is always guaranteed to paint on top of
	   this section's extended background in their overlapping region. */
	z-index: 1;
	background: var(--rbl-color-footer-bg);
	padding-bottom: 100px;
	margin-bottom: -100px;
}

.home-contact-grid {
	display: grid;
	grid-template-columns: 30% 70%;
	position: relative;
	background-size: cover;
	background-position: center;
	/* The photo now spans the whole section (both columns), not just the
	   text column, with an 80% brand-green overlay on top — per explicit
	   client request. Same fallback-then-color-mix pattern as everywhere
	   else in this theme: the rgba() line is only a fallback (using the
	   same default footer color as elsewhere) for browsers old enough not
	   to support color-mix(); background-blend-mode is required for this
	   color layer to have any visible effect at all over an opaque photo —
	   background-color normally sits *behind* the image in the CSS
	   background-layer stack and would otherwise be fully hidden by it. */
	background-color: rgba(0, 27, 2, 0.8);
	background-color: color-mix(in srgb, var(--rbl-color-footer-bg) 80%, transparent);
	background-blend-mode: multiply;
}

.home-contact-text {
	position: relative;
	display: flex;
	align-items: center;
}

.home-contact-text-inner {
	max-width: 480px;
	padding: 64px 8%;
	position: relative;
	z-index: 1;
}

.home-contact-title {
	font-size: 34px;
	font-weight: 700;
	line-height: 1.2;
	margin-bottom: 18px;
	color: #fff;
}

.home-contact-desc {
	color: rgba(255, 255, 255, 0.9);
	line-height: 1.75;
	margin-bottom: 28px;
}

.home-contact-whatsapp {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.home-contact-whatsapp svg {
	width: 20px;
	height: 20px;
}

.home-contact-form-col {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 64px 4%;
}

.home-contact-form-card {
	/* Reuses .contact-form-card's own card look (padding/border-radius/
	   shadow) — width is wider than that class's own 720px default now
	   that this column is 70% of the section (not a half-width column),
	   and its colors are inverted to a dark, translucent-green card with
	   white text — matching the photo+overlay background around it —
	   instead of the plain white card page-contact-us.php still uses. */
	width: 100%;
	max-width: 640px;
	margin: 0;
	background-color: rgba(0, 27, 2, 0.8);
	background-color: color-mix(in srgb, var(--rbl-color-footer-bg) 80%, transparent);
}

.home-contact-form-card .contact-form-field label {
	color: rgba(255, 255, 255, 0.85);
}

.home-contact-form-card .contact-form-field input,
.home-contact-form-card .contact-form-field textarea,
.home-contact-form-card .contact-form-field select {
	background-color: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.3);
	color: #fff;
}

.home-contact-form-card .contact-form-field input::placeholder,
.home-contact-form-card .contact-form-field textarea::placeholder {
	color: rgba(255, 255, 255, 0.5);
}

.home-contact-form-card .contact-form-field input:focus,
.home-contact-form-card .contact-form-field textarea:focus {
	border-color: #fff;
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.15);
}

@media (max-width: 900px) {
	.home-contact-grid {
		grid-template-columns: 1fr;
	}

	.home-contact-text-inner,
	.home-contact-form-col {
		max-width: none;
		padding: 48px 6%;
	}

	.home-contact-form-card {
		max-width: none;
	}
}

/* Blog archive (home.php) + single post (single.php) --------------------- */
.blog-archive,
.blog-single {
	padding: 64px 0 80px;
}

.blog-archive-layout,
.blog-single-layout {
	display: grid;
	grid-template-columns: 1fr 300px;
	gap: 48px;
	align-items: start;
}

.blog-badge {
	display: inline-block;
	background: var(--rbl-color-secondary);
	color: var(--rbl-color-text);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 5px 12px;
	border-radius: 999px;
}

.blog-badge-featured {
	background: rgba(255, 255, 255, 0.2);
	color: #fff;
}

.blog-featured-card {
	position: relative;
	display: block;
	min-height: 380px;
	border-radius: 20px;
	overflow: hidden;
	background-color: var(--rbl-color-footer-bg);
	background-size: cover;
	background-position: center;
	margin-bottom: 40px;
}

.blog-featured-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.15) 60%);
}

.blog-featured-content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: 100%;
	padding: 40px;
	color: #fff;
}

.blog-featured-badges {
	display: flex;
	gap: 8px;
	margin-bottom: 16px;
}

.blog-featured-content h2 {
	font-size: 28px;
	font-weight: 700;
	margin-bottom: 12px;
	max-width: 640px;
}

.blog-featured-content p {
	color: rgba(255, 255, 255, 0.85);
	max-width: 640px;
	margin-bottom: 16px;
	line-height: 1.6;
}

.blog-featured-content .blog-card-link {
	color: #fff;
}

.blog-featured-content .blog-card-link::after {
	background: #fff;
}

.blog-archive-empty {
	color: var(--rbl-color-text-muted);
	padding: 40px 0;
	text-align: center;
}

.blog-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 40px;
	justify-content: center;
}

.blog-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border-radius: 999px;
	border: 1px solid var(--rbl-color-border);
	color: var(--rbl-color-text);
	font-weight: 600;
	font-size: 14px;
	transition: background 0.2s ease, color 0.2s ease;
}

.blog-pagination .page-numbers:hover {
	background: var(--rbl-color-primary);
	color: #fff;
	border-color: var(--rbl-color-primary);
}

.blog-pagination .page-numbers.current {
	background: var(--rbl-color-primary);
	color: #fff;
	border-color: var(--rbl-color-primary);
}

/* Sidebar (shared by archive + single) ------------------------------------ */
.blog-sidebar {
	position: sticky;
	top: 100px;
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.blog-sidebar-widget h3 {
	font-size: 16px;
	font-weight: 700;
	margin-bottom: 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--rbl-color-border);
}

.blog-sidebar-search {
	display: flex;
	gap: 8px;
}

.blog-sidebar-search input {
	flex: 1;
	padding: 10px 14px;
	border: 1px solid var(--rbl-color-border);
	border-radius: 10px;
	font-family: var(--rbl-font-body);
	font-size: 14px;
	color: var(--rbl-color-text);
	background: var(--rbl-color-background);
}

.blog-sidebar-search button {
	flex-shrink: 0;
	width: 42px;
	height: 42px;
	border: none;
	border-radius: 10px;
	background: var(--rbl-color-primary);
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.blog-sidebar-search button svg {
	width: 18px;
	height: 18px;
}

.blog-sidebar-recent {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.blog-sidebar-recent-item {
	display: flex;
	gap: 12px;
	align-items: center;
}

.blog-sidebar-recent-thumb {
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	border-radius: 10px;
	overflow: hidden;
	background: var(--rbl-color-border);
}

.blog-sidebar-recent-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.blog-sidebar-recent-info {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.blog-sidebar-recent-title {
	font-size: 13px;
	font-weight: 700;
	color: var(--rbl-color-text);
	line-height: 1.4;
}

.blog-sidebar-recent-date {
	font-size: 11px;
	color: var(--rbl-color-text-muted);
}

.blog-sidebar-cats {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.blog-sidebar-cats a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 0;
	font-size: 14px;
	color: var(--rbl-color-text);
	border-bottom: 1px solid var(--rbl-color-border);
	transition: color 0.2s ease;
}

.blog-sidebar-cats li:last-child a {
	border-bottom: none;
}

.blog-sidebar-cats a:hover {
	color: var(--rbl-color-primary);
}

.blog-sidebar-cats-count {
	font-size: 12px;
	color: var(--rbl-color-text-muted);
}

.blog-toc-list {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.blog-toc-list a {
	display: block;
	padding: 6px 0 6px 14px;
	font-size: 13px;
	color: var(--rbl-color-text-muted);
	border-left: 2px solid var(--rbl-color-border);
	transition: color 0.2s ease, border-color 0.2s ease;
}

.blog-toc-list a.is-active,
.blog-toc-list a:hover {
	color: var(--rbl-color-primary);
	border-left-color: var(--rbl-color-primary);
}

@media (max-width: 900px) {
	.blog-archive-layout,
	.blog-single-layout {
		grid-template-columns: 1fr;
	}

	.blog-sidebar {
		position: static;
	}
}

/* Single post hero --------------------------------------------------------- */
.single-blog-hero {
	position: relative;
	background-color: var(--rbl-color-footer-bg);
	background-size: cover;
	background-position: center;
	min-height: 420px;
	display: flex;
	align-items: flex-end;
	clip-path: var(--rbl-hero-arc);
}

.single-blog-hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.25) 70%);
}

.single-blog-hero-inner {
	position: relative;
	z-index: 1;
	color: #fff;
	padding-bottom: 48px;
}

.single-blog-hero-inner .blog-badge {
	margin-bottom: 16px;
}

.single-blog-hero-inner h1 {
	font-size: 38px;
	font-weight: 700;
	line-height: 1.2;
	max-width: 780px;
	margin-bottom: 16px;
}

.single-blog-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	font-size: 14px;
	color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 640px) {
	.single-blog-hero {
		min-height: 320px;
	}

	.single-blog-hero-inner h1 {
		font-size: 28px;
	}
}

/* Single post article body — real typography for long-form content, same
   scope/reasoning as .content-page-body (nothing else in this theme needed
   generic rich-text styling before that either). ------------------------- */
.blog-single-content {
	max-width: 100%;
	color: var(--rbl-color-text);
	font-size: 16px;
	line-height: 1.8;
}

.blog-single-content h2 {
	font-size: 26px;
	font-weight: 700;
	margin: 40px 0 16px;
}

.blog-single-content h2:first-child {
	margin-top: 0;
}

.blog-single-content h3 {
	font-size: 20px;
	font-weight: 700;
	margin: 28px 0 12px;
}

.blog-single-content p {
	margin: 0 0 18px;
}

.blog-single-content ul,
.blog-single-content ol {
	margin: 0 0 18px;
	padding-left: 24px;
}

.blog-single-content li {
	margin-bottom: 8px;
}

.blog-single-content img {
	border-radius: 16px;
	margin: 8px 0 24px;
}

.blog-single-content a {
	color: var(--rbl-color-primary);
	text-decoration: underline;
}

.blog-single-content blockquote {
	border-left: 3px solid var(--rbl-color-primary);
	padding-left: 18px;
	margin: 0 0 18px;
	color: var(--rbl-color-text-muted);
}

.blog-related {
	margin-top: 56px;
	padding-top: 40px;
	border-top: 1px solid var(--rbl-color-border);
}

.blog-related-title {
	font-size: 22px;
	font-weight: 700;
	margin-bottom: 24px;
}

.blog-related-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}

.blog-related-card {
	display: block;
}

.blog-related-image {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	border-radius: 14px;
	overflow: hidden;
	background: var(--rbl-color-border);
	margin-bottom: 12px;
}

.blog-related-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.blog-related-card-title {
	display: block;
	font-size: 15px;
	font-weight: 700;
	color: var(--rbl-color-text);
	line-height: 1.4;
}

.blog-related-card:hover .blog-related-card-title {
	color: var(--rbl-color-primary);
}

@media (max-width: 640px) {
	.blog-related-grid {
		grid-template-columns: 1fr;
	}
}

/* Single Tour page (single-rbl_tour.php) --------------------------------- */

/* Gallery — a multi-image-visible carousel (3 rectangular photos on
   desktop, arrow-driven, infinite loop via the same duplicated-content +
   transform trick as Featured Tours/Testimonials — see
   assets/js/tour-gallery-slider.js), not the earlier full-bleed crossfade
   this started as — client feedback made clear the reference design shows
   several cropped rectangular thumbnails at once, not one image filling
   the whole width. Every photo is force-cropped to the same rectangle via
   a fixed aspect-ratio box + object-fit: cover (centered), so a portrait/
   vertical original never distorts or breaks the grid's symmetry — the
   lightbox (below) is what lets a visitor see such a photo uncropped.
   **Lives inside .tour-hero itself** (see below), not as its own separate
   section above it — an earlier version stacked them as two consecutive
   sections, which read as the hero being "just a small strip" once the
   gallery took visual precedence above it; per client correction, the
   gallery and the title/facts band are one unified hero now, and the
   gallery specifically uses .container-fluid (full-bleed, same edge
   padding as the Home page's Featured Tours slider) while the title/facts
   band below it stays a normal .container. */
.tour-gallery-wrap {
	padding: 40px 0 32px;
}

.tour-gallery-slider-wrap {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
}

.tour-gallery-viewport {
	flex: 1;
	overflow: hidden;
}

.tour-gallery-track {
	display: flex;
	gap: 20px;
	transition: transform 0.4s ease;
}

.tour-gallery-item {
	flex: 0 0 calc((100% - 40px) / 3);
	aspect-ratio: 4 / 3;
	border-radius: 12px;
	overflow: hidden;
	border: none;
	padding: 0;
	background: var(--rbl-color-border);
	cursor: pointer;
}

.tour-gallery-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	transition: transform 0.3s ease;
}

.tour-gallery-item:hover img {
	transform: scale(1.04);
}

.tour-gallery-arrow {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	border: 1px solid var(--rbl-color-border);
	background: var(--rbl-color-background);
	color: var(--rbl-color-primary);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.tour-gallery-arrow:hover {
	background: var(--rbl-color-primary);
	color: #fff;
}

@media (max-width: 900px) {
	.tour-gallery-item {
		flex-basis: calc((100% - 20px) / 2);
	}
}

@media (max-width: 640px) {
	.tour-gallery-item {
		flex-basis: 82vw;
		/* A single, large, prominent photo per view on mobile crops much
		   more noticeably at the wide 4/3 ratio used for the 3-across
		   desktop row — especially against a portrait-oriented original —
		   so mobile uses a taller box that keeps more of the photo's
		   actual content in frame, still centered via object-position on
		   the img rule below. */
		aspect-ratio: 5 / 4;
	}
}

/* Lightbox — full-size, uncropped view of any gallery photo, with its own
   prev/next (cycles the complete gallery, not just the 3 visible in the
   carousel) and an X to close. Deliberately a from-scratch, dependency-
   free implementation (no external lightbox library), consistent with
   every other interactive component in this theme. */
.tour-lightbox {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.9);
}

.tour-lightbox.is-open {
	display: flex;
}

.tour-lightbox-stage {
	max-width: 90vw;
	max-height: 85vh;
}

.tour-lightbox-stage img {
	max-width: 90vw;
	max-height: 85vh;
	width: auto;
	height: auto;
	display: block;
	object-fit: contain;
	border-radius: 6px;
}

.tour-lightbox-close {
	position: absolute;
	top: 20px;
	right: 24px;
	width: 44px;
	height: 44px;
	border: none;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease;
}

.tour-lightbox-close:hover {
	background: rgba(255, 255, 255, 0.2);
}

.tour-lightbox-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 52px;
	height: 52px;
	border: none;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	font-size: 30px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease;
}

.tour-lightbox-arrow:hover {
	background: rgba(255, 255, 255, 0.2);
}

.tour-lightbox-prev {
	left: 20px;
}

.tour-lightbox-next {
	right: 20px;
}

@media (max-width: 640px) {
	.tour-lightbox-arrow {
		width: 40px;
		height: 40px;
		font-size: 22px;
	}

	.tour-lightbox-close {
		width: 36px;
		height: 36px;
		font-size: 22px;
		top: 12px;
		right: 12px;
	}
}

/* Gallery section — plain now (no overlay/tint of its own), the photos
   speak for themselves; the hero content moved into its own floating card
   below (see .tour-hero-card-section) rather than being layered on top of
   the photos, per client correction ("quita el slider... del hero"). Its
   own top/bottom breathing room comes from .tour-gallery-wrap's padding
   (declared further up, shared with the carousel's own spacing rules). */

/* Hero card — a long white rounded card with a light shadow, overlapping
   the bottom edge of the gallery above it via negative margin-top (same
   "floating card over the section above" technique as the Contact page's
   3 cards over its hero). Two columns: title (in the site's own green)
   on the left, three icon-over-value fact columns on the right. */
.tour-hero-card-section {
	position: relative;
	z-index: 1;
}

.tour-hero-card {
	margin-top: -48px;
	background: var(--rbl-color-background);
	border-radius: 16px;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1);
	padding: 32px 40px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 32px;
}

.tour-hero-card-title h1 {
	font-size: 30px;
	font-weight: 700;
	color: var(--rbl-color-primary);
	margin-bottom: 10px;
}

.tour-info-rating {
	margin-bottom: 0;
}

.tour-hero-card-facts {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

.tour-hero-fact {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 8px;
	padding: 0 12px;
	border-left: 1px solid var(--rbl-color-border);
}

.tour-hero-fact:first-child {
	border-left: none;
}

.tour-hero-fact-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--rbl-color-primary) 10%, transparent);
	color: var(--rbl-color-primary);
}

.tour-hero-fact-icon svg {
	width: 24px;
	height: 24px;
}

.tour-hero-fact-value {
	font-size: 14px;
	font-weight: 700;
	color: var(--rbl-color-text);
}

@media (max-width: 900px) {
	.tour-hero-card {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.tour-hero-card-title {
		text-align: center;
	}

	.tour-info-rating {
		justify-content: center;
	}
}

@media (max-width: 640px) {
	.tour-hero-card {
		margin-top: -32px;
		padding: 24px 20px;
	}

	.tour-hero-card-title h1 {
		font-size: 24px;
	}

	.tour-hero-card-facts {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.tour-hero-fact {
		flex-direction: row;
		border-left: none !important;
		border-top: 1px solid var(--rbl-color-border);
		padding-top: 16px;
		text-align: left;
	}

	.tour-hero-fact:first-child {
		border-top: none;
		padding-top: 0;
	}

	.tour-gallery-wrap {
		padding: 24px 0 20px;
	}
}

/* Two-column content layout ------------------------------------------------ */
.tour-single {
	padding: 56px 0 80px;
}

.tour-single-layout {
	display: grid;
	grid-template-columns: 1fr 380px;
	gap: 48px;
	align-items: start;
}

/* Grid items default to min-width:auto, not 0 — without this, any
   unshrinkable content in the description column (a client-pasted table,
   an <img> with a hardcoded width attribute, a long unbroken word/URL from
   the WYSIWYG tour description) forces this 1fr track past its fair share,
   which overflows the whole grid past .container's max-width and shoves
   the 380px sidebar out past the right edge along with it — the exact
   "booking box escapes the container" bug this fixes. */
.tour-single-main {
	min-width: 0;
}

.tour-sidebar {
	min-width: 0;
}

/* Rich WYSIWYG content (description/itinerary/tabs) is client-authored and
   can contain a pasted table/image/iframe with its own fixed width — cap
   them to the column instead of letting them force the layout wide. */
.tour-rich-content img,
.tour-rich-content iframe {
	max-width: 100%;
	height: auto;
}

.tour-rich-content table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
}

.tour-section {
	margin-bottom: 48px;
}

.tour-section:last-child {
	margin-bottom: 0;
}

.tour-section-title {
	font-size: 24px;
	font-weight: 700;
	margin-bottom: 20px;
}

.tour-lead {
	font-size: 18px;
	line-height: 1.7;
	color: var(--rbl-color-text);
	font-weight: 600;
	margin-bottom: 16px;
}

/* Rich WYSIWYG content typography — reused wherever this page renders
   admin-authored HTML (description, itinerary days, includes/excludes,
   extra_info tabs), same scope/reasoning as .content-page-body. */
.tour-rich-content {
	color: var(--rbl-color-text);
	font-size: 16px;
	line-height: 1.8;
}

.tour-rich-content h2,
.tour-rich-content h3 {
	font-weight: 700;
	margin: 24px 0 12px;
}

.tour-rich-content h2:first-child,
.tour-rich-content h3:first-child {
	margin-top: 0;
}

.tour-rich-content p {
	margin: 0 0 16px;
}

.tour-rich-content ul,
.tour-rich-content ol {
	margin: 0 0 16px;
	padding-left: 22px;
}

.tour-rich-content li {
	margin-bottom: 6px;
}

.tour-rich-content a {
	color: var(--rbl-color-primary);
	text-decoration: underline;
}

/* Highlights ---------------------------------------------------------------*/
.tour-highlights-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px 24px;
}

.tour-highlights-list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 15px;
	color: var(--rbl-color-text);
}

.tour-highlight-check {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin-top: 1px;
	padding: 3px;
	border-radius: 999px;
	background: var(--rbl-color-primary);
	color: #fff;
}

@media (max-width: 640px) {
	.tour-highlights-list {
		grid-template-columns: 1fr;
	}
}

/* Itinerary accordion — native <details>/<summary>, same reasoning as the
   FAQ accordion (rbl_render_faq_item()): the answer content is always
   present in the DOM whether a day is open or closed, no JS required. --- */
.tour-itinerary {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.tour-itinerary-day {
	background: var(--rbl-color-background);
	border: 1px solid var(--rbl-color-border);
	border-radius: 12px;
	overflow: hidden;
}

.tour-itinerary-day-summary {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 20px;
	cursor: pointer;
	list-style: none;
}

.tour-itinerary-day-summary::-webkit-details-marker {
	display: none;
}

.tour-itinerary-day-number {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	height: 32px;
	padding: 0 10px;
	border-radius: 999px;
	background: var(--rbl-color-primary);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
}

.tour-itinerary-day-title {
	flex: 1;
	font-size: 16px;
	font-weight: 700;
	color: var(--rbl-color-text);
}

.tour-itinerary-day-icon {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	color: var(--rbl-color-text-muted);
	transition: transform 0.2s ease;
}

.tour-itinerary-day-icon svg {
	width: 100%;
	height: 100%;
}

.tour-itinerary-day[open] .tour-itinerary-day-icon {
	transform: rotate(180deg);
}

.tour-itinerary-day[open] .tour-itinerary-day-summary {
	border-bottom: 1px solid var(--rbl-color-border);
}

.tour-itinerary-day-body {
	padding: 18px 20px 22px;
}

/* Generic tabs (Includes/Excludes/Additional Info/Otros Bloques) + reused
   by the booking box's own Book Now/Request a Quote switcher. Always a
   single row (never flex-wrap) — a wrapping tab bar reads as disorganized,
   per direct client feedback ("los tabs se ven desordenados... deben de
   estar en una sola fila"). When there are more tabs than fit (the tour
   content tabs can have several "Otros Bloques" rows on top of the 3 fixed
   ones), the row scrolls horizontally instead of wrapping — simpler and
   more standard than a "+N more" overflow menu, and it needs no JS. ------ */
.rbl-tabs-nav {
	display: flex;
	gap: 4px;
	border-bottom: 2px solid var(--rbl-color-border);
	margin-bottom: 24px;
	flex-wrap: nowrap;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}

.rbl-tab-btn {
	padding: 12px 18px;
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -2px;
	font-family: var(--rbl-font-body);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--rbl-color-text-muted);
	cursor: pointer;
	white-space: nowrap;
	flex-shrink: 0;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.rbl-tab-btn:hover {
	color: var(--rbl-color-primary);
}

.rbl-tab-btn.is-active {
	color: var(--rbl-color-primary);
	border-bottom-color: var(--rbl-color-primary);
}

.rbl-tab-panel {
	display: none;
}

.rbl-tab-panel.is-active {
	display: block;
}

/* On mobile, stacking the content tabs into full-width rows reads better
   than a horizontally scrolling bar — explicit client request ("en celular
   apilarlo en filas es la mejor solución"). Scoped to the tour content tabs
   only (.tour-section.rbl-tabs-group), not the booking box's own Book Now/
   Request a Quote switcher (.tour-booking-tabs) — that one is always just 2
   short labels and already reads fine as a single row at any width. */
@media (max-width: 640px) {
	.tour-section.rbl-tabs-group .rbl-tabs-nav {
		flex-direction: column;
		overflow-x: visible;
		border-bottom: none;
		gap: 2px;
	}

	.tour-section.rbl-tabs-group .rbl-tab-btn {
		width: 100%;
		text-align: left;
		margin-bottom: 0;
		padding: 14px 16px;
		border-bottom: 1px solid var(--rbl-color-border);
		border-left: 3px solid transparent;
	}

	.tour-section.rbl-tabs-group .rbl-tab-btn.is-active {
		border-bottom-color: var(--rbl-color-border);
		border-left-color: var(--rbl-color-primary);
		background: color-mix(in srgb, var(--rbl-color-primary) 6%, transparent);
	}
}

@media (max-width: 900px) {
	.tour-single-layout {
		grid-template-columns: 1fr;
	}
}

/* Booking sidebar box ------------------------------------------------------ */
.tour-sidebar {
	position: sticky;
	top: 100px;
}

.tour-booking-box {
	background: var(--rbl-color-background);
	border: 1px solid var(--rbl-color-border);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

.tour-booking-head {
	background: var(--rbl-color-footer-bg);
	padding: 28px 24px;
	text-align: center;
	color: #fff;
}

.tour-booking-from-label {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: rgba(255, 255, 255, 0.6);
	margin-bottom: 6px;
}

.tour-booking-price {
	font-size: 32px;
	font-weight: 800;
	line-height: 1;
}

.tour-booking-old-price {
	margin-top: 8px;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.6);
}

.tour-booking-old-price s {
	margin-right: 6px;
}

.tour-offer-badge {
	display: inline-block;
	background: var(--rbl-color-secondary);
	color: var(--rbl-color-text);
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	padding: 2px 8px;
	border-radius: 999px;
}

.tour-booking-note {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.6);
	margin-top: 8px;
}

.tour-price-options {
	margin-top: 18px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	text-align: left;
}

.tour-price-option {
	display: block;
	position: relative;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 10px;
	padding: 12px 14px;
	background: rgba(255, 255, 255, 0.05);
	cursor: pointer;
	transition: border-color 0.2s ease, background 0.2s ease;
}

.tour-price-option:hover {
	border-color: rgba(255, 255, 255, 0.4);
}

.tour-price-option.is-active {
	border-color: var(--rbl-color-secondary);
	background: rgba(255, 255, 255, 0.1);
}

.tour-price-option-input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.tour-price-option-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.tour-price-option-label {
	font-size: 13px;
	font-weight: 700;
}

.tour-price-option-price {
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
}

.tour-price-option-desc {
	display: block;
	margin-top: 4px;
	font-size: 11.5px;
	color: rgba(255, 255, 255, 0.7);
}

.tour-booking-body {
	padding: 24px;
}

.tour-booking-body .contact-form-field {
	margin-bottom: 16px;
}

.tour-booking-trust {
	text-align: center;
	font-size: 11.5px;
	color: var(--rbl-color-text-muted);
	margin-top: 16px;
}

@media (max-width: 900px) {
	.tour-sidebar {
		position: static;
	}
}

/* Related tours ------------------------------------------------------------ */
.tour-related {
	padding: 0 0 80px;
}

.tour-related-title {
	font-size: 24px;
	font-weight: 700;
	margin-bottom: 24px;
}

.tour-related-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.tour-related-grid .tour-card {
	flex: none;
}

@media (max-width: 900px) {
	.tour-related-grid {
		grid-template-columns: 1fr;
	}
}

/* WooCommerce pages (Cart/Checkout/My Account/Order-Received) — index.php,
   the only template WC falls through to in this theme. --------------------- */
.wc-page-content {
	padding: 60px 0 100px;
}

/* Booking summary on the order-received page, rendered server-side from the
   rbl_booking cookie — see inc/tour-booking-summary.php. */
.rbl-booking-summary {
	background: var(--rbl-color-background);
	border: 1px solid var(--rbl-color-border);
	border-radius: 12px;
	padding: 28px 32px;
	margin-bottom: 40px;
}

.rbl-bs-title {
	font-size: 20px;
	font-weight: 700;
	margin-bottom: 20px;
}

.rbl-bs-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px 32px;
}

.rbl-bs-field {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 10px 0;
	border-bottom: 1px solid var(--rbl-color-border);
}

.rbl-bs-label {
	color: var(--rbl-color-text-muted);
	font-size: 14px;
}

.rbl-bs-value {
	font-weight: 600;
	text-align: right;
}

@media (max-width: 640px) {
	.rbl-bs-grid {
		grid-template-columns: 1fr;
	}
}

/* Tours archive (/experiences/) — archive-rbl_tour.php --------------------- */
.tours-archive-layout {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 40px;
	padding-top: 60px;
	padding-bottom: 100px;
	align-items: start;
}

.tours-filter-toggle {
	display: none;
	width: 100%;
	padding: 12px;
	background: var(--rbl-color-primary);
	color: #fff;
	border: none;
	border-radius: 8px;
	font-family: var(--rbl-font-body);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	cursor: pointer;
	margin-bottom: 24px;
}

.tours-filter-sidebar {
	background: var(--rbl-color-background);
	border: 1px solid var(--rbl-color-border);
	border-radius: 16px;
	padding: 28px;
	position: sticky;
	top: 100px;
}

.tours-filter-title {
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--rbl-color-primary);
	padding-bottom: 14px;
	margin-bottom: 20px;
	border-bottom: 2px solid var(--rbl-color-border);
}

.tours-filter-group {
	margin-bottom: 28px;
}

.tours-filter-group:last-of-type {
	margin-bottom: 20px;
}

.tours-filter-group-title {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--rbl-color-text-muted);
	margin-bottom: 12px;
}

.tours-filter-list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.tours-filter-list label {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	color: var(--rbl-color-text);
	cursor: pointer;
}

.tours-filter-list input[type="checkbox"] {
	accent-color: var(--rbl-color-primary);
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.tours-price-range-label {
	font-size: 15px;
	font-weight: 700;
	color: var(--rbl-color-primary);
	margin-bottom: 16px;
}

/* Dual-handle range slider: two overlapping <input type="range"> stacked
   absolutely with transparent tracks, a shared static track drawn once
   behind them (::before), and pointer-events disabled everywhere except
   the visible thumb — the standard robust technique for a WooCommerce-style
   min/max price filter without any JS-computed positioning math. */
.tours-price-range-sliders {
	position: relative;
	height: 24px;
	margin-bottom: 4px;
}

.tours-price-range-sliders::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 4px;
	background: var(--rbl-color-border);
	border-radius: 4px;
	transform: translateY(-50%);
}

.tours-price-slider {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	margin: 0;
	transform: translateY(-50%);
	-webkit-appearance: none;
	appearance: none;
	height: 4px;
	background: transparent;
	pointer-events: none;
}

.tours-price-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	pointer-events: auto;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--rbl-color-primary);
	cursor: pointer;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.tours-price-slider::-moz-range-thumb {
	pointer-events: auto;
	width: 18px;
	height: 18px;
	border: none;
	border-radius: 50%;
	background: var(--rbl-color-primary);
	cursor: pointer;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.tours-price-slider::-moz-range-track {
	background: transparent;
	border: none;
}

.tours-filter-reset {
	display: block;
	text-align: center;
	width: 100%;
	padding: 10px;
	border: 1.5px solid var(--rbl-color-border);
	border-radius: 8px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--rbl-color-text-muted);
	text-decoration: none;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.tours-filter-reset:hover {
	border-color: var(--rbl-color-primary);
	color: var(--rbl-color-primary);
}

.tours-archive-count {
	font-size: 14px;
	color: var(--rbl-color-text-muted);
	margin-bottom: 24px;
}

/* Two cards per row, larger than the 3-across .tour-related-grid — explicit
   client request ("usa 2 card por fila para que se vea más grande la
   card"). */
.tours-archive-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 28px;
}

.tours-archive-grid .tour-card {
	flex: none;
}

.tours-archive-empty {
	text-align: center;
	padding: 80px 20px;
	color: var(--rbl-color-text-muted);
}

.tours-archive-empty h3 {
	color: var(--rbl-color-text);
	font-size: 20px;
	margin-bottom: 8px;
}

.tours-archive-empty .btn-experiences {
	display: inline-flex;
	margin-top: 20px;
}

.tours-archive-pagination {
	display: flex;
	justify-content: center;
	gap: 6px;
	flex-wrap: wrap;
	margin-top: 48px;
}

.tours-archive-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1.5px solid var(--rbl-color-border);
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--rbl-color-text);
	text-decoration: none;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.tours-archive-pagination .page-numbers.current {
	background: var(--rbl-color-primary);
	border-color: var(--rbl-color-primary);
	color: #fff;
}

.tours-archive-pagination .page-numbers:hover {
	border-color: var(--rbl-color-primary);
	color: var(--rbl-color-primary);
}

.tours-archive-pagination .page-numbers.dots {
	border: none;
}

@media (max-width: 900px) {
	.tours-archive-layout {
		grid-template-columns: 1fr;
	}

	.tours-filter-toggle {
		display: block;
	}

	.tours-filter-sidebar {
		display: none;
		position: static;
	}

	.tours-filter-sidebar.is-open {
		display: block;
	}
}

@media (max-width: 640px) {
	.tours-archive-grid {
		grid-template-columns: 1fr;
	}
}

/* Photo Gallery (/photo-gallery/) — page-photo-gallery.php ------------------ */
.gallery-section {
	padding: 60px 0 100px;
}

/* Pill-styled tabs, one per rbl_gallery_category term — reuses the generic
   .rbl-tab-btn/.rbl-tab-panel markup and rbl-tabs.js switching mechanism
   already built for the single tour page's content tabs (no new JS needed),
   with an added .gallery-tab-btn modifier class overriding the visual style
   from underlined text tabs to rounded pill buttons. */
.gallery-tabs-nav {
	border-bottom: 1px solid var(--rbl-color-border);
	padding-bottom: 28px;
	margin-bottom: 32px;
	flex-wrap: wrap;
}

.gallery-tab-btn {
	border: 1.5px solid var(--rbl-color-primary);
	border-radius: 999px;
	margin-bottom: 0;
	padding: 10px 22px;
	background: transparent;
	color: var(--rbl-color-primary);
	text-transform: none;
	letter-spacing: normal;
}

.gallery-tab-btn:hover {
	background: color-mix(in srgb, var(--rbl-color-primary) 10%, transparent);
}

.gallery-tab-btn.is-active {
	background: var(--rbl-color-primary);
	border-color: var(--rbl-color-primary);
	color: #fff;
}

/* Bento-style masonry grid — a CSS-only technique (no JS layout library):
   every 3rd photo spans 2 columns and 2 rows, and grid-auto-flow: dense lets
   the browser automatically backfill the regular photos into the gaps
   around it, producing the varied-size mosaic look without needing any
   per-image "size" field the admin would have to set manually. */
.gallery-masonry-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: 170px;
	grid-auto-flow: dense;
	gap: 20px;
}

.gallery-masonry-item {
	/* A real <button>, not a <div> — gives the lightbox trigger free
	   keyboard accessibility (Enter/Space, native focus ring) instead of a
	   div needing a manually-added tabindex/role/keydown handler. Reset to
	   look identical to the plain div it replaced. */
	border: none;
	padding: 0;
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 12px;
	overflow: hidden;
	background: var(--rbl-color-border);
	cursor: pointer;
}

.gallery-masonry-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.gallery-masonry-item:nth-child(3n+1) {
	grid-column: span 2;
	grid-row: span 2;
}

.gallery-empty {
	text-align: center;
	padding: 80px 20px;
	color: var(--rbl-color-text-muted);
}

@media (max-width: 900px) {
	.gallery-masonry-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.gallery-masonry-grid {
		grid-template-columns: 1fr;
		grid-auto-rows: 220px;
	}

	/* A single column has no room for a 2-column-wide item — every photo
	   becomes a uniform full-width cell instead of overflowing. */
	.gallery-masonry-item:nth-child(3n+1) {
		grid-column: span 1;
		grid-row: span 1;
	}
}

/* Lightbox — full-size, uncropped view of any gallery photo, with prev/next
   cycling only the photos within the same category tab, and an X to close.
   Same from-scratch mechanism/markup as the single tour page's own
   .tour-lightbox, duplicated under its own class names (this theme's
   established convention — see .tour-card vs .blog-card — of giving each
   page's interactive components their own semantic classes even when the
   underlying mechanism is identical). */
.gallery-lightbox {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.9);
}

.gallery-lightbox.is-open {
	display: flex;
}

.gallery-lightbox-stage {
	max-width: 90vw;
	max-height: 85vh;
}

.gallery-lightbox-stage img {
	max-width: 90vw;
	max-height: 85vh;
	width: auto;
	height: auto;
	display: block;
	object-fit: contain;
	border-radius: 6px;
}

.gallery-lightbox-close {
	position: absolute;
	top: 20px;
	right: 24px;
	width: 44px;
	height: 44px;
	border: none;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease;
}

.gallery-lightbox-close:hover {
	background: rgba(255, 255, 255, 0.2);
}

.gallery-lightbox-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 52px;
	height: 52px;
	border: none;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	font-size: 30px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease;
}

.gallery-lightbox-arrow:hover {
	background: rgba(255, 255, 255, 0.2);
}

.gallery-lightbox-prev {
	left: 20px;
}

.gallery-lightbox-next {
	right: 20px;
}

@media (max-width: 640px) {
	.gallery-lightbox-arrow {
		width: 40px;
		height: 40px;
		font-size: 22px;
	}

	.gallery-lightbox-close {
		width: 36px;
		height: 36px;
		font-size: 22px;
		top: 12px;
		right: 12px;
	}
}