/* ==========================================================================
   Perabite Nations Map — "Dove siamo"
   ========================================================================== */

.pnm {
	/* Mappa */
	--pnm-map-context: #0F3A5C;
	--pnm-map-covered: #23455C;
	--pnm-map-on: #35A7E0;
	--pnm-map-stroke: rgba(255, 255, 255, 0.22);
	--pnm-map-stroke-on: #FFFFFF;
	--pnm-map-ctx-stroke: rgba(255, 255, 255, 0.10);
	--pnm-map-max-h: 640px;
	--pnm-map-idle-opacity: 0.75;
	--pnm-hover-lighten: 18%;

	/* Layout */
	--pnm-gap: 40px;
	--pnm-grow-areas: 40;
	--pnm-grow-map: 60;
	--pnm-stack: 1024px;

	/* Schede */
	--pnm-card-bg: #1E6394;
	--pnm-card-border: rgba(53, 167, 224, 0.55);
	--pnm-card-border-open: #35A7E0;
	--pnm-card-radius: 24px;
	--pnm-card-gap: 8px;

	/* Testo */
	--pnm-accent: #35A7E0;
	--pnm-area-name: #FFFFFF;
	--pnm-area-meta: #9FB8C9;
	--pnm-nation-color: #FFFFFF;
	--pnm-nation-hover-bg: rgba(255, 255, 255, 0.07);
	--pnm-badge-color: #9FB8C9;
	--pnm-badge-bg: rgba(255, 255, 255, 0.08);
	--pnm-cols: 2;

	box-sizing: border-box;
}

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

.pnm-wrap {
	--pnm-stack: 1024px;
}

/* --------------------------------------------------------------------------
   Layout a due colonne (impilamento senza media query: "flexbox albatross")
   -------------------------------------------------------------------------- */

.pnm__layout {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pnm-gap);
	align-items: flex-start;
}

.pnm__areas,
.pnm__map {
	flex-basis: calc((var(--pnm-stack) - 100%) * 999);
	min-width: min(100%, 280px);
}

.pnm__areas {
	flex-grow: var(--pnm-grow-areas);
	display: flex;
	flex-direction: column;
	gap: var(--pnm-card-gap);
}

.pnm__map {
	flex-grow: var(--pnm-grow-map);
	position: relative;
	align-self: stretch;
}

/* --------------------------------------------------------------------------
   Accordion zone
   -------------------------------------------------------------------------- */

.pnm-area {
	background: var(--pnm-card-bg);
	border: 1px solid var(--pnm-card-border);
	border-radius: var(--pnm-card-radius);
	padding: 0 24px;
	overflow: hidden;
	transition: border-color 200ms ease, background-color 200ms ease;
}

.pnm-area.is-open {
	border-color: var(--pnm-card-border-open);
}

/* --------------------------------------------------------------------------
   Colore per zona (term meta di nation-group)
   -------------------------------------------------------------------------- */

/*
 * Da design il colore della zona tinge solo il pallino e la mappa.
 * Con l'opzione "Tinta anche l'accordion" (.pnm--tinted) colora anche
 * bordo, segno +/- e frecce della scheda.
 */
.pnm--tinted .pnm-area.has-zone-color {
	border-color: var(--pnm-area-color);
}

.pnm--tinted .pnm-area.has-zone-color .pnm-area__sign-h,
.pnm--tinted .pnm-area.has-zone-color .pnm-area__sign-v {
	background: var(--pnm-area-color);
}

.pnm--tinted .pnm-area.has-zone-color .pnm-nation__chevron {
	color: var(--pnm-area-color);
}

.pnm--tinted .pnm-area.has-zone-color .pnm-area__toggle:focus-visible,
.pnm--tinted .pnm-area.has-zone-color .pnm-nation__link:focus-visible {
	outline-color: var(--pnm-area-color);
}

@supports (color: color-mix(in srgb, red 50%, transparent)) {
	.pnm--tinted .pnm-area.has-zone-color {
		border-color: color-mix(in srgb, var(--pnm-area-color) 55%, transparent);
	}

	.pnm--tinted .pnm-area.has-zone-color.is-open {
		border-color: var(--pnm-area-color);
	}
}

.pnm-area__heading {
	margin: 0;
	padding: 0;
	font-size: inherit;
	line-height: inherit;
}

.pnm-area__toggle {
	display: flex;
	align-items: center;
	gap: 16px;
	width: 100%;
	padding: 22px 0;
	border: 0;
	background: transparent;
	font-family: inherit;
	text-align: left;
	cursor: pointer;
	color: inherit;
	-webkit-appearance: none;
	appearance: none;
}

