/* ==========================================================================
   ATLAS ESTATE — LAYOUT
   Header, navigazione, griglia, intestazioni di sezione, footer.
   Carica dopo base.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · HEADER
   Trasparente sopra l'hero, poi passaggio a fondo con blur.
   Il passaggio e pilotato da una classe che nav.js commuta da una sentinella
   IntersectionObserver: nessun listener di scroll, nessun calcolo per frame.
   -------------------------------------------------------------------------- */
.ae-header{
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-header);
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background-color var(--dur-ui) var(--ease-out),
              border-color var(--dur-ui) var(--ease-out),
              backdrop-filter var(--dur-ui) var(--ease-out),
              height var(--dur-ui) var(--ease-out);
  border-block-end: var(--bw) solid transparent;
}

@media (max-width: 768px){
  .ae-header{ height: var(--header-h-sm); }
}

/* Isola scura, sempre: fondo blu notte fisso, quindi token scuri anche su
   pagina .t-light, dove altrimenti la navigazione sarebbe blu su blu (1,33:1).
   Vedi D-27. */
.t-light .ae-header{
  --canvas:             #061527;   /* il menu mobile aperto usa var(--canvas): senza
                                      questa riga diventa avorio su avorio */
  --text-primary:       #F4F0E8;
  --text-secondary:     #A9B4C2;
  --text-muted:         #7A8798;
  --panel:              #0E2540;
  --border:             #17304F;
  --border-interactive: #4E6A8A;
  --accent-text:        #C5A15A;
}

.ae-header::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom,
    rgba(6,21,39,.72) 0%, rgba(6,21,39,0) 100%);
  opacity: 1;
  transition: opacity var(--dur-ui) var(--ease-out);
  pointer-events: none;
}

/* Stato agganciato: la barra si posa. */
.ae-header.is-stuck{
  background-color: rgba(6,21,39,.86);
  border-block-end-color: var(--border);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
}
.ae-header.is-stuck::before{ opacity: 0; }

/* Su pagine senza hero cinematografico la barra parte gia posata. */
.ae-header--solid{
  background-color: rgba(6,21,39,.92);
  border-block-end-color: var(--border);
}
.ae-header--solid::before{ opacity: 0; }

.ae-header__inner{
  width: 100%;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--sp-6);
}

/* La sentinella: un elemento invisibile alto 1px in cima al documento.
   Quando esce dal viewport, l'header si posa. */
.ae-header-sentinel{
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   2 · IL MARCHIO
   Lockup ricostruito in HTML: nitido a ogni densita, selezionabile, leggibile
   dagli screen reader, e cambia colore con i token. Vedi BRAND.md §2.
   -------------------------------------------------------------------------- */
.ae-brand{
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  text-decoration: none;
  color: var(--text-primary);
  flex: 0 0 auto;
}
.ae-brand:hover{ color: var(--text-primary); }

/* Il marchio ha due forme, e la soglia e una regola del Brand Book, non una
   scelta di layout: sopra i 48px si usa la versione completa con l arco d oro,
   sotto i 48px l arco cade e resta la struttura con i tre solai.
   Due SVG con viewBox propria costano poche centinaia di byte e rispettano la
   regola a ogni dimensione, invece di stiracchiarne una sola. */
.ae-brand__mark{
  flex: 0 0 auto;
  display: block;
}
.ae-brand__mark--full{ width: 46px; height: 48px; }
.ae-brand__mark--reduced{ width: 41px; height: 48px; display: none; }

@media (max-width: 768px){
  .ae-brand__mark--full{ display: none; }
  .ae-brand__mark--reduced{ display: block; width: 33px; height: 38px; }
}

.ae-brand__word{
  display: flex;
  flex-direction: column;
  line-height: 1;
  /* Area di rispetto: margine pari allo spessore del pilastro. */
  padding-inline-start: 2px;
}
.ae-brand__atlas{
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  font-size: 1.0625rem;
  letter-spacing: var(--ls-atlas);
  line-height: 1;
}
.ae-brand__estate{
  font-family: var(--font-ui);
  font-weight: var(--fw-regular);
  /* corpo = 27% di ATLAS, come da Brand Book. Sotto i 60px di ATLAS
     il rapporto sale per leggibilita: qui siamo a 17px, quindi 45%. */
  font-size: 0.4781rem;
  letter-spacing: var(--ls-estate);
  line-height: 1;
  margin-block-start: 0.16em;
  /* ESTATE e centrata otticamente: si compensa lo spazio finale del tracking */
  text-indent: var(--ls-estate);
  color: var(--text-secondary);
}
.ae-header.is-stuck .ae-brand__estate,
.ae-header--solid .ae-brand__estate{ color: var(--text-secondary); }

/* Sotto i 48px cade l'arco d'oro: lo gestisce la variante "ridotta" dell'SVG,
   usata dal marchio in versione compatta. */

/* --------------------------------------------------------------------------
   3 · NAVIGAZIONE
   -------------------------------------------------------------------------- */
.ae-nav{
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: var(--sp-6);
}

.ae-nav__list{
  display: flex;
  align-items: center;
  gap: var(--sp-5);
}

.ae-nav__link{
  position: relative;
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  letter-spacing: .01em;
  text-decoration: none;
  color: var(--text-primary);
  padding-block: var(--sp-2);
  white-space: nowrap;
}
.ae-nav__link::after{
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-ui) var(--ease-out);
}
.ae-nav__link:hover{ color: var(--text-primary); }
.ae-nav__link:hover::after,
.ae-nav__link[aria-current="page"]::after{ transform: scaleX(1); }
.ae-nav__link[aria-current="page"]{ color: var(--accent-text); }

