/* =========================================================
   ZERLAB STUDIO — REALIZZAZIONI
   ========================================================= */

.realizations {
  width: 100%;

  padding:
    clamp(80px, 8vw, 125px)
    var(--page-padding);

  background: var(--cream-light);

  overflow: hidden;
}


/* =========================================================
   HEADER SEZIONE
   ========================================================= */

.realizations-heading {
  margin-bottom: 42px;

  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: 60px;
}


/* =========================================================
   EYEBROW
   ========================================================= */

.section-eyebrow {
  margin-bottom: 18px;

  display: flex;
  align-items: center;

  gap: 14px;

  color: #435165;

  font-size: 10px;
  font-weight: 700;

  letter-spacing: 3.5px;

  text-transform: uppercase;
}


.section-eyebrow span {
  width: 38px;
  height: 1px;

  display: block;

  background: var(--ink);
}


/* =========================================================
   TITOLO
   ========================================================= */

.realizations h2 {
  color: var(--ink);

  font-size: clamp(48px, 4.8vw, 72px);
  font-weight: 700;

  line-height: 0.98;

  letter-spacing: -4px;
}


.realizations-heading p {
  max-width: 500px;

  margin-top: 20px;

  color: #596575;

  font-size: 15px;

  line-height: 1.65;
}


/* =========================================================
   LINK
   ========================================================= */

.text-link {
  flex-shrink: 0;

  padding-bottom: 7px;

  display: flex;
  align-items: center;

  gap: 17px;

  border-bottom:
    1px solid
    rgba(7, 24, 44, 0.65);

  color: var(--ink);

  font-size: 10px;
  font-weight: 700;

  letter-spacing: 0.5px;

  text-transform: uppercase;
}


.text-link span {
  font-size: 17px;

  transition:
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}


.text-link:hover span {
  transform: translateX(5px);
}


/* =========================================================
   GRID REALIZZAZIONI
   ========================================================= */

.realizations-grid {
  width: 100%;

  display: grid;
  grid-template-columns: repeat(6, 1fr);

  gap: 14px;
}


/* =========================================================
   CARD
   ========================================================= */

.realization-card {
  min-width: 0;

  cursor: pointer;

  will-change:
    transform,
    opacity;
}


.realization-card img {
  width: 100%;

  display: block;

  aspect-ratio: 0.83;

  object-fit: cover;

  border-radius: 13px;

  transition:
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.55s ease,
    box-shadow 0.55s ease;
}


.realization-card:hover img {
  transform:
    translateY(-5px)
    scale(1.018);

  box-shadow:
    0 18px 35px
    rgba(7, 24, 44, 0.10);
}


.realization-card > span {
  display: block;

  margin-top: 12px;

  color: var(--ink);

  font-size: 10px;
  font-weight: 700;

  letter-spacing: 0.4px;

  text-align: center;

  text-transform: uppercase;

  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}


.realization-card:hover > span {
  transform: translateY(2px);
}


/* =========================================================
   REVEAL — HEADER
   ========================================================= */

.realizations.reveal-ready
.realizations-heading {
  opacity: 0;

  transform: translateY(32px);

  transition:
    opacity 1.15s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.35s cubic-bezier(0.16, 1, 0.3, 1);
}


.realizations.reveal-ready.is-visible
.realizations-heading {
  opacity: 1;

  transform: translateY(0);
}


/* =========================================================
   REVEAL — CARD
   ========================================================= */

.realizations.reveal-ready
.realization-card {
  opacity: 0;

  transform: translateY(46px);

  transition:
    opacity 1.05s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.35s cubic-bezier(0.16, 1, 0.3, 1);
}


.realizations.reveal-ready.is-visible
.realization-card:nth-child(1) {
  opacity: 1;
  transform: translateY(0);

  transition-delay: 0.18s;
}


.realizations.reveal-ready.is-visible
.realization-card:nth-child(2) {
  opacity: 1;
  transform: translateY(0);

  transition-delay: 0.32s;
}


