/* Arricchimento grafico della landing: mappe vere nei portali, illustrazioni degli strumenti,
   pila di livelli nella sezione piattaforma e scheda sulla particella nell'immagine iniziale. */

/* --- Hero: scheda della particella evidenziata ------------------------------------------- */
.mn-hero-card {
  position: absolute;
  z-index: 2;
  right: max(56px, calc((100% - 1280px) / 2 + 40px));
  bottom: 14%;
  width: 252px;
  padding: 16px 18px 15px;
  background: #fffffff0;
  border: 1px solid #dfe5d3;
  border-radius: 8px;
  box-shadow: 0 18px 44px #2c594524;
  font-size: 12px;
  line-height: 1.4;
}
.mn-hero-card > small { display: block; font-size: 11px; color: var(--mn-muted); }
.mn-hero-card > strong { display: block; margin: 2px 0 12px; font-size: 15px; font-weight: 600; letter-spacing: -.2px; }
.mn-hero-card dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; }
.mn-hero-card dt { color: var(--mn-muted); }
.mn-hero-card dd { margin: 0; text-align: right; font-weight: 600; }
.mn-hero-card .mn-bar { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: #e6eadc; overflow: hidden; }
.mn-hero-card .mn-bar i { display: block; width: 96%; height: 100%; background: #f2a33a; }

/* --- Piattaforma: la pila dei livelli ----------------------------------------------------- */
.mn-platform-figure {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(280px, 380px);
  align-items: center;
  gap: 40px;
  margin-top: 6px;
  padding: 30px 48px;
  background: #edf0e5;
  border: 1px solid var(--mn-line);
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  isolation: isolate;
}
.mn-platform-figure::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url('./hero-mapnode.webp') center / cover;
  opacity: .22;
}
.mn-stack-wrap { perspective: 1400px; height: 360px; display: grid; place-items: center; }
.mn-stack {
  position: relative;
  width: 250px;
  height: 250px;
  transform-style: preserve-3d;
  transform: rotateX(58deg) rotateZ(-38deg) translateY(30px);
}
.mn-sheet {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  border: 1px solid #ffffffc0;
  overflow: hidden;
  box-shadow: 18px 18px 30px #2c594522;
  transform: translateZ(0);
  transition: transform 1.1s cubic-bezier(.2, .7, .2, 1);
}
.mn-sheet b { position: absolute; display: block; }
.mn-sheet--base {
  background:
    repeating-radial-gradient(circle at 30% 70%, transparent 0 11px, #b9c6aa66 11px 12px),
    #e4eada;
}
.mn-sheet--cadastre {
  background:
    repeating-linear-gradient(90deg, transparent 0 41px, #6f7f6a55 41px 42px),
    repeating-linear-gradient(0deg, transparent 0 33px, #6f7f6a55 33px 34px),
    #ffffff40;
}
.mn-sheet--zoning { background: #ffffff22; }
.mn-sheet--zoning b:nth-child(1) { left: 8%; top: 10%; width: 40%; height: 34%; background: #f2a33a; clip-path: polygon(0 12%, 100% 0, 88% 100%, 6% 88%); }
.mn-sheet--zoning b:nth-child(2) { left: 52%; top: 8%; width: 40%; height: 26%; background: #e8737c; clip-path: polygon(10% 0, 100% 16%, 90% 100%, 0 84%); }
.mn-sheet--zoning b:nth-child(3) { left: 10%; top: 52%; width: 36%; height: 38%; background: #c8e68a; clip-path: polygon(0 0, 100% 10%, 92% 100%, 8% 90%); }
.mn-sheet--zoning b:nth-child(4) { left: 50%; top: 40%; width: 42%; height: 50%; background: #b8a2e6; clip-path: polygon(8% 0, 100% 6%, 94% 100%, 0 92%); }
.mn-sheet--constraint { background: transparent; border-color: transparent; box-shadow: none; }
.mn-sheet--constraint b:nth-child(1) { inset: 6% 5% 8% 7%; border: 2px dashed #c4413c; border-radius: 6px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.mn-sheet--constraint b:nth-child(2) { left: 6%; top: 44%; width: 88%; height: 10%; background: repeating-linear-gradient(45deg, #1f6b4acc 0 3px, transparent 3px 8px); }
.mn-stack.is-in .mn-sheet--cadastre { transform: translateZ(46px); }
.mn-stack.is-in .mn-sheet--zoning { transform: translateZ(92px); }
.mn-stack.is-in .mn-sheet--constraint { transform: translateZ(138px); }
.mn-stack-key { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.mn-stack-key li { display: grid; grid-template-columns: 14px 1fr; gap: 4px 14px; align-items: start; padding: 11px 0; border-bottom: 1px solid #d7decc; }
.mn-stack-key li:last-child { border-bottom: 0; }
.mn-stack-key i { width: 14px; height: 14px; margin-top: 3px; border-radius: 3px; background: var(--c); }
.mn-stack-key strong { font-size: 14px; font-weight: 600; }
.mn-stack-key span { grid-column: 2; font-size: 12px; line-height: 1.6; color: var(--mn-muted); }

/* --- Strumenti: miniature dell'interfaccia ------------------------------------------------ */
.mn-tool { display: flex; flex-direction: column; padding-top: 14px; }
.mn-tool-art {
  position: relative;
  isolation: isolate;
  height: 176px;
  margin: 0 -13px 26px;
  border-radius: 5px;
  background: #edf0e5;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.mn-tool-art::before { content: ''; position: absolute; inset: 0; z-index: -1; background: url('./hero-mapnode.webp') 70% 40% / 230% auto; opacity: .38; }
.mn-ui { width: min(84%, 252px); background: #fffffff2; border: 1px solid #dfe5d3; border-radius: 7px; box-shadow: 0 10px 28px #2c59451c; font-size: 11.5px; }
.mn-ui-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; }
.mn-ui-row + .mn-ui-row { border-top: 1px solid #e8ecdf; }
.mn-ui-row > span { flex: 1; min-width: 0; }
.mn-ui-row small { display: block; color: var(--mn-muted); font-size: 10px; margin-top: 1px; }
.mn-sw { width: 16px; height: 16px; border-radius: 3px; background: var(--c); border: 1px solid #00000022; flex: none; }
.mn-sw--hatch { background: repeating-linear-gradient(45deg, #c4413c 0 2px, #fff 2px 5px); }
.mn-check { width: 15px; height: 15px; border-radius: 3px; border: 1.5px solid #8fa396; background: #fff; flex: none; position: relative; }
.mn-check.is-on { background: #16817b; border-color: #16817b; }
.mn-check.is-on::after { content: ''; position: absolute; left: 4px; top: 1px; width: 3px; height: 7px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.mn-ui-search { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid #e8ecdf; font-weight: 600; }
.mn-ui-search svg { width: 14px; height: 14px; color: #607b51; flex: none; }
.mn-ui-search i { width: 1px; height: 13px; background: #2c5945; animation: mn-caret 1.1s steps(1) infinite; }
@keyframes mn-caret { 50% { opacity: 0; } }
.mn-ui-measure { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px; border-top: 1px solid #e8ecdf; color: var(--mn-muted); }
.mn-ui-measure strong { color: var(--mn-ink); }
.mn-ui-bar { height: 5px; border-radius: 3px; background: #e6eadc; overflow: hidden; margin-top: 7px; }
.mn-ui-bar i { display: block; width: 96%; height: 100%; background: #f2a33a; }

/* --- Portali: la mappa di ogni comune ------------------------------------------------------ */
.mn-portal { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.mn-portal-media { position: relative; aspect-ratio: 2 / 1; overflow: hidden; background: #dfe5d3; border-bottom: 1px solid #d8dfce; }
.mn-demo { position: absolute; z-index: 1; top: 12px; left: 12px; padding: 5px 9px 5px 10px; background: #f9faf3f2; border: 1px solid #d8dfce; border-radius: 4px; font-size: 9px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: #4e6856; box-shadow: 0 4px 14px #2c59451a; }
.mn-portal-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.mn-portal:hover .mn-portal-media img { transform: scale(1.05); }
.mn-portal-body { display: flex; flex-direction: column; flex: 1; padding: 20px 24px 22px; }
.mn-portal-body .mn-portal-top { margin-bottom: 14px; }
.mn-portal-body .mn-portal-bottom { margin-top: auto; padding-top: 17px; }
.mn-portal-body > p { margin-bottom: 26px; }

@media (max-width: 900px) {
  .mn-hero-card { display: none; }
  .mn-platform-figure { grid-template-columns: 1fr; padding: 22px 22px 8px; gap: 8px; }
  .mn-stack-wrap { height: 250px; }
  .mn-stack { width: 150px; height: 150px; transform: rotateX(58deg) rotateZ(-38deg) translateY(8px); }
  .mn-stack.is-in .mn-sheet--cadastre { transform: translateZ(34px); }
  .mn-stack.is-in .mn-sheet--zoning { transform: translateZ(68px); }
  .mn-stack.is-in .mn-sheet--constraint { transform: translateZ(102px); }
}
@media (max-width: 800px) {
  .mn-portal { padding: 0; }
  .mn-portal-body { padding: 18px 20px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .mn-sheet { transition: none; }
  .mn-ui-search i { animation: none; }
  .mn-portal-media img { transition: none; }
}

/* --- Piè di pagina: logo a sinistra, crediti e ritorno in cima a destra, sulla stessa linea di base ---- */
.mn-footer { align-items: flex-end; }
.mn-footer-meta { display: grid; gap: 6px; justify-items: end; text-align: right; font-size: 11px; line-height: 1.5; color: var(--mn-muted); }
.mn-footer-meta a { color: var(--mn-ink); }
.mn-footer-meta > span:last-child a { margin-left: 22px; }
.mn-footer-meta a[href^='mailto:'] { text-decoration: underline; text-decoration-color: #b9c6aa; text-underline-offset: 3px; }
.mn-footer-meta a:hover { color: #72894b; }
@media (max-width: 800px) {
  .mn-footer-meta { width: 100%; justify-items: start; text-align: left; }
  .mn-footer-meta > span:last-child a { margin-left: 16px; }
}

/* --- Tecnologia: etichetta PostGIS -------------------------------------------------------- */
.mn-platform-copy .mn-tech-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.mn-tech { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 11px; background: #fdfdf8; border: 1px solid var(--mn-line); border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--mn-ink); line-height: 1; }
.mn-tech svg { color: #607b51; flex: none; }