/* Bottone del menu, solo sotto il breakpoint di navigazione */
.ae-nav-toggle{
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  margin-inline-start: auto;
  color: var(--text-primary);
}
.ae-nav-toggle__bars{
  position: relative;
  width: 22px;
  height: 12px;
  display: block;
}
.ae-nav-toggle__bars::before,
.ae-nav-toggle__bars::after{
  content: "";
  position: absolute;
  inset-inline: 0;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--dur-ui) var(--ease-out),
              opacity var(--dur-micro) var(--ease-out);
}
.ae-nav-toggle__bars::before{ inset-block-start: 0; }
.ae-nav-toggle__bars::after{ inset-block-end: 0; }
.ae-nav-toggle[aria-expanded="true"] .ae-nav-toggle__bars::before{
  transform: translateY(5.25px) rotate(45deg);
}
.ae-nav-toggle[aria-expanded="true"] .ae-nav-toggle__bars::after{
  transform: translateY(-5.25px) rotate(-45deg);
}

@media (max-width: 1024px){
  .ae-nav-toggle{ display: inline-flex; }

  .ae-nav{
    position: fixed;
    inset-block-start: var(--header-h);
    inset-inline: 0;
    inset-block-end: 0;
    margin: 0;
    padding: var(--sp-7) var(--gutter) var(--sp-8);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: var(--sp-6);
    background: var(--canvas);
    border-block-start: var(--bw) solid var(--border);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--dur-ui) var(--ease-out),
                transform var(--dur-ui) var(--ease-out),
                visibility 0s linear var(--dur-ui);
  }
  .ae-nav[data-open]{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
  }
  @media (max-width: 768px){
    .ae-nav{ inset-block-start: var(--header-h-sm); }
  }

  .ae-nav__list{
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .ae-nav__link{
    font-family: var(--font-display);
    font-size: var(--fs-h4);
    font-weight: var(--fw-medium);
    padding-block: var(--sp-4);
    border-block-end: var(--bw) solid var(--border);
  }
  .ae-nav__link::after{ display: none; }
  .ae-nav__cta{ margin-block-start: var(--sp-3); }
  .ae-nav__cta .ae-btn{ width: 100%; }
}

/* Blocco dello scroll a menu aperto, senza salto di layout */
body.is-nav-open{ overflow: hidden; }

/* --------------------------------------------------------------------------
   4 · SEZIONI
   -------------------------------------------------------------------------- */
.ae-section{ position: relative; z-index: var(--z-content); }
.ae-section--alt{ background: var(--canvas-alt); }
.ae-section--light{
  background: var(--canvas);   /* risolto da .t-light */
  color: var(--text-primary);
}

.ae-section__head{
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin-block-end: var(--sp-8);
  max-width: 46rem;
}
.ae-section__head--center{
  margin-inline: auto;
  text-align: center;
  align-items: center;
}
.ae-section__head--center h2{ margin-inline: auto; }

/* --------------------------------------------------------------------------
   5 · GRIGLIA
   -------------------------------------------------------------------------- */
