/* =========================================================
   PAGINA CHI SONO – HEADER PICCOLO
   ========================================================= */

/* HEADER PICCOLO: SOLO SFUMATURA AZZURRA */
body {
  background-color: #eae0c3 !important;
}

.hero.hero--small {
  min-height: 160px;
  background-image: none;
  background-attachment: scroll;
  background: linear-gradient(
    to bottom,
    #87cfe0 0%,
    #cceff7 35%,
    #eae0c3 100%
  );
  display: block;
}

/* niente overlay sopra la sfumatura */
.hero.hero--small .hero-overlay {
  display: none;
}

/* =========================================================
   SEZIONI CHI SONO (3 blocchi: Chi sono / Esperienze / Obbiettivo)
   ========================================================= */

/* blocchi di contenuto */
.about-section {
  background-color: #eae0c3;
  padding: 55px 0;
}

/* riga a due colonne (foto + testo) */
.about-row,
.about-row--reverse {
  display: flex;
  align-items: flex-start;          /* foto e testo partono dalla stessa linea */
  justify-content: space-between;
  gap: 80px;
}

/* ordine standard: foto prima, testo dopo */
.about-row .about-image-wrapper {
  order: 1;
}
.about-row .about-text {
  order: 2;
}

/* se la riga ha la classe --reverse invertiamo l'ordine (zig-zag) */
.about-row--reverse .about-image-wrapper {
  order: 2;
}
.about-row--reverse .about-text {
  order: 1;
}

/* colonna immagine */
.about-image-wrapper {
  flex: 0 0 360px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;                 /* offset base per tutte le sezioni */
}

.about-image {
  display: block;
  width: 100%;
  max-width: 360px;
  height: auto;
  box-shadow: 0 18px 35px rgba(0, 0, 0, 0.18);
}

/* riquadri colorati sotto la foto (effetto rilievo) */
.photo-frame {
  position: relative;
  display: inline-block;
}

.photo-frame--yellow-left::before,
.photo-frame--aqua-right::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
}

/* Chi sono / Obbiettivo: sfondo giallo spostato verso sinistra */
.photo-frame--yellow-left::before {
  left: -18px;
  bottom: -18px;
  background-color: var(--accent-yellow);
}

/* Esperienze: sfondo azzurro spostato a destra */
.photo-frame--aqua-right::before {
  right: -18px;
  bottom: -18px;
  background-color: var(--bg-aqua);
}

/* colonna testo */
.about-text {
  flex: 1;
  max-width: 650px;
}

.about-text p {
  margin: 0 0 14px;
  line-height: 1.8;
  font-size: 1.05rem;
}

/* titolo script con banda colorata dietro (base) */
.about-title-row {
  position: relative;
  margin-bottom: 32px;
  padding-top: 20px;                /* allineamento con la foto */
}

.about-title-row::after {
  content: "";
  position: absolute;
  bottom: 8px;
  height: 12px;
  background-color: var(--bg-aqua);
  z-index: -1;
}

/* variazione colore giallo */
.about-title-row--yellow::after {
  background-color: var(--accent-yellow);
}

.about-title-row--center {
  text-align: center;
}

.about-title-row--center .about-title {
  text-align: center;
}

.about-title {
  font-family: "Dancing Script", cursive;
  font-size: clamp(3.4rem, 5vw, 4.5rem);
  margin: 0;
}

/* ---------------------------------------------------------
   BANDE FULL-WIDTH per le 3 sezioni (desktop / tablet)
   --------------------------------------------------------- */

/* 1) CHI SONO → banda azzurra verso destra */
.about-section:nth-of-type(1) .about-title-row {
  overflow: visible;
}
.about-section:nth-of-type(1) .about-title-row::after {
  left: 0;
  right: auto;
  width: 100vw;                                   /* larghezza viewport */
  transform: translateX(calc(50% - 50vw));        /* centrata rispetto al viewport */
}

/* 2) ESPERIENZE → banda gialla da sinistra */
.about-section:nth-of-type(2) .about-title-row {
  overflow: visible;
}
.about-section:nth-of-type(2) .about-title-row::after {
  right: 0;
  left: auto;
  width: 100vw;
  transform: translateX(calc(-50% + 50vw));
}

/* 3) OBBIETTIVO → banda azzurra verso destra */
.about-section:nth-of-type(3) .about-title-row {
  overflow: visible;
}
.about-section:nth-of-type(3) .about-title-row::after {
  left: 0;
  right: auto;
  width: 100vw;
  transform: translateX(calc(50% - 50vw));
}

/* ---------------------------------------------------------
   CALIBRAZIONE ALLINEAMENTO FOTO ↔ TITOLI (DESKTOP)
   --------------------------------------------------------- */

/* Sezione 1 — CHI SONO */
.about-section:nth-of-type(1) .about-image-wrapper {
  margin-top: 40px;
}

/* Sezione 2 — ESPERIENZE */
.about-section:nth-of-type(2) .about-image-wrapper {
  margin-top: 45px;
}

