/* =========================================================================
   Home — Featured Projects.

   A continuous editorial index on black: one wide row per project, the media
   on the left and the information panel on the right, hairline rules between
   them. Replaces the alternating case-study mosaic (home-grid.css).

   Proportions are taken from the reference recording, measured at a 1509px
   viewport:
     outer padding            15px each side
     media / info split       848 / 613  ->  58% / 42%
     media                    16:9, 1px hairline border
     row padding              17px top and bottom, 1px rule between rows
     heading                  cap 52px  -> 72.8px  -> 4.83vw
     project name             cap 26px  -> 36.4px  -> 2.41vw
     description / services   cap 13px  -> 18.2px  -> 1.21vw, 20px line pitch
   ========================================================================= */

.fp {
  --fp-pad: clamp(16px, 1.05vw, 30px);
  --fp-row-pad: clamp(10px, 1.13vw, 22px);

  /* the site header is fixed and transparent; the sticky heading has to clear
     it, which the reference (no fixed nav) did not have to do */
  --fp-nav: 62px;

  /* The sticky offset for a project row is the real rendered height of the
     heading block, so the two are derived from the same values rather than
     from a hardcoded number: padding-top + the heading's line box (line-height
     is 1, so that is its font-size) + padding-bottom + the 1px divider. */
  --fp-head-pad-top: calc(var(--fp-nav) + 8px);
  --fp-head-pad-bottom: clamp(12px, 1.35vw, 26px);
  --fp-heading-size: clamp(34px, 4.83vw, 104px);
  --fp-head-h: calc(var(--fp-head-pad-top) + var(--fp-heading-size)
                    + var(--fp-head-pad-bottom) + 1px);

  /* Follows the page's ink so the index reads in either mode. */
  --fp-ink: var(--color-foreground);
  --fp-rule: color-mix(in srgb, var(--color-foreground) 26%, transparent);

  position: relative;
  background: var(--color-background);
  color: var(--fp-ink);
  padding: 0 var(--fp-pad) clamp(40px, 6vw, 96px);
  font-family: "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, sans-serif;
}

.fp *,
.fp *::before,
.fp *::after { box-sizing: border-box; }

/* -------------------------------------------------------------------------
   Sticky section heading. In normal flow to begin with; pinned once it meets
   the top of the viewport; released when the section ends. The plate is opaque
   so rows pass underneath cleanly.
   ------------------------------------------------------------------------- */
.fp-head {
  position: sticky;
  top: 0;
  z-index: 40;                 /* above every project row */
  background: var(--color-background);
  padding: var(--fp-head-pad-top) 0 var(--fp-head-pad-bottom);
  border-bottom: 1px solid var(--fp-rule);
}

.fp-heading {
  margin: 0;
  font-size: var(--fp-heading-size);
  line-height: 1;
  letter-spacing: -0.015em;
  font-weight: 500;
  /* literal fallback: the token lives in extra.css, and a browser holding a
     stale copy of that file would otherwise drop this declaration entirely */
  color: var(--brand-yellow, #F8FEA8);
}

/* -------------------------------------------------------------------------
   Project rows.
   ------------------------------------------------------------------------- */
/* Each row is one sticky layer. It stays in normal flow, pins directly under
   the heading, and then holds that position while the next row — later in the
   DOM, on a higher stacking level, over an opaque page-coloured background —
   rises from the bottom of the viewport and covers it from the bottom up. The
   list is the containing block, so the last row releases when the section ends.
   The whole row is one element, so its media and information can never
   separate or mix with another project's. */
.fp-row {
  position: sticky;
  top: var(--fp-head-h);
  z-index: var(--fp-z, 1);
  background: var(--color-background);
  display: grid;
  grid-template-columns: 58% 42%;
  align-items: stretch;
  padding: var(--fp-row-pad) 0;
}
.fp-row + .fp-row { border-top: 1px solid var(--fp-rule); }

/* media ------------------------------------------------------------------ */
.fp-media {
  display: block;
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--fp-rule);
  overflow: hidden;
  text-decoration: none;
  /* the reference keeps the ordinary hand cursor — the label is the feedback */
}

.fp-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* A looping mobile thumbnail, where a project ships one. It is off here and the
   mobile sheet turns it on, so desktop renders exactly the still it always has. */
.fp-vid { display: none; }

/* information panel ------------------------------------------------------
   The description and the project name sit at the top; the rest of the panel
   stays empty on purpose. */
/* Two blocks became one when the service list came out, so the panel no longer
   spreads: the description and the name sit at the top and the lower right of
   the row stays empty, which is what the reference does. */
.fp-info {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 40px);
  padding: 0 clamp(8px, 0.8vw, 16px);
  min-width: 0;
}

.fp-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  column-gap: clamp(12px, 1.6vw, 32px);
}

.fp-desc {
  margin: 0;
  max-width: 17.5em;
  font-size: clamp(12px, 1.24vw, 26px);
  line-height: 1.08;
  letter-spacing: -0.005em;
  font-weight: 300;
  color: var(--fp-ink);
  text-wrap: pretty;
}

.fp-name {
  margin: 0;
  justify-self: end;
  text-align: right;
  font-size: clamp(18px, 2.41vw, 52px);
  line-height: 1;
  letter-spacing: -0.02em;
  font-weight: 500;
  color: var(--fp-ink);
}

/* -------------------------------------------------------------------------
   Cursor label. Fixed to the viewport and moved by transform only.
   ------------------------------------------------------------------------- */
.fp-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0;
  transition: opacity 150ms ease-out;
  background: var(--color-background);
  color: var(--fp-ink);
  font-size: 14px;
  line-height: 1.28;
  font-weight: 500;
  letter-spacing: 0;
  padding: 1px 3px;
  white-space: nowrap;
}
.fp-cursor.is-on { opacity: 1; }

/* -------------------------------------------------------------------------
   Tablet — hold the two-column structure, give the information more room.
   ------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .fp-row { grid-template-columns: 54% 46%; }
  .fp-desc { max-width: none; font-size: clamp(12px, 1.5vw, 20px); }
  .fp-name { font-size: clamp(17px, 2.7vw, 34px); }
}

/* A pinned row only works while the row actually fits under the heading. On a
   viewport that is very wide for its height the row is taller than the space
   left, which would park its service list permanently off-screen — there the
   rows fall back to ordinary scrolling. The boundary is measured: a row needs
   the heading height plus its own height, which works out at roughly 22:10
   across 1440-1920. The reference proportion (about 2:1) stays sticky. */
@media (min-aspect-ratio: 22 / 10) {
  .fp-row { position: static; }
}

@media (max-width: 860px) {
  .fp-top {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(8px, 1.4vw, 16px);
  }
  .fp-name { justify-self: start; text-align: left; order: -1; }
}

/* -------------------------------------------------------------------------
   Mobile — one column, same system: thumbnail, then name, description,
   services, with the rules and hierarchy intact.
   ------------------------------------------------------------------------- */
@media (max-width: 700px) {
  .fp {
    --fp-nav: 52px;
    --fp-pad: 16px;
  }
  .fp-heading { font-size: clamp(28px, 8.5vw, 46px); }
  .fp-row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 14px;
    padding: 16px 0;
  }
  /* stacked rows are taller than a phone screen, so they scroll normally */
  .fp-row { position: static; }
  .fp-info { gap: 14px; padding: 0; }
  .fp-name { font-size: clamp(22px, 6.4vw, 34px); }
  .fp-desc { font-size: clamp(14px, 3.7vw, 18px); line-height: 1.18; }
  .fp-cursor { display: none; }
}

/* ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .fp-cursor { transition: none; }
}