.ae-grid{
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (min-width: 768px){
  .ae-grid{ grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (min-width: 1024px){
  .ae-grid{ grid-template-columns: repeat(12, minmax(0, 1fr)); }
}

.ae-cols-2, .ae-cols-3, .ae-cols-4{
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: 1fr;
}
@media (min-width: 680px){
  .ae-cols-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ae-cols-3{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ae-cols-4{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px){
  .ae-cols-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ae-cols-4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   6 · LA LINEA D'ORO
   L'elemento firma del sito. Vedi BRAND.md §3.2.
   Sempre un path SVG disegnato a mano, mai un bordo CSS, mai un'immagine.
   -------------------------------------------------------------------------- */
.ae-line{
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  color: var(--accent);
}
.ae-line__path{
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  /* stroke-dasharray e dashoffset sono scritti da motion.js sul progresso
     di scroll. Lo stato iniziale e "non disegnata". */
  stroke-dasharray: var(--line-len, 1000);
  stroke-dashoffset: calc(var(--line-len, 1000) * (1 - var(--draw, 0)));
}
.ae-line--faint{ color: var(--accent-muted); }

/* Divisore orizzontale semplice, la stessa linea in forma minima */
.ae-rule{
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(to right,
    transparent, var(--border-gold) 12%, var(--border-gold) 88%, transparent);
}

/* --------------------------------------------------------------------------
   7 · L'ARCO
   Una sola curva ampia ammessa, e mai piu di un arco per schermata.
   -------------------------------------------------------------------------- */
.ae-arch{
  border-radius: var(--r-arch);
  overflow: hidden;
  position: relative;
}
.ae-arch > img,
.ae-arch > picture,
.ae-arch > picture > img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   8 · FOOTER
   -------------------------------------------------------------------------- */
.ae-footer{
  position: relative;
  z-index: var(--z-content);
  background: var(--navy);
  border-block-start: var(--bw) solid var(--border);
  padding-block: var(--sp-9) var(--sp-6);
  color: var(--text-secondary);
  font-size: var(--fs-small);
}

.ae-footer__top{
  display: grid;
  gap: var(--sp-7);
  grid-template-columns: 1fr;
  padding-block-end: var(--sp-8);
}
@media (min-width: 680px){
  .ae-footer__top{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px){
  .ae-footer__top{ grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}

.ae-footer .ae-brand__mark--full{ width: 54px; height: 56px; }
.ae-footer .ae-brand__atlas{ font-size: 1.25rem; }
.ae-footer .ae-brand__estate{ font-size: 0.5625rem; }
@media (max-width: 768px){
  .ae-footer .ae-brand__mark--full{ display: block; }
  .ae-footer .ae-brand__mark--reduced{ display: none; }
}

.ae-footer__intro p{
  margin-block-start: var(--sp-4);
  max-width: 34ch;
  color: var(--text-secondary);
}

.ae-footer__col h3{
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-primary);
  margin-block-end: var(--sp-4);
}
.ae-footer__col ul{ display: grid; gap: var(--sp-3); }
.ae-footer__col a{ text-decoration: none; }
.ae-footer__col a:hover{ color: var(--accent-text); }

/* Dati societari: sede legale e sede operativa distinte, mai ambigue.
   Vedi DECISIONS.md D-11. */
.ae-footer__legal{
  border-block-start: var(--bw) solid var(--border);
  padding-block-start: var(--sp-6);
  display: grid;
  gap: var(--sp-5);
}
@media (min-width: 900px){
  .ae-footer__legal{ grid-template-columns: 1fr auto; align-items: start; }
}

.ae-footer__company{
  display: grid;
  gap: var(--sp-2);
  font-size: var(--fs-label);
  line-height: 1.7;
  color: var(--text-muted);
}
.ae-footer__company dt{
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-secondary);
}
.ae-footer__company dd{ margin: 0; }
.ae-footer__addr{
  display: grid;
  gap: var(--sp-1);
  font-style: normal;
}
@media (min-width: 560px){
  .ae-footer__addr{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
}

.ae-footer__meta{
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  align-items: center;
  font-size: var(--fs-label);
  color: var(--text-muted);
}
.ae-footer__meta a{ text-decoration: none; }
.ae-footer__meta a:hover{ color: var(--accent-text); }