.pnm-area__toggle:focus-visible {
	outline: 2px solid var(--pnm-accent);
	outline-offset: 4px;
	border-radius: 4px;
}

/* Segno + / − disegnato in CSS */
.pnm-area__sign {
	position: relative;
	flex: none;
	width: 24px;
	height: 24px;
	display: block;
}

.pnm-area__sign-h,
.pnm-area__sign-v {
	position: absolute;
	top: 50%;
	left: 50%;
	background: var(--pnm-accent);
	border-radius: 2px;
	transform: translate(-50%, -50%);
	transition: opacity 200ms ease, transform 200ms ease;
}

.pnm-area__sign-h {
	width: 16px;
	height: 2px;
}

.pnm-area__sign-v {
	width: 2px;
	height: 16px;
}

.pnm-area.is-open .pnm-area__sign-v {
	opacity: 0;
	transform: translate(-50%, -50%) rotate(90deg);
}

.pnm-area__labels {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

/* Pallino colore zona, allineato a destra nell'header */
.pnm-area__dot {
	width: 12px;
	height: 12px;
	flex: none;
	margin-left: auto;
	border-radius: 50%;
	background: var(--pnm-area-color, var(--pnm-accent));
	transition: transform 200ms ease, box-shadow 200ms ease;
}

.pnm-area.is-open .pnm-area__dot {
	transform: scale(1.15);
}

@supports (color: color-mix(in srgb, red 50%, transparent)) {
	.pnm-area.is-open .pnm-area__dot {
		box-shadow: 0 0 0 4px color-mix(in srgb, var(--pnm-area-color, var(--pnm-accent)) 25%, transparent);
	}
}

.pnm-area__name {
	font-size: 20px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--pnm-area-name);
}

.pnm-area__meta {
	font-size: 13px;
	line-height: 1.3;
	color: var(--pnm-area-meta);
}

.pnm-area__panel {
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height 280ms ease, opacity 220ms ease;
	container-type: inline-size;
	container-name: pnm-panel;
}

.pnm-area.is-open .pnm-area__panel {
	opacity: 1;
}

.pnm-area__list {
	list-style: none;
	margin: 0;
	padding: 0 0 24px 40px;
	display: grid;
	grid-template-columns: repeat(var(--pnm-cols), minmax(0, 1fr));
	gap: 2px 20px;
}

/* Colonna stretta: badge nascosto e una sola colonna, per non troncare i nomi. */
@container pnm-panel (max-width: 620px) {
	.pnm-area__list {
		--pnm-badge-display: none;
	}
}

@container pnm-panel (max-width: 380px) {
	.pnm-area__list {
		grid-template-columns: 1fr;
	}
}

.pnm-nation {
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: 0;
}

/* --------------------------------------------------------------------------
   Riga nazione
   -------------------------------------------------------------------------- */

.pnm-nation__link {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 9px 12px;
	margin: 0 -12px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	font-family: inherit;
	font-size: 15px;
	line-height: 1.4;
	text-align: left;
	text-decoration: none;
	color: var(--pnm-nation-color);
	cursor: pointer;
	transition: background-color 150ms ease;
	-webkit-appearance: none;
	appearance: none;
}

.pnm-nation__link:hover,
.pnm-nation__link.is-hover {
	background: var(--pnm-nation-hover-bg);
	color: var(--pnm-nation-color);
}

.pnm-nation__link:focus-visible {
	outline: 2px solid var(--pnm-accent);
	outline-offset: 2px;
}

.pnm-nation__flag {
	width: 20px;
	height: 20px;
	flex: none;
	display: block;
	border-radius: 50%;
	object-fit: cover;
	background: rgba(255, 255, 255, 0.12);
}

.pnm-nation__flag--empty {
	display: block;
}

