/*
 * Path: css/components/about.css
 * Purpose: About section layout and media presentation
 * Depends on: css/core/tokens.css, css/core/layout.css, css/core/typography.css
 * Version: 0.9.0 (pre-1.0)
 */

/* Container width specific to About */
#about .container{
  width: min(980px, 92vw);
}

/* Desktop/tablet ≥768px: photo on the right, head and body in the left column */
.about-wrap{
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 450px));
  grid-template-areas:
    "head  media"
    "body  media";
  justify-content: center;
  align-items: start;
  gap: 28px;
}
.about-head{  grid-area: head; }
.about-body{  grid-area: body; }
.about-media{ grid-area: media; }

@media (max-width: 767.98px){
  /* Mobile: heading, then photo, then body */
  .about-wrap{
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "media"
      "body";
    justify-items: center;
    gap: 18px;
  }
  /* Keep body text left-aligned on mobile while the block is centered */
  .about-body{ text-align: left; }
}

/* Minor rhythm polish */
.about-head h1{ margin-top: 0; }
.about-body > :is(p, ul){ margin-bottom: 1em; }
.about-body ul{ padding-inline-start: 1.25rem; }

/* Media block */
.about-media{ margin: 0; }
.about-portrait{
  width: clamp(220px, 28vw, 360px);
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;

  /* brand-friendly neutral monochrome */
  filter: grayscale(.92) saturate(.2) contrast(1.06) hue-rotate(-6deg) brightness(1.02);

  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

/* Slightly different tone in dark for legibility */
body[data-theme-tone="dark"] .about-portrait{
  filter: grayscale(.92) saturate(.2) contrast(1.08) hue-rotate(-4deg) brightness(1.08);
  box-shadow: var(--shadow-sm);
}

/* Copy column tweaks (kept for parity with earlier styles) */
.about-copy > :is(p, ul){ margin-bottom: 1em; }
.about-copy ul{ padding-inline-start: 1.25rem; }