/* =========================================
   ABOUT PAGE LAYOUT
========================================= */
/* Per il paragrafo normale (p) */
body {
  font-size: clamp(0.8rem, 1vw + 0.5rem, 1rem);
  overscroll-behavior-y: none;
}

h1 {
  font-size: clamp(1.5rem, 4vw + 1rem, 3.5rem);
  font-weight: 200;
}

h4 {
  font-size: clamp(0.8rem, 1vw + 0.5rem, 1rem);
}

/* Contenitore principale con ampi margini laterali */
.about-page {
  /* Il padding superiore (12rem) spinge il contenuto sotto la navigation bar fissa */
  padding: 12rem 10% 8rem;
  max-width: 1800px;
  margin: 0 auto;
}

/* 1. Frase Centrale (Hero) */
.about-hero {
  text-align: center;
  margin-top: 10rem;
  margin-bottom: 5rem;
  display: flex;
  justify-content: center;
}

.hero-statement {
  /* Limita la larghezza della frase per evitare che diventi una singola riga lunghissima su desktop */
  max-width: 30ch;
  margin: 0;
}

/* Previene il riposizionamento del layout durante l'animazione del peso */
.highlight {
  display: inline-block;
  /* Assicura che la parola abbia sempre lo spazio calcolato per il suo peso massimo (700) */
  font-weight: 700;
  -webkit-text-stroke: 1px transparent;
  color: inherit;
  font-weight: inherit;
}

/* 2. Griglia delle Skill (4 Colonne) */
.skills-section {
  margin-bottom: 8rem;
  padding: 0; /* Assicuriamoci di annullare i padding precedenti */
  width: 90%; /* Su smartphone occuperà il 90% dello schermo fluido */
  max-width: 45rem; /* Sostituisce i 900px usando i rem (unità relativa) */
  margin-left: auto;
  margin-right: auto;
}

.skills-grid {
  display: grid;
  grid-template-columns: repeat(
    2,
    1fr
  ); /* Ora parte da 2 colonne (2x2) fin dal telefono */
  gap: 1.5rem; /* Gap ridotto per gli schermi piccoli */
}

.skill-column h4 {
  margin-top: 10rem;
  padding-bottom: 1rem;
  color: #111;
}

.skill-column p {
  line-height: 1.5rem; /* Più spazio tra le righe delle skill per renderle leggibili */
}

/* Responsive Grid per Tablet (2 colonne) */
@media (min-width: 768px) {
  .skills-grid {
    gap: 4rem;
  }
}

