/* ==========================================================================
   ESTRIA — Componenti condivisi: navbar, menu, footer, bottoni, tag
   ========================================================================== */

/* Bottoni (CTA Figma: L-1, M-1, M-2, M-3, S-1, XS-1) ----------------------- */

.btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 1px;
  overflow: hidden;
  white-space: nowrap;
}

.btn > * {
  position: relative;
  z-index: 1;
}

/* hover CTA (Debug 07/2026): dissolvenza veloce al grigio-1 + icona a destra.
   Debug 07/2026 mobile: gli stati hover valgono solo dove un puntatore esiste
   davvero (@media hover: hover) — su touch lo scroll col dito "accendeva" gli
   elementi; lì lo stesso aspetto arriva col tap, via :active. Il pattern vale
   per tutti gli hover del sito. */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grigio-1);
  opacity: 0;
  z-index: -1;
  transition: opacity 0.2s ease;
}

@media (hover: hover) {
  .btn:hover::before {
    opacity: 1;
  }
}

.btn:active::before {
  opacity: 1;
}

.btn .icon {
  transition: transform 0.25s ease;
}

@media (hover: hover) {
  .btn:hover .icon {
    transform: translateX(4px);
  }
}

.btn:active .icon {
  transform: translateX(4px);
}

/* misure */
.btn--l {
  min-height: 60px;
  padding: 20px 30px;
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.btn--m {
  min-height: 50px;
  padding: 15px 20px;
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.btn--m-sm {
  min-height: 40px;
  padding: 10px 20px;
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.btn--s {
  min-height: 40px;
  padding: 10px 15px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
}

@media (hover: hover) {
  .btn--s:hover {
    color: var(--grigio-3);
  }
}

.btn--s:active {
  color: var(--grigio-3);
}

.btn--xs {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  line-height: 14.5px;
  letter-spacing: 0.03em;
}

/* colori */
.btn--black {
  background: var(--black);
  color: var(--grigio-3);
}

.btn--orange {
  background: var(--arancio-1);
  color: var(--black);
}

@media (hover: hover) {
  .btn--orange:hover {
    color: var(--grigio-3);
  }
}

.btn--orange:active {
  color: var(--grigio-3);
}

.btn--outline {
  border: 1px solid var(--black);
  color: var(--black);
  background: transparent;
}

@media (hover: hover) {
  .btn--outline:hover {
    color: var(--grigio-3);
  }
}

.btn--outline:active {
  color: var(--grigio-3);
}

.btn--dark {
  background: var(--grigio-5);
  color: var(--grigio-3);
}

.btn--outline-light {
  border: 1px solid var(--grigio-3);
  color: var(--grigio-3);
  background: transparent;
}

/* CTA inattiva (Debug 07/2026-2): aspetto dalle varianti Figma L-1-Inactive /
   M-1-Inactive / M-2-Inactive / S-1-Inactive — sfondo scuro invariato con i
   contenuti attenuati, arancio che passa al grigio-1; nessuna interazione. */
.btn:disabled {
  pointer-events: none;
}

.btn:disabled::before {
  content: none;
}

.btn--black:disabled {
  color: var(--grigio-5);
}

.btn--orange:disabled {
  background: var(--grigio-1);
  color: #737373; /* testo M-2-Inactive, come le celle inattive del calendario */
}

.btn--dark:disabled {
  color: var(--grigio-1);
}

/* Tag (Tag-1: freccia + testo mono arancio) -------------------------------- */

.tag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--arancio-1);
}

.tag .icon {
  width: 20px;
  height: 20px;
}

/* Sfondi animati (SVG inline nelle hero) ------------------------------------ */

.hero-anim {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero-anim svg {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-anim--mobile {
  display: none;
}

@media (max-width: 1024px), (hover: none) and (pointer: coarse) and (max-width: 1400px) {
  .hero-anim--desktop {
    display: none;
  }

  .hero-anim--mobile {
    display: block;
  }
}

/* Tile dei casi (Tile 5 / 5-H di Figma) — condivisa da home, strategia, casi.
   Debug 07/2026: layout uniforme (titolo sx, icona al centro, categoria dx)
   e hover: sfondo #FF9966, testi neri, icona Plus→Go. -------------------- */

.case-tile {
  position: relative;
  display: flex;
  align-items: center;
  height: 428px;
  padding: 30px;
  border-radius: 1px;
  overflow: hidden;
  background: var(--grigio-5);
  color: var(--grigio-3);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Debug 0805-3: tornati alle foto con overlay nero al 35% (box-shadow inset,
   in modo da non toccare il background-image inline per tile) invece della
   riduzione di opacita sull'immagine. */
.case-tile__img {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 1;
  box-shadow: inset 0 0 0 999px rgba(0, 0, 0, 0.35);
  transition: opacity 0.3s ease;
}

.case-tile__row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.case-tile__title {
  flex: none;
  width: 276px;
}

.case-tile__cat {
  flex: none;
  width: 276px;
  margin-left: auto;
  text-align: right;
}

/* Debug 0804: icona allineata a destra sulla stessa riga del settore (prima
   era al centro della tile); il cambio Plus→Go resta una dissolvenza
   incrociata sulle .icon interne, quindi non tocca questo transform. */
.case-tile__icon {
  position: absolute;
  right: 30px;
  top: 50%;
  width: 30px;
  height: 30px;
  transform: translateY(-50%);
}

.case-tile__icon .icon {
  position: absolute;
  inset: 0;
  width: 30px;
  height: 30px;
  transform-origin: center;
  transition:
    opacity 0.3s linear,
    transform 0.48s cubic-bezier(0.4, 0, 0.2, 1);
}

.case-tile__icon .icon--go {
  opacity: 0;
  transform: scale(0.85);
}

@media (hover: hover) {
  .case-tile:hover {
    background-color: var(--arancio-1);
    color: var(--black);
  }

  .case-tile:hover .case-tile__img {
    opacity: 0;
  }

  .case-tile:hover .case-tile__icon .icon--plus {
    opacity: 0;
    transform: rotate(90deg) scale(0.6);
  }

  .case-tile:hover .case-tile__icon .icon--go {
    opacity: 1;
    transform: scale(1);
    transition-delay: 0.2s;
  }
}

.case-tile:active {
  background-color: var(--arancio-1);
  color: var(--black);
}

.case-tile:active .case-tile__img {
  opacity: 0;
}

.case-tile:active .case-tile__icon .icon--plus {
  opacity: 0;
  transform: rotate(90deg) scale(0.6);
}

.case-tile:active .case-tile__icon .icon--go {
  opacity: 1;
  transform: scale(1);
  transition-delay: 0.2s;
}

/* Carosello dei casi (layout come in Strategia; loop infinito in main.js) --- */

.cases-track {
  display: flex;
  gap: 30px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* centra la tile attiva, con le vicine che sbordano ai lati */
  padding-inline: max(30px, calc((100vw - 711px) / 2));
  scrollbar-width: none;
  cursor: grab;
  /* Debug 07/2026 mobile: pan-x abilitato — lo scroll orizzontale su touch
     è nativo (con momentum); il drag JS resta solo per il mouse */
  touch-action: pan-x pan-y pinch-zoom;
  overscroll-behavior-inline: contain;
}

.cases-track.is-dragging,
.cases-track.is-recycling {
  cursor: grabbing;
  scroll-snap-type: none;
}

.cases-track::-webkit-scrollbar {
  display: none;
}

.cases-track .case-tile {
  flex: 0 0 min(711px, calc(100vw - 60px));
  scroll-snap-align: center;
}

@media (max-width: 1024px), (hover: none) and (pointer: coarse) and (max-width: 1400px) {
  .case-tile {
    height: 363px;
  }

  .case-tile__row {
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    height: 100%;
  }

  .case-tile__title,
  .case-tile__cat {
    width: auto;
  }

  /* Debug 0806: su mobile l'icona torna al centro della tile (layout Figma),
     non più allineata al settore in alto a destra come su desktop. */
  .case-tile__icon {
    top: 50%;
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
  }

  .case-tile__cat {
    margin-left: 0;
    align-self: flex-end;
  }

  .cases-track {
    gap: 10px;
    padding-inline: 15px;
  }

  .cases-track .case-tile {
    flex-basis: calc(100vw - 30px);
    /* Debug 07/2026-2: un gesto sposta al massimo una tile — senza, un
       flick leggero saltava più card (la "sensibilità" del touch) */
    scroll-snap-stop: always;
  }
}

/* Navbar -------------------------------------------------------------------- */

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
  padding: 10px 30px;
  transition: color 0.25s ease;
}

/* Il fondale scende sotto i controlli senza cambiare il loro layout. */
.navbar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--black);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.3s cubic-bezier(0.75, 0, 0.2, 1);
}

.navbar > * {
  position: relative;
  z-index: 1;
}

.navbar.is-scrolled {
  color: var(--grigio-3);
}

.navbar.is-scrolled::before {
  transform: scaleY(1);
}

/* Menu-1.svg e Close-1.svg condividono lo stesso viewBox. Debug 07/2026:
   morphing in dissolvenza incrociata — le barre ruotano verso la X e
   sfumano a metà rotazione mentre la X entra ruotando; in chiusura il
   percorso si inverte. Niente fasi in sequenza rigida. */
.menu-toggle-icon {
  display: block;
  width: 40px;
  height: 40px;
}

.menu-toggle-icon rect {
  transform-box: fill-box;
  transform-origin: center;
  transition:
    transform 0.32s cubic-bezier(0.65, 0, 0.35, 1) 0.06s,
    opacity 0.2s ease 0.14s;
}

.menu-toggle-icon__close {
  opacity: 0;
  transform: rotate(-90deg) scale(0.75);
  transform-box: fill-box;
  transform-origin: center;
  transition:
    transform 0.32s cubic-bezier(0.65, 0, 0.35, 1),
    opacity 0.2s ease;
}

.navbar__burger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
}

