/* =========================================================
   ZERLAB STUDIO — FAQ
   ========================================================= */

.faq {
  width: 100%;

  padding:
    clamp(105px, 9vw, 150px)
    var(--page-padding)
    clamp(110px, 10vw, 165px);

  background: var(--cream-light);
}


/* =========================================================
   LAYOUT
   ========================================================= */

.faq-layout {
  width: 100%;

  display: grid;

  grid-template-columns:
    minmax(330px, 0.75fr)
    minmax(550px, 1.25fr);

  gap:
    clamp(70px, 10vw, 170px);

  align-items: start;
}


/* =========================================================
   INTRO — SINISTRA
   ========================================================= */

.faq-intro {
  position: sticky;
  top: 120px;
}


.faq-intro h2 {
  margin: 0;

  color: var(--ink);

  font-size:
    clamp(55px, 5.7vw, 88px);

  font-weight: 500;

  line-height: 0.94;

  letter-spacing: -5px;
}


.faq-intro h2 strong {
  color: var(--blue);

  font-weight: 700;
}


.faq-intro > p {
  max-width: 330px;

  margin:
    28px
    0
    0;

  color: #68717d;

  font-size: 14px;

  line-height: 1.75;
}


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

.faq-config-link {
  width: fit-content;

  margin-top: 42px;

  padding-bottom: 7px;

  display: flex;

  align-items: center;

  gap: 25px;

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

  color: var(--ink);

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

  letter-spacing: 1.2px;

  text-decoration: none;

  transition:
    color 0.25s ease,
    border-color 0.25s ease;
}


.faq-config-link span {
  color: var(--blue);

  font-size: 17px;

  transition:
    transform 0.25s ease;
}


.faq-config-link:hover {
  color: var(--blue);

  border-color: var(--blue);
}


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


/* =========================================================
   FAQ LIST
   ========================================================= */

.faq-list {
  width: 100%;

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


/* =========================================================
   FAQ ITEM
   ========================================================= */

.faq-item {
  width: 100%;

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


/* =========================================================
   DOMANDA
   ========================================================= */

.faq-question {
  width: 100%;

  min-height: 105px;

  padding:
    25px
    0;

  display: grid;

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

  gap: 20px;

  align-items: center;

  border: 0;

  outline: 0;

  color: var(--ink);

  background: transparent;

  cursor: pointer;

  text-align: left;
}


/* =========================================================
   NUMERO
   ========================================================= */

.faq-number {
  color: #939ba4;

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

  letter-spacing: 1px;

  transition:
    color 0.3s ease;
}


/* =========================================================
   TESTO DOMANDA
   ========================================================= */

.faq-question-text {
  color: var(--ink);

  font-size:
    clamp(18px, 1.55vw, 24px);

  font-weight: 600;

  line-height: 1.25;

  letter-spacing: -0.8px;

  transition:
    color 0.3s ease,
    transform 0.3s ease;
}


/* =========================================================
   PLUS
   ========================================================= */

.faq-plus {
  width: 38px;
  height: 38px;

  display: flex;

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

  justify-self: end;

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

  border-radius: 50%;

  color: var(--ink);

  font-size: 20px;
  font-weight: 400;

  line-height: 1;

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


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

.faq-question:hover
.faq-question-text {
  color: var(--blue);

  transform:
    translateX(4px);
}


.faq-question:hover
.faq-number {
  color: var(--blue);
}


.faq-question:hover
.faq-plus {
  color: var(--white);

  background: var(--blue);

  border-color: var(--blue);
}


/* =========================================================
   RISPOSTA
   ========================================================= */

.faq-answer {
  display: grid;

  grid-template-rows: 0fr;

  opacity: 0;

  transition:
    grid-template-rows 0.45s
      cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.35s ease;
}


.faq-answer-inner {
  min-height: 0;

  overflow: hidden;
}


.faq-answer-inner p {
  max-width: 620px;

  margin:
    0
    65px
    0;

  padding:
    0
    0
    35px
    65px;

  color: #707985;

  font-size: 13px;

  line-height: 1.8;
}


/* =========================================================
   FAQ APERTA
   ========================================================= */

.faq-item.is-open
.faq-answer {
  grid-template-rows: 1fr;

  opacity: 1;
}


.faq-item.is-open
.faq-plus {
  color: var(--white);

  background: var(--blue);

  border-color: var(--blue);

  transform:
    rotate(45deg);
}


.faq-item.is-open
.faq-number {
  color: var(--blue);
}


.faq-item.is-open
.faq-question-text {
  color: var(--blue);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {

  .faq-layout {
    grid-template-columns:
      minmax(270px, 0.7fr)
      minmax(450px, 1.3fr);

    gap: 60px;
  }


  .faq-intro {
    top: 100px;
  }


  .faq-question {
    min-height: 95px;

    grid-template-columns:
      35px
      minmax(0, 1fr)
      40px;

    gap: 15px;
  }


  .faq-answer-inner p {
    margin-right: 50px;

    padding-left: 50px;
  }

}


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

@media (max-width: 700px) {

  .faq {
    padding:
      80px
      20px
      100px;
  }


  /* LAYOUT */

  .faq-layout {
    display: block;
  }


  /* INTRO */

  .faq-intro {
    position: static;

    margin-bottom: 65px;
  }


  .faq-intro h2 {
    font-size:
      clamp(48px, 13.5vw, 63px);

    line-height: 0.98;

    letter-spacing: -3.5px;
  }


  .faq-intro > p {
    max-width: 290px;

    margin-top: 22px;

    font-size: 13px;
  }


  .faq-config-link {
    margin-top: 30px;
  }


  /* DOMANDA */

  .faq-question {
    min-height: 90px;

    padding:
      22px
      0;

    grid-template-columns:
      30px
      minmax(0, 1fr)
      36px;

    gap: 10px;
  }


  .faq-question-text {
    font-size: 17px;

    letter-spacing: -0.5px;
  }


  .faq-plus {
    width: 34px;
    height: 34px;

    font-size: 18px;
  }


  /* RISPOSTA */

  .faq-answer-inner p {
    max-width: none;

    margin:
      0
      45px
      0
      0;

    padding:
      0
      0
      28px
      40px;

    font-size: 12px;

    line-height: 1.75;
  }


  /* DISABILITIAMO SPOSTAMENTO HOVER MOBILE */

  .faq-question:hover
  .faq-question-text {
    transform: none;
  }

}


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

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

  .faq-answer,
  .faq-plus,
  .faq-question-text,
  .faq-number,
  .faq-config-link,
  .faq-config-link span {
    transition: none;
  }

}