/*          =========================================
              HERO SECTION (Design Homepage)
            ========================================= */
/*#region   ========================================= */

/* --- BASE STYLES (MOBILE FIRST) --- */

.hero-design {
  width: 100%;
  min-height: 1170px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden; /* Fondamentale per bloccare lo scroll orizzontale del background gigante */
  background: linear-gradient(
    270deg,
    rgba(183, 224, 247, 0.5) 0%,
    rgba(251, 169, 255, 0.1) 34%,
    rgba(183, 224, 247, 0.53) 65%,
    rgba(183, 224, 247, 1) 100%
  );
  position: relative;
}

.hero-design__workspace {
  width: 100%;
  max-width: var(--workspace-width);
  margin-inline: auto;
  padding-inline: var(--paddinginline-workspace);
  padding-top: 140px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start; /* Cambiato da center a flex-start */
  position: relative;
  z-index: 2;
}

/* --- TEXT CONTENT --- */

.hero-design__title,
.hero-design__description,
.hero-design__secondary-text {
  position: relative;
  z-index: 10; /* Assicura che il testo sia sopra lo sfondo */
}

.hero-design__title {
  order: 1;
  text-align: left;
  width: 100%; /* Forza l'occupazione dell'intera riga */
}

.hero-design__description {
  order: 2;
  text-align: left;
  width: 100%;
}

.hero-design__visual {
  order: 3;
  width: 100%;
  padding-block: 60px;
  display: grid;
  place-items: center;
  overflow: visible;
  position: relative;
  perspective: 1000px;
  z-index: 1; /* Il contenitore visuale sta sotto il testo */
}

.hero-design__visual > * {
  grid-area: 1 / 1;
}

.hero-design__image-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -45%);
  width: 180vw;
  /* Cap per il tablet: impediamo che cresca troppo tra mobile e 900px */
  max-width: 1100px;
  aspect-ratio: 1078 / 1109;
  background-image: url("https://www.horizonfyw.com/wp-content/uploads/2026/01/Frame-66.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.8;
  z-index: -1; /* Dietro a tutto il contenuto del parent */
  pointer-events: none;
}

.hero-design__visual-container {
  z-index: 5;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transform-style: preserve-3d;
}

.hero-design__image-fg {
  width: 85vw;
  max-width: 480px;
  aspect-ratio: 550 / 350;
  background-image: url("https://www.horizonfyw.com/wp-content/uploads/2026/01/Rectangle-71.png");
  background-size: cover;
  background-position: center;
  border-radius: 32px;
}

.hero-design__secondary-text {
  order: 4;
  text-align: left;
  max-width: 600px;
  margin-top: 80px;
}

.hero-design__button {
  order: 5;
  display: inline-flex;
  margin-top: 60px;
}

/* --- DESKTOP ENHANCEMENTS (Modificato a 900px) --- */

@media (min-width: 900px) {
  .hero-design {
    min-height: auto;
  }

  .hero-design__workspace {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    grid-template-areas:
      "title visual"
      "desc visual"
      "text visual"
      "btn visual";
    align-items: center;
    column-gap: 40px;
    text-align: left;
    padding-top: 260px;
    padding-bottom: 150px;
  }

  .hero-design__title {
    grid-area: title;
    text-align: left;
  }
  .hero-design__description {
    grid-area: desc;
    text-align: left;
  }
  .hero-design__secondary-text {
    grid-area: text;
    text-align: left;
    margin-top: 100px;
  }
  .hero-design__button {
    grid-area: btn;
    justify-self: start;
  }

  .hero-design__visual {
    grid-area: visual;
    padding-block: 0;
    z-index: 5;
    margin-top: -150px; /* Sposta il blocco immagini verso l'alto */
  }

  .hero-design__image-bg {
    left: 45%; /* Spostato un po' a sinistra rispetto al 50% di base */
    width: 170%;
    max-width: 1400px;
    /* Su desktop lo z-index può restare -1 dentro .visual,
       che a sua volta è sopra o sotto il testo a seconda del bisogno */
  }

  .hero-design__image-fg {
    max-width: 550px;
  }
}

/*#endregion */

/*          =========================================
              SKILLS SECTION (Infinite Marquee)
            ========================================= */
/*#region   ========================================= */

.skills-design__workspace {
  width: 100%;
  max-width: var(--workspace-width);
  margin-inline: auto;
  padding-inline: var(--paddinginline-workspace);
  padding-block: 40px;
}

