/*          =========================================
              PROJECTS PAGE                          */
/*#region   ========================================= */
/* -------- SEZIONE HERO -------- */

.project-hero {
  max-width: 2560px;
  margin-inline: auto;
  min-height: var(--hero-high);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  display: flex;
}

.magazine-errare-hero-background {
  background-image: url("https://www.horizonfyw.com/wp-content/uploads/2026/02/Immagine-HD-Hero-Magazine.png");
}

.web-design-hero-background {
  background-image: url("https://www.horizonfyw.com/wp-content/uploads/2026/02/Immagine-HD-Hero-Web-Design-Project-2.jpg");
}

.surface-design-hero-background {
  background-image: url("https://www.horizonfyw.com/wp-content/uploads/2026/01/Immagine-HD-Hero-Surface-Design-Project-scaled.jpg");
}

.creative-design-hero-background {
  background-image: url("https://www.horizonfyw.com/wp-content/uploads/2026/01/Immagine-HD-Hero-Creative-Design-Project-scaled.jpg");
}

.project-hero .project-hero-workspace {
  width: 100%;
  max-width: var(--workspace-width);
  margin-inline: auto;
  padding-inline: var(--paddinginline-workspace);
  padding-bottom: clamp(48px, 8vh, 96px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  min-height: 100%;
}

.project-hero .project-hero-title {
  text-align: center;
}

/* -------- SEZIONE CONCEPT-------- */

.project-concept {
  margin-top: var(--section-spacing-mobile);
}

.project-concept .project-concept-workspace {
  width: 100%;
  max-width: var(--workspace-width);
  margin-inline: auto;
  padding-inline: var(--paddinginline-workspace);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.project-concept .project-concept-box-immagine img {
  border-radius: 24px;
}

/* -------- SEZIONE PROJECT-------- */

.project-progetto {
  margin-top: var(--section-spacing-mobile);
}

.project-progetto .project-progetto-workspace {
  width: 100%;
  max-width: var(--workspace-width);
  margin-inline: auto;
  padding-inline: var(--paddinginline-workspace);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/*OVERRIDE CAROSELLO PER GRANDEZZA IMMAGINI */
.carousel--concept .carousel__slide img {
  width: 80%;
  max-width: 350px;
  margin: 0 auto;
  height: auto;
  border-radius: 15px;
}

.carousel--concept {
  background: transparent;
  padding-bottom: 20px;
}

/* -------- SEZIONE STRUTTURA-------- */

.project-structure {
  margin-top: var(--section-spacing-mobile);
}

.project-structure .project-structure-workspace {
  width: 100%;
  max-width: var(--workspace-width);
  margin-inline: auto;
  padding-inline: var(--paddinginline-workspace);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.project-structure .project-structure-box-immagini {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* -------- SEZIONE VEDI ANCHE-------- */

.project-otherlinks {
  margin-top: var(--section-spacing-mobile);
}

.project-otherlinks .project-otherlinks-workspace {
  width: 100%;
  max-width: var(--workspace-width);
  margin-inline: auto;
  padding-inline: var(--paddinginline-workspace);
  display: flex;
  flex-direction: column;
  gap: 0;
}

.project-otherlinks .project-otherlinks-title {
  text-align: center;
}

/* -------- SEZIONE VEDI ANCHE-------- */

.project-contact-box {
  padding-block: 150px;
}

/* #endregion */

/*          =========================================
              PROJECTS PAGE - DESKTOP             */
/*#region   ========================================= */

@media (min-width: 900px) {
  /* -------- SEZIONE CONCEPT-------- */

  .project-concept {
    margin-top: var(--section-spacing-desktop);
  }

  .project-concept .project-concept-workspace {
    gap: 50px;
  }

  .project-concept .project-concept-box-paragrafo {
    padding-right: 700px;
  }

  .project-concept .project-concept-box-immagine {
    margin-inline: auto;
  }

  /* -------- SEZIONE PROJECT-------- */

  .project-progetto {
    margin-top: var(--section-spacing-desktop);
  }

  .project-progetto .project-progetto-workspace {
    gap: 50px;
  }

  .project-progetto .project-progetto-box-paragrafo {
    padding-left: 700px;
  }

  /* 1. Griglia per immagini allineate */
  .project-progetto-box-immagini,
  .project-progetto-box-immagini > div {
    display: grid !important;
    grid-template-columns: repeat(12, 1fr) !important;
    gap: 80px 30px !important;
    /* Spazio tra righe e colonne */
    align-items: start !important;
  }

  /* 2. Dimensione immagini corretta */
  .project-progetto-box-immagini .wp-block-image img {
    width: 100% !important;
    height: auto !important;
  }

  /* 3. Posizionamento: Sopra a Sinistra, Sotto a Destra */
  /* PRIMA RIGA (sopra) */
  .project-progetto-box-immagini .wp-block-image:nth-of-type(1) {
    grid-column: 1 / span 4 !important;
    /* Più a sinistra */
    margin: 0 !important;
  }

  .project-progetto-box-immagini .wp-block-image:nth-of-type(2) {
    grid-column: 6 / span 4 !important;
    /* Allineata sulla stessa riga */
    margin: 0 !important;
  }

  /* SECONDA RIGA (sotto) - Slittata verso destra */
  .project-progetto-box-immagini .wp-block-image:nth-of-type(3) {
    grid-column: 4 / span 4 !important;
    /* Inizia alla colonna 2 */
    margin: 0 !important;
  }

  .project-progetto-box-immagini .wp-block-image:nth-of-type(4) {
    grid-column: 9 / span 4 !important;
    /* Inizia alla colonna 8 */
    margin: 0 !important;
  }

  /* -------- SEZIONE STRUTTURA segnalibro-------- */

  .project-structure {
    margin-top: var(--section-spacing-desktop);
  }

  .project-structure .project-structure-workspace {
    gap: 50px;
  }

  /* 1. Forza la griglia sul contenitore reale delle immagini */
  .project-structure-box-immagini,
  .project-structure-box-immagini > div,
  .project-structure-box-immagini .wp-block-group__inner-container {
    display: grid !important;
    grid-template-columns: repeat(12, 1fr) !important;
    gap: 80px 30px !important;
    align-items: start !important;
  }

  /* 2. Assicurati che le immagini non spariscano */
  .project-structure-box-immagini .wp-block-image img {
    width: 100% !important;
    height: auto !important;
  }

  /* 3. Posizionamento: Sopra a Sinistra, Sotto a Destra */
  /* PRIMA RIGA (sopra) */
  .project-structure-box-immagini .wp-block-image:nth-of-type(1) {
    grid-column: 4 / span 4 !important;
    /* Più a sinistra */
    margin: 0 !important;
  }

  .project-structure-box-immagini .wp-block-image:nth-of-type(2) {
    grid-column: 9 / span 4 !important;
    /* Allineata sulla stessa riga */
    margin: 0 !important;
  }

  /* SECONDA RIGA (sotto) - Slittata verso destra */
  .project-structure-box-immagini .wp-block-image:nth-of-type(3) {
    grid-column: 1 / span 4 !important;
    /* Inizia alla colonna 2 */
    margin: 0 !important;
  }

  .project-structure-box-immagini .wp-block-image:nth-of-type(4) {
    grid-column: 6 / span 4 !important;
    /* Inizia alla colonna 8 */
    margin: 0 !important;
  }

  /* -------- SEZIONE VEDI ANCHE-------- */

  .project-otherlinks {
    margin-top: var(--section-spacing-desktop);
  }

  .project-otherlinks .project-otherlinks-title {
    text-align: center;
  }
}

/* #endregion */