/* EFLL Site Design — V2 piece #5: photo-led location cards (includes/v2-locations.php).
 * Markup: .ei-grid.ei-grid--locs > article.ei-loc[.ei-loc--link|--here|--own-link]
 *           > .ei-loc-photo > img.ei-loc-img      (city banner, cropped to its photo part)
 *           > .ei-loc-body > h3.ei-loc-name (> a.ei-loc-link, stretched) + .ei-loc-rule + .ei-loc-more? + .ei-loc-go
 *           > span.ei-loc-orig[hidden] > original small card image (kept for the safety net, never shown)
 * All rules scoped to body.efll-sd.efll-v2. */

body.efll-sd.efll-v2 .efll-inner .ei-grid--locs {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}
@media (min-width: 640px) {
	body.efll-sd.efll-v2 .efll-inner .ei-grid--locs { gap: 16px; }
}
@media (min-width: 1100px) {
	body.efll-sd.efll-v2 .efll-inner .ei-grid--locs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
}

body.efll-sd.efll-v2 .efll-inner .ei-loc {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	aspect-ratio: 4 / 3;
	min-width: 0;
	margin: 0;
	overflow: hidden;
	border-radius: 2px;
	background: #0e1a2b linear-gradient(135deg, #1b304b 0%, #0e1a2b 55%, #08111d 100%);
	box-shadow: 0 1px 0 rgba(8, 17, 29, .04), 0 10px 28px -18px rgba(8, 17, 29, .55);
	color: #fff;
	transition: box-shadow .35s var(--ei-ease, ease), transform .35s var(--ei-ease, ease);
}
@supports not (aspect-ratio: 4 / 3) {
	body.efll-sd.efll-v2 .efll-inner .ei-loc { min-height: 200px; }
}

/* Photo: the banner is a 1920x670 composite (navy + old orange stripe on the left ~45%); show only its
   photo part. Box 4:3 vs image 2.87:1 => ~46% of the width is visible; 85% keeps the crop right of the stripe. */
body.efll-sd.efll-v2 .efll-inner .ei-loc-photo {
	position: absolute;
	inset: 0;
	z-index: 0;
	margin: 0;
	line-height: 0;
}
body.efll-sd.efll-v2 .efll-inner .ei-loc-photo img.ei-loc-img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	border: 0;
	border-radius: 0;
	object-fit: cover;
	object-position: 85% 50%;
	transform: scale(1.001);
	transform-origin: 60% 50%;
	transition: transform .9s var(--ei-ease, ease), filter .9s var(--ei-ease, ease);
	filter: saturate(.92) contrast(1.02);
}
/* Navy gradient for legibility + a faint navy wash so the eight photos read as one set. */
body.efll-sd.efll-v2 .efll-inner .ei-loc-photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to top, rgba(5, 11, 20, .94) 0%, rgba(5, 11, 20, .72) 30%, rgba(8, 17, 29, .18) 62%, rgba(8, 17, 29, .06) 100%),
		linear-gradient(135deg, rgba(14, 26, 43, .28), rgba(14, 26, 43, 0) 60%);
	transition: opacity .5s var(--ei-ease, ease);
	pointer-events: none;
}

/* Static (not positioned) so the stretched link's ::after resolves against the whole card; z-index works on a flex item. */
body.efll-sd.efll-v2 .efll-inner .ei-loc-body {
	position: static;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	padding: 18px 20px 18px;
}
body.efll-sd.efll-v2 .efll-inner .ei-loc-body > * { margin: 0; }

body.efll-sd.efll-v2 .efll-inner .ei-loc-name {
	max-width: calc(100% - 28px);
	margin: 0;
	padding: 0;
	color: #fff;
	font-family: var(--ei-display, "Cinzel", Georgia, serif);
	font-weight: 600;
	font-size: clamp(18px, 1.6vw, 22px);
	line-height: 1.15;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-wrap: balance;
	text-shadow: 0 1px 12px rgba(3, 7, 13, .55);
	border: 0;
}
body.efll-sd.efll-v2 .efll-inner .ei-loc-name::before,
body.efll-sd.efll-v2 .efll-inner .ei-loc-name::after { content: none; }

