/* ==========================================================================
   Textum Media — portfolio.css
   Page-only rules for /portfolio. Loaded after site.css.
   Two jobs only:
     1. .portfolio-deck — the full-bleed swipe deck (bigger cards than the
        home page, track insets aligned to the container edge).
     2. .pf-row — the alternating editorial index below the deck.
   Never restyles .pf-card, .frame or .pf-track globally: every rule is
   scoped to a page wrapper class. Tokens only, no hex, no id selectors.
   ========================================================================== */


/* == Swipe deck =========================================================== */

.portfolio-deck {
  /* Distance from the viewport edge to the .container content edge — the
     track is full-bleed, so the first card has to be inset by hand. */
  --deck-inset: max(var(--gutter), calc((100% - var(--container)) / 2));
  /* The one page-level size literal, sanctioned by the brief: cards on this
     deck are deliberately larger than the home page's min(78vw, 520px). */
  --deck-card: min(86vw, 720px);
}

/* The deck section is full-bleed, so the track scrolls edge to edge while
   the head, the hint and the first card still line up with .container. */
.portfolio-deck .pf-track {
  padding-inline: var(--deck-inset);
  scroll-padding-inline-start: var(--deck-inset);
}

/* Larger than the home-page deck: two cards on a laptop, one on a phone. */
.portfolio-deck .pf-card {
  flex-basis: var(--deck-card);
}

.portfolio-deck__hint {
  margin-top: var(--space-3);
}


/* == Editorial index ====================================================== */

/* Each row is an anchor target (/portfolio#atlas-law) — keep it clear of
   the sticky nav. site.css only sets scroll-margin-top on <main>. */
.pf-row {
  scroll-margin-top: calc(var(--nav-h) + var(--space-3));
}

.pf-row + .pf-row {
  margin-top: var(--space-9);
  padding-top: var(--space-9);
  border-top: 1px solid var(--rule);
}

.pf-row__grid {
  align-items: center;
  row-gap: var(--space-4);
}

.pf-row__body {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: var(--space-2);
}

.pf-row__num {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-mono);
  line-height: 1.4;
  color: var(--mark);
}

.pf-row__title {
  font-size: var(--fs-xl);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-display);
}

.pf-row__desc {
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--fg-2);
  max-width: var(--measure);
}

/* Mono URL line, hairline above it — the "address" of the demo. */
.pf-row__url {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1);
  width: 100%;
  margin-top: var(--space-1);
  padding-top: var(--space-2);
  border-top: 1px solid var(--rule);
  overflow-wrap: anywhere;
}

.pf-row__key {
  color: var(--mark);
}

.pf-row__go {
  margin-top: var(--space-1);
}

/* Alternating sides. Both tracks are pinned to row 1 explicitly so grid
   auto-placement cannot push the text below the screenshot. */
@media (min-width: 901px) {
  .pf-row--flip .pf-row__visual {
    grid-column: 6 / span 7;
    grid-row: 1;
  }

  .pf-row--flip .pf-row__body {
    grid-column: 1 / span 5;
    grid-row: 1;
  }
}