/* =========================================================
   Lajos Tamás Jakab — Portfolio
   About page
   Design source: Figma "Portfolio_website" — About page (node 76:6)
   Reuses .site-header/.nav-link/.section-title (style.css) and the
   .grid-4/.span-1/.span-2/.text-block 4-column system (project.css)
   for consistency with the rest of the site.
   ========================================================= */

.about-page {
  /* Without this, .about-container's first child (the DOWNLOAD RESUME
     button) sits flush against the sticky header's bottom edge with
     zero gap — matches .project-page's own top padding for the same
     breathing room other pages already get below their header/hero. */
  padding-top: clamp(24px, 4vw, 40px);
  padding-bottom: clamp(96px, 14vw, 160px);
}

.about-container {
  /* Shared container measure — see the CONTAINER note at the top of
     style.css. Was the 1194px literal; --container-max now holds it. */
  max-width: calc(var(--container-max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* Download button row: right-aligned, sits above the ABOUT title */
.download-row {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

.pill-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  border: none;
  background: var(--color-icon-bg);
  color: var(--color-bg);
  font-family: inherit;
  font-weight: 500;
  font-size: 20px;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.2s ease, background 0.2s ease;
}

.pill-button:hover,
.pill-button:focus-visible {
  transform: translateY(-3px);
  background: #ffffff;
}

.pill-button img { display: block; }

.about-content,
.about-sections {
  display: flex;
  flex-direction: column;
  gap: 80px;
  width: 100%;
}

/* =========================
   Introduction (profile photo + flowing bio text)
   ========================= */

/* project.css's .span-2 bakes in flex-column + 32px gap, which is right
   for a column of separate paragraphs but wrong here — the photo is a
   single child and the bio is one flowing text block, neither wants
   that gap inserted between children. Grid placement only. */
.grid-span-2 {
  grid-column: span 2;
}

.profile-image {
  width: 100%;
  aspect-ratio: 580 / 478;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.profile-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* A single flowing bio, not a list of separate 32px-spaced paragraphs —
   matches Figma's own text node, which uses one text box with plain
   line breaks (including one intentional blank line) rather than gapped
   paragraph blocks. */
.intro-text {
  font-size: 32px;
  line-height: 1.5;
  margin: 0;
  /* Sits beside .profile-image, whose top is a hard image edge. Aligning
     the two boxes — which is what the grid does on its own — is not the
     same as aligning what you see: line-height 1.5 puts 12px of leading
     and font ascent above the first line's ascenders at 32px, so the
     copy read as starting a third of a line below the photo. Giving that
     back lines the text up with the picture. Ratio of the font-size
     (12/32), not a flat pixel value, so it holds if the size changes. */
  margin-top: -0.375em;
}

.intro-text p {
  margin: 0;
}

/* =========================
   4-column photo grids (Recently / Not so long ago / Time off / The fur on my clothes)
   ========================= */

.about-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* Bare 1fr, deliberately: these rows KEEP their automatic content
     minimum so they can grow past the aspect-ratio below when the text
     cell genuinely needs it. .grid-text spans both rows, and as the grid
     narrows its copy gets taller while the proportional height gets
     shorter — the two work against each other, and "Recently" (the
     longest paragraph) overflowed its cell by up to 146px around 910px.
     Letting the rows grow absorbs that instead of spilling text.
     This only works because .grid-img's <img> is positioned absolutely
     (see below) and so contributes nothing to the rows' intrinsic
     height. With the image in normal flow its natural pixel height IS
     the row's content minimum, which is what pinned this grid at 805px
     tall (386px rows, cells at 0.71 aspect instead of the design's
     1.036) before the images were taken out of flow. */
  grid-template-rows: repeat(2, 1fr);
  gap: 32px;
  width: 100%;
  /* Proportional height, not the flat 562px this used to carry. The
     columns are 1fr and shrink with the container, but a fixed height
     kept the rows at 265px regardless: at a 910px viewport the cells
     measured 172x265, turning the design's near-square 274x265 crop
     strongly portrait. object-fit: cover then discarded most of each
     photo, and the per-image object-position values hand-tuned in
     about.html no longer framed what they were tuned to frame.
     Deriving the height from the width via the design's own 1194x562
     box keeps every cell's aspect ratio constant at any container
     width, so the crops stay exactly as tuned. At >= the full 1194px
     measure this resolves to the same 562px as before. */
  aspect-ratio: 1194 / 562;
  /* min-height is left at its `auto` default on purpose (.about-grid is a
     flex item of .about-sections, so that resolves to its content-based
     minimum). That minimum is what lets the grid outgrow the
     aspect-ratio when the text cell needs more room than the proportion
     allows — pin it to 0 and the ratio wins outright, the rows stay
     short, and the copy spills out of its cell instead.
     This was 0 while the images were still in normal flow, because back
     then the content minimum came from their intrinsic pixel heights and
     pinned the grid at 805px tall. With the images positioned absolutely
     the only thing left feeding this minimum is the text, which is
     exactly what it should track. */
}

.grid-img {
  border-radius: var(--radius-lg);
  overflow: hidden;
  /* Containing block for the absolutely-positioned image below. */
  position: relative;
}

/* Absolute, not in normal flow. An in-flow <img> with height:100% against
   an indefinite row falls back to its own intrinsic pixel height for
   intrinsic sizing, so a 1600px-tall photo became the grid row's content
   minimum and blew the whole grid off its proportions. Out of flow it
   contributes nothing to sizing, which is what lets .about-grid's rows
   use a real content minimum (driven only by the text cell) while the
   photos still fill their cell exactly as before. Painting is unchanged:
   inset:0 + object-fit:cover fills the same box, and the per-image
   object-position values in about.html still apply. */
.grid-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.grid-text {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.grid-text h2 {
  margin: 0;
  /* Scales instead of holding a flat 32px. .grid-text occupies one of
     the four columns, so between 900px and the design width it is only
     185-275px wide, and a fixed 32px heading wrapped "The fur on my
     clothes" onto four lines in a sliver. clamp() tops out at the
     design's own 32px, which is reached by ~1334px — i.e. everywhere
     the container is at its full 1194px measure, so the desktop
     appearance is unchanged. */
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 500;
  line-height: 1.5;
  /* Same leading trim as .intro-text above, and for the same reason:
     .grid-text sits in a row of photos and this heading is the first
     thing in it, so its ascender line — not its box top — is what has to
     meet the photo edges. Measured 10.13px of dead space at the 26.17px
     size this lands on around 1090px; the ratio is the same 0.387 at
     every clamp step because line-height stays 1.5. */
  margin-top: -0.387em;
}

.grid-text p {
  margin: 0;
  /* Scales with the heading, and for a second reason beyond readability:
     .grid-text is the only cell that can push .about-grid past its
     aspect-ratio, and every pixel it grows makes the photo cells taller
     than wide again — the exact crop distortion the ratio exists to
     prevent. Shrinking the copy in step with the shrinking grid keeps
     that growth small, so the cells stay near the design's 1.036 aspect
     much further down. Tops out at the design's 20px by ~1176px, i.e.
     wherever the container is at or near its full measure. */
  font-size: clamp(16px, 1.7vw, 20px);
  line-height: 1.5;
}

/* =========================
   Responsive
   ========================= */

/* ---------- tablet: <= 900px ----------
   This reflow briefly lived at 1360px, to widen .grid-text (a single
   column carrying a 32px heading, ~185px at a 950px viewport). That was
   a bad trade and is reverted: at 1360 the 2-column fallback renders
   574x574 photos and turns one section into a 1180x1957px wall of
   squares, so every normal laptop got a far worse page than the mildly
   tight text column it was meant to cure. The 4-column layout holds down
   to 900px as it always did; the heading scales instead (see
   .grid-text h2 above), which fixes the readability without touching
   the composition. */
@media (max-width: 900px) {
  .about-grid {
    /* Cancels the proportional height: once the cells are re-placed by
       the resets below, row heights come from content plus each
       .grid-img's own 1/1 ratio, not from the grid's outer box. */
    aspect-ratio: auto;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
  }

  .about-grid > * {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  .grid-text {
    grid-column: 1 / -1 !important;
  }

  .grid-img {
    aspect-ratio: 1 / 1;
  }

  /* Drop the leading trims. They exist to line these blocks up with a
     photo sitting beside them, and from here down both are full-width
     with the photos above or below instead — so there is no edge left to
     align to and the negative margin would just eat 10-12px out of the
     gap above. */
  .intro-text,
  .grid-text h2 {
    margin-top: 0;
  }
}

/* ---------- mobile: <= 600px ---------- */
@media (max-width: 600px) {
  /* Title and copy full width, then the five photos as a filled 2x3 grid.

     Two-up rather than one column: four sections of five full-width photos
     is a very long scroll for what reads as a contact sheet. Same reasoning
     as the Mercedes prototyping grid.

     Five photos do not fill six cells, so rather than leave a hole (or wedge
     the copy into it — tried, and the copy is so much taller than a 155px
     photo that its row came out ragged) each section's double-size photo
     keeps being double-size here. That is exactly one photo per section on
     desktop, so the count works out: 2 + 4 singles = the full 6 cells.

     `order` is load-bearing, not tidiness. Two of the four sections have
     their copy AFTER the photos in the markup — that is what makes the
     desktop layout alternate sides — so without it the text would sit at
     the BOTTOM on those two. The double-size photo leads the grid for the
     same reason: placed anywhere else, auto-placement cannot fit it beside
     a single and leaves gaps around it. */
  .about-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .grid-text {
    order: -2;
  }

  .grid-img--wide,
  .grid-img--tall {
    order: -1;
  }

  /* Spans both columns, so its row is one photo tall. 2/1 rather than the
     exact (2 col + gap) / col ratio: that ratio shifts with the viewport,
     and the few px of difference is not worth a magic number. */
  .grid-img--wide {
    grid-column: span 2 !important;
    aspect-ratio: 2 / 1;
  }

  /* Spans both rows instead, keeping the tall portrait shape it has on
     desktop. aspect-ratio released so the two rows it straddles size it. */
  .grid-img--tall {
    grid-row: span 2 !important;
    aspect-ratio: auto;
  }

  .intro-text {
    font-size: 24px;
  }
}