@media (hover: hover) {
  .navbar__burger:hover .menu-toggle-icon__bar-bottom {
    transform: scaleX(0.5);
    transform-origin: right center;
  }
}

/* menu aperto: le barre ruotano subito e sfumano mentre la X subentra */
.navbar.is-menu-open .menu-toggle-icon rect {
  transition-delay: 0s, 0.1s;
}

.navbar.is-menu-open .menu-toggle-icon__bar-top {
  opacity: 0;
  transform: translateY(5px) rotate(45deg) scaleX(1.32);
}

.navbar.is-menu-open .menu-toggle-icon__bar-bottom {
  opacity: 0;
  transform: translateY(-5px) rotate(-45deg) scaleX(1.32);
}

.navbar.is-menu-open .menu-toggle-icon__close {
  opacity: 1;
  transform: none;
  transition-delay: 0.1s, 0.12s;
}

.navbar__logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
}

.navbar__logo img,
.navbar__logo-mini {
  grid-area: 1 / 1;
  height: 50px;
  width: auto;
  transition: opacity 0.28s ease, transform 0.28s ease, filter 0.28s ease;
}

/* Il pittogramma parte dalla sua posizione nel logo esteso (a sinistra del
   lettering) e scivola verso il centro verticale della navbar mentre il
   lettering scompare; al ritorno il percorso si inverte. */
