/* ============================================================
   HAWK STUDIO — ABOUT.CSS
   Stili specifici per about.html e about-it.html.
   I componenti condivisi (header, footer, .btn, .container, ecc.)
   sono già definiti in style.css e non vengono ridefiniti qui.
   ============================================================ */


/* ----------------------------------------
   1. SEZIONE PRINCIPALE
   Sfondo var(--color-light), testo var(--color-dark-teal).
   padding-top compensa l'header fixed + respiro visivo.
   Coerente con .privacy.
   ---------------------------------------- */
.about {
  min-height: 60vh;
  padding-top: 280px;
  padding-bottom: var(--section-padding-y);
  background-color: var(--color-light);
}

.about__inner {
  max-width: 720px;
  margin: 0 auto;
}


/* ----------------------------------------
   2. INTESTAZIONE PAGINA
   Coerente con .privacy__title / .privacy__subtitle.
   ---------------------------------------- */
.about__subtitle {
  font-size: 15px;
  font-weight: 500;
  color: var(--color-teal);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.about__title {
  font-size: 52px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--color-dark-teal);
  margin-bottom: 32px;
}

.about__divider {
  border: none;
  border-top: 2px solid var(--color-teal);
  opacity: 0.25;
  margin-bottom: 40px;
}


/* ----------------------------------------
   4. CTA
   ---------------------------------------- */
.about__cta {
  display: inline-flex;
}


/* ----------------------------------------
   5. FOOTER — override di base per pagina about
   Il footer "flat" (nessun overlap) è la base condivisa; l'overlap
   vero e proprio per il layout a due colonne è nella sezione 7, scoped
   a `.about--split + .site-footer` così da non toccare altre pagine.
   ---------------------------------------- */
.site-footer {
  margin-top: 0;
  padding-top: 260px;
  padding-bottom: 60px;
}


/* ----------------------------------------
   6. RESPONSIVE — base (title/spacing comuni a about.html e about-it.html)
   ---------------------------------------- */
@media (max-width: 1024px) {
  .about {
    padding-top: 220px;
  }

  .about__title {
    font-size: 38px;
  }
}

@media (max-width: 640px) {
  .about {
    padding-top: 160px;
  }

  .about__title {
    font-size: 30px;
  }
}


/* ============================================================
   7. ABOUT — LAYOUT A DUE COLONNE (about.html + about-it.html)
   Scoped a `.about--split` / `.about__inner--wide` / `.about__layout`,
   presente su entrambe le pagine about.
   ============================================================ */

/* Wider container just for the split layout: the legacy .about__inner
   (720px) is tuned for a single reading column, too narrow for text + photo. */
.about__inner--wide {
  max-width: 1180px;
}

.about__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.about__text {
  min-width: 0;
}

/* Content blocks: spaced apart + labelled, never a single dense paragraph */
.about__block {
  margin-bottom: 36px;
}

.about__block:last-child {
  margin-bottom: 0;
}

.about__block-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-teal);
  opacity: 0.75;
  margin-bottom: 10px;
}

.about__block-text {
  font-size: 17px;
  line-height: 1.75;
  color: var(--color-dark-teal);
}

/* Block 1 (opening line): reads like a lightweight heading, sets the tone */
.about__block--lead .about__block-text {
  font-size: 22px;
  font-weight: 500;
  line-height: 1.4;
}

/* Block 5 (closing CTA) */
.about__block--cta {
  margin-top: 48px;
}

.about__block--cta .about__block-text {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 22px;
}

/* ----------------------------------------
   7.1 PHOTO COLUMN
   The figure is taller than the light section and overflows past its
   bottom edge into where the footer starts. Stacking is what sells the
   effect: .about__media sits at z-index 0 while .site-footer keeps the
   z-index: 1 it already has from style.css, so the footer's dark
   background paints OVER the bottom of the photo (legs "emerge from
   behind" the footer) instead of the photo floating above it.
   ---------------------------------------- */
.about__media {
  position: relative;
  z-index: 0;
  /* deliberately shorter than the photo itself (native ratio ~2:3, see
     .about__photo below): the photo overflows past this box's bottom
     edge in normal flow, which is what lets it reach down into the
     footer's overlap area defined below */
  min-height: 430px;
  margin-bottom: -800px;
  padding-top: 10%;
}

.about__photo {
  position: relative;
  bottom: 0; /* anchored to the box's bottom edge: the photo grows upward
                from there instead of hanging down from the top, so its
                bottom (not an unpredictable point further down) is what
                lines up with the footer overlap below */
  margin-bottom: -40px; /* negative margin to pull the photo down into the footer's
                overlap area, same as the footer's padding-top below */
  left: 50%;
  transform: translateX(-50%);
  width: 200%;
  max-width: 800px;
  height: auto;
}

/* Pull the footer up over the bottom of the photo. Scoped to
   `.about--split + .site-footer` (adjacent-sibling) so this never
   touches the footer on any other page, including about-it.html. */
.about--split + .site-footer {
  position: relative;
  z-index: 1; /* explicit: must stay above .about__media's z-index: 0 */
  margin-top: -240px;
  padding-top: 480px; /* keeps the footer's own content clear of the overlap */
}


/* ----------------------------------------
   7.2 RESPONSIVE — TABLET (max 1024px)
   The two-column grid stays two columns: text and photo keep sitting
   side by side, just scaled down together (text sizes + photo size +
   footer overlap all reduced by roughly the same proportion as the
   narrower container) so the page keeps the desktop's proportions
   instead of jumping to a stacked layout. Full stacking only happens
   at the mobile breakpoint below, where the photo is dropped entirely.
   ---------------------------------------- */
@media (max-width: 1024px) {
  .about__inner--wide {
    max-width: 920px;
  }

  .about__layout {
    gap: 24px;
  }

  .about__block {
    margin-bottom: 24px;
  }

  .about__block-label {
    font-size: 11px;
    margin-bottom: 8px;
  }

  .about__block-text {
    font-size: 14px;
    line-height: 1.6;
  }

  .about__block--lead .about__block-text {
    font-size: 19px;
  }

  .about__block--cta {
    margin-top: 28px;
  }

  .about__block--cta .about__block-text {
    font-size: 15px;
    margin-bottom: 14px;
  }

  /* photo column scaled down, same absolute/overlap mechanics as desktop */
  .about__media {
    min-height: 280px;
    padding-top: 25%;
  }

  .about__photo {
    max-width: 420px;
  }

  .about--split + .site-footer {
    margin-top: -130px;
    padding-top: 320px;
  }
}

@media (max-width: 640px) {
  .about__block--lead .about__block-text {
    font-size: 22px;
  }

  /* Mobile: drop the photo entirely rather than shrinking it further,
     the text column carries the page on small screens. */
  .about__media {
    display: none;
  }

  /* .about__layout keeps its two-column grid-template-columns from the
     tablet breakpoint above; with .about__media gone, .about__text would
     otherwise still be boxed into a single 1fr track (half the grid)
     instead of using the full row. Collapse to one column so the text
     spans the whole width, no leftover space where the photo was. */
  .about__layout {
    grid-template-columns: 1fr;
  }

  /* On mobile the CTA should stay button-sized, not stretch across the
     full width of the now-full-width (single-column) text column. */
  .about--split .about__cta {
    width: auto;
    justify-content: center;
  }

  .about--split + .site-footer {
    padding-top: 160px;
  }
}