/* ==========================================================================
   PORTFOLIO (work.html) — layout that only this page uses. Loads after
   components.css. Everything visual comes from the global system: the .hero
   backdrop, .card, .check-list, .btn, .gallery, .viewer, .docreader,
   .cta-block--photo. The rules below are arrangement, not new design.

   Anything here that a second page ends up needing should move to
   components.css rather than being copied.
   ========================================================================== */

/* ==========================================================================
   1. HERO — the home hero backdrop, centred instead of two-column.
   ========================================================================== */

.wk-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  text-align: center;
}

.wk-hero__inner h1 { max-width: 20ch; }

.wk-hero__sub {
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  max-width: 48ch;
}

/* ==========================================================================
   2. INTRO — one centred column at body size. Deliberately NOT the 18px lede
   treatment: this is five short beats read in sequence, and at 18px the
   column gets wide enough that the line breaks stop landing where the copy
   wants them.
   ========================================================================== */

.wk-intro {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  max-width: 62ch;
  margin-inline: auto;
  text-align: center;
  /* The brand's darkest text colour, stated rather than inherited — this
     block sits between two sections that both muted their body copy. */
  color: var(--charcoal);
  font-size: var(--fs-body);
}
.wk-intro > p + p { margin-top: 0; }
.wk-intro strong { color: var(--charcoal); font-weight: var(--fw-semibold); }

/* ==========================================================================
   3. PROJECT CARDS — the run of four, on a photographic band.

   Same overlay discipline as .cta-block--photo and the INSIGHTS steps band:
   the photo is a backdrop for white cards, so it is pushed well back. Never
   lighten the overlay below ~0.80 — the cards start to fight the picture.
   ========================================================================== */

.wk-projects {
  position: relative;
  isolation: isolate;
  background-color: var(--charcoal);
  background-image: url("../assets/work-bg.jpg");
  background-size: cover;
  background-position: center 20%;
  background-attachment: fixed;
}

.wk-projects::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(29, 2, 7, 0.90) 0%,
    rgba(29, 2, 7, 0.84) 50%,
    rgba(29, 2, 7, 0.90) 100%
  );
}

/* iOS ignores fixed attachment and renders the photo at viewport size, which
   crops it to a sliver. Scroll with the page there instead. */
@media (max-width: 899px) {
  .wk-projects { background-attachment: scroll; }
}

.wk-projects__list {
  display: flex;
  flex-direction: column;
  gap: clamp(var(--sp-5), 5vw, var(--sp-7));
}

/* ---- The card ----------------------------------------------------------
   ~87% of the 1200px container, centred. Held to a max rather than a
   percentage so the gallery inside keeps a sane strip length on a very wide
   screen. */

.wk-card {
  --wk-card-pad: clamp(var(--sp-3), 3vw, var(--sp-5));

  /* --- light surface reset -------------------------------------------------
     The band around these cards is .on-dark, which swaps the text/line tokens
     to their cream-on-charcoal values. The card itself is white, so it has to
     opt back out or the copy inherits cream-on-white and disappears. Same
     values as :root — kept as an explicit local reset rather than a new
     modifier class, since this page is the only place a light card sits on a
     dark band. */
  --text:        var(--charcoal);
  --text-muted:  var(--ink-muted);
  --line:        #E4DED2;
  --line-strong: #D8CFBE;
  --bg:          var(--white);
  --focus-ring:  var(--burgundy);
  color: var(--text);

  width: 100%;
  max-width: 1040px;
  margin-inline: auto;
  padding: var(--wk-card-pad);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.wk-card__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
  text-align: center;
}
.wk-card__title { font-size: var(--fs-h2); }

.wk-card__label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
}
.wk-card__label span { color: var(--gold); padding-inline: 4px; }

/* The strip runs to the card's edges — the fade mask in components.css is
   what makes that read as "passing through" rather than "clipped". */
.wk-card .gallery {
  margin-inline: calc(var(--wk-card-pad) * -1);
  width: auto;
}

