/* ==========================================================================
   Europe Odyssey — home page, layer 4
   1. The Italy map: pins sit exactly on their cities, cards never cover them
   2. The city puzzle map pieces: the map shows fully, not zoomed and cropped
   ========================================================================== */

/* ---- 1. ITALY MAP --------------------------------------------------------- */
/* The frame now has the same proportions as the map image (1200 x 896), so every
   percentage below lands on the same spot of the picture at every screen width.
   (Before, the frame was capped in height but not in width: the picture shrank
   and centred while the pins kept using the wider frame, so cities drifted into the sea.) */
.eo-map-canvas {
	width: 100% !important;
	max-width: 960px;
	max-height: none !important;
	margin-left: auto; margin-right: auto;
	aspect-ratio: 1200 / 896 !important;
	background-size: 100% 100% !important;
	background-position: center !important;
	border-radius: 16px;
	box-shadow: 0 24px 54px rgba(15, 26, 46, .14);
}

/* Pins on the real cities (x / y as % of the map). */
.eo-pin-milan    { top: 21.4% !important; left: 31.5% !important; }
.eo-pin-venice   { top: 22%   !important; left: 47.5% !important; }
.eo-pin-florence { top: 35.5% !important; left: 41.9% !important; }
.eo-pin-rome     { top: 50.8% !important; left: 48.4% !important; }
.eo-pin-naples   { top: 58.8% !important; left: 56.8% !important; }

/* Postcards: out on the sea / empty parts of the map, away from every pin. */
.eo-card-milan    { top: 5%  !important; left: 10% !important; }
.eo-card-venice   { top: 26% !important; left: 60% !important; }
.eo-card-florence { top: 44% !important; left: 66% !important; }
.eo-card-naples   { top: 64% !important; left: 68% !important; }
.eo-pin-card { width: 12.5%; min-width: 108px; padding: 5px; border-radius: 12px; }
.eo-pin-card img { height: auto; aspect-ratio: 16 / 10; }

/* The selected city's card always sits in the Tyrrhenian Sea, left of Italy — it can
   no longer land on top of the city you picked. (!important beats the inline
   position the script used to set.) */
.eo-featured-city-card {
	top: 24% !important;
	left: 1.5% !important;
	width: min(27%, 262px) !important;
	min-width: 220px;
}

/* White pointer lines, drawn from the cards to the cities. */
.eo-map-pointer-lines line { stroke: #fff; stroke-width: .5; stroke-linecap: round; filter: drop-shadow(0 1px 2px rgba(15, 26, 46, .45)); vector-effect: non-scaling-stroke; stroke-width: 2px; }

/* Pins: always a clear marker above the line ends. */
.eo-map-pin { width: 16px; height: 16px; border-width: 3px; z-index: 13; }
.eo-map-pin.is-active-pin { width: 20px; height: 20px; z-index: 14; }

/* ---- 2. PUZZLE MAP PIECES ---------------------------------------------------- */
.eo-puzzle-center-card {
	background-size: cover !important;
	background-position: center !important;
}
.eo-puzzle-layout:hover .eo-puzzle-center-card { background-size: cover !important; }
/* A lighter veil: the engraved map stays visible and only the title area is calmed. */
.eo-puzzle-center-card::before {
	background: radial-gradient(ellipse 52% 44% at center, rgba(251, 247, 241, .9) 0%, rgba(251, 247, 241, .62) 60%, rgba(251, 247, 241, 0) 100%) !important;
}

/* Tablet / phone: map keeps its proportions and the featured card moves below it. */
@media (max-width: 991px) {
	.eo-map-canvas { max-width: 100%; }
	.eo-featured-city-card { position: relative !important; top: auto !important; left: auto !important; width: 100% !important; margin-top: 16px; }
	.eo-card-milan    { top: 3%  !important; left: 6%  !important; }
	.eo-card-venice   { top: 24% !important; left: 56% !important; }
	.eo-card-florence { top: 46% !important; left: 62% !important; }
	.eo-card-naples   { top: 66% !important; left: 62% !important; }
}

/* Phones: title above the filters; no map frame, just the selected city's card. */
@media (max-width: 767px) {
	.eo-destinations-section .eo-section-header { flex-direction: column !important; align-items: flex-start !important; gap: 14px !important; }
	.eo-destinations-section .eo-filter-pills { width: 100%; overflow-x: auto; justify-content: flex-start; flex-wrap: nowrap; }
	.eo-destinations-section .eo-filter-btn { flex: 0 0 auto; white-space: nowrap; }
	.eo-map-canvas { aspect-ratio: auto !important; background: none !important; box-shadow: none !important; max-width: 100%; }
	.eo-map-canvas .eo-map-pin, .eo-map-canvas .eo-pin-card, .eo-map-canvas .eo-map-pointer-lines { display: none !important; }
}