/* ==========================================================================
   area dipendente — vedi doc/copy.md, sezione «INTERFACCIA DIPENDENTE».

   Fondo --tinta: e' il gradino chiaro fra gli strumenti (bianca) e il
   geotracking (scuro). Zero JavaScript, zero classi Bootstrap. Mobile-first:
   la base e' il telefono, le media query aggiungono man mano che c'e' spazio.
   La regola prefers-reduced-motion e il focus-visible stanno in edil.css.
   ========================================================================== */

.area-dip {
  background: var(--tinta);
  padding: 60px 0 64px;
}

.area-dip__griglia {
  display: grid;
  grid-template-columns: 1fr;
  gap: 44px;
  align-items: center;
}

/* --------------------------------------------------------------------------
   Colonna testo
   -------------------------------------------------------------------------- */

/* CONTRASTO: come in punti-forti, l'azzurro pieno sul fondo --tinta misura
   2,80:1, sotto il 4,5:1 che WCAG AA chiede a un'etichetta di 12,5 px.
   Portato a --blu: 6,38:1. L'accento azzurro della sezione resta il riquadro
   del bottone dentro il mockup, quindi la regola «un solo azzurro» tiene. */
.area-dip__occhiello {
  font-size: 12.5px;
  letter-spacing: .16em;
  color: var(--blu);
  margin-bottom: 14px;
}

.area-dip__titolo {
  font-family: var(--f-titolo);
  font-weight: 700;
  font-size: clamp(27px, 5.6vw, 38px);
  line-height: 1.18;
  letter-spacing: -.02em;
  color: var(--testo-forte);
  margin: 0 0 18px;
}

.area-dip__lead {
  font-family: var(--f-testo);
  font-size: 17px;
  line-height: 1.68;
  color: var(--testo);
  max-width: 56ch;
  margin: 0 0 26px;
}

/* La parte centrale in nero: e' il cuore della promessa — ognuno vede solo
   quello che riguarda lui — e va letta anche da chi scorre la pagina. */
.area-dip__lead-forte { color: var(--testo-forte); }

.area-dip__elenco {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: grid;
  gap: 14px;
}

.area-dip__elenco li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  column-gap: 13px;
  align-items: start;
  font-family: var(--f-testo);
  font-size: 16px;
  line-height: 1.55;
  color: var(--testo-forte);
}

/* Quadratino azzurro tenue con la spunta blu: il quadratino e' il velo, la
   spunta e' la struttura. Stesso rapporto della pill di strumenti — mai due
   accenti pieni sullo stesso oggetto. */
.area-dip__spunta {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(46, 155, 230, .14);
  color: var(--blu);
  /* La spunta e' alta 26 px, la riga di testo circa 25: senza questo mezzo
     pixel il quadratino resta un capello piu' in alto della prima riga. */
  margin-top: 1px;
}

.area-dip__spunta svg { width: 14px; height: 14px; }

.area-dip__chiusura {
  font-family: var(--f-testo);
  font-size: 15px;
  line-height: 1.6;
  color: var(--testo-tenue);
  max-width: 56ch;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Il telefono
   Un device visto di fronte che mostra una PAGINA WEB: la barra dell'indirizzo
   col lucchetto e' il dettaglio che comunica «web» e non «app da installare».
   Tutto in div e SVG: nessun raster, nitido a ogni risoluzione.
   -------------------------------------------------------------------------- */
.area-dip__mockup {
  position: relative;
  display: grid;
  place-items: center;
  /* Il padding fa spazio all'alone, che deborda dal telefono: senza, l'alone
     verrebbe tagliato dal bordo della colonna. */
  padding: 22px 0;
}

/* Alone azzurro dietro il telefono: stessa funzione dell'alone della hero —
   stacca l'oggetto dal fondo piatto. */
.area-dip__mockup::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: min(420px, 100%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(46, 155, 230, .30) 0%,
    rgba(46, 155, 230, .10) 46%,
    rgba(46, 155, 230, 0) 72%);
}

.ad-telefono {
  position: relative;
  z-index: 1;
  width: min(272px, 78vw);
  /* Proporzione di un telefono. aspect-ratio e non un'altezza fissa: il
     mockup si rimpicciolisce con la colonna senza deformarsi.
     E' un filo piu' tozza del vero 9/19.5 perche' la pagina disegnata dentro
     finisce prima: alla proporzione reale restava un terzo di schermo bianco,
     che si legge come una schermata rotta e non come una pagina corta. */
  aspect-ratio: 9 / 16.2;
  background: linear-gradient(160deg, var(--scuro-3) 0%, var(--scuro-2) 46%, var(--scuro-1) 100%);
  border-radius: 34px;
  padding: 9px;
  border: 1px solid rgba(255, 255, 255, .10);
  box-shadow:
    0 26px 60px rgba(4, 16, 30, .30),
    0 0 46px rgba(46, 155, 230, .22);
}

/* Tacca del sensore: due pixel di dettaglio che fanno leggere l'oggetto come
   un telefono invece che come un rettangolo scuro. Sta SOPRA lo schermo, non
   nella cornice: con 9 px di bordo non c'e' spazio sopra, ed e' anche il modo
   in cui la porta un telefono di oggi. Percio' e' scura — bianca sulla barra
   chiara del browser non si vedeva affatto. */
.ad-telefono__tacca {
  position: absolute;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  width: 74px;
  height: 6px;
  border-radius: 999px;
  background: rgba(4, 16, 30, .55);
}

.ad-telefono__schermo {
  width: 100%;
  height: 100%;
  border-radius: 26px;
  overflow: hidden;
  background: var(--bianco);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

/* --- Barra del browser --- */
.ad-browser {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 10px 8px;
  background: var(--tinta);
  border-bottom: 1px solid var(--filetto);
}

.ad-browser__pallini {
  display: inline-flex;
  gap: 4px;
  flex: 0 0 auto;
}

.ad-browser__pallini i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(138, 160, 180, .55); /* --testo-chevron, attenuato */
}

.ad-browser__url {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  font-family: var(--f-etichetta);
  font-size: 9.5px;
  font-weight: 500;
  color: var(--testo-tenue);
  background: var(--bianco);
  border: 1px solid var(--filetto);
  border-radius: 999px;
  padding: 4px 9px;
  /* L'indirizzo e' un dato tecnico: resta a sinistra anche in arabo, come lo
     mostrerebbe il browser vero. */
  direction: ltr;
}

.ad-browser__url svg {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  /* Blu e non verde: verde e rosso sono riservati agli stati del pannello
     geotracking, e un lucchetto verde qui li avrebbe svuotati di senso. */
  color: var(--blu);
}

/* --- La pagina dentro il browser: lo screenshot vero --- */
.ad-app {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  background: var(--tinta);
}

/* --------------------------------------------------------------------------
   Da 768 px: la sezione respira come le altre.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .area-dip { padding: 88px 0 92px; }
}

/* --------------------------------------------------------------------------
   Da 900 px: due colonne 0,9fr / 1,1fr, mockup a sinistra.
   Il mockup a sinistra e' voluto: nella sezione successiva il pannello mappa
   sta a destra, cosi' lo sguardo alterna e le due sezioni non sembrano gemelle.
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {
  .area-dip__griglia {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 56px;
  }

  .area-dip__elenco { gap: 16px; }
}