/* ==========================================================================
   a-propos.css — "À propos" page (/a-propos/). Requires base.css.
   Built on the shared system: .page-title, .subtitle (base.css), the
   --vw / --u scale, --block-wide and --radius-media.
   ========================================================================== */

/* ==========================================================================
   About — photo + text, two columns (grid shared with .path)
   - desktop (≥ 1200px): two equal halves on 90vw; the 3:2 photo fills 93%
     of its half, the text block is centred against it both ways;
   - tablet (811–1199px): still two halves, the photo fills its whole half;
   - mobile (≤ 810px): photo on top, then the text, on the page gutters.
   Beyond 1920px everything follows the slowed --vw / --u scale, so the
   section gains margin around it rather than growing.
   ========================================================================== */

/* Shared two-column geometry: the about section and the path section below
   the carousel use the very same grid, so their columns align exactly.
   Two equal halves on 90vw (wider than --block-wide), centred on the canvas. */
.about,
.path {
  --about-gap: calc(3 * var(--vw));
  /* Desktop: the page intro, the about section and the logos carousel fit in
     the first screen (16:9 reference, browser chrome included). Sizes follow
     the viewport height:
     - --about-space: margin above the about section;
     - --about-space-below: margin below it, i.e. the space above the logos
       carousel (a little more, so the carousel reads as its own band);
     - --about-intro: everything above it (navbar, title, subtitle), measured
       at ≈ 25vw on the desktop scale;
     - --about-room: height left for the photo once the intro, the margins and
       the logo row (≈ 50u + a little air) are taken;
     - --about-visual-width: width of the photo in its half (see .about__visual),
       also given to the left path column so both start on the same line. */
  --about-space: min(4 * var(--vw), 4 * var(--viewport-height) / 100);
  --about-space-below: calc(2.2 * var(--about-space));
  --about-intro: calc(25 * var(--vw));
  --about-room: calc(
    var(--viewport-height) - var(--about-intro) - var(--about-space)
      - var(--about-space-below) - 66 * var(--u)
  );
  --about-visual-width: clamp(50%, 1.5 * var(--about-room), 93%);

  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: var(--about-gap);
  width: calc(90 * var(--vw));
}

.about {
  /* The photo sits a little smaller, centred in its half. */
  align-items: center;
  margin: var(--about-space) auto var(--about-space-below);
}

/* Visual: real image or placeholder, same box either way. Up to 93% of its
   half, but no taller than the room left on screen (3:2, so width = 1.5 ×
   height); never under half of its column on very short windows. When the
   photo gets shorter than the text, the row simply follows the text. */
.about__visual {
  width: var(--about-visual-width);
  justify-self: center;
  margin: 0;
}

.about__media {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-media);
}

/* Temporary visual: neutral tones of the site palette (same as the
   portfolio placeholders). No external file. */
