/* ==========================================================
   Mbezi Garden Hotel: Gallery (page + home showcase)
   ========================================================== */
:root {
	--g-bg: #0f0c07;
	--g-bg-2: #19140c;
	--g-panel: #211a10;
	--g-gold: #d4af37;
	--g-gold-2: #f0d47a;
	--g-text: #f6f0e1;
	--g-muted: #b8ab8e;
	--g-line: rgba(212, 175, 55, 0.22);
	--g-radius: 18px;
	--g-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* global-header.css forces "* { font-size: 20px }" on wide screens;
   inside the gallery, text sizes come from the parent instead. */
.g-page *,
.g-showcase *,
.g-lb * { font-size: inherit; font-family: inherit; }
.g-page, .g-showcase, .g-lb { font-family: 'Source Sans Pro', sans-serif; }

html.g-lock { overflow: hidden; }

.g-wrap {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 16px;
}

/* ---------- Shared type ---------- */
.g-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--g-gold);
}
.g-eyebrow::before {
	content: "";
	width: 40px;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--g-gold));
}
.g-title {
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: 600;
	font-size: clamp(34px, 5vw, 60px);
	line-height: 1.05;
	letter-spacing: -0.01em;
	color: var(--g-text);
	margin: 16px 0 0;
}
.g-title em {
	font-style: italic;
	background: linear-gradient(100deg, var(--g-gold) 10%, var(--g-gold-2) 50%, var(--g-gold) 90%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.g-lead {
	max-width: 520px;
	margin: 18px 0 0;
	font-size: 18px;
	line-height: 1.65;
	color: var(--g-muted);
}

/* ---------- Buttons ---------- */
.g-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.g-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 26px;
	border-radius: 999px;
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
	transition: transform 0.3s var(--g-ease), background 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.g-btn svg { width: 18px; height: 18px; }
.g-btn:hover { transform: translateY(-2px); }
.g-btn-gold {
	background: linear-gradient(135deg, var(--g-gold), #e8c860);
	color: #1a1406;
	box-shadow: 0 10px 30px rgba(212, 175, 55, 0.25);
}
.g-btn-gold:hover { box-shadow: 0 14px 36px rgba(212, 175, 55, 0.4); }
.g-btn-ghost { border-color: rgba(246, 240, 225, 0.3); color: var(--g-text); background: rgba(255, 255, 255, 0.03); }
.g-btn-ghost:hover { border-color: var(--g-gold); color: var(--g-gold); }

/* ==========================================================
   Gallery page
   ========================================================== */
.g-page { background: var(--g-bg); color: var(--g-text); font-size: 17px; }

/* Hero with drifting photo columns */
.g-hero {
	position: relative;
	overflow: hidden;
	overflow: clip;
	background:
		radial-gradient(900px 600px at 15% 30%, rgba(212, 175, 55, 0.14), transparent 60%),
		linear-gradient(180deg, var(--g-bg), var(--g-bg-2));
}
.g-hero-inner {
	position: relative;
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	align-items: center;
	gap: 48px;
	min-height: min(88vh, 860px);
}
.g-hero-copy { position: relative; z-index: 2; padding: 72px 0; }
.g-hero .g-title { font-size: clamp(42px, 6.4vw, 84px); }

.g-stats {
	display: grid;
	grid-template-columns: repeat(4, auto);
	justify-content: start;
	gap: 0;
	list-style: none;
	padding: 0;
	margin: 40px 0 0;
}
.g-stats li {
	padding: 0 26px;
	border-left: 1px solid var(--g-line);
}
.g-stats li:first-child { padding-left: 0; border-left: 0; }
.g-stats strong {
	display: block;
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 30px;
	font-weight: 600;
	color: var(--g-gold);
	line-height: 1.1;
}
.g-stats span { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--g-muted); }
.g-hero .g-actions { margin-top: 34px; }

.g-marquee {
	position: relative;
	height: min(88vh, 860px);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	transform: rotate(4deg) scale(1.12);
	-webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
	mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
}
.g-col { overflow: hidden; }
.g-col-inner {
	display: flex;
	flex-direction: column;
	gap: 16px;
	animation: g-up 60s linear infinite;
}
.g-col:nth-child(2) .g-col-inner { animation-name: g-down; animation-duration: 70s; }
.g-col:nth-child(3) .g-col-inner { animation-duration: 54s; }
.g-col-inner img {
	display: block;
	width: 100%;
	aspect-ratio: 9 / 14;
	object-fit: cover;
	border-radius: 14px;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
	filter: saturate(1.05) contrast(1.02);
}
.g-marquee:hover .g-col-inner { animation-play-state: paused; }
@keyframes g-up { from { transform: translateY(0); } to { transform: translateY(calc(-50% - 8px)); } }
@keyframes g-down { from { transform: translateY(calc(-50% - 8px)); } to { transform: translateY(0); } }

.g-scroll-cue {
	position: absolute;
	left: 50%;
	bottom: 22px;
	transform: translateX(-50%);
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	color: var(--g-muted);
	font-size: 11px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	text-decoration: none;
}
.g-scroll-cue::after {
	content: "";
	width: 1px;
	height: 38px;
	background: linear-gradient(180deg, var(--g-gold), transparent);
	animation: g-cue 2s var(--g-ease) infinite;
}
@keyframes g-cue { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* Collection */
.g-collection {
	padding: 110px 0 90px;
	background: linear-gradient(180deg, var(--g-bg-2), var(--g-bg));
}
.g-collection-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 28px;
	margin-bottom: 44px;
}
.g-collection-head .g-title { font-size: clamp(32px, 4.4vw, 52px); }

.g-filters {
	display: inline-flex;
	padding: 6px;
	gap: 4px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--g-line);
}
.g-filters button {
	padding: 10px 22px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--g-muted);
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.3s, color 0.3s;
}
.g-filters button:hover { color: var(--g-text); }
.g-filters button.active { background: var(--g-gold); color: #1a1406; }

.g-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-flow: dense;
	gap: 18px;
}

