/* Gastronome — directories.css
 * Shared styles for archive-shop, archive-restaurant, page-locations.
 * Reuses the page-hero + filter-bar pattern from partners-archive.
 */

.gn-direction-archive,
.gn-locations { --filter-h: 56px; }

@media (max-width: 1024px) {
	.gn-direction-archive,
	.gn-locations { --filter-h: 50px; }
}

/* ─── shared page hero ─── */
.gn-direction-archive .page-hero,
.gn-locations .page-hero {
	padding: calc(var(--nav-h) + 24px) var(--page) 0;
}
.gn-direction-archive .page-hero-inner,
.gn-locations .page-hero-inner {
	padding: 48px 0 24px;
	display: flex; align-items: flex-end; justify-content: space-between;
	gap: 32px;
}
.gn-direction-archive .page-hero h1,
.gn-locations .page-hero h1 {
	font-family: var(--font-display);
	font-size: clamp(32px, 4vw, 56px);
	font-weight: 700; line-height: 1.05;
}
.gn-direction-archive .hero-count,
.gn-locations .hero-count {
	font-family: var(--font-body);
	font-size: 15px; font-weight: 300; color: var(--dim);
	padding-bottom: 6px; white-space: nowrap;
}
.gn-direction-archive .page-hero-desc,
.gn-locations .page-hero-desc {
	color: var(--muted); font-size: 15px; line-height: 1.6;
	max-width: 640px; padding: 0 0 32px;
}

