/*
 * Components «Mapa de la xarxa FEDAC» i «Ambaixadors Erasmus+».
 * Mateixa paleta, tipografia i botons que la resta de pàgines (Nunito, #0079C2, #98BF0E).
 * Les dades viuen a js/escoles-fedac.js i js/ambaixadors.js; el pintat, a js/xarxa.js.
 */
:root{
  --xf-blau:#0079C2;
  --xf-blau-fosc:#005E97;
  --xf-blau-clar:#E6EEF7;
  --xf-verd:#98BF0E;
  --xf-verd-fosc:#6E8C00;
  --xf-text:#1F1F1F;
  --xf-gris:#555555;
  --xf-fons:#FAFDFF;
  --xf-radi:14px;
  --xf-ombra:0 2px 10px rgba(0,60,110,0.08);
  --xf-ombra-hover:0 10px 28px rgba(0,60,110,0.16);
}

/* ---------- Estructura de secció ---------- */
.xf-seccio{padding:64px 24px;background:#FFFFFF}
.xf-seccio--suau{background:var(--xf-fons)}
.xf-contenidor{max-width:1296px;margin:0 auto;display:flex;flex-direction:column;gap:32px}
.xf-capcalera{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.xf-avantitol{margin:0;font-size:14px;line-height:20px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--xf-verd-fosc)}
.xf-titol{margin:0;font-size:32px;line-height:40px;font-weight:700;color:var(--xf-blau)}
.xf-ratlla{display:block;width:45px;height:2px;background:var(--xf-verd)}
.xf-intro{margin:0;max-width:760px;font-size:18px;line-height:28px;font-weight:300;color:var(--xf-text)}

.xf-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Botó de la casa (vora verda, text blau) */
.xf-boto{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 25px;border-radius:24px;border:2px solid var(--xf-verd);box-sizing:border-box;background:#FFFFFF;color:var(--xf-blau);font-family:Nunito,sans-serif;font-size:16px;font-weight:700;text-decoration:none;cursor:pointer;transition:background .15s,color .15s}
.xf-boto:hover{background:var(--xf-verd);color:#FFFFFF}
.xf-boto:focus-visible{outline:3px solid var(--xf-blau);outline-offset:2px}

/* ---------- Mapa ---------- */
.xf-mapa-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:stretch}
.xf-mapa-marc{position:relative;border-radius:var(--xf-radi);overflow:hidden;box-shadow:var(--xf-ombra);border:1px solid var(--xf-blau-clar);background:var(--xf-blau-clar)}
.xf-mapa{width:100%;height:560px;font-family:Nunito,sans-serif}
.xf-mapa:focus-visible{outline:3px solid var(--xf-blau);outline-offset:-3px}
.xf-mapa-avis{position:absolute;left:12px;bottom:12px;z-index:500;margin:0;padding:6px 12px;border-radius:20px;background:rgba(255,255,255,.92);font-size:13px;line-height:18px;color:var(--xf-gris);box-shadow:0 1px 4px rgba(0,0,0,.12);pointer-events:none}

/* Marcadors */
.xf-pin{background:none;border:0}
.xf-pin__punt{display:block;width:22px;height:22px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--xf-blau);border:3px solid #FFFFFF;box-shadow:0 2px 6px rgba(0,0,0,.35);box-sizing:border-box;transition:transform .15s,background .15s}
.xf-pin--propia .xf-pin__punt{width:30px;height:30px;background:var(--xf-verd)}
.leaflet-marker-icon.xf-pin:hover .xf-pin__punt,
.leaflet-marker-icon.xf-pin.is-actiu .xf-pin__punt{transform:rotate(-45deg) scale(1.25);background:var(--xf-blau-fosc)}
.leaflet-marker-icon.xf-pin--propia:hover .xf-pin__punt,
.leaflet-marker-icon.xf-pin--propia.is-actiu .xf-pin__punt{background:var(--xf-verd-fosc)}
.leaflet-marker-icon.xf-pin:focus{outline:none}
.leaflet-marker-icon.xf-pin:focus-visible .xf-pin__punt{outline:3px solid var(--xf-text);outline-offset:3px}

/* Targeta emergent (popup) */
.xf-popup .leaflet-popup-content-wrapper{padding:0;border-radius:var(--xf-radi);overflow:hidden;box-shadow:var(--xf-ombra-hover)}
.xf-popup .leaflet-popup-content{margin:0;width:auto!important;font-family:Nunito,sans-serif;color:var(--xf-text)}
.xf-popup a.leaflet-popup-close-button{width:36px;height:36px;top:6px;right:6px;border-radius:50%;background:rgba(255,255,255,.9);color:var(--xf-blau);font:700 22px/34px Nunito,sans-serif;text-align:center}
.xf-popup a.leaflet-popup-close-button:focus-visible{outline:3px solid var(--xf-blau);outline-offset:1px}
.xf-targeta-escola{width:min(300px,calc(100vw - 120px))}
.xf-targeta-escola__img{display:block;width:100%;height:140px;object-fit:cover;background:var(--xf-blau-clar)}
.xf-targeta-escola__cos{display:flex;flex-direction:column;gap:8px;padding:16px 18px 18px}
.xf-targeta-escola__etiqueta{font-size:12px;line-height:16px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--xf-verd-fosc)}
.xf-targeta-escola__nom{margin:0;font-size:19px;line-height:25px;font-weight:800;color:var(--xf-blau)}
.xf-targeta-escola__adreca,.xf-targeta-escola__desc{margin:0!important;font-size:15px;line-height:21px}
.xf-targeta-escola__adreca{color:var(--xf-gris)}
.xf-xips{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.xf-xips li{padding:2px 10px;border-radius:12px;background:var(--xf-blau-clar);font-size:13px;line-height:20px;font-weight:600;color:var(--xf-blau-fosc)}
.xf-targeta-escola .xf-boto{align-self:flex-start;margin-top:4px;min-height:40px;padding:0 18px;font-size:15px}

/* Llistat lateral + filtres */
.xf-llista{display:flex;flex-direction:column;gap:12px;min-height:0}
.xf-filtres{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;border:0}
.xf-filtres legend{width:100%;margin-bottom:6px;padding:0;font-size:14px;font-weight:700;color:var(--xf-gris)}
.xf-filtre{min-height:36px;padding:0 14px;border-radius:18px;border:2px solid var(--xf-blau-clar);background:#FFFFFF;color:var(--xf-blau);font-family:Nunito,sans-serif;font-size:14px;font-weight:700;cursor:pointer;transition:border-color .15s,background .15s}
.xf-filtre:hover{border-color:var(--xf-verd)}
.xf-filtre[aria-pressed="true"]{background:var(--xf-blau);border-color:var(--xf-blau);color:#FFFFFF}
.xf-filtre:focus-visible{outline:3px solid var(--xf-blau);outline-offset:2px}
.xf-escoles{flex:1;max-height:470px;overflow-y:auto;margin:0;padding:4px;list-style:none;display:flex;flex-direction:column;gap:8px}
.xf-escola-btn{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;padding:10px 14px;border:1px solid var(--xf-blau-clar);border-radius:10px;background:#FFFFFF;text-align:left;font-family:Nunito,sans-serif;cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .15s}
.xf-escola-btn strong{font-size:16px;line-height:22px;color:var(--xf-blau)}
.xf-escola-btn span{font-size:14px;line-height:20px;color:var(--xf-gris)}
.xf-escola-btn:hover{border-color:var(--xf-verd);box-shadow:var(--xf-ombra);transform:translateY(-1px)}
.xf-escola-btn:focus-visible{outline:3px solid var(--xf-blau);outline-offset:2px}
.xf-escola-btn[aria-current="true"]{border-color:var(--xf-blau);box-shadow:inset 4px 0 0 var(--xf-verd)}
.xf-escola-btn--propia strong::after{content:" · la nostra escola";font-weight:600;color:var(--xf-verd-fosc)}
.xf-recompte{margin:0;font-size:14px;color:var(--xf-gris)}

/* Mapa del món Erasmus+ (international.html) */
.xf-mapa--mon{height:520px}
.xf-paisos{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0;padding:0;list-style:none}
.leaflet-tooltip.xf-etiqueta{padding:2px 10px;border:0;border-radius:12px;background:#FFFFFF;box-shadow:0 1px 4px rgba(0,0,0,.25);font:700 13px/20px Nunito,sans-serif;color:var(--xf-blau)}
.leaflet-tooltip.xf-etiqueta::before{display:none}

/* ---------- Ambaixadors ---------- */
.xf-ambaixadors{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin:0;padding:0;list-style:none}
.xf-ambaixador{position:relative;display:flex;flex-direction:column;height:100%;border-radius:var(--xf-radi);overflow:hidden;background:#FFFFFF;border:1px solid var(--xf-blau-clar);box-shadow:var(--xf-ombra);transition:transform .2s,box-shadow .2s}
.xf-ambaixador:hover{transform:translateY(-4px);box-shadow:var(--xf-ombra-hover)}
.xf-ambaixador:focus-within{outline:3px solid var(--xf-blau);outline-offset:3px}
.xf-ambaixador__foto{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--xf-blau-clar)}
.xf-ambaixador__cos{flex:1;display:flex;flex-direction:column;gap:8px;padding:18px 20px 22px}
.xf-ambaixador__nom{margin:0;font-size:20px;line-height:26px;font-weight:800;color:var(--xf-blau)}
.xf-ambaixador__zona{display:flex;align-items:center;gap:6px;margin:0;font-size:14px;line-height:20px;font-weight:700;color:var(--xf-verd-fosc)}
.xf-ambaixador__desc{margin:0;font-size:16px;line-height:24px;font-weight:300}
.xf-ambaixador__enllac{margin-top:auto;padding-top:6px;font-size:15px;font-weight:700;color:var(--xf-blau);text-decoration:none}
.xf-ambaixador__enllac::after{content:"";position:absolute;inset:0}
.xf-ambaixador__enllac:hover{text-decoration:underline}
.xf-ambaixador__enllac:focus{outline:none}

/* ---------- Prototip ---------- */
.xf-avis-prototip{position:sticky;top:0;z-index:1100;margin:0;padding:8px 16px;background:#FFF4D6;border-bottom:1px solid #E8C770;font-size:14px;line-height:20px;text-align:center;color:#5C4400}
.xf-collage{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:220px 220px;gap:14px}
.xf-collage img{display:block;width:100%;height:100%;object-fit:cover;border-radius:var(--xf-radi);box-shadow:var(--xf-ombra)}
.xf-collage img:first-child{grid-row:span 2}
.xf-collage img:nth-child(4){grid-column:span 2}

/* ---------- Responsive ---------- */
@media (max-width:1279px){.xf-ambaixadors{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:1023px){
  .xf-mapa-layout{grid-template-columns:minmax(0,1fr)}
  .xf-mapa{height:480px}
  .xf-escoles{max-height:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .xf-ambaixadors{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:767px){
  .xf-seccio{padding:40px 16px}
  .xf-titol{font-size:26px;line-height:34px}
  .xf-intro{font-size:17px;line-height:26px}
  .xf-mapa{height:min(70vh,440px)}
  .xf-escoles{grid-template-columns:minmax(0,1fr);max-height:360px}
.xf-targeta-escola__img{height:110px}
  .xf-collage{grid-template-columns:1fr 1fr;grid-template-rows:200px 140px 140px}
  .xf-collage img:first-child{grid-column:span 2;grid-row:auto}
}
@media (hover:none){.xf-mapa-avis{display:none}}
@media (max-width:599px){
  .xf-ambaixadors{grid-template-columns:minmax(0,1fr)}
  .xf-ambaixador__foto{aspect-ratio:4/3;object-position:50% 20%}
}
@media (prefers-reduced-motion:reduce){
  .xf-ambaixador,.xf-escola-btn,.xf-pin__punt{transition:none}
  .xf-ambaixador:hover,.xf-escola-btn:hover{transform:none}
}