/* Gastronome — single-shop.css
 *
 * Editorial layout for the `shop` CPT only. Hero → intro → gallery →
 * brands (5-col grid + "See All" CTA) → locations (cursor-image index list)
 * → other brands cross-link. Single-restaurant has its own CSS.
 *
 * Local scoped tokens for accent colors — neutral white-ish palette,
 * Gastronome is monochrome by design.
 */

.gn-single-shop {
	--accent: rgba(255,255,255,0.45);   /* muted overline / number color */
	--accent-hi: #ffffff;                /* hover/active accent */
}

/* ─── HERO ─── */
.gn-single-shop .shop-hero {
	position: relative;
	height: 100vh; height: 100svh;
	display: flex; align-items: center; justify-content: center;
	text-align: center; overflow: hidden;
}
.gn-single-shop .shop-hero-bg {
	position: absolute; inset: -10%;
	width: 120%; height: 120%; z-index: -2;
}
.gn-single-shop .shop-hero-bg img,
.gn-single-shop .shop-hero-bg video {
	width: 100%; height: 100%; object-fit: cover;
	display: block;
	max-width: none; max-height: none;
}
/* Hero video is decorative — no controls, no PiP button, no clicks. */
.gn-single-shop .shop-hero-bg video {
	pointer-events: none;
	outline: none;
}
.gn-single-shop .shop-hero-overlay {
	position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(180deg,
		rgba(0,0,0,0.55) 0%,
		rgba(0,0,0,0.15) 35%,
		rgba(0,0,0,0.4) 65%,
		#000 100%);
}
.gn-single-shop .shop-hero-content {
	position: relative; z-index: 1; padding: 0 var(--page);
}
.gn-single-shop .shop-hero-logo {
	height: 56px; width: auto; margin: 0 auto 36px;
	filter: brightness(0) invert(1);
}
.gn-single-shop .shop-hero-title {
	font-family: var(--font-display);
	font-size: clamp(40px, 6vw, 80px);
	font-weight: 700;
	color: #fff; margin: 0 auto 24px;
}
.gn-single-shop .shop-hero-subtitle {
	font-family: var(--font-body); font-weight: 300;
	font-size: clamp(15px, 1.3vw, 18px);
	color: rgba(255,255,255,0.7);
	max-width: 640px; margin: 0 auto;
	letter-spacing: 0.04em; line-height: 1.6;
}
.gn-single-shop .gsap-reveal { opacity: 0; visibility: hidden; }

/* ─── INTRO ─── */
.gn-single-shop .shop-intro {
	padding: 120px var(--page); text-align: center;
}
.gn-single-shop .shop-intro-inner {
	max-width: 720px; margin: 0 auto;
}
.gn-single-shop .shop-intro-text {
	font-family: var(--font-body); font-weight: 300;
	font-size: clamp(18px, 2vw, 24px);
	color: rgba(255,255,255,0.85);
	line-height: 1.6;
}
.gn-single-shop .shop-body {
	margin-top: 40px;
	color: var(--muted); font-size: 15px; line-height: 1.7;
}
.gn-single-shop .shop-body > * + * { margin-top: 16px; }

/* ─── STATS — quiet numeric coda placed *after* the gallery.
 *   No header/title (numbers stand alone). Slimmer figures so they read
 *   as supporting context, not as a hero moment. ─── */
.gn-single-shop .shop-stats {
	padding: 60px var(--page);
	border-top: 1px solid var(--faint);
}
.gn-single-shop .shop-stats-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 0;
	max-width: 1440px; margin: 0 auto;
}
.gn-single-shop .shop-stat {
	display: flex; flex-direction: column; gap: 12px;
	padding: 24px 28px;
	border-left: 1px solid var(--faint);
	min-width: 0;
}
.gn-single-shop .shop-stat:first-child {
	border-left: none;
	padding-left: 0;
}
.gn-single-shop .shop-stat-num {
	font-family: var(--font-display);
	font-size: clamp(28px, 3.6vw, 52px);
	font-weight: 600; line-height: 1;
	color: #fff; letter-spacing: -0.015em;
	font-variant-numeric: tabular-nums;
}
.gn-single-shop .shop-stat-label {
	font-size: 11px; font-weight: 500;
	letter-spacing: 0.18em; text-transform: uppercase;
	color: var(--accent);
}