.about__media--placeholder {
  background: linear-gradient(135deg, #ececf1, #e2e2ea);
}

/* Text: title and paragraphs centred, the block kept to a comfortable
   reading width and centred both ways against the photo. */
.about__content {
  align-self: center;
  width: 100%; /* the paragraphs span the whole text column */
  text-align: center;
}

.about__title {
  font-weight: 600;
  font-size: min(3 * var(--vw), 58 * var(--u));
  line-height: 1.1;
  margin-bottom: calc(1.6 * var(--vw));
}

.about__text {
  font-size: max(var(--text-min), 0.95 * var(--vw));
  font-weight: 300;
  line-height: 1.6;
  text-align: left;
  color: var(--color-text-muted);
  text-wrap: pretty;
}

.about__text + .about__text {
  margin-top: 1.1em;
}

/* CTA: the shared component, untouched. Only its box is adjusted: the
   default min-height adds empty space under the button, which would push
   the visual centre of the text block upwards. A plain top margin keeps
   title + paragraphs + button one block, centred against the photo by the
   grid (align-self on .about__content), whatever its height. */
.about .btn-container {
  position: relative; /* reference box of the arrow */
  min-height: 0;
  margin-top: calc(2.4 * var(--vw));
}

/* Hand-drawn arrow, left-aligned in the text column, its drawn top level
   with the top of the CTA. Out of the flow (absolute), so it never changes
   the height of the text block nor its vertical centring against the photo.
   The PNG is a square with transparent margins: the drawing starts at
   ~24.3% of its height and ~2.8% of its width, hence the negative offsets
   (in % of the width, since the image is square). */
.about__arrow {
  /* Also bounded by the screen height: the drawing hangs ≈ 0.55 × its size
     below the CTA top, and must stay clear of the logos on short screens. */
  --arrow-size: min(10 * var(--vw), 15 * var(--viewport-height) / 100);
  --arrow-shift: calc(2 * var(--vw)); /* inset from the column's left edge */

  position: absolute;
  top: calc(-0.243 * var(--arrow-size));
  left: calc(var(--arrow-shift) - 0.028 * var(--arrow-size));
  width: var(--arrow-size);
  height: auto;
  pointer-events: none;
}

/* ==========================================================================
   Logos carousel (component in base.css): spacing on this page only.
   The section above already ends with its own bottom margin.
   ========================================================================== */

.tools {
  margin-bottom: calc(8 * var(--vw));
}

/* ==========================================================================
   Path — school path and work experience, two columns (shared grid with
   .about, see top of file). Each column is a <section> with its title; the
   entries (schools, diplomas, companies, roles, periods…) will follow the
   title inside the same column. The height follows the content.
   ========================================================================== */

.path {
  align-items: start; /* columns of different lengths stay top-aligned */
  margin: 0 auto calc(8 * var(--vw));
}

/* Column ending with a CTA: it stretches to the height of the row (set by
   the longer column) and the CTA takes the space left under its entries,
   centred in it both ways. If this column becomes the longer one, the CTA
   simply follows its entries with its own minimum height. */
.path__column--cta {
  align-self: stretch;
  display: flex;
  flex-direction: column;
}

/* Takes the free space and centres the button in it both ways. The
   min-height gives the button its air when there is no free space left,
   without any margin that would shift it off-centre. */
.path__cta {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100 * var(--u));
}

/* Left column: same width and centring as the photo above, so its content
   starts exactly on the photo's left edge. The right column starts on the
   text column's edge, like the about text. */
.path__column:first-child {
  width: var(--about-visual-width);
  justify-self: center;
}

.path__title {
  font-weight: 600;
  font-size: clamp(1.5rem, 2 * var(--vw), 38 * var(--u));
  line-height: 1.2;
  color: var(--color-accent);
}

/* One entry of a column (a training, a job…). Two tracks: title then
   description on the left, the dates on the right. The dates span both
   rows and sit vertically centred on them, halfway between the top of the
   title and the end of the description, whatever its length. The right
   track is reserved for them, so the description stops short of the
   column edge. */
.path__entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: calc(3 * var(--vw));
  margin-top: calc(1.2 * var(--vw));
}

/* Every entry ends with a black line across the whole column, drawn by the
   entry itself (no extra markup to maintain): lines between entries and
   one under the last. Same space above and below each line. */
.path__entry {
  padding-bottom: calc(1.6 * var(--vw));
  border-bottom: 1px solid var(--color-text);
}

.path__entry + .path__entry {
  margin-top: 0;
  padding-top: calc(1.6 * var(--vw));
}

.path__entry > * {
  grid-column: 1;
}

.path__entry > .path__entry-date {
  grid-column: 2;
  grid-row: 1 / span 2; /* title row + description row */
  align-self: center;
}

.path__entry-date {
  font-size: max(0.8125rem, 0.75 * var(--vw));
  font-weight: 400;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: var(--color-text);
}

.path__entry-title {
  font-weight: 500;
  font-size: clamp(1.0625rem, 1.25 * var(--vw), 24 * var(--u));
  line-height: 1.3;
  color: var(--color-text);
}

