/* Gastronome — brands.css
 * The /brands/ page (combined shops + restaurants directory).
 *
 * Image-forward cards in the homepage "Our Brands" language: a tall tile with
 * the white brand logo overlaid on a gradient veil. The image is dimmed at
 * rest and brightens + lifts on hover, while the subtitle + Explore cue fade
 * up. Content sits ON the image — never stacked in a slab beneath it.
 *
 * Self-contained: scoped under .gn-brands so it never touches /shops/ or
 * /restaurants/ (which keep directories.css).
 */

.gn-brands {
	background: #000;
	color: #fff;
}

/* ─── Hero ─────────────────────────────────────────────────── */
.gn-brands-hero {
	padding: calc(var(--nav-h) + 24px) var(--page) 0;
}
.gn-brands-hero-inner {
	max-width: 1440px; margin: 0 auto;
	padding: 56px 0 32px;
	display: flex; align-items: flex-end; justify-content: space-between;
	gap: 32px;
	border-bottom: 1px solid rgba(255,255,255,0.08);
}
.gn-brands-title {
	font-family: var(--font-display);
	font-size: clamp(34px, 5vw, 68px);
	font-weight: 700; line-height: 1.0; letter-spacing: -0.005em;
	color: #fff;
}
.gn-brands-count {
	font-family: var(--font-body);
	font-size: 13px; font-weight: 500;
	text-transform: uppercase; letter-spacing: 0.18em;
	color: rgba(255,255,255,0.45);
	padding-bottom: 10px; white-space: nowrap;
}

/* ─── Grid ─────────────────────────────────────────────────── */
.gn-brands-grid-section {
	max-width: 1440px; margin: 0 auto;
	padding: 40px var(--page) clamp(96px, 14vh, 160px);
}
.gn-brands-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}

/* ─── Card ─────────────────────────────────────────────────── */
.gn-brand-card {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	background: #0a0a0a;
	-webkit-tap-highlight-color: transparent;
	/* entrance */
	opacity: 0;
	transform: translateY(24px);
	animation: gnBrandIn 0.9s var(--ease-brand) forwards;
	animation-delay: var(--reveal-delay, 0s);
}
@keyframes gnBrandIn {
	to { opacity: 1; transform: translateY(0); }
}

.gn-brand-card-img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	filter: brightness(0.5);
	transform: scale(1.01);
	transition: filter 0.7s ease, transform 0.9s var(--ease-brand);
	will-change: transform, filter;
}
.gn-brand-card:hover .gn-brand-card-img {
	filter: brightness(0.92);
	transform: scale(1.05);
}

.gn-brand-card-veil {
	position: absolute; inset: 0; z-index: 1;
	/* Darkened top (for the top-left logo) + darkened bottom (for the
	   subtitle / Explore reveal), clear through the middle. */
	background: linear-gradient(180deg,
		rgba(0,0,0,0.5) 0%,
		rgba(0,0,0,0.12) 22%,
		rgba(0,0,0,0) 46%,
		rgba(0,0,0,0.5) 84%,
		rgba(0,0,0,0.7) 100%);
	transition: background 0.7s ease;
}
.gn-brand-card:hover .gn-brand-card-veil {
	background: linear-gradient(180deg,
		rgba(0,0,0,0.42) 0%,
		rgba(0,0,0,0.08) 24%,
		rgba(0,0,0,0) 46%,
		rgba(0,0,0,0.46) 84%,
		rgba(0,0,0,0.66) 100%);
}

/* TOP-LEFT brand mark — logo (or name fallback). */
.gn-brand-card-mark {
	position: absolute; top: 0; left: 0; z-index: 2;
	padding: clamp(20px, 2.2vw, 30px);
	transition: transform 0.6s var(--ease-brand);
}
.gn-brand-card:hover .gn-brand-card-mark { transform: translateY(2px); }
.gn-brand-card-logo {
	display: block;
	height: 35px; width: auto;
	max-width: 150px;
	object-fit: contain; object-position: left center;
	filter: brightness(0) invert(1);
	opacity: 0.92;
	transition: opacity 0.5s ease;
}
.gn-brand-card:hover .gn-brand-card-logo { opacity: 1; }
.gn-brand-card-name {
	font-family: var(--font-display);
	font-size: clamp(20px, 1.9vw, 28px);
	font-weight: 700; line-height: 1.05; letter-spacing: 0.01em;
	color: #fff;
}

/* BOTTOM-LEFT details — revealed on hover. */
.gn-brand-card-foot {
	position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
	padding: clamp(22px, 2.4vw, 34px);
	transition: transform 0.6s var(--ease-brand);
}
.gn-brand-card:hover .gn-brand-card-foot { transform: translateY(-4px); }

/* Subtitle + CTA — hidden at rest, revealed on hover */
.gn-brand-card-reveal {
	display: flex; flex-direction: column; gap: 12px;
	max-width: 92%;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.5s ease, transform 0.6s var(--ease-brand);
}
.gn-brand-card:hover .gn-brand-card-reveal,
.gn-brand-card:focus-visible .gn-brand-card-reveal {
	opacity: 1;
	transform: translateY(0);
}
.gn-brand-card-sub {
	font-family: var(--font-body); font-weight: 300;
	font-size: 14px; line-height: 1.5;
	color: rgba(255,255,255,0.78);
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
	overflow: hidden;
}
.gn-brand-card-cta {
	display: inline-flex; align-items: center; gap: 9px;
	font-family: var(--font-body);
	font-size: 11px; font-weight: 600;
	text-transform: uppercase; letter-spacing: 0.2em;
	color: #fff;
}
.gn-brand-card-cta svg {
	width: 15px; height: 15px;
	transition: transform 0.4s var(--ease-brand);
}
.gn-brand-card:hover .gn-brand-card-cta svg { transform: translateX(5px); }

.gn-brands-empty {
	max-width: 1440px; margin: 0 auto;
	padding: 80px var(--page) 160px;
	color: rgba(255,255,255,0.5);
	font-family: var(--font-body);
}

/* ─── Responsive ───────────────────────────────────────────── */
@media (max-width: 1024px) {
	.gn-brands-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}
@media (max-width: 600px) {
	.gn-brands-hero-inner { padding: 40px 0 24px; }
	.gn-brands-grid { grid-template-columns: 1fr; gap: 12px; }
	.gn-brand-card { aspect-ratio: 3 / 4; }
	/* On touch there's no hover — keep the details visible so the card
	   isn't a dead-end. */
	.gn-brand-card-reveal { opacity: 1; transform: none; }
}

/* Touch devices (incl. tablets): reveal details by default — no hover. */
@media (hover: none) and (pointer: coarse) {
	.gn-brand-card-reveal { opacity: 1; transform: none; }
	.gn-brand-card-img { filter: brightness(0.62); }
}

@media (prefers-reduced-motion: reduce) {
	.gn-brand-card { animation: none; opacity: 1; transform: none; }
	.gn-brand-card-img,
	.gn-brand-card-body,
	.gn-brand-card-reveal { transition: none; }
}