/* ─── GALLERY ─── */
.gn-single-shop .shop-gallery {
	padding: 0 var(--page) 20px;
}
.gn-single-shop .shop-gallery-grid {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
	max-width: 1440px; margin: 0 auto;
}
.gn-single-shop .shop-gallery-tile {
	position: relative; aspect-ratio: 1; overflow: hidden;
	opacity: 0;
	animation: gnShopTileIn 0.7s var(--ease-brand) forwards;
	animation-delay: var(--reveal-delay, 0s);
}
@media (prefers-reduced-motion: reduce) {
	.gn-single-shop .shop-gallery-tile { opacity: 1; animation: none; }
}
@keyframes gnShopTileIn {
	from { opacity: 0; transform: translateY(20px); }
	to   { opacity: 1; transform: translateY(0); }
}
.gn-single-shop .shop-gallery-tile img,
.gn-single-shop .shop-gallery-tile video {
	width: 100%; height: 100%; object-fit: cover;
	display: block;
	max-width: none; max-height: none;
	transition: transform 0.8s var(--ease-brand);
}
.gn-single-shop .shop-gallery-tile:hover img,
.gn-single-shop .shop-gallery-tile:hover video {
	transform: scale(1.04);
}
/* Videos: kill any browser-default outline / focus ring on the element. */
.gn-single-shop .shop-gallery-tile video {
	outline: none;
	pointer-events: none;   /* the tile is decorative; no scrub bar, no click */
}