.wk-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);

  /* The reading column is centred in the card rather than flush left, so the
     copy sits under the centred title instead of drifting to one edge. The
     paragraphs themselves stay left-aligned — centred body copy at this
     length is hard to read. */
  max-width: var(--measure);
  margin-inline: auto;
  width: 100%;
}
.wk-card__body > p + p { margin-top: 0; }
.wk-card__body p { color: var(--text-muted); }
.wk-card__body strong { color: var(--charcoal); }
.wk-card__body h3 { font-size: var(--fs-h3); color: var(--charcoal); text-align: center; }

/* A gold hairline above the closing button, so the card ends on a beat
   instead of just running out of copy. */
.wk-card__foot {
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
}

/* .on-dark recolors outline buttons to cream by selector, not by token, so the
   card's token reset does not undo it. Put the burgundy outline back for any
   button sitting on the white card. */
.wk-card .btn--secondary {
  border-color: var(--burgundy);
  color: var(--burgundy);
}
.wk-card .btn--secondary:hover {
  background: var(--cream);
  border-color: var(--burgundy-deep);
  color: var(--burgundy-deep);
}

/* ---- Advertorial card --------------------------------------------------
   No strip on this one: a single featured mockup, sized to sit at the same
   visual weight as a gallery would. */

.wk-feature {
  display: flex;
  justify-content: center;
  padding: var(--sp-4);
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.wk-feature img {
  width: 100%;
  max-width: 620px;
  height: auto;
  border-radius: var(--radius-sm);
}

/* ==========================================================================
   4. WHAT IT HAS IN COMMON — the INSIGHTS™ close. Centred column, same
   short-line rhythm as the intro.
   ========================================================================== */

.wk-common {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  max-width: 64ch;
  margin-inline: auto;
  text-align: center;
}
.wk-common > p + p { margin-top: 0; }
.wk-common h2 { max-width: 18ch; }

.wk-common__sub {
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-medium);
  color: var(--burgundy);
  max-width: 46ch;
}

/* ---- INSIGHTS flow artwork ---------------------------------------------
   Wider than the 64ch copy column it sits in, so it breaks out; the flex
   parent centres it and the overflow is symmetrical. 92vw rather than 100vw
   keeps it clear of the scrollbar at every width.

   The PNG is transparent and carries 30.8% empty height above the cards and
   5.2% below (measured from its alpha channel). Those are cancelled with
   negative margins so the artwork reads as part of the page instead of
   floating in a gap. Height is width x 941/1672 = width x 0.5628, so the
   pulls are expressed against the same width basis. */
.wk-common__flow {
  --flow-w: min(1080px, 92vw);

  --flow-h: calc(var(--flow-w) * 0.5628);

  width: var(--flow-w);
  max-width: none;

  /* The artwork carries 30.8% dead height above the step cards and 5.2% below
     the Insight/Creative/Performance rule (measured off its alpha channel).
     Cancelling those exactly would leave the copy sitting right on the icons,
     so roughly 12% of the artwork's height is handed back at each end as
     deliberate breathing room. */
  margin-top: calc(var(--flow-h) * -0.215);
  margin-bottom: calc(var(--flow-h) * 0.045);
}
.wk-common__flow img { display: block; width: 100%; height: auto; }

@media (max-width: 599px) {
  /* Seven steps side by side stop being readable well before this width, so
     the strip scrolls sideways in its own box rather than shrinking into
     illegibility. The pulls are recomputed against the fixed inner width. */
  .wk-common__flow {
    --flow-w: 700px;
    align-self: stretch;
    width: auto;
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }
  .wk-common__flow img { width: var(--flow-w); max-width: none; }
}

/* Closing statement under the flow artwork. Charcoal rather than the muted
   tone the rest of this block uses, so it lands as a conclusion. */
.wk-common__close {
  color: var(--charcoal);
  max-width: 34ch;
}

.wk-common .btn-row { margin-top: var(--sp-2); }