/*
  ABOUT SECTION STYLES
  Merged into index.html as the #about section — not a standalone page.
*/

.about-hero {
  position: relative;
  padding-block-start: var(--space-6);
  padding-block-end: var(--space-5);
  /* Mobile fallback: solid gradient wash, no image request — see
     assets/README.md for the project's photo-background convention. */
  background: linear-gradient(160deg, var(--color-accent-amber-200), var(--color-accent-amber-100));
}

@media (min-width: 600px) {
  .about-hero {
    /* Same full-bleed fixed-background treatment as the home hero (see
       home.css .hero) — different source image, same mechanism. */
    background-image:
      linear-gradient(160deg, rgba(250, 246, 239, 0.78), rgba(250, 246, 239, 0.6)),
      url('../assets/images/Backgrounds/Slide-background-clear6.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
  }
}

.about-hero__title {
  font-size: var(--fs-display);
  max-width: 16ch;
}

.about-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 1024px) {
  .about-layout {
    /* Bare 1fr let the aside get pinched to ~145px right at this
       breakpoint, once the prose column (capped at --prose-max-width)
       and the grid gap ate most of the available width — too narrow for
       a 4:5 portrait to read. minmax(280px, 1fr) gives the aside a floor
       it claims first; the prose column (already flexible via its own
       minmax(0, ...)) yields width if the viewport is tight. */
    grid-template-columns: minmax(0, var(--prose-max-width)) minmax(280px, 1fr);
    align-items: start;
  }

  .about-layout__aside {
    position: sticky;
    top: calc(var(--space-6) + 64px);
  }
}

.about-timeline {
  display: grid;
  gap: var(--space-5);
  /* Double the .flow default (var(--space-3)) for extra separation from
     the "Seven years at Microsoft" paragraph above it. */
  margin-top: var(--space-5);
}

.about-timeline__item {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: var(--space-1);
  padding-block: var(--space-4);
  border-top: var(--border-hairline);
}

.about-timeline__item:first-child {
  border-top: none;
  padding-top: 0;
}

.about-timeline__period {
  font-size: var(--fs-meta);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--color-text-muted);
}

@media (min-width: 600px) {
  .about-timeline__item {
    grid-template-columns: 10rem 1fr;
    gap: var(--space-4);
  }

  /* At this breakpoint the period and blurb sit side by side, not
     stacked — override the global p + p sibling margin (base.css) so the
     blurb doesn't get pushed down relative to the period label. */
  .about-timeline__item p + p {
    margin-top: 0;
  }
}

.about-looking-for {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background-color: var(--color-bg-alt);
}

.about-portrait {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  /* No-op on the current placeholder <div> (object-fit only affects
     replaced elements), but needed the moment this becomes a real <img>
     so a photo crops to the 4:5 box instead of stretching to fill it —
     same fix already applied to .cs-media elsewhere on the site. */
  object-fit: cover;
}