.navbar__logo-mini {
  display: block;
  width: 40px;
  height: 40px;
  background: var(--grigio-3);
  -webkit-mask: url("../assets/logos/logo-mini.svg") no-repeat center / contain;
  mask: url("../assets/logos/logo-mini.svg") no-repeat center / contain;
  opacity: 0;
  transform: translateX(-175%);
}

.navbar.is-scrolled .navbar__logo-full {
  opacity: 0;
  transform: translateX(40%);
}

.navbar.is-scrolled .navbar__logo-mini {
  opacity: 1;
  transform: none;
}

/* Durante il menu i controlli superiori restano fermi sopra la tendina. */
.navbar.is-menu-open {
  color: var(--black);
}

.navbar.is-menu-open::before {
  transform: scaleY(0);
}

.navbar.is-menu-open .navbar__logo-full {
  opacity: 1;
  filter: brightness(0);
  transform: none;
}

.navbar.is-menu-open .navbar__logo-mini {
  opacity: 0;
}

/* Le pagine con hero scura tornano alla navbar standard sul footer. */
.navbar.is-footer {
  color: var(--black);
}

.navbar.is-footer::before {
  transform: scaleY(0);
}

.navbar.navbar--on-dark.is-footer .navbar__logo-full {
  opacity: 1;
  filter: brightness(0);
  transform: none;
}