/* ─── BRANDS WE CARRY — 5-col grid + "See All" CTA as 10th tile ─── */
.gn-single-shop .shop-brands {
	padding: 120px var(--page);
	background: #050505;
	border-top: 1px solid var(--faint);
	border-bottom: 1px solid var(--faint);
}
.gn-single-shop .shop-brands-header {
	max-width: 1440px; margin: 0 auto 64px;
}
.gn-single-shop .shop-brands-label {
	display: block; margin-bottom: 16px;
	font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
	color: var(--accent);
}
.gn-single-shop .shop-brands-title {
	font-family: var(--font-display);
	font-size: clamp(28px, 4vw, 48px);
	line-height: 1.05; font-weight: 600;
	letter-spacing: -0.01em; color: #fff;
}
.gn-single-shop .shop-brands-grid {
	display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px;
	max-width: 1440px; margin: 0 auto;
}
.gn-single-shop .shop-brand-card {
	position: relative; display: block;
	background: #0a0a0a; overflow: hidden; color: #fff;
	opacity: 0;
	animation: gnShopBrandIn 0.7s var(--ease-brand) forwards;
	animation-delay: var(--reveal-delay, 0s);
}
@media (prefers-reduced-motion: reduce) {
	.gn-single-shop .shop-brand-card { opacity: 1; animation: none; }
}
@keyframes gnShopBrandIn {
	from { opacity: 0; transform: translateY(24px); }
	to   { opacity: 1; transform: translateY(0); }
}
.gn-single-shop .shop-brand-card-banner {
	position: relative; width: 100%; aspect-ratio: 4/5; overflow: hidden;
}
.gn-single-shop .shop-brand-card-banner > img:first-child {
	width: 100%; height: 100%; object-fit: cover;
	max-width: none; max-height: none;
	filter: brightness(0.7) saturate(0.85);
	transition: transform 0.6s var(--ease-brand), filter 0.5s ease;
}
.gn-single-shop .shop-brand-card:hover .shop-brand-card-banner > img:first-child {
	transform: scale(1.04); filter: brightness(0.6) saturate(1);
}
.gn-single-shop .shop-brand-card-overlay {
	position: absolute; inset: 0; z-index: 2;
	background: linear-gradient(180deg, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.02) 40%, rgba(0,0,0,0.15) 80%, rgba(0,0,0,0.45) 100%);
	transition: background 0.5s ease;
}
.gn-single-shop .shop-brand-card:hover .shop-brand-card-overlay {
	background: linear-gradient(180deg, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.05) 40%, rgba(0,0,0,0.2) 80%, rgba(0,0,0,0.55) 100%);
}
.gn-single-shop .shop-brand-card-logo {
	position: absolute; top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	z-index: 3; width: 55%; max-width: 140px; height: auto;
	object-fit: contain;
	filter: brightness(0) invert(1);
	opacity: 0.92;
	transition: opacity 0.4s ease;
}
/* Logo stays still on hover — only the banner image grows. */
.gn-single-shop .shop-brand-card:hover .shop-brand-card-logo { opacity: 1; }
.gn-single-shop .shop-brand-card-cat {
	position: absolute; top: 14px; left: 16px; z-index: 4;
	font-size: 10px; font-weight: 400;
	text-transform: uppercase; letter-spacing: 0.18em;
	color: rgba(255,255,255,0.55);
}
.gn-single-shop .shop-brand-card-name {
	position: absolute; bottom: 0; left: 0; right: 0;
	z-index: 4; padding: 16px 18px;
	font-size: 12px; font-weight: 500;
	color: rgba(255,255,255,0.85);
	letter-spacing: 0.04em;
	transition: color 0.3s ease;
}
.gn-single-shop .shop-brand-card:hover .shop-brand-card-name { color: #fff; }

/* "See All" CTA tile — same aspect-ratio as a brand card; subtle hover lift,
 * no white-on-black flash. */
.gn-single-shop .shop-brand-card.is-cta {
	display: flex; align-items: center; justify-content: center;
	aspect-ratio: 4/5;
	background: #0a0a0a;
	border: 1px solid var(--faint);
	transition: background 0.4s ease, border-color 0.4s ease;
}
.gn-single-shop .shop-brand-card.is-cta:hover {
	background: #0e0e0e;
	border-color: rgba(255,255,255,0.25);
}
.gn-single-shop .shop-brand-card-cta-inner {
	display: flex; flex-direction: column; align-items: center; gap: 18px;
	text-align: center; padding: 24px;
	transition: transform 0.5s var(--ease-brand);
}
.gn-single-shop .shop-brand-card.is-cta:hover .shop-brand-card-cta-inner {
	transform: translateY(-4px);
}
.gn-single-shop .shop-brand-card-cta-text {
	font-family: var(--font-display);
	font-size: clamp(20px, 2vw, 28px);
	font-weight: 700;
	line-height: 1.1; color: #fff;
	transition: color 0.4s ease;
}
.gn-single-shop .shop-brand-card.is-cta:hover .shop-brand-card-cta-text { color: var(--accent-hi); }
.gn-single-shop .shop-brand-card-cta-arrow {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; border-radius: 50%;
	border: 1px solid rgba(255,255,255,0.18);
	color: rgba(255,255,255,0.85);
	transition: transform 0.4s var(--ease-brand), border-color 0.4s ease, color 0.4s ease;
}
.gn-single-shop .shop-brand-card.is-cta:hover .shop-brand-card-cta-arrow {
	transform: translateX(4px) rotate(-45deg);
	border-color: var(--accent-hi);
	color: var(--accent-hi);
}
.gn-single-shop .shop-brand-card-cta-arrow svg {
	width: 14px; height: 14px;
	max-width: none; max-height: none;
	stroke-width: 1.5; fill: none;
}

/* ─── LOCATIONS — index list with cursor-following thumbnail ─── */
.gn-single-shop .shop-locations {
	padding: 140px var(--page);
	position: relative;
	overflow: hidden;
	z-index: 2;
	isolation: isolate;   /* seals stacking context so loc-cursor's z-index: -1 stays scoped */
}
.gn-single-shop .shop-locations-header {
	max-width: 1440px; margin: 0 auto 80px;
	display: flex; flex-direction: column; gap: 16px;
}
.gn-single-shop .shop-locations-overline {
	display: block;
	font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
	color: var(--accent);
}
.gn-single-shop .shop-locations-title {
	font-family: var(--font-display);
	font-size: clamp(40px, 6vw, 88px);
	line-height: 1; font-weight: 700; letter-spacing: -0.02em;
	color: #fff;
}

.gn-single-shop .locations-list {
	max-width: 1440px; margin: 0 auto;
	border-top: 1px solid var(--faint);
}

.gn-single-shop .loc-row {
	display: grid;
	grid-template-columns: 48px 1.4fr 1.8fr auto auto 56px;
	align-items: center; gap: 32px;
	padding: 36px 0;
	border-bottom: 1px solid var(--faint);
	color: #fff;
	cursor: pointer;
	position: relative;
	transition: padding 0.6s var(--ease-brand), opacity 0.4s ease;
}
/* Dim siblings while one row is hovered — focuses attention */
.gn-single-shop .locations-list:hover .loc-row { opacity: 0.32; }
.gn-single-shop .locations-list:hover .loc-row:hover { opacity: 1; }

.gn-single-shop .loc-row::before {
	content: '';
	position: absolute; left: 0; top: 50%;
	width: 0; height: 1px; background: var(--accent-hi);
	transform: translateY(-50%);
	transition: width 0.6s var(--ease-brand);
}
.gn-single-shop .loc-row:hover { padding-left: 36px; }
.gn-single-shop .loc-row:hover::before { width: 24px; }

.gn-single-shop .loc-row-num {
	font-family: var(--font-display);
	font-size: 14px; font-weight: 600;
	color: var(--accent); letter-spacing: 0.04em;
	align-self: start; padding-top: 6px;
}

.gn-single-shop .loc-row-name {
	font-family: var(--font-display);
	font-size: clamp(22px, 2.2vw, 32px);
	font-weight: 700;
	line-height: 1.1; color: #fff;
	transition: transform 0.6s var(--ease-brand);
}
.gn-single-shop .loc-row:hover .loc-row-name { transform: translateX(8px); }

.gn-single-shop .loc-row-address {
	color: var(--muted); font-size: 13px; line-height: 1.5;
	transition: color 0.4s ease;
}
.gn-single-shop .loc-row:hover .loc-row-address { color: rgba(255,255,255,0.7); }

.gn-single-shop .loc-row-hours {
	font-size: 12px; font-weight: 500;
	color: rgba(255,255,255,0.5);
	letter-spacing: 0.02em;
	line-height: 1.6;
	white-space: pre-line;     /* preserves \n from CMS hours field */
	text-align: right;
	min-width: 180px;
}
.gn-single-shop .loc-row-phone {
	font-size: 12px; font-weight: 500;
	color: rgba(255,255,255,0.6);
	letter-spacing: 0.04em;
	white-space: nowrap;
	text-align: right;
}

.gn-single-shop .loc-row-arrow {
	width: 44px; height: 44px;
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,0.12);
	display: flex; align-items: center; justify-content: center;
	color: rgba(255,255,255,0.6);
	transition: border-color 0.5s var(--ease-brand),
	            color 0.5s var(--ease-brand);
}
.gn-single-shop .loc-row:hover .loc-row-arrow {
	border-color: var(--accent-hi);
	color: var(--accent-hi);
}
.gn-single-shop .loc-row-arrow svg {
	width: 14px; height: 14px;
	max-width: none; max-height: none;
	stroke-width: 1.5; fill: none;
}