.realizations.reveal-ready.is-visible
.realization-card:nth-child(3) {
  opacity: 1;
  transform: translateY(0);

  transition-delay: 0.46s;
}


.realizations.reveal-ready.is-visible
.realization-card:nth-child(4) {
  opacity: 1;
  transform: translateY(0);

  transition-delay: 0.60s;
}


.realizations.reveal-ready.is-visible
.realization-card:nth-child(5) {
  opacity: 1;
  transform: translateY(0);

  transition-delay: 0.74s;
}


.realizations.reveal-ready.is-visible
.realization-card:nth-child(6) {
  opacity: 1;
  transform: translateY(0);

  transition-delay: 0.88s;
}


/* =========================================================
   ALTRI SETTORI
   ========================================================= */

.sectors-discover {
  width: 100%;

  margin-top:
    clamp(42px, 4vw, 62px);

  border-top:
    1px solid
    rgba(7, 24, 44, 0.14);

  border-bottom:
    1px solid
    rgba(7, 24, 44, 0.14);
}


/* =========================================================
   PULSANTE APRI / CHIUDI
   ========================================================= */

.sectors-toggle {
  width: 100%;

  padding:
    clamp(27px, 3vw, 38px)
    0;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 24px;

  border: 0;

  background: transparent;

  color: var(--ink);

  font-family: inherit;

  text-align: center;

  cursor: pointer;
}


/* =========================================================
   TESTO CENTRALE
   ========================================================= */

.sectors-toggle-copy {
  display: flex;
  align-items: center;
  flex-direction: column;

  gap: 7px;
}


.sectors-toggle-copy small {
  color: #68717d;

  font-size: 9px;
  font-weight: 700;

  letter-spacing: 3px;

  text-transform: uppercase;
}


.sectors-toggle-copy strong {
  color: var(--ink);

  font-size:
    clamp(25px, 2.2vw, 34px);

  font-weight: 600;

  line-height: 1.05;

  letter-spacing: -1.3px;

  transition:
    color 0.3s ease;
}


/* =========================================================
   FRECCIA
   ========================================================= */

.sectors-toggle-icon {
  width: 42px;
  height: 42px;

  flex-shrink: 0;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background: var(--blue);

  color: #ffffff;

  font-size: 18px;

  transition:
    transform 0.65s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.3s ease;
}


/* =========================================================
   HOVER
   ========================================================= */

.sectors-toggle:hover
.sectors-toggle-copy strong {
  color: var(--blue);
}


.sectors-toggle:hover
.sectors-toggle-icon {
  background: var(--navy);
}


/* =========================================================
   STATO APERTO
   ========================================================= */

.sectors-discover.is-open
.sectors-toggle-icon {
  transform: rotate(180deg);
}

/* =========================================================
   PANNELLO TENDINA
   ========================================================= */

.sectors-panel {
  display: grid;

  grid-template-rows: 0fr;

  opacity: 0;

  visibility: hidden;

  transition:
    grid-template-rows 0.85s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.55s ease,
    visibility 0s linear 0.85s;
}


.sectors-discover.is-open
.sectors-panel {
  grid-template-rows: 1fr;

  opacity: 1;

  visibility: visible;

  transition:
    grid-template-rows 0.95s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.65s ease 0.08s,
    visibility 0s;
}


.sectors-panel-inner {
  min-height: 0;

  overflow: hidden;
}


/* =========================================================
   LISTA SETTORI
   ========================================================= */

.sectors-list {
  padding:
    14px
    0
    55px;

  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  column-gap:
    clamp(50px, 7vw, 120px);
}


/* =========================================================
   SINGOLO SETTORE
   ========================================================= */

.sector-row {
  min-width: 0;

  padding:
    24px
    4px;

  display: grid;

  grid-template-columns:
    42px
    minmax(0, 1fr)
    auto;

  align-items: center;

  gap: 16px;

  border-top:
    1px solid
    rgba(7, 24, 44, 0.12);

  opacity: 0;

  transform: translateY(16px);

  transition:
    opacity 0.55s ease,
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    padding-left 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}



