/* FarmyPoint — pagina «La nostra missione» (/<lingua>/perche-farmypoint), dopo farmacie.css (classi ph-*). Solo HTML e CSS:
   cartolina della missione nell'apertura, storia, obiettivi dell'Agenda 2030, pannelli su misura e confini.
   Colori ufficiali degli Obiettivi di sviluppo sostenibile solo come segni grafici (barra e pallini), mai sotto al testo. */
.ms-g3 { --sdg: #4C9F38; }
.ms-g10 { --sdg: #DD1367; }
.ms-g11 { --sdg: #FD9D24; }
.ms-g12 { --sdg: #BF8B2E; }

/* Cartolina della missione: sempre chiara con colori fissi (contrasto AA in entrambi i temi) */
.ms-card { position: relative; margin: 0; justify-self: center; width: min(100%, 420px); padding: 34px 30px 26px; border-radius: 26px;
  background: linear-gradient(160deg, #ffffff, #eef7f5); color: #203330; box-shadow: 0 40px 70px -30px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.08); }
@media (min-width: 920px) { .ms-card { transform: rotate(-2deg); } }
@media (prefers-reduced-motion: no-preference) and (min-width: 920px) {
  .ms-card { animation: ms-float 7s ease-in-out infinite; }
  @keyframes ms-float { 50% { transform: rotate(-2deg) translateY(-8px); } }
}
.ms-quote { position: absolute; top: -6px; right: 22px; font: 700 120px/1 Georgia, 'Times New Roman', serif; color: #c8e6e0; }
.ms-card .ph-kicker { position: relative; color: #9a3f2c; }
.ms-card blockquote { position: relative; margin: 0 0 22px; }
.ms-card blockquote p { margin: 0; font: italic 400 clamp(19px, 2vw, 22px)/1.45 Georgia, 'Times New Roman', serif; color: #0c2a28; }
.ms-card figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 16px; border-top: 1px dashed #c9dbd6; font-size: 13.5px; font-weight: 600; color: #3f524e; }
.ms-dots { display: inline-flex; gap: 5px; }
.ms-dots span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: 12px; font-weight: 800; color: #0c2a28;
  background: #fff; box-shadow: inset 0 0 0 3px var(--sdg); }

/* Storia e problema */
.ms-story { display: grid; gap: 28px; align-items: start; }
@media (min-width: 920px) { .ms-story { grid-template-columns: 1.1fr .9fr; gap: 56px; } }
.ms-story .ph-sec-h { margin-bottom: 14px; }
.ms-story > div:first-child > p { margin: 0 0 14px; max-width: 640px; font-size: 18px; line-height: 1.65; color: var(--text); }
.ms-h3 { margin: 0 0 14px; font-size: clamp(20px, 2.2vw, 24px); letter-spacing: -0.015em; }

/* Persone: tre per riga su schermi larghi */
#persone .ph-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }

/* Ruolo delle farmacie */
.ms-pharm { display: grid; gap: 18px; align-items: center; margin-top: 18px; padding: clamp(20px, 3vw, 32px); border-radius: 22px; background: var(--muted-bg); border: 1px solid var(--line); }
@media (min-width: 920px) { .ms-pharm { grid-template-columns: 1fr auto; gap: 40px; } }
.ms-pharm h3 { margin: 0 0 8px; font-size: clamp(20px, 2.2vw, 24px); }
.ms-pharm p { margin: 0 0 8px; max-width: 760px; line-height: 1.55; color: var(--text-2); }
.ms-pharm p:last-child { margin-bottom: 0; }

/* Obiettivi dell'Agenda 2030 */
.ms-sdgs { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.ms-sdg { position: relative; overflow: hidden; padding: 26px 22px 22px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line);
  transition: transform .2s ease, box-shadow .2s ease; }
.ms-sdg::before { content: ''; position: absolute; inset: 0 0 auto; height: 6px; background: var(--sdg); }
.ms-sdg:hover { transform: translateY(-3px); box-shadow: 0 22px 40px -30px rgba(0,0,0,.5); }
.ms-sdg-n { display: flex; align-items: baseline; gap: 8px; margin: 0; }
.ms-sdg-n span { font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.ms-sdg-n b { font-size: 44px; line-height: 1; letter-spacing: -0.04em; color: var(--ink); }
.ms-sdg-n b::after { content: ''; display: inline-block; width: 10px; height: 10px; margin-left: 6px; border-radius: 50%; background: var(--sdg); vertical-align: middle; }
.ms-sdg h3 { margin: 12px 0 6px; font-size: 18px; letter-spacing: -0.01em; }
.ms-sdg p:last-child { margin: 0; font-size: 15px; line-height: 1.55; color: var(--text-2); }

/* Misura e privacy; impegni e confini */
.ms-priv { background: var(--brand-tint); border-color: color-mix(in srgb, var(--brand) 30%, var(--line)); }
.ms-limits { background: var(--muted-bg); }
.ms-limits .ph-checks svg { stroke: var(--text-2); background: var(--surface); }
.ms .ph-sec.ph-two { align-items: stretch; }

/* Rete di servizi e sperimentazione: fasce chiare con una sfumatura leggera, intestazione a sinistra e testo a destra */
.ms-band { padding: clamp(22px, 4vw, 44px); border-radius: 26px; border: 1px solid var(--line);
  background: linear-gradient(165deg, var(--brand-tint), var(--surface) 65%); }
.ms-split { display: grid; gap: 18px 56px; align-items: start; }
@media (min-width: 920px) { .ms-split { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
.ms-split .ph-sec-h { margin: 0 0 12px; }
.ms-txt p { margin: 0 0 14px; max-width: 680px; font-size: 17px; line-height: 1.65; color: var(--text); }
.ms-txt p:last-child { margin-bottom: 0; }
#territorio .ms-txt { max-width: 760px; }
.ms-key { grid-column: 1 / -1; margin: 8px 0 0; padding: 18px 22px; max-width: 920px; border-left: 4px solid var(--brand); border-radius: 0 16px 16px 0;
  background: var(--surface); font-size: clamp(17px, 1.8vw, 20px); font-weight: 600; line-height: 1.5; color: var(--ink); }
@media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .ms-key { border-left-color: var(--brand-on-dark); } }
html[data-theme="dark"] .ms-key { border-left-color: var(--brand-on-dark); }

/* Innovazione territoriale: quattro obiettivi compatti, in orizzontale su schermi larghi */
.ms-aims { display: grid; gap: 12px; margin: 24px 0 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.ms-aim { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.ms-aim .ph-ico { flex: none; width: 44px; height: 44px; border-radius: 12px; }
.ms-aim h3 { margin: 2px 0 4px; font-size: 17px; letter-spacing: -0.01em; }
.ms-aim p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text-2); }

/* Sperimentazione: attività possibili (frecce, non spunte: non sono ancora avviate) */
.ms-plan h3 { margin: 0 0 14px; font-size: 18px; }
.ms-plan .ph-checks svg { stroke: var(--brand); background: var(--brand-tint); }
@media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .ms-plan .ph-checks svg { stroke: var(--brand-on-dark); } }
html[data-theme="dark"] .ms-plan .ph-checks svg { stroke: var(--brand-on-dark); }

/* Chiusura: più paragrafi e nota sull'indipendenza del progetto */
.ph-final > p + p { margin-top: -12px; }
.ph-final .ms-indep { max-width: 560px; margin: 14px auto 0; font-size: 14px; color: var(--hero-text-2); }

/* Innovazione territoriale: collegamento alla pagina «FarmyPoint per il territorio» */
.ms-more { display: grid; gap: 4px; margin: 18px 0 0; max-width: 760px; }
.ms-more a { justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 17px; font-weight: 700; color: var(--brand); }
.ms-more span:last-child { font-size: 15px; line-height: 1.5; color: var(--text-2); }
@media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .ms-more a { color: var(--brand-on-dark); } }
html[data-theme="dark"] .ms-more a { color: var(--brand-on-dark); }