/*
  FILE: about.css
  PURPOSE: Layout styles for the About Me page. No sidebar nav (unlike
  the Work page) -- instead the shared floating nav bar (float-nav.css/
  float-nav.html, /src/components/shared/), fixed near the top of the
  viewport at all times. This page originally had its own inline
  ".about-float-nav*" version of that bar; it moved out to the shared
  files once the v2 ("-v3" suffixed) project pages needed the exact
  same thing, so this file only has page-specific layout now: the
  header's own top-clearance padding (reserves space for the floating
  nav, which itself isn't styled here any more), the content column,
  and the 3 text + image subsections. Content spans the full 1200px
  column on its own, same change Landing V3 made when it dropped its
  own sidebar. Colours/fonts/sizes come from tokens.css, footer styling
  comes from footer.css, floating nav styling comes from float-nav.css
  (none of those duplicated here).
*/

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--color-bg-content); /* per Lucrecia's request, matches the max-width box's own colour, was --color-bg-default */
  color: var(--color-text-dark);
}

/* ---- Outer layout: no more nav column, .about-content is the only
   child and simply fills the bordered box (identical approach to
   Landing V3's own .work-layout once its sidebar was removed). Flush
   with the true top of the page now (no top margin) -- the floating
   nav sits fixed on top of it instead, .about-header's own transparent
   background and top padding below is what keeps its title clear of
   the nav rather than a gap reserved up here. ---- */

.about-layout {
  max-width: 1200px;
  margin: 0 auto;
  box-sizing: border-box; /* keeps the outline below flush with the 1200px edge, not 2px wider */
  background: var(--color-bg-content); /* per Lucrecia's request, matches the Work page's own bordered box, every breakpoint */
  border: 1px solid var(--color-text-dark);
  /* No bottom border: the footer sits directly below with its own
     border-top (footer.css), so a bottom border here would double up
     with it, 2px within this box's own 1200px width where the two
     overlap, next to the footer's single 1px everywhere wider. */
  border-bottom: none;
}

.about-content {
  box-sizing: border-box;
}

/* ---- Page header: "About me" title, flush with the top of the page,
   transparent background so the floating nav reads as floating on top
   of it rather than clashing with a different-coloured banner behind
   it. Top padding is what keeps the title clear of the nav instead of
   a fixed height + bottom-anchored position (the old sidebar-nav-logo-
   alignment reasoning for that no longer applies now there's no
   sidebar) -- nav's own bottom edge (top + height) plus a 30px gap,
   same technique already used for Landing V3's mobile work-header. ---- */

.about-header {
  background: transparent;
  border-bottom: 1px solid var(--color-text-dark);
  padding: 149px 30px 30px; /* top: 50 (nav top) + 69 (nav height) + 30 (gap) */
  box-sizing: border-box;
}

.about-header__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--font-size-h1); /* this page's only h1 */
  font-weight: var(--weight-medium);
  color: var(--color-text-dark);
}

@media (max-width: 768px) {
  .about-header {
    padding-top: 119px; /* 20 (nav top) + 69 (nav height) + 30 (gap), nav top was 40 */
  }
}

/* ---- Dashed divider between subsections ---- */

/* Margin (not just placed inside a padded parent) so it insets by
   exactly the page's own 30px side padding wherever it sits between
   sections, matching .project-section's own side padding on the Work
   page. Same dash pattern as work.css's .divider--dashed-h. */
.about-divider {
  height: 1px;
  margin: 0 30px;
  background-image: repeating-linear-gradient(
    to right,
    var(--color-text-dark) 0,
    var(--color-text-dark) 5px,
    transparent 5px,
    transparent 10px
  );
}

/* ---- Subsection: text (max 540px) beside image(s) ---- */

.about-row {
  display: flex;
  /* Top-aligned, not bottom like the Work page's own rows -- Work's
     images are all cropped to a fixed height so the mismatch with the
     text column is small either way, but these are real photos at
     their own natural aspect ratio (much taller than the text in
     places), bottom-aligning left an odd empty gap above the text. */
  align-items: flex-start;
  gap: 30px; /* matches the Work page's own image/text gap, not specified otherwise so borrowed for consistency */
  padding: 50px 30px;
  box-sizing: border-box;
}

.about-row__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px; /* per the general site-wide rule for stacked text blocks */
  max-width: 540px;
  min-width: 0;
}

.about-row__text p {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  font-weight: var(--weight-regular);
  color: var(--color-text-dark);
}

/* Bold lead line of each of the 3 subsections, all caps, per
   Lucrecia's request -- each one is its own first <p> containing just
   the <strong> lead sentence, copy itself stays normal-case in the
   HTML per the site's usual convention. */
.about-row__text p:first-child strong {
  text-transform: uppercase;
}

/* Desktop only, per Lucrecia's request -- mobile keeps the site-wide
   default size. */
@media (min-width: 769px) {
  .about-row__text p {
    font-size: 18px;
  }

  /* Text starts 50px below the top of the image beside it, instead of
     lining up flush with it (.about-row's own align-items: flex-start).
     Desktop only: on mobile the image sits above the text, not beside
     it (order: 1 in the mobile query below), so "distance from the
     image's top" isn't a beside-each-other relationship there the same
     way -- .about-row's existing 30px gap already separates them. */
  .about-row__text {
    margin-top: 50px;
  }
}

.about-row__image-col {
  flex: 1;
  min-width: 0; /* lets the column shrink below the image's own intrinsic width */
}

/* Subsection 2 only: 2 images stacked instead of 1, same column the
   single image sits in for the other 2 subsections. */
.about-row__image-stack {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 30px; /* not specified, matches the general spacing unit used elsewhere on the site */
}

.about-row__image {
  display: block;
  width: 100%;
  height: auto; /* keeps each photo's own real aspect ratio, no cropping */
  border-radius: 5px;
  box-shadow: var(--shadow-image);
}

/* Not specified in the brief, but every other "text beside image" row
   on this site stacks on mobile (text first, image below), same
   technique as .project-row's own mobile rule in work.css -- otherwise
   a 540px text column plus an image can't fit a narrow viewport at all. */
@media (max-width: 768px) {
  .about-row {
    flex-direction: column;
    align-items: flex-start;
    padding: 50px 30px;
  }

  .about-row__text {
    max-width: none;
  }

  .about-row__image-col,
  .about-row__image-stack {
    order: 1;
    width: 100%;
  }
}