.g-note {
	margin: 28px 0 0;
	text-align: center;
	color: var(--g-muted);
	font-size: 15px;
}

/* ---------- Tile ---------- */
.g-tile {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	padding: 0;
	border: 0;
	border-radius: var(--g-radius);
	overflow: hidden;
	cursor: pointer;
	background: linear-gradient(110deg, #221b10 8%, #33291a 18%, #221b10 33%);
	background-size: 200% 100%;
	animation: g-shimmer 1.6s linear infinite;
	color: var(--g-text);
	text-align: left;
	font-family: 'Source Sans Pro', sans-serif;
	isolation: isolate;
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
	opacity: 0;
	transform: translateY(26px);
	transition: opacity 0.8s var(--g-ease) var(--d, 0ms), transform 0.8s var(--g-ease) var(--d, 0ms), box-shadow 0.4s;
}
.g-tile.is-in { opacity: 1; transform: none; }
.g-tile.is-loaded { animation: none; background: var(--g-panel); }
.g-tile[hidden] { display: none; }
.g-tile.is-feature { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.g-tile.is-wide { grid-column: span 2; aspect-ratio: auto; }

.g-tile img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
	transform: scale(1.02);
	transition: transform 1.2s var(--g-ease), filter 0.6s;
}
.g-tile::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	border: 1px solid rgba(212, 175, 55, 0);
	z-index: 3;
	transition: border-color 0.4s;
	pointer-events: none;
}
.g-shade {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(15, 12, 7, 0.35) 0%, transparent 28%, transparent 50%, rgba(15, 12, 7, 0.9) 100%);
	transition: opacity 0.4s;
}
.g-badge {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px 6px 9px;
	border-radius: 999px;
	background: rgba(15, 12, 7, 0.55);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.g-badge svg { width: 15px; height: 15px; color: var(--g-gold); }
.g-play {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	width: 64px;
	height: 64px;
	margin: -32px 0 0 -32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(246, 240, 225, 0.16);
	border: 1px solid rgba(246, 240, 225, 0.5);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: #fff;
	transform: scale(0.9);
	transition: transform 0.5s var(--g-ease), background 0.4s, border-color 0.4s;
}
.g-play svg { width: 26px; height: 26px; margin-left: 3px; }
.g-tile.is-feature .g-play { width: 88px; height: 88px; margin: -44px 0 0 -44px; }
.g-meta {
	position: absolute;
	left: 18px;
	right: 18px;
	bottom: 16px;
	z-index: 2;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
}
.g-date { font-size: 14px; color: #e8dfc8; }
.g-view {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--g-gold);
	opacity: 0;
	transform: translateX(-8px);
	transition: opacity 0.4s, transform 0.4s var(--g-ease);
}
.g-arrow { display: inline-block; transition: transform 0.4s var(--g-ease); }

.g-tile:hover,
.g-tile:focus-visible { box-shadow: 0 28px 60px rgba(0, 0, 0, 0.55); outline: none; }
.g-tile:hover img,
.g-tile:focus-visible img { transform: scale(1.09); }
.g-tile:hover::after,
.g-tile:focus-visible::after { border-color: rgba(212, 175, 55, 0.85); }
.g-tile:hover .g-play,
.g-tile:focus-visible .g-play { transform: scale(1.08); background: var(--g-gold); border-color: var(--g-gold); color: #1a1406; }
.g-tile:hover .g-view,
.g-tile:focus-visible .g-view { opacity: 1; transform: none; }
.g-tile:hover .g-arrow { transform: translateX(4px); }

/* Branded tile when Instagram gives no thumbnail */
.g-fallback {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	background:
		radial-gradient(circle at 30% 20%, rgba(212, 175, 55, 0.35), transparent 55%),
		radial-gradient(circle at 80% 90%, rgba(212, 175, 55, 0.2), transparent 50%),
		linear-gradient(160deg, #2a2113, #120e07);
	color: var(--g-gold);
}
.g-fallback svg { width: 54px; height: 54px; }
.g-fallback span {
	font-family: 'Playfair Display', Georgia, serif;
	font-style: italic;
	font-size: 22px;
	color: var(--g-text);
}
.g-tile.no-thumb .g-fallback { display: flex; }

@keyframes g-shimmer { to { background-position: -200% 0; } }

/* ==========================================================
   Home page showcase
   ========================================================== */
.g-showcase {
	position: relative;
	overflow: hidden;
	padding: 110px 0 96px;
	font-size: 17px;
	color: var(--g-text);
	background:
		radial-gradient(1000px 520px at 88% -10%, rgba(212, 175, 55, 0.16), transparent 60%),
		radial-gradient(800px 420px at -10% 110%, rgba(212, 175, 55, 0.1), transparent 60%),
		linear-gradient(180deg, var(--g-bg), var(--g-bg-2));
}
.g-showcase-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 44px;
}
.g-arrows { display: flex; gap: 10px; }
.g-arrows button {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	border: 1px solid rgba(246, 240, 225, 0.3);
	background: transparent;
	color: var(--g-text);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.g-arrows button:hover,
.g-arrows button:focus-visible { background: var(--g-gold); border-color: var(--g-gold); color: #1a1406; outline: none; }

.g-track {
	--edge: max(16px, calc((100vw - 1240px) / 2 + 16px));
	display: flex;
	gap: 20px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--edge);
	padding: 10px var(--edge) 30px;
	scrollbar-width: none;
}
.g-track::-webkit-scrollbar { display: none; }
.g-track .g-tile {
	flex: 0 0 clamp(230px, 24vw, 300px);
	aspect-ratio: 9 / 14;
	scroll-snap-align: start;
}
.g-showcase-foot { margin-top: 14px; }

/* ==========================================================
   Lightbox
   ========================================================== */
.g-lb {
	position: fixed;
	inset: 0;
	z-index: 2000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	font-size: 16px;
	opacity: 0;
	transition: opacity 0.25s ease;
}
.g-lb.is-open { opacity: 1; }
.g-lb[hidden] { display: none; }
.g-lb-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(8, 6, 3, 0.88);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
}
.g-lb-stage {
	position: relative;
	z-index: 1;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	transform: translateY(16px) scale(0.98);
	transition: transform 0.4s var(--g-ease);
}
.g-lb.is-open .g-lb-stage { transform: none; }
.g-lb-frame {
	position: relative;
	width: min(92vw, 440px);
	height: min(80vh, 780px);
	border-radius: 16px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(212, 175, 55, 0.35);
}
.g-lb:not(.is-reel) .g-lb-frame { width: min(92vw, 540px); }
.g-lb-frame iframe { position: relative; z-index: 1; width: 100%; height: 100%; border: 0; display: block; }
.g-lb-spinner {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 42px;
	height: 42px;
	margin: -21px 0 0 -21px;
	border-radius: 50%;
	border: 3px solid rgba(212, 175, 55, 0.25);
	border-top-color: var(--g-gold);
	animation: g-spin 0.9s linear infinite;
	z-index: 2;
	opacity: 0;
	transition: opacity 0.2s;
}
.g-lb.is-loading .g-lb-spinner { opacity: 1; }
@keyframes g-spin { to { transform: rotate(360deg); } }

.g-lb-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	color: var(--g-muted);
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 14px;
	letter-spacing: 0.08em;
}
.g-lb-open {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--g-gold);
	text-decoration: none;
	font-weight: 700;
}
.g-lb-open svg { width: 16px; height: 16px; }
.g-lb-open:hover { color: var(--g-gold-2); }