/* Entry description: styled by .about__text (same paragraphs as the about
   section); only its distance to the entry title is set here. */
.path__entry-text {
  margin-top: 0.6em;
}

/* ==========================================================================
   Social invitation: the shared .page-title (with its strokes), used as a
   section heading. The space above it is the carousel's bottom margin, so
   its own top margin (meant for the top of a page) is removed.
   ========================================================================== */

.socials__title {
  margin-top: 0;
}

/* Space between the card and the next section. */
.socials {
  padding-bottom: calc(5 * var(--vw));
}

/* ==========================================================================
   Recent projects: shared .section-heading + .project-grid (base.css).
   The CTA card below (.projet) brings its own top margin.
   ========================================================================== */

/* CTA under the grid: the shared component, untouched; only its box gets a
   plain top margin instead of the default min-height (same as in .about). */
.recent__cta {
  min-height: 0;
  margin-top: calc(3 * var(--vw));
}

/* ==========================================================================
   Tablet (≤ 1199px)
   ========================================================================== */

@media (max-width: 1199px) {
  /* Scrolling composition: regular section rhythm, photo fills its half. */
  .about {
    margin: calc(8 * var(--vw)) auto;
  }

  /* Half a tablet screen is already compact: the photo (and the left path
     column aligned on it) fill their half. */
  .about,
  .path {
    --about-visual-width: 100%;
  }

  /* Scaled to the room left of the centred CTA, so it never touches it. */
  .about__arrow {
    --arrow-size: calc(22vw - 6.75rem);
    --arrow-shift: 1vw;
  }

  .about__title {
    font-size: max(1.625rem, 3 * var(--vw));
  }

  .about__text {
    line-height: 1.5;
  }
}

/* ==========================================================================
   Mobile (≤ 810px)
   ========================================================================== */

@media (max-width: 810px) {
  /* Shared grid: one column, back on the page gutters. */
  .about,
  .path {
    grid-template-columns: minmax(0, 1fr);
    width: var(--block-wide);
  }

  .about {
    row-gap: clamp(2rem, 9vw, 3rem);
    margin: clamp(3rem, 14vw, 5rem) auto;
  }

  /* School path first, then work experience (DOM order). */
  .path {
    row-gap: clamp(2rem, 9vw, 3rem);
    margin-bottom: clamp(3rem, 14vw, 5rem);
  }

  .path__title {
    font-size: clamp(1.375rem, 6vw, 1.75rem);
  }

  .path__entry {
    margin-top: clamp(0.75rem, 3vw, 1rem);
  }

  .path__entry {
    padding-bottom: clamp(1.25rem, 5vw, 1.75rem);
  }

  .path__entry + .path__entry {
    margin-top: 0;
    padding-top: clamp(1.25rem, 5vw, 1.75rem);
  }

  .path__entry-title {
    font-size: clamp(1rem, 4.2vw, 1.125rem);
  }

  .about__content {
    max-width: 32rem;
    margin-inline: auto;
  }

  .about__title {
    font-size: clamp(1.625rem, 7.5vw, 2.5rem); /* same as .section-heading */
    margin-bottom: clamp(1rem, 5vw, 1.5rem);
  }

  .about__text {
    font-size: clamp(var(--text-min), 3.8vw, 1.125rem); /* same as .subtitle */
    line-height: 1.6;
  }

  .about .btn-container,
  .recent__cta {
    margin-top: clamp(1.75rem, 8vw, 2.5rem);
  }

  /* The logos already carry 15vw of vertical margin on mobile (base.css). */
  .about {
    margin-bottom: 0;
  }

  .tools {
    margin-bottom: clamp(1rem, 6vw, 2.5rem);
  }

  .socials {
    padding-bottom: clamp(2rem, 10vw, 4rem);
  }

  /* Stacked layout: the arrow belongs to the side-by-side composition. */
  .about__arrow {
    display: none;
  }
}