/* ==========================================================================
   ESTRIA — Pagina Casi (case-studies-1)
   ========================================================================== */

/* Hero: ruota/sole di rettangoli arancioni su fondo grigio ----------------- */

.hero {
  padding-top: 70px; /* spazio della navbar fissa */
}

.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 60px;
  height: 832px;
  padding-inline: 30px;
  text-align: center;
  position: relative;
  /* Debug 07/2026-6: la grafica di cover resta nei margini del modulo */
  overflow: hidden;
  overflow: clip;
}

.hero__inner > :not(.hero-anim) {
  position: relative;
  z-index: 1;
}

.hero__title {
  max-width: 1205px;
}

/* label CTA: cambia testo tra desktop e mobile (come da design Figma) */
.hero__cta-label--mobile {
  display: none;
}

/* Griglia case study (Modulo 5.1 / Tile 5) --------------------------------- */

.cases {
  padding: 120px 30px;
}

.cases__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

/* nel design desktop il 3° caso sta in basso a destra e il 4° in basso
   a sinistra (l'ordine DOM segue lo stacking mobile) */
.cases__grid .case-tile:nth-child(3) { grid-area: 2 / 2; }
.cases__grid .case-tile:nth-child(4) { grid-area: 2 / 1; }

/* tile: componente condiviso .case-tile (components.css) */

/* Approcci personalizzati (Modulo 3.1, cerchi grigi su nero) ---------------- */

.approcci {
  padding: 120px 30px;
}

.approcci__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 60px;
  min-height: 750px;
  text-align: center;
  background: url("../../assets/img/figma/cd8044b47d6bc9916ade17912c32415bbe8795c8.png") center / contain no-repeat;
}

.approcci__title {
  max-width: 1205px;
}

.approcci__text {
  max-width: 461px;
  color: var(--grigio-2);
}

.approcci__text p + p {
  margin-top: 13px;
}

/* Mobile -------------------------------------------------------------------- */

@media (max-width: 1024px), (hover: none) and (pointer: coarse) and (max-width: 1400px) {
  .hero__inner {
    gap: 30px;
    height: 742px;
    padding-inline: 15px;
  }

  .hero__cta {
    width: 100%;
  }

  .hero__cta-label--desktop { display: none; }
  .hero__cta-label--mobile { display: inline; }

  .cases {
    padding: 120px 15px;
  }

  .cases__grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .cases__grid .case-tile:nth-child(3),
  .cases__grid .case-tile:nth-child(4) {
    grid-area: auto;
  }

  .approcci {
    padding: 120px 15px;
    background-image: url("../../assets/img/figma/092d795313e1d213960c5305e9fd84ff718d1a3a.png");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
  }

  .approcci__inner {
    gap: 30px;
    min-height: 410px;
    background: none;
  }
}