.g-lb-btn {
	position: absolute;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	border: 1px solid rgba(246, 240, 225, 0.25);
	background: rgba(246, 240, 225, 0.06);
	color: var(--g-text);
	font-size: 34px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.g-lb-btn:hover,
.g-lb-btn:focus-visible { background: var(--g-gold); border-color: var(--g-gold); color: #1a1406; outline: none; }
.g-lb-btn[hidden] { display: none; }
.g-lb-close { top: 20px; right: 20px; width: 48px; height: 48px; font-size: 30px; }
.g-lb-prev { left: max(16px, calc(50% - 360px)); top: 50%; margin-top: -28px; }
.g-lb-next { right: max(16px, calc(50% - 360px)); top: 50%; margin-top: -28px; }

/* ==========================================================
   Responsive
   ========================================================== */
@media (max-width: 1024px) {
	.g-hero-inner { grid-template-columns: 1fr; min-height: 0; }
	.g-hero-copy { padding: 64px 0 24px; }
	.g-marquee { height: 420px; transform: none; }
	.g-scroll-cue { display: none; }
	.g-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
	.g-stats { grid-template-columns: repeat(2, auto); row-gap: 20px; }
	.g-stats li:nth-child(3) { padding-left: 0; border-left: 0; }
	.g-marquee { height: 340px; grid-template-columns: repeat(3, 1fr); gap: 10px; }
	.g-col-inner { gap: 10px; }
	.g-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.g-tile { border-radius: 14px; }
	.g-badge { top: 10px; left: 10px; font-size: 11px; padding: 5px 10px 5px 8px; }
	.g-meta { left: 12px; right: 12px; bottom: 12px; }
	.g-view { display: none; }
	.g-play { width: 50px; height: 50px; margin: -25px 0 0 -25px; }
	.g-collection { padding: 72px 0 64px; }
	.g-showcase { padding: 72px 0 64px; }
	.g-arrows { display: none; }
	.g-lb { padding: 12px; }
	.g-lb-prev, .g-lb-next { top: auto; bottom: 14px; margin: 0; width: 48px; height: 48px; }
	.g-lb-prev { left: 14px; }
	.g-lb-next { right: 14px; }
	.g-lb-frame { height: min(74vh, 700px); }
	.g-lb-close { top: 10px; right: 10px; }
}

@media (prefers-reduced-motion: reduce) {
	.g-col-inner, .g-tile, .g-scroll-cue::after, .g-lb-spinner { animation: none !important; }
	.g-tile { opacity: 1; transform: none; transition: box-shadow 0.3s; }
	.g-tile img, .g-lb, .g-lb-stage { transition: none; }
}