/* ========================================
   ABOUT PAGE SPECIFIC STYLES
   ======================================== */

/* ----------------------------------------
   A. HERO & CIRCLE
   ---------------------------------------- */
.about-hero {
  margin-top: calc(var(--grid-baseline) * 20);
  position: relative;
  align-items: center; 
}

.about-circle-wrapper {
  grid-column: 1 / -1;
  grid-row: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  height: calc(var(--grid-baseline) * 96);
  z-index: 2;
  pointer-events: none;
}

.about-circle {
  width: calc(var(--grid-baseline) * 96);
  height: calc(var(--grid-baseline) * 96);
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--color-accent) 15%, transparent);
  filter: blur(70px);
  cursor: pointer;
  pointer-events: auto;
  animation: breath var(--motion-breath) var(--ease-ambient) infinite alternate;
  transition: filter var(--motion-normal) var(--ease-interaction);
  
  /* FIX SAFARI BUG: Forza l'uso della GPU */
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  will-change: filter, transform;
}

.about-circle:hover { filter: blur(20px); }

/* ----------------------------------------
   B. TITLES
   ---------------------------------------- */
.about-titles-wrapper {
  grid-column: 1 / -1;
  grid-row: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  pointer-events: none;
  z-index: 10;
}

.about-title { margin: 0; }
.desktop-br { display: inline; }

/* ----------------------------------------
   C. INTRO SECTION & COORDINATES
   ---------------------------------------- */
.about-intro {
  margin-top: calc(var(--grid-baseline) * 12);
  margin-bottom: calc(var(--grid-baseline) * 24);
  align-items: start; 
}

.about-intro-text, .about-coord-text {
  grid-row: 1; 
}

.about-intro-text {
  grid-column: 5 / 9;
  text-align: justify; 
  margin: 0;
}

.coord-text {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--type-data-size);
  line-height: var(--type-data-lh);
  color: var(--color-accent);
}

.about-coord-text {
  grid-column: 9 / 13;
  text-align: left;
  margin-top: var(--type-body-lh); 
  margin-bottom: 0; 
}

/* ----------------------------------------
   D. BIO & IMAGE SECTION
   ---------------------------------------- */
.about-bio {
  margin-bottom: calc(var(--grid-baseline) * 16);
  align-items: start;
}

.about-image-wrapper {
  grid-column: 1 / 5;
  width: 100%;
  background-color: color-mix(in srgb, var(--color-text) 5%, transparent);
}

.about-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.about-labels-wrapper {
  grid-column: 5 / 9;
  display: flex;
  flex-direction: column;
}

.about-label-bio, .about-label-social {
  text-align: right;
  font-weight: 500;
  margin: 0;
  color: var(--color-accent);
}

.about-label-bio { margin-top: 0; }

.about-text-wrapper {
  grid-column: 9 / 13;
  display: flex;
  flex-direction: column;
  text-align: justify;
}

.bio-text p { margin: 0 0 calc(var(--grid-baseline) * 4) 0; }
.bio-text p:last-child { margin-bottom: 0; }

.social-links {
  margin-top: calc(var(--grid-baseline) * 12);
  display: flex;
  flex-direction: column;
  gap: calc(var(--grid-baseline) * 2);
}

.social-links a {
  text-decoration: none;
  color: inherit;
  transition: opacity 0.2s ease;
}

.social-links a:hover { opacity: 0.6; }

/* Dynamic Offset for Social Label */
.about-bio:has(.social-links) .about-label-social {
  margin-top: var(--social-offset, auto); 
}

/* ----------------------------------------
   E. MOBILE OVERRIDES
   ---------------------------------------- */
@media (max-width: 768px) {
  .about-hero { display: grid; }
  
  .about-circle-wrapper { height: calc(var(--grid-baseline) * 72); }
  
  .about-circle {
    width: calc(var(--grid-baseline) * 72);
    height: calc(var(--grid-baseline) * 72);
    filter: blur(50px);
  }
  
  .about-titles-wrapper { grid-column: 1 / -1; }
  .desktop-br { display: none; }

  .about-intro {
    margin-top: calc(var(--grid-baseline) * 12); 
    align-items: start; 
    row-gap: 0; 
  }
  
  .about-intro-text, .about-coord-text { grid-row: 1; }
  .about-intro-text { grid-column: 1 / 3; }
  
  .about-coord-text {
    grid-column: 3 / 5;
    text-align: left;
    margin-bottom: 0;
  }

  .about-bio { row-gap: calc(var(--grid-baseline) * 16); }
  
  .about-text-wrapper {
    grid-column: 2 / 5;
    grid-row: 1;
  }
  
  .about-labels-wrapper {
    grid-column: 1 / 2;
    grid-row: 1;
  }
  
  .about-label-bio, .about-label-social {
    text-align: right;
    font-weight: 500;
  }

  .about-image-wrapper {
    grid-column: 2 / 5;
    grid-row: 2;
  }
}