.navbar.navbar--on-dark.is-footer .navbar__logo-mini {
  opacity: 0;
}

.navbar.navbar--on-dark.is-footer .navbar__cta {
  background: var(--black);
  color: var(--grigio-3);
}

/* Debug 07/2026: sul footer anche l'hover torna a quello della CTA nera
   di default (le pagine scure lo ridefiniscono per la variante on-dark) */
.navbar.navbar--on-dark.is-footer .navbar__cta::before {
  background: var(--grigio-1);
}

.navbar__cta {
  transition: background-color 0.3s ease, color 0.3s ease;
}

.navbar.is-scrolled .navbar__cta {
  background: var(--arancio-1);
  color: var(--black);
}

@media (hover: hover) {
  .navbar.is-scrolled .navbar__cta:hover {
    color: var(--grigio-3);
  }
}

.navbar.is-scrolled .navbar__cta:active {
  color: var(--grigio-3);
}

/* Debug 07/2026: a menu aperto la CTA è sempre nera con testo grigio-3,
   qualunque siano lo stato (scrolled/footer) e la variante della navbar;
   dichiarata dopo .is-scrolled per vincere a parità di specificità. */
.navbar.is-menu-open .navbar__cta,
.navbar.navbar--on-dark.is-menu-open .navbar__cta {
  background: var(--black);
  color: var(--grigio-3);
}

.navbar.is-menu-open .navbar__cta::before {
  background: var(--grigio-1);
}

.navbar--on-dark {
  color: var(--grigio-3);
}

/* CTA navbar: il testo è avvolto da main.js in .cta-marquee con due copie.
   Su desktop il wrapper non genera box e la seconda copia è nascosta;
   su mobile (sotto) diventa il nastro che scorre in loop. */
.navbar__cta .cta-marquee {
  display: contents;
}

.navbar__cta .cta-marquee__item + .cta-marquee__item {
  display: none;
}

@media (max-width: 1024px), (hover: none) and (pointer: coarse) and (max-width: 1400px) {
  .navbar {
    padding: 10px 15px;
  }

  .navbar__logo img {
    height: 32px;
  }

  .navbar__logo-mini {
    width: 32px;
    height: 32px;
  }

  /* CTA compatta; Debug 07/2026 mobile: larghezza fissa 100px da Figma e
     testo in scorrimento orizzontale continuo (due copie, trasla di una) */
  .navbar__cta {
    width: 100px;
    min-height: 32px;
    padding: 8px 0;
    font-size: 10px;
    justify-content: flex-start;
  }

  .navbar__cta .cta-marquee {
    display: flex;
    flex: none;
    /* Debug 07/2026-2: scorrimento più veloce del 30% (5s → 3.5s) */
    animation: cta-marquee 3.5s linear infinite;
  }

  .navbar__cta .cta-marquee__item {
    display: block;
    flex: none;
    padding-inline: 10px;
    white-space: nowrap;
  }

  /* Debug 07/2026-2: anche la seconda copia è visibile (la regola desktop
     "+ item = none" ha specificità più alta), così il nastro trasla di una
     copia esatta e il loop è continuo, senza salto al riavvio */
  .navbar__cta .cta-marquee__item + .cta-marquee__item {
    display: block;
  }

  @keyframes cta-marquee {
    to { transform: translateX(-50%); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .navbar__cta .cta-marquee {
    animation: none;
  }
}

/* Menu overlay (Menu-1: arancio pieno schermo) ------------------------------ */

/* Debug 07/2026: apertura a tendina dall'alto, chiusura inversa */
.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--arancio-1);
  color: var(--black);
  visibility: hidden;
  transform: translateY(-102%);
  transition:
    transform 0.6s cubic-bezier(0.75, 0, 0.2, 1),
    visibility 0s 0.6s;
}

.menu-overlay.is-open {
  visibility: visible;
  transform: none;
  transition: transform 0.6s cubic-bezier(0.75, 0, 0.2, 1);
}