/* PERSONALIZZAZIONE DESKTOP */
@media (min-width: 900px) {
}

/*#endregion */

/*          =========================================
              ITWORK SECTION
            ========================================= */
/*#region   ========================================= */

.itwork-design__workspace {
  width: 100%;
  max-width: var(--workspace-width);
  margin-inline: auto;
  padding-inline: var(--paddinginline-workspace);
}

/*#endregion */

/*          =========================================
              INSTRUCTION SECTION
            ========================================= */
/*#region   =========================+================ */
/* ------------- SEZIONE TITOLO ------------- */
.instruction-design {
  /* margin-top: 100px;  RIMOSSO per far salire lo sfondo */
  padding-top: 150px; /* Aggiunto respiro interno per compensare visivamente e mostrare lo sfondo sopra */
  position: relative;
}

/* DARK MODE SUPPORT */
.instruction-design__workspace {
  width: 100%;
  max-width: var(--workspace-width);
  margin-inline: auto;
  padding-inline: var(--paddinginline-workspace);
}
.instruction-design__title {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
}
.instruction-design__h1 {
  margin: 0;
  width: 100%;
}
/* STILE PALLINI */
.instruction-design__dots {
  display: flex;
}
.instruction-design__dots .dot-color {
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
}
.instruction-design__dots .dot-color + .dot-color {
  margin-left: -5px;
}
@keyframes dotColorCycle {
  0%,
  33.32% {
    background-color: #e0f3ff;
  } /* Color 1 */
  33.33%,
  66.65% {
    background-color: #d9c8f5;
  } /* Color 2 */
  66.66%,
  100% {
    background-color: #c8f5d4;
  } /* Color 3 */
}

.instruction-design__dots .dot-1 {
  background-color: #e0f3ff;
  animation: dotColorCycle 3s infinite linear;
}
.instruction-design__dots .dot-2 {
  background-color: #d9c8f5;
  animation: dotColorCycle 3s infinite linear;
  animation-delay: -1s;
}
.instruction-design__dots .dot-3 {
  background-color: #c8f5d4;
  animation: dotColorCycle 3s infinite linear;
  animation-delay: -2s;
}

/* ------------- SEZIONE CARD ------------- */
.instruction-design__process-grid {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 30px;
}
.instruction-design__process-intro {
  order: 2;
  max-width: 400px;
  padding-inline: 20px;
}
.instruction-design__process-intro-title {
  font-weight: 500;
}
.instruction-design__process-intro-title em,
.instruction-design__process-intro-title i {
  font-weight: 400;
  font-style: italic;
}
.instruction-design__process-image {
  order: 3;
  width: 100%;
  max-width: 450px;
  justify-self: center; /* Centrata */
  background-image: url("https://www.horizonfyw.com/wp-content/uploads/2026/02/Immagine-Home-Design-Sezione-Instruction.png");
  background-size: contain; /* NON TAGLIATA */
  background-repeat: no-repeat;
  background-position: center center;
  aspect-ratio: 1/1;
  border-radius: 40px;
}
.instruction-design__process-card {
  display: grid;
  padding: 60px 40px;
  border-radius: 40px;
  max-width: 400px;
  gap: 10px;
}

.instruction-design__card-blue {
  order: 1;
  background-color: #e0f3ff;
}
.instruction-design__card-purple {
  order: 4;
  background-color: #d9c8f5;
  grid-template-areas:
    "title number"
    "text text";
  align-items: center;
}
.instruction-design__card-purple .process-card__title {
  grid-area: title;
}
.instruction-design__card-purple .process-card__number {
  grid-area: number;
  justify-self: end;
  align-self: end;
}
.instruction-design__card-purple .process-card__text {
  grid-area: text;
}
.instruction-design__card-green {
  order: 6;
  background-color: #c8f5d4;
}
.instruction-design__card-green .process-card__number {
  justify-self: end;
}

.instruction-design__process-animation {
  order: 5;
  width: 100%;
  height: 420px;
  border-radius: 40px;
  max-width: 400px;
  background-color: #0d0d1a;
  position: relative;
  overflow: hidden;
}