/* Le righe dei settori sono link cliccabili */
a.sector-row {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

a.sector-row:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 4px;
}

/* COMPARSA PROGRESSIVA */

.sectors-discover.is-open
.sector-row {
  opacity: 1;

  transform: translateY(0);
}


.sectors-discover.is-open
.sector-row:nth-child(1) {
  transition-delay: 0.13s;
}


.sectors-discover.is-open
.sector-row:nth-child(2) {
  transition-delay: 0.18s;
}


.sectors-discover.is-open
.sector-row:nth-child(3) {
  transition-delay: 0.23s;
}


.sectors-discover.is-open
.sector-row:nth-child(4) {
  transition-delay: 0.28s;
}


.sectors-discover.is-open
.sector-row:nth-child(5) {
  transition-delay: 0.33s;
}


.sectors-discover.is-open
.sector-row:nth-child(6) {
  transition-delay: 0.38s;
}


.sectors-discover.is-open
.sector-row:nth-child(7) {
  transition-delay: 0.43s;
}


.sectors-discover.is-open
.sector-row:nth-child(8) {
  transition-delay: 0.48s;
}


/* NUMERO */

.sector-number {
  color: #8a929d;

  font-size: 9px;
  font-weight: 700;

  letter-spacing: 1px;
}


/* NOME */

.sector-row strong {
  color: var(--ink);

  font-size:
    clamp(18px, 1.7vw, 25px);

  font-weight: 600;

  line-height: 1.15;

  letter-spacing: -0.7px;
}


/* FRECCIA */

.sector-arrow {
  color: #8a929d;

  font-size: 16px;

  opacity: 0.65;

  transition:
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    color 0.3s ease,
    opacity 0.3s ease;
}


/* HOVER */

.sector-row:hover {
  padding-left: 10px;
}


.sector-row:hover
.sector-arrow {
  color: var(--blue);

  opacity: 1;

  transform:
    translate(3px, -3px);
}


/* =========================================================
   CTA FINALE TENDINA
   ========================================================= */

.sectors-contact {
  padding:
    clamp(30px, 4vw, 50px)
    0;

  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: 50px;

  border-top:
    1px solid
    rgba(7, 24, 44, 0.14);
}


.sectors-contact > div {
  max-width: 600px;
}


.sectors-contact small {
  display: block;

  margin-bottom: 12px;

  color: #68717d;

  font-size: 9px;
  font-weight: 700;

  letter-spacing: 2.3px;

  text-transform: uppercase;
}


.sectors-contact strong {
  display: block;

  color: var(--ink);

  font-size:
    clamp(25px, 2.4vw, 36px);

  font-weight: 600;

  line-height: 1.08;

  letter-spacing: -1.5px;
}


.sectors-contact p {
  max-width: 460px;

  margin-top: 12px;

  color: #68717d;

  font-size: 14px;

  line-height: 1.6;
}


/* =========================================================
   CTA WHATSAPP
   ========================================================= */

.sectors-whatsapp {
  flex-shrink: 0;

  padding:
    15px
    20px;

  display: inline-flex;
  align-items: center;

  gap: 20px;

  border:
    1px solid
    rgba(7, 24, 44, 0.2);

  border-radius: 100px;

  color: var(--ink);

  font-size: 9px;
  font-weight: 800;

  letter-spacing: 0.6px;

  text-transform: uppercase;

  transition:
    background 0.35s ease,
    color 0.35s ease,
    border-color 0.35s ease,
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}


.sectors-whatsapp span {
  font-size: 16px;

  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}


.sectors-whatsapp:hover {
  background: var(--ink);

  border-color: var(--ink);

  color: #ffffff;

  transform: translateY(-2px);
}


.sectors-whatsapp:hover span {
  transform: translateX(4px);
}



/* =========================================================
   TABLET
   ========================================================= */