/* Sezione 3 — OBBIETTIVO */
.about-section:nth-of-type(3) .about-image-wrapper {
  margin-top: 40px;
}

/* Sposta solo il testo "Chi sono" un po' a destra */
.about-section:nth-of-type(1) .about-title-row .about-title {
  margin-left: 15px;
}

/* Sposta solo il testo "Esperienze" verso il centro-destra */
.about-section:nth-of-type(2) .about-title-row .about-title {
  margin-left: 350px;
}

/* Sposta solo il testo "Obbiettivo" un po' a destra */
.about-section:nth-of-type(3) .about-title-row .about-title {
  margin-left: 15px;
}

/* =========================================================
   RESPONSIVE CHI-SONO
   ========================================================= */

/* ============================
   MOBILE – PAGINA "CHI SONO"
   ============================ */
@media (max-width: 768px) {

  /* Spazi tra le sezioni */
  .about-section {
    padding: 32px 0 40px;
  }

  /* Layout base: colonna, TESTO SOPRA, FOTO SOTTO per tutte le sezioni */
  .about-row,
  .about-row--reverse {
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }

  .about-text {
    order: 1 !important;              /* forza il testo sopra */
  }

  .about-image-wrapper {
    order: 2 !important;              /* foto sotto */
  }

  /* FOTO PIÙ PICCOLE */
  .about-image-wrapper {
    flex: 0 0 auto;
    max-width: 260px;        /* larghezza massima foto */
    margin: 0 auto 16px;     /* spazio sotto la foto */
  }

  .about-image {
    max-width: 260px;
    width: 100%;
    height: auto;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
  }

  /* nessun offset verticale extra */
  .about-section .about-image-wrapper {
    margin-top: 0 !important;
  }

  /* TESTO CENTRATO E PIÙ LEGGIBILE */
  .about-text {
    max-width: 90%;
    text-align: center;
    margin: 0 auto;
  }

  .about-text p {
    font-size: 1rem;
    line-height: 1.7;
  }

  /* TITOLI CENTRATI, NIENTE SCORRIMENTO LATERALE */
  .about-title {
    font-size: 2.6rem;
    margin-left: 0 !important;   /* annulla i margini desktop */
  }

  /* bande colorate corte e centrate, senza overflow */
  .about-title-row {
    margin-bottom: 24px;
    padding-top: 10px;
    overflow: visible;
  }

  .about-title-row::after {
    left: 10%;
    right: 10%;
    width: auto;
    transform: none;           /* annulla i translateX delle bande full-width */
  }

  /* hero piccolo invariato */
  .hero.hero--small {
    min-height: 140px;
  }
}

/* ===========================================
   iPad / tablet in verticale – pagina chi-sono
   =========================================== */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {

  /* hero piccolo: stessa sfumatura */
  .hero.hero--small {
    background-image: none;
    background: linear-gradient(
      to bottom,
      #87cfe0 0%,
      #cceff7 35%,
      #eae0c3 100%
    );
    display: block;
  }

  /* layout ancora a due colonne ma più compatto */
  .about-row,
  .about-row--reverse {
    gap: 40px;
  }

  .about-image-wrapper {
    flex: 0 0 320px;
    margin-top: 24px;
  }

  .about-image {
    max-width: 320px;
  }

  .about-text {
    max-width: 600px;
  }

  .about-title {
    font-size: 3.2rem;
  }
}

/* =========================================================
   MOBILE + TABLET VERTICALE (bande full-width + titoli centrati)
   ========================================================= */
@media (max-width: 1024px) {

  /* Centra tutti i titoli */
  .about-title {
    text-align: center !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Banda FULL WIDTH per tutte le sezioni */
  .about-title-row::after {
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important; /* trucco per allineare al viewport */
  }

  /* Rimuove overflow nascosti dal container */
  .about-title-row {
    overflow: visible !important;
  }
}

/* =========================================
   CONTATTI – MOBILE & SMALL TABLET
   (HOME + CHI SONO)
   ========================================= */

@media (max-width: 768px) {

  /* meno spazio verticale */
  .contatti-body {
    padding: 40px 0 70px;
  }

  /* griglia compatta 2 x 2 */
  .contacts-grid {
    margin-top: 32px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 12px;
    justify-items: center;
    align-items: flex-start;
  }

  .contact-item {
    text-align: center;
  }

  /* icone più piccole e ravvicinate */
  .icon-wrapper {
    height: 52px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .contact-icon {
    object-fit: contain;
  }

  .icon-position {
    width: 28px;
    height: 28px;
  }

  .icon-instagram {
    width: 70px;
    height: 70px;
  }

  .icon-phone {
    width: 36px;
    height: 36px;
  }

  .icon-mail {
    width: 34px;
    height: 34px;
  }

  .contact-label {
    font-size: 0.9rem;
    line-height: 1.4;
  }
}

/* telefoni molto piccoli → restiamo comunque 2 x 2 */
@media (max-width: 480px) {
  .contacts-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}