/* grafica animata di sfondo (Menu-DEF.svg), a tutto schermo in orizzontale */
.menu-overlay__anim {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.menu-overlay__anim svg {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: auto;
}

/* Debug 07/2026 mobile: grafica centrata allo schermo. La scala va fatta
   col transform: dimensionare il box (width/height/aspect-ratio) non
   ingrandiva il disegno — il box abspos resta legato alla larghezza del
   contenitore e il "meet" tiene il contenuto fermo, per questo tre round
   di raddoppi non si vedevano. Tarato a vista dal cliente il 14/07:
   8x troppo, 2x quasi, -25% -> scale(1.5). */
@media (max-width: 1024px), (hover: none) and (pointer: coarse) and (max-width: 1400px) {
  .menu-overlay__anim svg {
    left: 50%;
    top: 50%;
    bottom: auto;
    width: 100%;
    height: auto;
    transform: translate(-50%, -50%) scale(1.5);
  }
}

.menu-overlay__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 70px;
  padding: 10px 30px;
  visibility: hidden;
  pointer-events: none;
}

.menu-overlay__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
}

.menu-overlay__logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.menu-overlay__logo img {
  height: 50px;
  width: auto;
}

/* Debug 07/2026: box delle voci equidistante da logo e social, voci
   equidistanti fra loro a prescindere dal numero */
.menu-overlay__nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  flex: 1;
  width: 100%;
  min-height: 0;
  overflow-y: auto;
}

.menu-overlay__nav a {
  font-family: var(--font-title);
  font-size: min(66px, 7.5vh);
  line-height: 1.1;
  transition: color 0.25s ease;
}

.menu-overlay__social {
  display: flex;
  gap: 45px;
  padding-bottom: 40px;
}

.menu-overlay__social img {
  width: 20px;
  height: 20px;
}

@media (max-width: 1024px), (hover: none) and (pointer: coarse) and (max-width: 1400px) {
  .menu-overlay__bar {
    padding: 10px 15px;
  }

  .menu-overlay__logo img {
    height: 32px;
  }

  .menu-overlay__bar .btn {
    min-height: 32px;
    padding: 8px 8px;
    font-size: 10px;
  }

  .menu-overlay__nav a {
    font-size: min(40px, 5vh);
    line-height: 1.1;
  }
}

/* Footer -------------------------------------------------------------------- */

.footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 200px;
  padding: 240px 30px 30px;
  background: var(--grigio-2);
  color: var(--black);
}

/* Debug 07/2026: grafica animata di sfondo (Footer-DEF.svg), parte quando
   si atterra sul footer (classe is-live aggiunta da main.js) */
.footer__anim {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.footer__anim svg {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: auto;
}

/* Debug 07/2026 mobile: grafica centrata nel footer; stesso fix e stessa
   taratura della .menu-overlay__anim qui sopra (scala via transform) */
@media (max-width: 1024px), (hover: none) and (pointer: coarse) and (max-width: 1400px) {
  .footer__anim svg {
    left: 50%;
    top: 50%;
    bottom: auto;
    width: 100%;
    height: auto;
    transform: translate(-50%, -50%) scale(1.5);
  }
}

html.anim .footer:not(.is-live) .footer__anim svg * {
  animation-play-state: paused !important;
}

.footer__cta-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  text-align: center;
}

/* label CTA footer: lunga su desktop, corta su mobile (come da Figma) */
.footer__cta-short {
  display: none;
}

@media (max-width: 1024px), (hover: none) and (pointer: coarse) and (max-width: 1400px) {
  .footer__cta-long {
    display: none;
  }

  .footer__cta-short {
    display: inline;
  }
}

.footer__bottom {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 60px;
}

.footer__links {
  display: flex;
  gap: 30px;
}

.footer__social {
  display: flex;
  gap: 30px;
}

.footer__social img {
  width: 20px;
  height: 20px;
}

@media (max-width: 1024px), (hover: none) and (pointer: coarse) and (max-width: 1400px) {
  /* le CTA lunghe non devono sbordare dai 393px */
  .btn--l {
    white-space: normal;
    max-width: 100%;
    text-align: center;
  }

  .footer {
    gap: 60px;
    padding: 195px 15px 90px;
    /* Debug 07/2026-3: il footer copre lo schermo del dispositivo,
       con la barra dei link ancorata in fondo */
    min-height: 100vh;
    min-height: 100dvh;
    justify-content: space-between;
  }

  .footer__bottom {
    flex-direction: column;
    gap: 30px;
  }

}