/*
 * Inprodi South America Map — interactive destinations + map section.
 *
 * Two columns from md up: destinations list on the left, South America map on the
 * right (stacked on mobile). Hovering/focusing a destination highlights its
 * country on the map and vice-versa (wiring in inprodi-samap.js). The highlight
 * color is set per-instance via the --samap-accent custom property. White section,
 * aligned to the 80rem page grid. Scoped under .inprodi-samap, no global reset.
 */

.inprodi-samap,
.inprodi-samap *,
.inprodi-samap *::before,
.inprodi-samap *::after {
	box-sizing: border-box;
}

.inprodi-samap {
	--samap-accent: #cf8a44;
	width: 100%;
	background-color: #f8eee7;
	padding-top: 64px;
	padding-bottom: 64px;
}

.inprodi-samap__container {
	width: 100%;
	max-width: 80rem;
	margin: 0 auto;
	padding-left: 1rem;
	padding-right: 1rem;
}

.inprodi-samap__grid {
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
}

/* ---- Left panel ---- */
.inprodi-samap__panel {
	display: flex;
	flex-direction: column;
}

.inprodi-samap__eyebrow {
	margin: 0 0 1.1rem;
	font-family: var(--nk-font-sans);
	font-size: 0.8125rem; /* 13px */
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #cf8a44;
}

.inprodi-samap__heading {
	margin: 0;
	display: flex;
	flex-direction: column;
	color: #3e2618;
	font-family: 'Playfair Display', serif;
	font-weight: 400;
	font-size: 2.5rem; /* 40px mobile */
	line-height: 1.1;
}

.inprodi-samap__heading-bottom {
	font-style: italic;
}

.inprodi-samap__desc {
	margin: 1.25rem 0 0;
	max-width: 30rem;
	color: #6b7280;
	font-family: var(--nk-font-sans);
	font-size: 1.125rem; /* 18px */
	font-weight: 400;
	line-height: 1.6;
}

/* ---- Destinations list ---- */
.inprodi-samap__list {
	list-style: none;
	margin: 2rem 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.inprodi-samap__item {
	border-top: 1px solid #ececec;
}

.inprodi-samap__item:last-child {
	border-bottom: 1px solid #ececec;
}

.inprodi-samap__link {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	padding: 1rem 0.25rem;
	text-decoration: none;
	color: #3e2618;
	font-family: 'Playfair Display', serif;
	font-size: 1.5rem; /* 24px */
	font-weight: 400;
	line-height: 1.2;
	transition: color 0.3s ease, padding-left 0.3s ease;
}

/* La mano de clic va SOLO donde se navega de verdad. Cuando un destino no
   resuelve a ninguna página, el widget pinta un <span> en vez de un <a>; antes
   ese <span> heredaba `cursor:pointer` y quedaba indistinguible de un enlace:
   se resaltaba al pasar por encima y no hacía nada al pulsar. */
.inprodi-samap__item.is-linked > .inprodi-samap__link {
	cursor: pointer;
}

.inprodi-samap__dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	flex-shrink: 0;
	background-color: #d1d5db;
	transition: background-color 0.3s ease, transform 0.3s ease;
}

/* Active state: added by JS (.is-active) and mirrored on :hover for no-JS. */
.inprodi-samap__item.is-active > .inprodi-samap__link,
.inprodi-samap__item:hover > .inprodi-samap__link {
	color: var(--samap-accent);
	padding-left: 0.75rem;
}

.inprodi-samap__item.is-active .inprodi-samap__dot,
.inprodi-samap__item:hover .inprodi-samap__dot {
	background-color: var(--samap-accent);
	transform: scale(1.25);
}

/* ---- Map (right) ---- */
.inprodi-samap__map {
	width: 100%;
}

.inprodi-samap__svg {
	display: block;
	width: 100%;
	max-width: 430px;
	/* The box is a bit wider than the map's natural ratio; with
	   preserveAspectRatio="none" on the SVG, the continent stretches a touch WIDER
	   (fatter) instead of the whole map scaling up taller.
	   Era 1.02 cuando el viewBox medía 202.22 de alto. Al añadir la Antártida
	   creció a 218.22, así que este número baja en la MISMA proporción (×0.927):
	   el ensanchado se mantiene idéntico y el continente no se deforma. */
	aspect-ratio: 0.945;
	height: auto;
	margin: 0 auto;
	overflow: visible;
}

.inprodi-samap__country path {
	fill: #ebe7dd; /* soft neutral base */
	stroke: #ffffff;
	stroke-width: 0.6;
	stroke-linejoin: round;
	transition: fill 0.35s ease;
}

/* Countries that appear in the list get a barely-there base tint so the map
   reads as interactive without shouting. La mano de clic la añade `.is-linked`
   (la pone el JS), no `.is-listed`: un país puede estar en la lista y aún así
   no tener página a la que ir, y en ese caso no debe prometer un clic. */
.inprodi-samap__country.is-linked {
	cursor: pointer;
}

.inprodi-samap__country.is-listed path {
	fill: #dfe3d5;
}

/* Highlighted country (hover/focus a destination, or hover the country itself).
   Declared last and with the .is-listed.is-active pair so it outranks both the
   base and the is-listed tint (equal-specificity source order would otherwise let
   the listed tint win, and listed countries are exactly the hoverable ones). */
.inprodi-samap__country.is-active path,
.inprodi-samap__country.is-listed.is-active path {
	fill: var(--samap-accent);
}

/* Marcador para un destino fuera del continente: un grupo de islas flotando en
   el océano, para un sitio que no tiene país en el mapa de Sudamérica. Sus
   <path> van dentro de un grupo .inprodi-samap__country, así que heredan el
   relleno y el mismo cableado del hover — solo el trazo es más fino por ser
   formas pequeñas. Hoy no lo usa nadie: lo estrenó la Polinesia Francesa, que
   se retiró de la oferta y se borró del SVG en v1.9.9. Se conserva por si vuelve
   a hacer falta un destino insular. */
.inprodi-samap__marker path {
	stroke-width: 0.5;
}

/* sm */
@media (min-width: 640px) {
	.inprodi-samap__container {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}
}

/* md — two columns + full section rhythm */
@media (min-width: 768px) {
	.inprodi-samap {
		padding-top: 96px;
		padding-bottom: 96px;
	}
	.inprodi-samap__grid {
		flex-direction: row;
		align-items: center;
		gap: 4rem;
	}
	.inprodi-samap__panel {
		flex: 1 1 44%;
	}
	.inprodi-samap__map {
		flex: 1 1 56%;
	}
	.inprodi-samap__heading {
		font-size: 3.5rem; /* 56px */
	}
	.inprodi-samap__svg {
		max-width: 620px;
	}
}

/* lg */
@media (min-width: 1024px) {
	.inprodi-samap__container {
		padding-left: 2rem;
		padding-right: 2rem;
	}
}