/*
 * Restaurants Index ("Browse all restaurants")
 * Figma refs:
 *   - Desktop frame 2070:6063 (1440 wide, dark bg)
 *   - Mobile frame 2107:7987 (372 wide, dark bg)
 *   - Canonical card component 2070:10725 (Restaurant list item)
 *
 * Visual model:
 *   - Full-bleed dark band (the widget owns its background so the section
 *     looks right regardless of the page bg).
 *   - Cards have a black `background-color`, 10px radius, but visually merge
 *     into the band - what you see is a CIRCULAR image (border-radius 50%)
 *     with centred text beneath it.
 *   - Text is always centred, and white (name) / grey (tagline + meta) on BOTH
 *     breakpoints. The Figma small-screen variant had gold card text; the client
 *     asked for white names matching desktop, so the whole card text follows the
 *     desktop treatment now (gold is kept only for the letter glyph + underline).
 *
 * SPECIFICITY NOTE:
 *   Elementor's "Default Kit" (post-8.css on this install) applies
 *   `.elementor-kit-N h1..h6 { color: #000; font-family: Roboto; }` at
 *   specificity (0,1,1). Every typography rule below is written as
 *   `.nge-index .nge-index__X` to achieve (0,2,0) and win against the Kit.
 *   Don't drop the parent class or the Kit will repaint your headings black.
 *
 * Brand colours used:
 *   #000000  page-band background + card background (cards visually merge)
 *   #E7B040  letter glyph, h3 underline (gold accents retained)
 *   #FFFFFF  card name (both breakpoints)
 *   #D6D6D6  section heading + card tagline + meta (both breakpoints)
 */

.nge-index {
	background: var(--ng-color-surface, #1A1714); /* FB23: dark surface, not pure black */
	color: #D6D6D6;
	width: 100%;
}

.nge-index .nge-index__inner {
	max-width: 1440px;
	margin: 0 auto;
	padding: 32px 16px;
	display: flex;
	flex-direction: column;
	gap: 32px;
}

/* ── Section heading ── */

.nge-index .nge-index__heading {
	margin: 0;
	font-family: 'Open Sans', Georgia, serif;
	font-weight: 600;
	font-size: 24px;
	line-height: 1.33; /* mobile frame: 32/24 */
	text-align: center;
	color: #D6D6D6;
}

/* ── Letter sections wrapper ── */

.nge-index .nge-index__letters {
	display: flex;
	flex-direction: column;
	gap: 48px;
}

.nge-index .nge-index__letter {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* ── Letter head (A, B, C, …) ── */

.nge-index .nge-index__letter-head {
	margin: 0;
	padding: 0 0 8px;
	border-bottom: 1px solid #E7B040;
	font-family: 'Open Sans', Georgia, serif;
	font-weight: 600;
	font-size: 32px;
	line-height: 1.33; /* mobile frame: 42.656/32 */
	color: #E7B040;
}

/* ── Card grid ── */

.nge-index .nge-index__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px; /* mobile frame: card gap 24 within a letter group; desktop block sets 32 */
}

.nge-index .nge-index__card {
	margin: 0;
}

.nge-index .nge-index__card-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	background: transparent;
	border-radius: 10px;
	padding: 16px 24px 24px;
	color: inherit;
	text-decoration: none;
	transition: transform .25s ease;
	height: 100%;
}

.nge-index .nge-index__card-link:hover,
.nge-index .nge-index__card-link:focus-visible {
	transform: translateY(-3px);
}

.nge-index .nge-index__card-link--inert {
	cursor: default;
}

.nge-index .nge-index__card-link--inert:hover {
	transform: none;
}

.nge-index .nge-index__card-link:focus-visible {
	outline: 2px solid #E7B040;
	outline-offset: 3px;
}

/* ── Card media - CIRCULAR ── */

.nge-index .nge-index__card-media {
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 50%;
	background: #1A1A1A;
	position: relative;
}

.nge-index .nge-index__card-media img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	object-position: center;
	transition: transform .35s ease;
}

.nge-index .nge-index__card-link:hover .nge-index__card-media img,
.nge-index .nge-index__card-link:focus-visible .nge-index__card-media img {
	transform: scale(1.04);
}

.nge-index .nge-index__card-media-placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #1A1A1A 0%, #000 100%);
}

/* ── Card text - always centred ── */

.nge-index .nge-index__card-text {
	padding: 16px 16px 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
	text-align: center;
	align-items: center;
	width: 100%;
}

.nge-index .nge-index__card-title {
	margin: 0;
	font-family: 'Open Sans', Georgia, serif;
	font-weight: 600;
	font-size: 32px;
	line-height: 1.33; /* mobile frame: 42.656/32 */
	color: #FFFFFF; /* client override (WW-64 follow-up): white on mobile too, matching desktop (was gold) */
}

.nge-index .nge-index__card-tagline {
	margin: 0;
	font-family: Open Sans, system-ui, sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.6;
	color: #D6D6D6; /* client override: match desktop on mobile (was gold) */
}

.nge-index .nge-index__card-meta {
	margin: 0;
	font-family: Open Sans, system-ui, sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.66;
	color: #D6D6D6; /* client override: match desktop on mobile (was gold) */
}

/* ── DESKTOP (≥ 900px) - 3-up grid, larger inner padding, white card names ── */

@media (min-width: 900px) {
	.nge-index .nge-index__inner {
		padding: 48px 32px;
	}

	.nge-index .nge-index__heading {
		font-size: 32px;
		text-align: left;
	}

	.nge-index .nge-index__grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 32px;
	}

	.nge-index .nge-index__card-title {
		color: #FFFFFF;
	}

	.nge-index .nge-index__card-tagline,
	.nge-index .nge-index__card-meta {
		color: #D6D6D6;
	}
}

/* ── Reduce motion - kill the hover-lift + image-zoom ── */

@media (prefers-reduced-motion: reduce) {
	.nge-index .nge-index__card-link,
	.nge-index .nge-index__card-link:hover,
	.nge-index .nge-index__card-link:focus-visible,
	.nge-index .nge-index__card-media img,
	.nge-index .nge-index__card-link:hover .nge-index__card-media img {
		transform: none;
	}
}