/* Responsive Grid per Desktop (Passa a 4 colonne) */
@media (min-width: 1024px) {
  .skills-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* 3. Testo / Bio Finale */
.about-bio {
  width: 90%; /* Stessa identica percentuale delle skill */
  max-width: 45rem; /* Stesso identico limite massimo in rem */
  margin: 0 auto;
}

.about-bio p {
  font-size: clamp(0.8rem, 1vw + 0.5rem, 1rem);
  line-height: 1.5rem; /* Più spazio tra le righe per la leggibilità */
  margin-bottom: 1rem; /* Spazio tra i paragrafi */
}

/* =========================================
   MODULAR 4-COLUMN IMAGE GALLERY
========================================= */
.project-gallery {
  display: grid;
  grid-template-columns: 1fr; /* Mobile: 1 column */
  gap: 0.5rem; /* Strict 0.5rem gap matching Works page */
  margin-top: 6rem; /* Breathing room after the skills section */
}

/* Base gallery item */
/* Base gallery item */
.gallery-item {
  background-color: #e5e5e5;
  border-radius: 4px;
  overflow: hidden;
  position: relative;

  /* 1. Remove the fixed height, and ensure it stretches to fill the row perfectly */
  height: 100%;
}

/* 2. Add these explicit shape classes instead */
.gallery-item.horizontal {
  aspect-ratio: 7 / 5;
}

.gallery-item.vertical {
  aspect-ratio: 5 / 7;
}

/* Invisible block for negative space in the gallery */
.gallery-item.empty {
  background-color: transparent;
  pointer-events: none; /* Prevents hovering or clicking on the empty space */
}

/* Your existing image rules guarantee no distortion */
.gallery-item img,
.gallery-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* RESPONSIVE */
/* 6-Column Logic for Desktop */
@media (min-width: 1024px) {
  .project-gallery {
    grid-template-columns: repeat(4, 1fr);
  }

  .span-1 {
    grid-column: span 1;
  }
  .span-2 {
    grid-column: span 2;
  }
  .span-3 {
    grid-column: span 3;
  }
  .span-4 {
    grid-column: span 4;
  }
}

/* MOBILE (Phones only) */
@media (min-width: 767px) and (max-width: 1023px) {
  .project-gallery {
    grid-template-columns: repeat(3, 1fr);
  }

  .span-1,
  .span-2,
  .span-3,
  .span-4 {
    grid-column: span 1;
  }
}

/* =========================================
   MOBILE NAVIGATION OVERRIDE
========================================= */
@media (max-width: 767px) {
  .minimal-header {
    align-items: flex-start;
  }
  .brand-initials {
    height: 36px;
    display: flex;
    align-items: center;
  }

  .square-nav {
    flex-direction: column;
    width: 36px;
    height: 36px;
    overflow: hidden;
    background-color: #e5e5e5;
    border-radius: 4px;
    gap: 0;
    cursor: pointer;
    transition:
      width 0.3s cubic-bezier(0.16, 1, 0.3, 1),
      height 0.3s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;
  }

  .square-nav.menu-open {
    width: 140px;
    height: 144px;
    transition:
      height 0.3s cubic-bezier(0.16, 1, 0.3, 1),
      width 0.3s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;
  }

  .nav-square {
    background-color: transparent !important;
    width: 100%;
    height: 36px;
    flex-shrink: 0;
    pointer-events: none;
  }

  .nav-square.is-expanded {
    order: -1;
  }
  .square-nav.menu-open .nav-square {
    pointer-events: auto;
  }
  .square-nav.menu-open .nav-square.is-expanded {
    order: 0;
  }

  .nav-square.is-expanded .nav-label-wrapper {
    grid-template-columns: 0fr;
  }
  .nav-square.is-expanded .nav-label {
    opacity: 0;
  }

  .square-nav.menu-open .nav-label-wrapper {
    grid-template-columns: 1fr;
  }

  .square-nav.menu-open .nav-label {
    padding-right: 1.25rem;
    opacity: 1;
    transition: opacity 0.2s ease 0.4s;
  }

  .square-nav.menu-open .nav-square.is-expanded .nav-num,
  .square-nav.menu-open .nav-square.is-expanded .nav-label {
    color: #111;
    font-weight: 700;
  }
}
/* =========================================
   PROJECT PAGE: STRICTLY MOBILE OVERRIDES
========================================= */
@media (max-width: 1023px) {
  /* SKILLS */
  .skills-grid {
    row-gap: 2rem;
  }

  /* Removes the 10rem margin pushing the second row down */
  .skill-column h4 {
    margin-top: 0;
  }

  .about-bio {
    margin-bottom: 4rem !important;
  }
}

@media (max-width: 767px) {
  /* 1. Matches top spacing (Nav to Title) and bottom spacing (Content to Footer) with the About page */
  .about-page {
    padding-top: 6rem !important;
    padding-bottom: 4rem !important;
  }

  /* Mirrors the exact About page hero spacing */
  .about-hero {
    margin-top: 10rem !important;
    margin-bottom: 10rem !important;
  }

  .about-bio {
    margin-bottom: 4rem !important;
  }
  /* 2. Tightens the space between the Description, Meta Columns, and Images to match the About rhythm */
  .project-description {
    margin-bottom: 4rem !important;
  }

  .project-meta {
    margin-bottom: 4rem !important;
  }

  /* Matches the tightened 2rem gap we applied to the skills grid on the About page */
  .meta-grid {
    gap: 2rem !important;
  }

  /* Removes excess spacing before the images start */
  .project-gallery {
    margin-top: 0 !important;
  }
}