@media (max-width: 1100px) {

  .realizations-grid {
    grid-template-columns:
      repeat(3, 1fr);

    gap:
      30px
      15px;
  }


  .sectors-toggle-copy {
    align-items: flex-start;

    flex-direction: column;

    gap: 8px;
  }


  .sectors-list {
    column-gap: 40px;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 650px) {

  .realizations {
    padding:
      70px
      20px;
  }


  .realizations-heading {
    margin-bottom: 35px;

    align-items: flex-start;
    flex-direction: column;

    gap: 25px;
  }


  .section-eyebrow {
    font-size: 8px;

    letter-spacing: 2.5px;
  }


  .realizations h2 {
    font-size:
      clamp(46px, 13vw, 60px);

    letter-spacing: -3px;
  }


  .realizations-heading p {
    font-size: 14px;
  }


  .realizations-grid {
    grid-template-columns:
      repeat(2, 1fr);

    gap:
      25px
      10px;
  }


  .realization-card img {
    border-radius: 10px;
  }


  /* =======================================================
     MOBILE — ALTRI SETTORI
     ======================================================= */

  .sectors-discover {
    margin-top: 42px;
  }


.sectors-toggle {
  padding:
    26px
    0;

  flex-direction: column;

  justify-content: center;

  gap: 15px;

  text-align: center;
}


.sectors-toggle-copy {
  align-items: center;

  gap: 7px;
}


.sectors-toggle-copy small {
  font-size: 8px;

  letter-spacing: 2.2px;
}


.sectors-toggle-copy strong {
  max-width: none;

  font-size: 26px;

  letter-spacing: -1px;
}


.sectors-toggle-icon {
  width: 38px;
  height: 38px;

  font-size: 16px;
}


  .sectors-list {
    padding:
      5px
      0
      35px;

    grid-template-columns: 1fr;
  }


  .sector-row {
    padding:
      20px
      2px;

    grid-template-columns:
      32px
      minmax(0, 1fr)
      auto;

    gap: 10px;
  }


  .sector-row strong {
    font-size: 18px;

    letter-spacing: -0.5px;
  }


  .sector-row:hover {
    padding-left: 5px;
  }


  .sectors-contact {
    padding:
      30px
      0;

    align-items: flex-start;

    flex-direction: column;

    gap: 25px;
  }


  .sectors-contact strong {
    font-size: 27px;
  }


  .sectors-whatsapp {
    width: 100%;

    justify-content: space-between;
  }


  /* =======================================================
     MOBILE — REVEAL REALIZZAZIONI
     ======================================================= */

  .realizations.reveal-ready
  .realization-card {
    transform:
      translateY(25px);

    transition-duration:
      0.6s;
  }


  .realizations.reveal-ready.is-visible
  .realization-card {
    transform:
      translateY(0);
  }


  .realizations.reveal-ready.is-visible
  .realization-card:nth-child(1) {
    transition-delay: 0.08s;
  }


  .realizations.reveal-ready.is-visible
  .realization-card:nth-child(2) {
    transition-delay: 0.14s;
  }


  .realizations.reveal-ready.is-visible
  .realization-card:nth-child(3) {
    transition-delay: 0.20s;
  }


  .realizations.reveal-ready.is-visible
  .realization-card:nth-child(4) {
    transition-delay: 0.26s;
  }


  .realizations.reveal-ready.is-visible
  .realization-card:nth-child(5) {
    transition-delay: 0.32s;
  }


  .realizations.reveal-ready.is-visible
  .realization-card:nth-child(6) {
    transition-delay: 0.38s;
  }

}


/* =========================================================
   ACCESSIBILITÀ — RIDUZIONE MOVIMENTO
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .realizations-heading,
  .realization-card,
  .realization-card img,
  .realization-card > span,
  .text-link span,
  .sectors-panel,
  .sectors-toggle-icon,
  .sector-row,
  .sector-arrow,
  .sectors-whatsapp,
  .sectors-whatsapp span {
    transition: none !important;
  }


  .realizations.reveal-ready
  .realizations-heading,

  .realizations.reveal-ready
  .realization-card {
    opacity: 1 !important;

    transform: none !important;
  }


  .realization-card:hover img {
    transform: none;
  }


  .sectors-discover.is-open
  .sector-row {
    opacity: 1;

    transform: none;
  }

}