/* Stretched link: the city name is the link, its ::after covers the whole card (no nested anchors). */
body.efll-sd.efll-v2 .efll-inner .ei-loc-name a,
body.efll-sd.efll-v2 .efll-inner .ei-loc-name a:visited {
	color: inherit;
	text-decoration: none;
	background: none;
	border: 0;
	outline: none;
}
body.efll-sd.efll-v2 .efll-inner .ei-loc-name a.ei-loc-link::before { content: none; }
body.efll-sd.efll-v2 .efll-inner .ei-loc-name a.ei-loc-link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	border-radius: 2px;
}
body.efll-sd.efll-v2 .efll-inner .ei-loc-name a.ei-loc-link:focus-visible {
	outline: none;
	box-shadow: none;
}
body.efll-sd.efll-v2 .efll-inner .ei-loc-name a.ei-loc-link:focus-visible::after {
	outline: 3px solid var(--ei-gold-hi, #e6c25a);
	outline-offset: -3px;
	box-shadow: inset 0 0 0 6px rgba(5, 11, 20, .55);
}
/* Cards that already carried their own link(s): keep them clickable above the photo. */
body.efll-sd.efll-v2 .efll-inner .ei-loc--own-link .ei-loc-body a { position: relative; z-index: 3; color: #fff; }

body.efll-sd.efll-v2 .efll-inner .ei-loc-rule {
	display: block;
	width: 36px;
	height: 2px;
	background: var(--ei-gold, #d4a72c);
	transform-origin: left center;
	transition: width .45s var(--ei-ease, ease);
}
body.efll-sd.efll-v2 .efll-inner .ei-loc-more {
	color: #d9e0ea;
	font-size: 14px;
	line-height: 1.5;
}
body.efll-sd.efll-v2 .efll-inner .ei-loc-go {
	position: absolute;
	right: 18px;
	bottom: 18px;
	display: inline-flex;
	color: var(--ei-gold-hi, #e6c25a);
	line-height: 0;
	opacity: .85;
	transition: transform .45s var(--ei-ease, ease), opacity .45s var(--ei-ease, ease);
}
body.efll-sd.efll-v2 .efll-inner .ei-loc-go svg { width: 18px; height: 18px; }

/* The original small card image: kept in the DOM only. */
body.efll-sd.efll-v2 .efll-inner .ei-loc-orig,
body.efll-sd.efll-v2 .efll-inner .ei-loc-orig[hidden] { display: none !important; }

/* Hover / focus */
body.efll-sd.efll-v2 .efll-inner .ei-loc--link:is(:hover, :focus-within) {
	box-shadow: 0 1px 0 rgba(8, 17, 29, .04), 0 22px 40px -22px rgba(8, 17, 29, .75);
}
body.efll-sd.efll-v2 .efll-inner .ei-loc--link:is(:hover, :focus-within) .ei-loc-img { transform: scale(1.06); filter: saturate(1) contrast(1.04); }
body.efll-sd.efll-v2 .efll-inner .ei-loc--link:is(:hover, :focus-within) .ei-loc-rule { width: 64px; }
body.efll-sd.efll-v2 .efll-inner .ei-loc--link:is(:hover, :focus-within) .ei-loc-go { transform: translateX(4px); opacity: 1; }

/* The card for the page you are on: not a link; marked by a gold frame instead. */
body.efll-sd.efll-v2 .efll-inner .ei-loc--here { box-shadow: inset 0 0 0 1px var(--ei-gold, #d4a72c); }
body.efll-sd.efll-v2 .efll-inner .ei-loc--here .ei-loc-rule { width: 64px; }

/* Dark sections: a hairline so cards separate from the navy background. */
body.efll-sd.efll-v2 .efll-inner .ei-sec--dark .ei-loc { box-shadow: 0 0 0 1px rgba(212, 167, 44, .18); }

/* Phones: 2 columns, tighter type. */
@media (max-width: 639px) {
	body.efll-sd.efll-v2 .efll-inner .ei-loc-body { gap: 7px; padding: 12px 12px 12px; }
	body.efll-sd.efll-v2 .efll-inner .ei-loc-name { max-width: calc(100% - 18px); font-size: 14px; letter-spacing: .05em; }
	body.efll-sd.efll-v2 .efll-inner .ei-loc-rule { width: 24px; }
	body.efll-sd.efll-v2 .efll-inner .ei-loc-go { right: 10px; bottom: 12px; }
	body.efll-sd.efll-v2 .efll-inner .ei-loc-go svg { width: 14px; height: 14px; }
	body.efll-sd.efll-v2 .efll-inner .ei-loc--link:is(:hover, :focus-within) .ei-loc-rule { width: 40px; }
}

@media (prefers-reduced-motion: reduce) {
	body.efll-sd.efll-v2 .efll-inner :is(.ei-loc, .ei-loc-img, .ei-loc-rule, .ei-loc-go, .ei-loc-photo::after) { transition: none; }
	body.efll-sd.efll-v2 .efll-inner .ei-loc--link:is(:hover, :focus-within) .ei-loc-img { transform: none; }
	body.efll-sd.efll-v2 .efll-inner .ei-loc--link:is(:hover, :focus-within) .ei-loc-go { transform: none; }
}

@media (forced-colors: active) {
	body.efll-sd.efll-v2 .efll-inner .ei-loc { border: 1px solid CanvasText; }
	body.efll-sd.efll-v2 .efll-inner .ei-loc-name { forced-color-adjust: none; background: Canvas; color: LinkText; padding: 2px 4px; }
}