/* ---------- Info page ----------
   Same structure as a project page (css/project.css, docs/project-page.md):
   headline on top, then labelled 16px columns, then a hairline list.
   Everything sits on the shared 12-column grid (css/grid.css) with no
   padding, margins or gaps invented for one block: the grid decides. Column
   anchors are shared by every row so the page reads as three vertical lines:
   1, 6 and 10.

   [ headline  cols 1–8 ]
        ↕ clamp(80px, 12vw, 200px) + 12px (same gap as the project pages)
   ──────────── hairline ────────────
   [ headline 1–8 ]
        ↕ clamp(80px, 12vw, 200px) + 12px
   [ Services | list 1–4 ] [ Sectors | list 5–8 ] [ Clients | list 9–12 ]
   (one block, one row: each word sits at the left of its own list)
   ──────────── hairline ────────────
   [ Approach 1–4 ]  [ Reach / Process / Partnership, stacked, 7–10: label above, text below ]
   [ portrait 3 cols ], under the Approach text
        ↕ 100px
   [ Experience (no label): year 1–2 · place 3–6 (under the Services list) · what happened 7–12 (under the Approach texts), hairlines ]
   (The portrait, Assets/Info/Jac-Portrait.jpg, sits under the Approach text, 3 columns.) */

:root {
  /* Drop that puts the cap-top of 16px/1.3 text on the x-height line of the
     big words (Archivo 500: x-height .526em, cap .686em, ascent .88, descent
     .21; words are line-height 1.1): word baseline is .885em from its line
     top, so its x-height line is .359em down; the text's cap-top is 4.78px
     below its own line top. The clamp() is the word's font-size. */
  --info-xline: calc(clamp(28px, 2.5vw, 56px) * 0.359 - 4.78px);

  /* Hairlines between the experience rows. */
  --info-rule: rgba(17, 17, 17, 0.14);
}

[data-theme="dark"] {
  --info-rule: rgba(245, 245, 245, 0.22);
}

.info {
  padding-top: var(--content-top-space);
  padding-bottom: 200px;
}

/* ---- Headline + labelled columns ---- */
.info-header {
  align-items: start;
  /* Rows are separated by the margin on the items below, not by the grid gap. */
  row-gap: 0;
}

/* Same type as the Work opening paragraph (.work-intro-text,
   css/work-intro.css) and the project headlines (.project-title) — client
   request on those, change them together. Colour inherited from body's
   animated `color`. */