/* ------------- LAYOUT INTERMEDIO (900px - 1500px) ------------- */
@media (min-width: 900px) and (max-width: 1500px) {
  .instruction-design__title {
    flex-wrap: nowrap;
  }
  .instruction-design__h1 {
    width: auto;
  }
  .instruction-design__process-card {
    padding: 50px 30px;
    align-self: stretch; /* Altezze uguali sulle righe */
    justify-self: stretch !important;
    width: 100% !important;
    max-width: none !important;
    order: initial !important; /* Reset mobile order */
  }
  .instruction-design__process-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto auto auto;
    gap: 40px 30px;
    margin-top: 100px;
    width: 100%;
    max-width: var(--workspace-width, 1500px);
    margin-inline: auto;
    padding-inline: 0;
    box-sizing: border-box;
  }
  .instruction-design__process-grid > * {
    margin: 0 !important;
    max-width: none !important; /* Reset mobile max-width */
    order: initial !important; /* Reset mobile order */
  }

  /* RIGA 1: Card 1 + Intro/Immagine */
  .instruction-design__card-blue {
    grid-column: 1;
    grid-row: 1;
  }
  .instruction-design__process-intro {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    transform: translateY(-30px);
    width: 100%;
    padding: 0;
  }
  .instruction-design__process-image {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    width: 100% !important;
    margin-left: 0 !important;
    background-image: url("https://www.horizonfyw.com/wp-content/uploads/2026/02/Immagine-Home-Design-Sezione-Instruction.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center bottom;
    aspect-ratio: 1/1;
    transform: translateY(30px);
    z-index: 2;
  }

  /* RIGA 2: Card 2 (Purple) + Card 3 (Green) */
  .instruction-design__card-purple {
    grid-column: 1;
    grid-row: 2;
  }
  .instruction-design__card-green {
    grid-column: 2;
    grid-row: 2;
  }

  /* RIGA 3: Cartella */
  .instruction-design__process-animation {
    grid-column: 1 / 3;
    grid-row: 3;
    background-color: unset;
    background-image: url("https://www.horizonfyw.com/wp-content/uploads/2026/02/Sfondo-Cartella-Nera-Home-Design-Sezione-Instruction.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    min-height: 520px;
    justify-self: stretch !important;
    width: 100% !important;
    z-index: 1;
    margin-top: -10px !important;
    position: relative;
    overflow: hidden;
  }
}

/* ------------- LAYOUT DESKTOP FULL (> 1501px) ------------- */
@media (min-width: 1501px) {
  /* ------------- SEZIONE TITOLO ------------- */

  .instruction-design__title {
    flex-wrap: nowrap;
  }
  .instruction-design__h1 {
    width: auto;
  }

  /* ------------- SEZIONE CARD ------------- */

  .instruction-design__process-card {
    padding: 50px 30px; /* Modificami qui per Desktop */
    align-self: start; /* Impedisce alle card di allungarsi per coprire tutta l'altezza dell'immagine */
    justify-self: stretch !important;
    width: 100% !important;
    max-width: none !important;
    order: initial !important;
  }

  .instruction-design__process-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto;
    gap: 0px 30px; /* Gap orizzontale a 0 per farle toccare */
    margin-top: 100px;
    width: 100%;
    max-width: var(
      --workspace-width,
      1500px
    ); /* Fondamentale per non farle scappare via su schermi giganti */
    margin-inline: auto;
    padding-inline: 0;
    box-sizing: border-box;
  }

  .instruction-design__process-grid > * {
    margin: 0 !important;
    justify-self: stretch !important; /* Tutti riempiono il binario al 100% */
  }

  /* ... (rest of CSS unchanged until max-width) ... */

  .instruction-design__process-image,
  .instruction-design__process-intro {
    width: 100%;
    padding: 0;
  }

  /* --- RIGA 1 --- */
  .instruction-design__card-blue {
    grid-column: 1;
    grid-row: 1;
    justify-self: stretch !important; /* RIEMPIE IL BINARIO DA MARGINE A CENTRO */
    width: 100% !important;
    max-width: none !important;
  }

  /* Cella Condivisa: Colonna 2, Riga 1 */
  .instruction-design__process-intro {
    grid-column: 2;
    grid-row: 1;
    align-self: start; /* Intro in alto */
    margin-bottom: auto !important;
    padding-bottom: 20px;
    transform: translateY(
      -30px
    ); /* La tiriamo su visivamente oltre il bordo della riga */
  }
  .instruction-design__process-image {
    grid-column: 2;
    grid-row: 1;
    align-self: end;

    /* Dimensioni "Bigger": Esce dal binario per non essere tagliata dai bordi della colonna */
    width: 125% !important;
    margin-left: -12.5% !important;
    max-width: none !important;

    background-image: url("https://www.horizonfyw.com/wp-content/uploads/2026/02/Immagine-Home-Design-Sezione-Instruction.png");
    background-size: contain; /* Garantisce che l'intera artwork sia visibile */
    background-repeat: no-repeat;
    background-position: center bottom;

    aspect-ratio: 1/1;
    transform: translateY(30px);
    z-index: 2;
    margin-top: 50px !important;
  }

  .instruction-design__card-purple {
    grid-column: 3;
    grid-row: 1;
    justify-self: stretch !important; /* RIEMPIE IL BINARIO DA CENTRO A MARGINE */
    width: 100% !important;
    max-width: none !important;
  }

  /* --- RIGA 2 --- */
  .instruction-design__process-animation {
    grid-column: 1 / 3; /* Span su 2 colonne */
    grid-row: 2;
    background-color: unset;
    background-image: url("https://www.horizonfyw.com/wp-content/uploads/2026/02/Sfondo-Cartella-Nera-Home-Design-Sezione-Instruction.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    min-height: 515px;

    justify-self: stretch !important; /* RIEMPIE I PRIMI 2 BINARI */
    width: 100% !important;
    max-width: none !important;

    align-self: start;
    z-index: 1;
    margin-top: -10px !important; /* Tiriamo su leggermente la cartella */
    position: relative;
    overflow: hidden;
  }

  .instruction-design__card-green {
    grid-column: 3;
    grid-row: 2;
    align-self: start;
    justify-self: stretch !important; /* RIEMPIE L'ULTIMO BINARIO */
    width: 100% !important;
    max-width: none !important;
  }

  /* La cartella e i box sono ora liberi di espandersi totalmente */
}

/*#endregion */

/*          =========================================
              PORTFOLIO SECTION
            ========================================= */
/*#region   ========================================= */
.portfolio-design {
  margin-top: 100px;
}

.portfolio-design__workspace {
  width: 100%;
  max-width: var(--workspace-width);
  margin-inline: auto;
  padding-inline: var(--paddinginline-workspace);
}
@media (min-width: 900px) {
  .portfolio-design {
    margin-top: 150px;
  }

  .portfolio-design__workspace {
    display: grid;
    grid-template-areas:
      "title subtitle"
      "button button";
  }

  .portfolio-design__title {
    grid-area: title;
  }
  .portfolio-design__subtitle {
    grid-area: subtitle;
    align-self: flex-end;
    justify-self: end;
  }
  .portfolio-design__button {
    grid-area: button;
    margin-top: 50px;
  }
}

/*#endregion */

/*          =========================================
            ACCORDION SECTION
            ========================================= */
/*#region   ========================================= */
.content-design {
  margin-top: 100px;
  padding-block: 80px;
  background-color: #0d0d1a;
}
.content-design__workspace {
  width: 100%;
  max-width: var(--workspace-width);
  margin-inline: auto;
  padding-inline: var(--paddinginline-workspace);
}
.content-design__subtitle {
  margin-top: 30px;
}

.accordion-container {
  width: 100%;
  margin: 0; /* Allineato a sx come il resto del contenuto, o auto se si vuole centrato */
  margin-top: 80px;
}

.accordion-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.accordion-header {
  padding: 25px 0;
}

.accordion-header:hover {
  color: var(--color-secondary);
}

.accordion-title-group {
  gap: 20px;
}

.accordion-number {
  font-family: "Inter", sans-serif;
  font-weight: 700; /* Bold */
  font-size: 18px;
  line-height: 22px;
  letter-spacing: 0.02em; /* 2% */
  color: #ffffff;
}

.accordion-title {
  font-family: "Inter", sans-serif;
  font-weight: 700; /* Bold */
  font-size: 18px;
  line-height: 22px;
  letter-spacing: 0.02em; /* 2% */
  color: #ffffff;
}

.accordion-icon {
  font-family: "Inter", sans-serif;
  font-weight: 700; /* Bold */
  font-size: 25px;
  line-height: 22px;
  letter-spacing: 0.02em; /* 2% */
  color: #ffffff;
  width: 30px;
  height: 30px;
}

.accordion-inner {
  padding-bottom: 30px;
  padding-left: 40px;
  padding-right: 20px;
  color: #ccc;
}

.accordion-subtitle {
  font-family: "Inter", sans-serif;
  font-weight: 400; /* Regular */
  font-style: italic; /* Italic */
  font-size: 18px; /* = Title */
  line-height: 22px; /* = Title */
  letter-spacing: 0.02em; /* = Title */
  margin-bottom: 20px;
  color: #ffffff;
}

.accordion-inner p {
  font-family: "Inter", sans-serif;
  font-weight: 400; /* Regular */
  font-style: normal;
  font-size: 18px; /* Slightly smaller for readibility or 18px if desired? usually body is smaller */
  line-height: 22px;
  letter-spacing: 0.02em; /* = Title */
  color: #ffffff; /* Ensure visibility */
}

/* Mobile Adjustments Custom */
@media (max-width: 900px) {
  .accordion-title-group {
    gap: 15px;
  }
  .accordion-title {
    font-size: 1rem;
  }
  .accordion-inner {
    padding-left: 0;
  }
}

.content-design__p {
  text-align: center;
  font-size: 20px;
  margin-top: 100px;
}
.content-design__button {
  margin-top: 30px;
  width: 100%;
  display: flex;
  justify-content: center;
}

/*#endregion */

/*          =========================================
            EDITORY SECTION
            ========================================= */
/*#region   ========================================= */

.editory-design {
  margin-top: 0;
  padding-bottom: 150px;
  margin-top: 150px;
}
.editory-design__workspace {
  width: 100%;
  max-width: var(--workspace-width);
  margin-inline: auto;
  padding-inline: var(--paddinginline-workspace);
  min-height: 900px;
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  background-image: none; /* Lo mettiamo nel ::before su mobile */
  /* Nasconde la barra di scorrimento */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE e Edge */
}

.editory-design__workspace::-webkit-scrollbar {
  display: none; /* Chrome, Safari e Opera */
}

/* Sfondo largo scorrevole per mobile */
.editory-design__workspace::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1000px; /* Larghezza dell'artwork per forzare lo scroll */
  height: 100%;
  padding-inline: var(--paddinginline-workspace); /* RIPRISTINATO PADDING */
  box-sizing: border-box;
  background-image: url("https://www.horizonfyw.com/wp-content/uploads/2026/02/Immagine-Editory-Home-Design.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left 250px; /* Ora 'left' parte dopo il padding */
  background-origin: content-box; /* Forza l'immagine a stare dentro il padding */
  z-index: 1;
}

/* Elemento invisibile per attivare la barra di scroll */
.editory-design__workspace::after {
  content: "";
  display: block;
  width: 1000px;
  height: 1px;
  visibility: hidden;
}

.editory-design__img-title {
  margin-top: 60px;
  font-style: italic;
  font-weight: 700;
}
/* Testi fissi a sinistra tramite sticky */
.editory-design__title,
.editory-design__subtitle,
.editory-design__p,
.editory-design__img-title {
  position: sticky;
  left: 0;
  width: 100%;
  max-width: 930px; /* Larghezza massima unificata */
  padding-inline: 0;
  box-sizing: border-box;
  z-index: 2;
}
.editory-design__inline-img {
  height: clamp(24px, 4vw, 32px);
  width: auto;
  vertical-align: middle;

  border-radius: 100px;
}

.editory-design__approfondisci {
  position: sticky;
  left: 0;
  width: 100%;
  padding-inline: 0;
  box-sizing: border-box;
  z-index: 2;
  /* Su mobile segue l'allineamento a sinistra degli altri testi */
}

@media (min-width: 900px) {
  .editory-design__p {
    position: static;
    width: auto;
    max-width: 700px; /* Un po' più stretto su desktop per l'immagine */
    padding-inline: 0;
  }

  .editory-design__workspace {
    overflow-x: visible;
    min-height: 1130px;
    background-image: url("https://www.horizonfyw.com/wp-content/uploads/2026/02/Immagine-Editory-Home-Design.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center 150px;
    padding-inline: var(--paddinginline-workspace);
  }

  .editory-design__workspace::before,
  .editory-design__workspace::after {
    display: none;
  }

  .editory-design__img-title,
  .editory-design__title,
  .editory-design__subtitle {
    position: static;
    width: revert;
    padding-inline: revert;
    left: revert;
    z-index: revert;
  }

  .editory-design__approfondisci {
    position: static;
    width: fit-content;
    margin-left: auto;
    padding-inline: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
}

/*#endregion */