/* ─── shared filter bar (used by locations) ─── */
.gn-locations .filter-bar {
	z-index: 900; height: var(--filter-h);
	background: rgba(0, 0, 0, 0.88);
	backdrop-filter: blur(20px) saturate(1.2);
	-webkit-backdrop-filter: blur(20px) saturate(1.2);
	border-bottom: 1px solid var(--faint);
	display: flex; align-items: center;
	padding: 0 var(--page);
}
.gn-locations .filter-tags {
	display: flex; gap: 8px; align-items: center;
	overflow-x: auto; scrollbar-width: none;
}
.gn-locations .filter-tags::-webkit-scrollbar { display: none; }
.gn-locations .filter-tag {
	padding: 7px 18px; font-size: 12px; font-weight: 500;
	letter-spacing: 0.08em; text-transform: uppercase;
	color: var(--dim); background: transparent;
	border: 1px solid var(--faint); border-radius: 100px;
	cursor: pointer; white-space: nowrap;
	transition: all 0.35s ease;
	font-family: var(--font-body);
}
.gn-locations .filter-tag:hover { border-color: rgba(255,255,255,0.25); color: #fff; }
.gn-locations .filter-tag.active { background: #fff; color: #000; border-color: #fff; }

/* ─── direction grid (shops/restaurants archives) ─── */
.gn-direction-archive .direction-grid-section { padding: 40px var(--page) 120px; }
.gn-direction-archive .direction-grid {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.gn-direction-archive .direction-card {
	display: flex; flex-direction: column;
	border-radius: 4px; overflow: hidden;
	background: #0a0a0a;
	opacity: 0;
	animation: gnDirCardIn 0.8s var(--ease-brand) forwards;
	animation-delay: var(--reveal-delay, 0s);
}
@media (prefers-reduced-motion: reduce) {
	.gn-direction-archive .direction-card { opacity: 1; animation: none; }
}
@keyframes gnDirCardIn {
	from { opacity: 0; transform: translateY(32px); }
	to   { opacity: 1; transform: translateY(0); }
}
.gn-direction-archive .direction-card-banner {
	position: relative; width: 100%;
	aspect-ratio: 4/3; overflow: hidden;
}
.gn-direction-archive .direction-card-img {
	position: absolute; inset: -10%;
	width: 120%; height: 120%; object-fit: cover;
	filter: brightness(0.6) saturate(0.9);
	transition: filter 0.6s ease, transform 0.7s var(--ease-brand);
}
.gn-direction-archive .direction-card:hover .direction-card-img {
	filter: brightness(0.75) saturate(1); transform: scale(1.04);
}
.gn-direction-archive .direction-card-overlay {
	position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.45) 100%);
}
.gn-direction-archive .direction-card-logo {
	position: absolute; bottom: 32px; left: 50%;
	transform: translateX(-50%); z-index: 2;
	height: 36px; width: auto; max-width: 60%;
	filter: brightness(0) invert(1);
	opacity: 0.95;
	transition: opacity 0.5s ease, bottom 0.5s var(--ease-brand);
}
.gn-direction-archive .direction-card:hover .direction-card-logo { opacity: 1; bottom: 36px; }

.gn-direction-archive .direction-card-info {
	padding: 28px 28px 32px;
	display: flex; flex-direction: column; gap: 8px;
}
.gn-direction-archive .direction-card-title {
	font-family: var(--font-display);
	font-size: clamp(20px, 2vw, 28px);
	font-weight: 700; line-height: 1.1;
	color: #fff;
}
.gn-direction-archive .direction-card-subtitle {
	font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em;
	color: var(--accent); margin: 0;
}
.gn-direction-archive .direction-card-intro {
	font-size: 14px; color: var(--muted); line-height: 1.6;
	margin: 4px 0 12px;
}
.gn-direction-archive .direction-card-link {
	font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em;
	color: rgba(255,255,255,0.6);
	transition: color 0.3s ease, gap 0.3s ease;
	display: inline-flex; align-items: center; gap: 6px;
	margin-top: auto;
}
.gn-direction-archive .direction-card:hover .direction-card-link { color: #fff; gap: 12px; }

@media (max-width: 1024px) { .gn-direction-archive .direction-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .gn-direction-archive .direction-grid { grid-template-columns: 1fr; gap: 16px; } }

/* ─── locations grid (page-locations) ───
 *
 * Modern editorial card: solid panel slightly lighter than the page bg, with
 * the branch image hidden by default and revealed as a soft full-card
 * background on hover. Title sits top-left, address + phone bottom-left,
 * pushing the eye through each card vertically. 4-column desktop grid.
 *
 * Sitewide grain (body::after in base.css) is disabled on this template —
 * the fixed-position noise layer reads as a "parallax-fixed" texture on the
 * lighter card panels and breaks the clean solid-color look.
 */
body:has(.gn-locations)::after { display: none; }

.gn-locations .locations-grid-section { padding: 40px var(--page) 120px; }
.gn-locations .locations-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}
.gn-locations .loc-card-tile {
	position: relative;
	display: flex; flex-direction: column;
	aspect-ratio: 3 / 4;
	background: #111;
	border-radius: 6px;
	overflow: hidden;
	color: #fff; text-decoration: none;
	transition: background 0.5s var(--ease-brand), transform 0.5s var(--ease-brand);
	opacity: 0;
	animation: gnLocTileIn 0.8s var(--ease-brand) forwards;
	animation-delay: var(--reveal-delay, 0s);
}
.gn-locations .loc-card-tile:hover {
	transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
	.gn-locations .loc-card-tile { opacity: 1; animation: none; transform: none; }
	.gn-locations .loc-card-tile:hover { transform: none; }
}
@keyframes gnLocTileIn {
	from { opacity: 0; transform: translateY(28px); }
	to   { opacity: 1; transform: translateY(0); }
}
.gn-locations .loc-card-tile[hidden] { display: none; }

/* ── Background image — always visible at a dimmed/desaturated baseline,
 *    intensifies on hover (brighter, fuller saturation, slight zoom-in,
 *    overlay lightens to let the photo breathe). On touch the resting
 *    state is what gets shown — no hover dependency required. */
.gn-locations .loc-card-tile-bg {
	position: absolute; inset: 0;
	opacity: 1;
	pointer-events: none;
}
.gn-locations .loc-card-tile-bg-img {
	position: absolute; inset: 0;
	width: 100%; height: 100%; object-fit: cover;
	transform: scale(1.02);
	transition: transform 1.1s var(--ease-brand), filter 0.6s ease;
	filter: brightness(0.62) saturate(0.9);
}
.gn-locations .loc-card-tile:hover .loc-card-tile-bg-img {
	transform: scale(1.06);
	filter: brightness(0.9) saturate(1);
}
/* Overlay removed (test) — location tiles show the full bright image. */
.gn-locations .loc-card-tile-bg-overlay {
	display: none;
}

/* ── Foreground content layer. */
.gn-locations .loc-card-tile-inner {
	position: relative; z-index: 2;
	flex: 1;
	display: flex; flex-direction: column;
	justify-content: space-between;
	padding: 26px 24px;
	gap: 24px;
}
.gn-locations .loc-card-tile-top {
	display: flex; flex-direction: column;
	max-width: 100%;
}
/* Top-right diagonal arrow — sits in its own absolute layer above the
 * background image, brightens + nudges out on hover. */
.gn-locations .loc-card-tile-arrow {
	position: absolute; top: 22px; right: 22px; z-index: 3;
	display: inline-flex; align-items: center; justify-content: center;
	width: 22px; height: 22px;
	color: rgba(255,255,255,0.55);
	transition: color 0.4s ease, transform 0.5s var(--ease-brand);
	pointer-events: none;
}
.gn-locations .loc-card-tile-arrow svg { width: 100%; height: 100%; }
.gn-locations .loc-card-tile:hover .loc-card-tile-arrow {
	color: #fff;
	transform: translate(2px, -2px);
}
.gn-locations .loc-card-tile-name {
	font-family: var(--font-display);
	font-size: clamp(19px, 1.55vw, 26px);
	font-weight: 700; line-height: 1.12;
	color: #fff;
	margin: 0;
}
.gn-locations .loc-card-tile-bottom {
	display: flex; flex-direction: column; gap: 4px;
	color: rgba(255,255,255,0.52);
	transition: color 0.4s ease;
}
.gn-locations .loc-card-tile:hover .loc-card-tile-bottom {
	color: rgba(255,255,255,0.78);
}
.gn-locations .loc-card-tile-address,
.gn-locations .loc-card-tile-phone {
	font-family: var(--font-body);
	font-size: 13px; line-height: 1.5;
	margin: 0;
}

@media (max-width: 1280px) {
	.gn-locations .locations-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
	.gn-locations .locations-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	/* Mobile keeps 2 columns + the desktop 3/4 portrait ratio (was 1 col + 4/3). */
	.gn-locations .locations-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

.gn-empty {
	padding: 80px var(--page); text-align: center;
	color: var(--muted); font-size: 15px;
}

/* ─── responsive page hero ─── */
@media (max-width: 767px) {
	.gn-direction-archive .page-hero-inner,
	.gn-locations .page-hero-inner {
		flex-direction: column; align-items: flex-start;
		gap: 8px; padding: 32px 0 20px;
	}
}