/* ============================================================
   WORK INDEX PAGE (/work)
   Sits on top of v2.css — reuses .shell, .pcard, .btn, tokens.
   ============================================================ */

[hidden] { display: none !important; }

/* ---- Page hero ---- */
.wp-hero { padding-block: clamp(128px, 15vw, 210px) clamp(36px, 4.5vw, 60px); }
.wp-hero__inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(12px, 1.3vw, 18px);
  row-gap: clamp(22px, 2.6vw, 34px);
  align-items: end;
}
.wp-hero__title { grid-column: 1 / span 7; font-size: clamp(40px, 6.4vw, 96px); }
.wp-hero__lead {
  grid-column: 9 / -1;
  color: var(--muted);
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.55;
  padding-bottom: 0.1em;
}

/* ---- Index ---- */
.wp-index { padding-bottom: var(--section-pad); }

.wp-filters {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-bottom: clamp(24px, 3vw, 38px);
}
.wp-filter {
  padding: 10px 18px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-2);
  color: var(--muted);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  transition: color 300ms var(--ease), border-color 300ms var(--ease), background 300ms var(--ease);
}
.wp-filter:hover { color: var(--white); border-color: rgba(255,255,255,0.32); }
.wp-filter.is-on { background: var(--lime); border-color: var(--lime); color: var(--ink); }

/* 11 tiles + one double-width tile = 12 column units, so the 3-col grid fills
   exactly. `dense` backfills any hole left when a filter hides tiles. */
.wp-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-flow: row dense;
  gap: clamp(12px, 1.3vw, 18px);
}
.wp-grid > li { min-width: 0; aspect-ratio: 4 / 3; }
/* Wide tiles match the height of a 4/3 tile while spanning two columns */
.wp-grid > li.wp-wide { grid-column: span 2; aspect-ratio: 27 / 10; }

/* Index cards are gallery tiles, not links — keep the border neutral on hover
   so nothing reads as clickable. */
.pcard--index { border-radius: var(--r-card-sm); }
@media (hover: hover) {
  .pcard--index:hover { border-color: var(--line-2); box-shadow: none; }
}
/* Index tiles carry a third line of copy, so the bed under it has to start
   higher and finish darker than the homepage cards — several of these photos
   are bright exactly where the title sits. */
.pcard--index .pcard__veil::before {
  background: linear-gradient(180deg,
    rgba(6,6,22,0.34) 0%, rgba(6,6,22,0.10) 24%,
    rgba(6,6,22,0.74) 60%, rgba(6,6,22,0.96) 100%);
}
.pcard__scope {
  margin-top: 4px;
  font-size: 13px; line-height: 1.45;
  color: rgba(255,255,255,0.68);
  max-width: 52ch;
}
.wp-wide .pcard__scope { max-width: 62ch; }

/* Crops tuned per image so branding survives the tile ratio */
.pcard__img--honor { object-position: 60% 50%; }
.pcard__img--ceo   { object-position: 50% 46%; }
/* The wide tile crops height, not width, so the fascia sign has to be pulled
   down out of the trimmed top band. */
.wp-wide .pcard__img--naghi { object-position: 50% 30%; }

.wp-empty {
  padding: clamp(40px, 6vw, 72px) 0;
  color: var(--muted); font-size: clamp(16px, 1.2vw, 18px);
}

/* ---- Closing CTA ---- */
.wp-cta {
  margin-top: clamp(48px, 6vw, 88px);
  padding-top: clamp(36px, 4vw, 56px);
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: clamp(20px, 3vw, 40px);
}
.wp-cta__line {
  font-family: var(--f-display); text-transform: uppercase;
  font-size: clamp(24px, 3.2vw, 46px); line-height: 0.96; letter-spacing: -0.01em;
  max-width: 18ch;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1100px) {
  .wp-hero__title { grid-column: 1 / -1; }
  .wp-hero__lead { grid-column: 1 / -1; max-width: 52ch; }
}

@media (max-width: 1024px) {
  .wp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wp-grid > li.wp-wide { grid-column: span 2; aspect-ratio: 16 / 9; }
}

@media (max-width: 640px) {
  .wp-grid { grid-template-columns: 1fr; }
  .wp-grid > li,
  .wp-grid > li.wp-wide { grid-column: span 1; aspect-ratio: 16 / 11; }
  .pcard--index, .pcard--index:focus-visible { border-radius: 22px; }
  .pcard__scope { font-size: 12.5px; }
  .wp-cta { flex-direction: column; align-items: flex-start; }
  .wp-cta .btn { width: 100%; justify-content: center; }
}