.pnm-nation__name {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pnm-nation__badge {
	display: var(--pnm-badge-display, inline-block);
	flex: none;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--pnm-badge-bg);
	color: var(--pnm-badge-color);
	font-size: 11px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.pnm-nation__chevron {
	flex: none;
	display: inline-flex;
	color: var(--pnm-accent);
	transition: transform 150ms ease;
}

.pnm-nation__link:hover .pnm-nation__chevron,
.pnm-nation__link.is-hover .pnm-nation__chevron {
	transform: translateX(4px);
}

/* Le nazioni Coming Soon restano riconoscibili anche senza badge. */
.pnm-nation__link--soon .pnm-nation__chevron {
	opacity: 0.45;
}

/* --------------------------------------------------------------------------
   Mappa SVG
   -------------------------------------------------------------------------- */

.pnm__map-inner {
	width: 100%;
	-webkit-mask-image: linear-gradient(to bottom, #000 0, #000 89%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 0, #000 89%, transparent 100%);
}

.pnm-map__svg {
	display: block;
	width: 100%;
	height: auto;
	max-height: var(--pnm-map-max-h);
	-webkit-mask-image: linear-gradient(to right, #000 0, #000 87%, transparent 100%);
	mask-image: linear-gradient(to right, #000 0, #000 87%, transparent 100%);
}

/* Ritaglio esteso: la sfumatura destra arretra per non velare Turchia e Ucraina. */
.pnm--crop-wide .pnm-map__svg {
	-webkit-mask-image: linear-gradient(to right, #000 0, #000 96%, transparent 100%);
	mask-image: linear-gradient(to right, #000 0, #000 96%, transparent 100%);
}

.pnm-wrap--no-fade .pnm__map-inner,
.pnm-wrap--no-fade .pnm-map__svg {
	-webkit-mask-image: none;
	mask-image: none;
}

.pnm-map__ctx {
	fill: var(--pnm-map-context);
	stroke: var(--pnm-map-ctx-stroke);
	stroke-width: 0.5;
	pointer-events: none;
}

.pnm-country {
	fill: var(--pnm-map-context);
	stroke: var(--pnm-map-ctx-stroke);
	stroke-width: 0.5;
	pointer-events: none;
	transition: fill 200ms ease, fill-opacity 200ms ease, stroke 200ms ease;
}

/*
 * Nazioni presenti nel CPT: sempre visibili nel colore della loro zona,
 * al 75% di opacita' finche' la zona non e' aperta o in hover.
 */
.pnm-country.is-market {
	fill: var(--pnm-area-color, var(--pnm-map-on));
	fill-opacity: var(--pnm-map-idle-opacity);
	stroke: var(--pnm-map-stroke);
	pointer-events: auto;
	cursor: pointer;
}

/* Zona accesa (accordion aperto) e hover: colore pieno e bordo bianco */
.pnm-country.is-market.is-on,
.pnm-country.is-market.is-hover,
.pnm-country.is-market:focus-visible {
	fill-opacity: 1;
	stroke: var(--pnm-map-stroke-on);
	stroke-width: 1;
}

.pnm-country.is-market:focus {
	outline: none;
}

.pnm-country.is-market:focus-visible {
	stroke-width: 1.5;
}

/* Hover: un ulteriore scatto di luminosita', anche dentro una zona gia' aperta. */
@supports (color: color-mix(in srgb, red 50%, white)) {
	.pnm-country.is-market.is-hover,
	.pnm-country.is-market:focus-visible {
		fill: color-mix(in srgb, #FFFFFF var(--pnm-hover-lighten), var(--pnm-area-color, var(--pnm-map-on)));
	}
}

/* Modalita' "mappa spenta": le nazioni restano neutre finche' non si apre una zona. */
.pnm.is-map-off .pnm-country.is-market:not(.is-on):not(.is-hover) {
	fill: var(--pnm-map-covered);
	fill-opacity: 1;
}

/* Tooltip */
.pnm__tip {
	position: absolute;
	z-index: 4;
	pointer-events: none;
	max-width: 230px;
	padding: 6px 10px;
	background: var(--pnm-card-bg);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 6px;
	font-size: 13px;
	line-height: 1.35;
	color: var(--pnm-nation-color);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pnm__tip[hidden] {
	display: none;
}

/* --------------------------------------------------------------------------
   Stato vuoto (visibile solo agli editor)
   -------------------------------------------------------------------------- */

.pnm--empty {
	padding: 24px;
	border: 1px dashed var(--pnm-card-border);
	border-radius: var(--pnm-card-radius);
	color: var(--pnm-area-meta);
}

.pnm--empty p {
	margin: 0;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
	.pnm-area {
		padding: 0 18px;
	}

	.pnm-area__list {
		grid-template-columns: 1fr;
		padding-left: 0;
	}

	.pnm-area__name {
		font-size: 18px;
	}

	.pnm-wrap--hide-map-mobile .pnm__map {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pnm *,
	.pnm *::before,
	.pnm *::after {
		transition-duration: 0.01ms !important;
	}
}