/* Cursor-following thumbnail removed per editorial direction — the row
 * arrow + opacity dim of non-hovered rows already telegraphs the
 * interaction; a floating image was overpowering the clean list. */
.gn-single-shop .loc-cursor { display: none !important; }
@media (hover: none) and (pointer: coarse) {
	.gn-single-shop .locations-list:hover .loc-row { opacity: 1; }
}

/* ─── responsive ─── */
@media (max-width: 1024px) {
	.gn-single-shop .shop-brands-grid { grid-template-columns: repeat(3, 1fr); }
	.gn-single-shop .shop-locations { padding: 100px var(--page); }
	.gn-single-shop .shop-locations-header { margin-bottom: 56px; }
	.gn-single-shop .loc-row { grid-template-columns: 40px 1.5fr 2fr auto 48px; gap: 24px; }
	.gn-single-shop .loc-row-phone { display: none; }
	/* Stats: keep auto-fit but tighten the per-cell padding */
	.gn-single-shop .shop-stat { padding: 24px; }
}
@media (max-width: 767px) {
	.gn-single-shop .shop-hero-logo { height: 48px; }
	.gn-single-shop .shop-intro { padding: 80px var(--page); }
	.gn-single-shop .shop-stats { padding: 60px var(--page); }
	.gn-single-shop .shop-stats-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 0;
	}
	.gn-single-shop .shop-stat {
		padding: 20px 12px;
		border-left: 1px solid var(--faint);
		border-top: 1px solid var(--faint);
		gap: 8px;
	}
	.gn-single-shop .shop-stat-num {
		font-size: clamp(26px, 7.5vw, 36px);
	}
	.gn-single-shop .shop-stat:first-child,
	.gn-single-shop .shop-stat:nth-child(2n+1) { border-left: none; padding-left: 0; }
	.gn-single-shop .shop-stat:nth-child(-n+2) { border-top: none; padding-top: 0; }
	.gn-single-shop .shop-gallery { padding: 0 var(--page) 20px; }
	.gn-single-shop .shop-gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
	.gn-single-shop .shop-brands { padding: 80px var(--page); }
	.gn-single-shop .shop-brands-grid { grid-template-columns: repeat(2, 1fr); }
	.gn-single-shop .shop-locations { padding: 80px var(--page); }
	.gn-single-shop .shop-locations-header { margin-bottom: 40px; }
	.gn-single-shop .loc-row {
		grid-template-columns: 28px 1fr auto;
		grid-template-rows: auto auto auto auto;
		grid-row-gap: 8px;
		gap: 8px 16px;
		padding: 24px 0;
	}
	.gn-single-shop .loc-row:hover { padding-left: 12px; }
	.gn-single-shop .loc-row-num { grid-row: 1; grid-column: 1; align-self: start; padding-top: 4px; }
	.gn-single-shop .loc-row-name { grid-row: 1; grid-column: 2; font-size: 20px; }
	.gn-single-shop .loc-row-arrow { grid-row: 1; grid-column: 3; align-self: start; }
	.gn-single-shop .loc-row-address { grid-row: 2; grid-column: 2 / -1; }
	.gn-single-shop .loc-row-hours { grid-row: 3; grid-column: 2 / -1; text-align: left; min-width: 0; }
	.gn-single-shop .loc-row-phone { display: block; grid-row: 4; grid-column: 2 / -1; text-align: left; }
}
@media (max-width: 480px) {
	.gn-single-shop .shop-brands-grid { grid-template-columns: 1fr 1fr; }
}