/* ============================================================
   aura.css — pagina progetto AURA (app mobile personale).
   Taglio "app store": mockup su smartphone e atmosfera calda,
   con la palette salvia/verde dell'app. Carica dopo base.css
   + progetti.css. Gli accenti verdi restano locali alla pagina
   (il brand nell'header resta blu).
   ============================================================ */

.au-page {
  --au: #3a7a5c;                         /* verde salvia dell'app */
  --au-wash: rgba(58, 122, 92, 0.12);
}

/* accenti verdi solo su questa pagina */
.au-page .section-num { color: var(--au); }
.au-page .proj-kicker .dot { background: var(--au); }
.au-page .feature-ico { background: var(--au-wash); color: var(--au); }
.au-page .proj-chip.accent {
  color: var(--au);
  background: var(--au-wash);
  border-color: color-mix(in srgb, var(--au) 32%, transparent);
}

/* ---------- Hero a due colonne (testo + telefono) ---------- */
.au-hero { position: relative; z-index: 2; padding-top: clamp(2.5rem, 7vw, 5rem); padding-bottom: clamp(2rem, 5vw, 3.5rem); }
.au-hero-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: center;
}
@media (max-width: 860px) { .au-hero-grid { grid-template-columns: 1fr; } }

.au-hero .btn-primary { background: var(--au); border-color: var(--au); color: #fff; }
.au-hero .btn-primary:hover { background: color-mix(in srgb, var(--au) 86%, #000); }

.au-hero-phone { position: relative; justify-self: center; }
.au-hero-phone::before {
  content: "";
  position: absolute;
  inset: -16% -28%;
  z-index: -1;
  background: radial-gradient(circle at 50% 42%, var(--au-wash), transparent 68%);
}

/* ---------- Cornice smartphone ---------- */
.au-phone {
  position: relative;
  width: 100%;
  max-width: 262px;
  aspect-ratio: 1080 / 2424;
  background: #10130f;
  border-radius: 38px;
  padding: 7px;
  overflow: hidden;
  box-shadow: 0 34px 80px -34px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.au-phone img {
  width: 100%;
  height: 100%;
  /* aspect-ratio esplicito sull'immagine: evita che Safari la faccia sforare in basso
     (bug con aspect-ratio + padding + height:100% sul contenitore) */
  aspect-ratio: 1080 / 2424;
  object-fit: cover;
  border-radius: 31px;
  display: block;
}
/* tasto laterale */
.au-phone::after {
  content: "";
  position: absolute;
  right: -2px; top: 112px;
  width: 3px; height: 56px;
  border-radius: 3px;
  background: #10130f;
}

/* ---------- Riga di telefoni ---------- */
.au-phones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1.2rem, 3vw, 2rem);
  margin-top: 2rem;
}
.au-phones figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 0.85rem; flex: 0 1 212px; }
.au-phones .au-phone { max-width: 212px; }
.au-phones figcaption { font-family: var(--font-mono); font-size: 0.74rem; color: var(--ink-faint); text-align: center; }

/* ---------- Sezione "cuore": pannello caldo ---------- */
.au-heart {
  background: linear-gradient(165deg, color-mix(in srgb, var(--au) 10%, var(--bg-elev)) 0%, var(--bg-elev) 62%);
  border: 1px solid color-mix(in srgb, var(--au) 22%, var(--line));
  border-radius: 18px;
  padding: clamp(1.6rem, 4vw, 2.8rem);
}
.au-heart .section-num { color: var(--au); }
.au-heart .proj-lead strong { color: var(--au); }

/* ---------- Schermate più leggibili + zoom ---------- */
.au-phones .au-phone { max-width: 236px; }
.au-phone img { cursor: zoom-in; }
.au-zoom-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1.1rem;
  font-size: 0.82rem;
  color: var(--ink-faint);
}
.au-zoom-hint svg { color: var(--au); flex: 0 0 auto; }

/* ---------- Lightbox (ingrandimento schermate) ---------- */
.au-lightbox {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 4vh 5vw;
  background: rgba(8, 12, 9, 0.86);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.au-lightbox.open { display: flex; }
.au-lightbox img {
  max-width: min(400px, 88vw);
  max-height: 92vh;
  border-radius: 30px;
  box-shadow: 0 30px 90px -20px rgba(0, 0, 0, 0.7);
}
.au-lightbox-close {
  position: absolute;
  top: 16px;
  right: 18px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 1.3rem;
  line-height: 1;
  display: grid;
  place-items: center;
}
.au-lightbox-close:hover { background: rgba(255, 255, 255, 0.28); }