/* Gastronome — partners-archive.css
 * Ports gastronome-brands-archive.html.
 */

.gn-partners-archive { --filter-h: 56px; }

@media (max-width: 1024px) { .gn-partners-archive { --filter-h: 50px; } }
@media (max-width: 767px)  { .gn-partners-archive { --filter-h: 48px; } }

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

/* ─── filter bar ─── */
.gn-partners-archive .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; justify-content: space-between;
	padding: 0 var(--page);
}
.gn-partners-archive .filter-tags {
	display: flex; gap: 8px; align-items: center;
	overflow-x: auto; scrollbar-width: none;
}
.gn-partners-archive .filter-tags::-webkit-scrollbar { display: none; }
.gn-partners-archive .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; outline: none;
	font-family: var(--font-body);
}
.gn-partners-archive .filter-tag:hover { border-color: rgba(255,255,255,0.25); color: #fff; }
.gn-partners-archive .filter-tag.active { background: #fff; color: #000; border-color: #fff; }
.gn-partners-archive .filter-sort {
	display: flex; align-items: center; gap: 10px; flex-shrink: 0;
}
.gn-partners-archive .filter-sort-label {
	font-size: 11px; text-transform: uppercase; letter-spacing: 0.15em;
	color: var(--muted);
}
.gn-partners-archive .filter-sort select {
	appearance: none; -webkit-appearance: none;
	font-family: var(--font-body); font-size: 12px; font-weight: 500;
	color: #fff; background: transparent;
	border: 1px solid var(--faint); border-radius: 4px;
	padding: 7px 32px 7px 14px; cursor: pointer; outline: none;
	transition: border-color 0.3s ease;
	background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23777' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 12px center;
}
.gn-partners-archive .filter-sort select:hover { border-color: rgba(255,255,255,0.25); }

/* ─── grid ─── */
.gn-partners-archive .grid-section { padding: 40px var(--page) 120px; }
.gn-partners-archive .partners-grid {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}

/* ─── card ─── */
.gn-partners-archive .partner-card {
	position: relative;
	border-radius: 4px; overflow: hidden;
	cursor: pointer; background: #0a0a0a;
	display: block;
	opacity: 0;
	animation: gnPartnerCardIn 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
	animation-delay: var(--reveal-delay, 0s);
}
@media (prefers-reduced-motion: reduce) {
	.gn-partners-archive .partner-card { opacity: 1; animation: none; }
}
@keyframes gnPartnerCardIn {
	from { opacity: 0; transform: translateY(32px); }
	to   { opacity: 1; transform: translateY(0); }
}
.gn-partners-archive .partner-card[hidden] { display: none; }
.gn-partners-archive .card-banner {
	position: relative; width: 100%;
	aspect-ratio: 4/5; overflow: hidden;
}
.gn-partners-archive .card-banner-img {
	position: absolute; inset: -20px;
	/* Override base.css `img { max-width: 100%; height: auto }` — that global
	 * reset clamps width back to 100% and over-constrains inset:-20px, leaving
	 * a 20 px gap on the right edge of every card. */
	width: calc(100% + 40px); height: calc(100% + 40px);
	max-width: none; max-height: none;
	object-fit: cover; will-change: transform;
	transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
	filter: brightness(0.7) saturate(0.85);
}
.gn-partners-archive .partner-card:hover .card-banner-img {
	transform: scale(1.04); filter: brightness(0.6) saturate(1);
}
.gn-partners-archive .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-partners-archive .partner-card:hover .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-partners-archive .card-logo {
	position: absolute; top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	z-index: 3; width: 55%; max-width: 160px; height: auto;
	object-fit: contain;
	filter: brightness(0) invert(1);
	opacity: 0.92;
	transition: opacity 0.4s ease;
}
/* Hover: only the cover image scales — logo stays put for a calmer composition. */
.gn-partners-archive .partner-card:hover .card-logo {
	opacity: 1;
}
.gn-partners-archive .card-info {
	position: absolute; bottom: 0; left: 0; right: 0; z-index: 4;
	padding: 20px 20px 18px;
	display: flex; align-items: flex-end; justify-content: space-between;
	gap: 8px;
}
.gn-partners-archive .card-title {
	font-family: var(--font-body);
	font-size: 13px; font-weight: 500;
	color: rgba(255,255,255,0.85);
	letter-spacing: 0.04em;
	transition: color 0.3s ease;
}
.gn-partners-archive .partner-card:hover .card-title { color: #fff; }
.gn-partners-archive .card-category {
	font-size: 10px; font-weight: 400;
	text-transform: uppercase; letter-spacing: 0.15em;
	color: rgba(255,255,255,0.45);
	flex-shrink: 0;
	transition: color 0.3s ease;
}
.gn-partners-archive .partner-card:hover .card-category { color: rgba(255,255,255,0.65); }
.gn-partners-archive .card-arrow {
	position: absolute; top: 16px; right: 16px; z-index: 4;
	width: 32px; height: 32px; border-radius: 50%;
	background: rgba(255,255,255,0.1);
	backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
	display: flex; align-items: center; justify-content: center;
	color: #fff;
	opacity: 0; transform: translateY(6px);
	transition: opacity 0.35s ease, transform 0.4s var(--ease-brand);
}
/* Without explicit dimensions the global `svg { max-width:100%; height:auto }`
 * reset (base.css §1) renders this SVG at the full 32 px circle — way bigger
 * than the mockup's 14 × 14. Pin it back. */
.gn-partners-archive .card-arrow svg {
	width: 14px; height: 14px;
	max-width: none; max-height: none;
	stroke: #fff; stroke-width: 1.5; fill: none;
}
.gn-partners-archive .partner-card:hover .card-arrow {
	opacity: 1; transform: translateY(0);
}

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

/* ─── responsive ─── */
@media (max-width: 1280px) {
	.gn-partners-archive .partners-grid { gap: 16px; }
}
@media (max-width: 1024px) {
	.gn-partners-archive .partners-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
	.gn-partners-archive .partners-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.gn-partners-archive .page-hero-inner {
		flex-direction: column; align-items: flex-start;
		gap: 8px; padding: 32px 0 28px;
	}
	.gn-partners-archive .card-logo { width: 50%; max-width: 100px; }
	.gn-partners-archive .card-info { padding: 14px 14px 12px; }
	.gn-partners-archive .card-title { font-size: 12px; }
	.gn-partners-archive .card-category { font-size: 9px; }
}
@media (max-width: 480px) {
	.gn-partners-archive .partners-grid { gap: 10px; }
}