/* ============================================================
   ABOUT — FANUCAiLeadCV
   Circular avatar + professional statement + stat cards.
   ============================================================ */

/* ----------------------------------------------------------
   ABOUT BODY LAYOUT
   Desktop: avatar left, text right, stats below text.
   Mobile: stacked centre.
---------------------------------------------------------- */

.about__body {
  display:               grid;
  grid-template-columns: 220px 1fr;
  grid-template-areas:
    "avatar text"
    "stats  stats";   /* stats span full width, centered on the page */
  column-gap: var(--space-12);
  row-gap:    var(--space-8);
  align-items: start;
}

@media (max-width: 768px) {
  .about__body {
    grid-template-columns: 1fr;
    grid-template-areas:
      "avatar"
      "text"
      "stats";
    justify-items: center;
  }
}

/* ----------------------------------------------------------
   CIRCULAR AVATAR
---------------------------------------------------------- */

.about__avatar {
  grid-area: avatar;
  align-self: start;
  position:  relative;
  isolation: isolate;   /* keep the z-index:-1 ring inside this element */
}

.about__avatar img {
  width:         220px;
  height:        220px;
  border-radius: var(--radius-full);
  object-fit:    cover;
  object-position: center 20%;    /* crop to upper body */
  border:        3px solid var(--color-border-accent);
  box-shadow:    var(--shadow-accent), var(--shadow-lg);
  transition:    box-shadow var(--duration-base) var(--ease-out);
}

.about__avatar:hover img {
  box-shadow: var(--shadow-accent-strong), var(--shadow-xl);
}

/* Decorative ring behind avatar */
.about__avatar::before {
  content:       '';
  position:      absolute;
  inset:         -6px;
  border-radius: var(--radius-full);
  background:    conic-gradient(
                   var(--color-accent) 0deg,
                   transparent 90deg,
                   var(--color-accent) 180deg,
                   transparent 270deg,
                   var(--color-accent) 360deg
                 );
  opacity:       0.25;
  z-index:       -1;
}

@media (max-width: 768px) {
  .about__avatar img {
    width:  160px;
    height: 160px;
  }
}

/* ----------------------------------------------------------
   PROFESSIONAL STATEMENT
---------------------------------------------------------- */

.about__text {
  grid-area: text;
  align-self: center;
}

.about__statement {
  font-size:   var(--text-base);
  line-height: var(--leading-relaxed);
  color:       var(--color-text-secondary);
  max-width:   70ch;
}

/* ----------------------------------------------------------
   STAT CARDS
   Three cards in a row below the text.
   Mobile: wraps to 3-column row still, or single column.
---------------------------------------------------------- */

.about__stats {
  grid-area:       stats;
  list-style:      none;
  display:         flex;
  gap:             var(--space-5);
  align-self:      start;
  justify-content: center;
  width:           100%;
  max-width:       860px;
  margin-inline:   auto;   /* centered on the page */
}

@media (max-width: 480px) {
  .about__stats {
    flex-direction: column;
    width: 100%;
  }
}

.about__stat-card {
  flex:            1;
  min-width:       0;
  background:      var(--color-surface-1);
  border:          1px solid var(--color-border);
  border-radius:   var(--radius-lg);
  padding:         var(--space-5) var(--space-6);
  display:         flex;
  flex-direction:  column;
  gap:             var(--space-2);
  text-align:      center;
  transition:
    border-color var(--duration-base) var(--ease-out),
    box-shadow   var(--duration-base) var(--ease-out),
    transform    var(--duration-base) var(--ease-out);
}

.about__stat-card:hover {
  border-color: var(--color-border-accent);
  box-shadow:   var(--shadow-accent);
  transform:    translateY(-2px);
}

.about__stat-value {
  font-size:   var(--text-3xl);
  font-weight: var(--font-black);
  line-height: 1;
  color:       var(--color-accent);
  font-variant-numeric: tabular-nums;
}

.about__stat-label {
  font-size:      var(--text-xs);
  font-weight:    var(--font-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color:          var(--color-text-secondary);
}

@media (max-width: 768px) {
  .about__stats {
    width: 100%;
  }
}