.info-title {
  grid-column: 1 / span 8;
  font-family: var(--font-body);
  font-size: clamp(28px, 2.5vw, 56px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

/* ---- Portrait block: the portrait, under the Approach text, on the left of
   the page. It is 3 page columns wide, starting on the column of the names in
   Experience (the block is the grid item; see below for tablets/phones). It's
   the last child of the Approach grid, so it opens its own row. ---- */
.info-approach {
  /* cqw below = 1% of this grid's width */
  container-type: inline-size;
}

.info-portrait-block {
  /* The portrait starts on the same column as the names in Experience
     (.info-row-name: column 3) and is 3 columns wide here. */
  grid-column: 3 / span 3;
  align-self: start; /* .info-approach aligns by baseline */
  margin-top: 64px;
  position: relative;
}

.info-portrait {
  width: 100%;
  overflow: hidden;
  border-radius: var(--nav-radius);
  background: var(--color-surface);
  transition: background-color 0.3s ease;
}

.info-portrait img {
  display: block;
  width: 100%;
  height: auto;
}


/* ---- Approach: big word on the left, three steps stacked on the right ---- */
.info-approach {
  margin-top: 100px;
  /* TRIAL: the cap-top of the first line of text on the right sits on the
     big word's x-height line (see --info-xline below). The previous version
     (client-approved) was `align-items: baseline` with no margin-top on
     .info-steps / .info-list ul: word baseline = first-line baseline. */
  align-items: start;
  row-gap: 0;
}

/* Same type as the headlines (see .info-title). */
.info-approach-title,
.info-block-title {
  grid-column: 1 / span 4;
  font-family: var(--font-body);
  font-size: clamp(28px, 2.5vw, 56px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.info-steps {
  margin-top: var(--info-xline);
  grid-column: 7 / span 4;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* Each step: its label on top, in the grey of the project pages' labels
   (.project-header-label, css/project.css), and the text below (client
   request, same look as the project pages). Earlier versions tried: label
   and text side by side in two columns, label in the big headline type, and a
   run-in label with a "tab" in the same paragraph. */
.info-step {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
}

.info-step-label {
  display: block;
  font-size: 16px;
  font-weight: 500;
  color: var(--nav-link-inactive);
  transition: color 0.3s ease;
}

/* Thin light-grey lines: above the approach and between it and the lists. */
.info-divider {
  grid-column: 1 / -1;
  border: 0;
  border-top: 1px solid var(--info-rule);
  transition: border-color 0.3s ease;
}

.info-divider--top {
  margin-top: 0;
  margin-bottom: 16px;
}

.info-label {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--nav-link-inactive);
  transition: color 0.3s ease;
}

/* Values inherit body's animated color, so they follow the theme fade. */
.info-value {
  color: inherit;
}

/* ---- Lists: services, sectors, clients — one block, one row: each group is
   its big word on the left and its list on the right, side by side ---- */
.info-media {
  margin-top: calc(clamp(80px, 12vw, 200px) + 12px);
  align-items: start;
  row-gap: 0;
}

/* A group spans 4 grid columns and splits them into two equal halves (2
   columns each, gutter included): word | list. */
.info-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--grid-gutter);
  /* Same trial as Approach (previously `align-items: baseline`). */
  align-items: start;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
}

.info-list--services {
  grid-column: 1 / span 4;
}

.info-list--sectors {
  grid-column: 5 / span 4;
}

.info-list--clients {
  grid-column: 9 / span 4;
}

.info-list ul {
  margin-top: var(--info-xline);
  list-style: none;
}

/* Small number at the top-left of each word (1, 2, 3): body text size, lighter
   weight, the grey of the labels (--nav-link-inactive; the hairline grey
   was too faint on white). Decorative: aria-hidden in the
   markup. `top` drops it so the top of its digits sits on the cap height of
   the big word: the word's cap-top is 0.187em below its line top (Archivo:
   ascent .88, descent .21, cap .698, line-height 1.1), the number's is 4.6px
   (16px, line-height 1.3), so it moves down 0.187 × word size − 4.6px. The
   clamp() is the word's font-size (same as .info-title) — change both
   together. */
.info-block-num {
  position: relative;
  top: calc(clamp(28px, 2.5vw, 56px) * 0.187 - 4.6px);
  display: inline-block;
  margin-right: 6px;
  vertical-align: top;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  color: var(--nav-link-inactive);
  transition: color 0.3s ease;
}

/* The big word shares the type of the Approach word (rule above) but sits in
   the first half of its group, not on the page columns. */
.info-list .info-block-title {
  grid-column: auto;
}

/* ---- Experience: year / place / what happened ---- */
.info-experience {
  margin-top: 100px;
  row-gap: 0;
}

.info-rows {
  grid-column: 1 / -1;
  list-style: none;
  border-bottom: 1px solid var(--info-rule);
  transition: border-color 0.3s ease;
}

/* A row is its own 12-column grid (same columns and gutter as the page grid
   it sits in, which has no side padding of its own here). */
.info-row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--grid-gutter);
  /* Same space above and below the text (it used to be 14px / 18px). */
  padding: 16px 0;

  border-top: 1px solid var(--info-rule);
  transition: border-color 0.3s ease;

  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
}

.info-row-year {
  grid-column: 1 / span 2;
  color: var(--nav-link-inactive);
  transition: color 0.3s ease;
}

.info-row-name {
  grid-column: 3 / span 4;
}

.info-row-text {
  grid-column: 7 / span 6;
  color: var(--nav-link-inactive);
  transition: color 0.3s ease;
}

/* ---------- Responsive ---------- */
/* Same breakpoint and approach as the project pages: everything goes to full
   width and stacks with a 32px gap. */
/* Between 1181 and ~1360px the three list groups side by side get too narrow
   (each list is only 2 page columns and some items wrapped), so they stack
   one group per row, full width, still word | list, from 1300px down. */
@media (max-width: 1360px) {
  .info-media {
    row-gap: 48px;
  }

  .info-media > .info-divider--top {
    margin-bottom: 0;
  }

  .info-list--services,
  .info-list--sectors,
  .info-list--clients {
    grid-column: span 12;
  }
}

@media (max-width: 1180px) {
  /* Phones and tablets: the portrait's own columns are set further down. */
  .info-portrait-block {
    margin-top: 16px;
  }


  .info-approach {
    row-gap: 32px;
    margin-top: 80px;
  }

  .info-title,
  .info-approach-title {
    grid-column: span 12;
  }

  /* Approach stacks here: the steps sit under the word, no x-line offset.
     8 columns wide (not 12) so the lines don't run to ~130 characters. */
  .info-steps {
    grid-column: 1 / span 8;
    margin-top: 0;
  }

  .info-divider--top {
    margin-top: 0;
    margin-bottom: 0;
  }

  .info-media {
    margin-top: 32px;
  }

  .info-row-year {
    grid-column: 1 / span 2;
  }

  .info-row-name {
    grid-column: 3 / span 4;
  }

  .info-row-text {
    grid-column: 7 / span 6;
  }
}

@media (max-width: 768px) {
  .info-experience {
    margin-top: 80px;
  }

  .info-row-year {
    grid-column: 1 / span 3;
  }

  .info-row-name {
    grid-column: 4 / span 9;
  }

  .info-row-text {
    grid-column: 4 / span 9;
    margin-top: 4px;
  }
}

/* ---------- Experience hover image (js/info-hover.js) ----------
   A small picture follows the cursor while it is over a row of the
   Experience list. Only where there is a real hover (mouse): on touch
   screens it's never created. */
.info-hover {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 800;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s ease;
  will-change: transform, opacity;
}

.info-hover.is-visible {
  opacity: 1;
}

.info-hover img,
.info-hover video {
  display: none;
  max-width: 240px;
  max-height: 240px;
  width: auto;
  height: auto;
  border-radius: var(--nav-radius);
  background: var(--color-surface);
}

.info-hover[data-kind="image"] img,
.info-hover[data-kind="video"] video {
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .info-hover {
    transition: none;
  }
}

/* Phones and tablets: half the space under the last block before the footer shows. */
@media (max-width: 1180px) {
  .info {
    padding-bottom: 100px;
  }
}

/* Phones and tablets: headline → the line above Services/Sectors/Clients at
   the same distance as the Work opening paragraph → "Selected Work" and the
   project headline → Client (88px: the halved 120px + --content-top-space of
   css/work-intro.css and css/work.css) — client request, change them together. */
@media (max-width: 1180px) {
  .info-media {
    margin-top: calc((120px + var(--content-top-space)) / 2);
  }
}

/* Phones and tablets: the line above Services/Sectors/Clients sits 16px over
   the first word, like the 16px between each Experience line and its text
   (.info-row padding); the groups keep 48px between them. */
@media (max-width: 1180px) {
  .info-media {
    row-gap: 0;
  }

  .info-media > .info-divider--top {
    margin-bottom: 16px;
  }

  .info-list ~ .info-list {
    margin-top: 48px;
  }
}

/* Tablets (768–1180px): the portrait is 5 columns wide (half the page, it
   came out ~1000px tall at 100%) and starts on the column of the names in
   Experience (.info-row-name: column 3 from 769px, column 4 at exactly 768px,
   where Experience still uses its phone columns). */
@media (min-width: 768px) and (max-width: 1180px) {
  .info-portrait-block {
    grid-column: 4 / span 5;
  }
}

@media (min-width: 769px) and (max-width: 1180px) {
  .info-portrait-block {
    grid-column: 3 / span 5;
  }
}

/* Phones: the portrait starts on the names' column (4, as in Experience) and
   runs to the right margin. */
@media (max-width: 767px) {
  .info-portrait-block {
    grid-column: 4 / -1;
  }
}

/* Phones and tablets: the line above "Approach" also sits 16px over its
   title, like Services and the Experience rows. The grid's 32px row-gap used
   to be the whole space under the line (a negative margin can't undo a
   row-gap: the row of a 1px line never gets shorter than 0), so the gap goes
   and the 32px between the title, the steps and the portrait block become
   margins (the portrait block's 16px + 32px = 48px, as before). */
@media (max-width: 1180px) {
  .info-approach {
    row-gap: 0;
  }

  .info-approach > .info-divider--top {
    margin-bottom: 16px;
  }

  .info-approach .info-steps {
    margin-top: 32px;
  }

  .info-approach .info-portrait-block {
    margin-top: 48px;
  }
}

/* Tablets (768–1180px): like on desktop, the Approach steps sit to the right
   of their word (second half of the page, where the lists of Services/
   Sectors/Clients also start). On phones they stay stacked under it. */
@media (min-width: 768px) and (max-width: 1180px) {
  .info-approach-title {
    grid-column: 1 / span 6;
  }

  .info-approach .info-steps {
    grid-column: 7 / span 6;
    margin-top: var(--info-xline);
  }
}

/* Phones: Services/Sectors/Clients keep word | list side by side (they used
   to stack), at the usual 16px; the Approach steps go full width under their
   word. The portrait gets the same space above (from the Approach text) as
   below (to the Experience line, 80px). */
@media (max-width: 767px) {
  .info-approach .info-steps {
    grid-column: 1 / -1;
  }

}

/* The same space above the portrait as below it, to the first Experience
   line (.info-experience margin-top: 80px up to 768px, 100px above). */
@media (max-width: 768px) {
  .info-approach .info-portrait-block {
    margin-top: 80px;
  }
}

@media (min-width: 769px) and (max-width: 1180px) {
  .info-approach .info-portrait-block {
    margin-top: 100px;
  }
}

/* Tablets (768–1180px): the headline is at most 8 columns wide (like the
   Work opening paragraph). */
@media (min-width: 768px) and (max-width: 1180px) {
  .info-title {
    grid-column: 1 / span 8;
  }
}

/* Phones: when a Services/Sectors/Clients item wraps ("Spanish National" /
   "Library"), its second line must read as part of the same item, not as the
   next one. So lines inside an item are tighter (1.15 instead of 1.3) and the
   items are 8px apart (client request). The list's drop is 1.2px bigger to
   keep the cap-top of the first line on the big word's x-height line: the
   tighter line box puts the cap-top (1.3 − 1.15) × 16px / 2 = 1.2px higher. */
@media (max-width: 768px) {
  .info-list ul {
    margin-top: calc(var(--info-xline) + 1.2px);
  }

  .info-list li {
    line-height: 1.15;
  }

  .info-list li + li {
    margin-top: 8px;
  }
}