/* ============================================================
   TTCC — WORKS PAGE
   works.html only: the "Work" heading and the project index grid.
   The shell (top bar, menu panel, search overlay, footer) comes from
   base.css + nav.css + footer.css, shared with index.html.
   ============================================================ */

/* ----- Project index ----- */
.works {
  padding-top: calc(var(--topbar-h) + 60px);   /* clears the fixed top bar */
  padding-bottom: 0;
}

/* Same gutter as the top bar, no full-bleed override. */
.works-index {
  max-width: 2000px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* One column, explicit rows — so the pill can share the "Showing..."
   line's row while still centring on the full page width rather than
   being pushed around by that text's length. */
.works-index {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

/* The header's own box dissolves so its two lines become grid items of
   .works-index directly; without this the pill (a sibling of the header)
   could never share a row with the count line inside it. The heading and
   count keep their own styling and left alignment untouched. */
.works-index__header {
  display: contents;
}

.works-index__title {
  grid-row: 1;
  grid-column: 1;
}

/* Row 2 holds both: the count on the left, the pill centred over the
   whole column. They overlap in one cell, so the pill's position owes
   nothing to how long the count text is. */
.works-index__count,
.works-filter {
  grid-row: 2;
  grid-column: 1;
  align-self: center;
}

/* Matches .works-index__count's own margin-top, so both margin-boxes
   centre on the same line rather than one sitting 12px lower. */
.works-filter {
  display: flex;
  justify-self: center;
  margin-top: 12px;
}

.works-index__grid  { grid-row: 3; grid-column: 1; }
.works-index__empty { grid-row: 4; grid-column: 1; }
.works-index__more  { grid-row: 5; grid-column: 1; }

.works-index__title {
  font-size: clamp(34px, 3.6vw, 58px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #000000;          /* dark on the white page, like index.html */
}

.works-index__count {
  margin-top: 12px;
  font-size: 15px;
  font-weight: 400;
  color: #666666;
}

/* ----- Card grid -----
   12 columns; each card's span and ratio are set inline by JS from its
   index in the list (see the slot pattern in js/works.js). */
.works-index__grid {
  margin-top: 60px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 24px;
  row-gap: 90px;
  align-items: start;
}

.work-card__media-wrap {
  overflow: hidden;
  background: #ececec;          /* shows through until the media lands */
  border-radius: 0;
}

.work-card__media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.work-card__title {
  margin-top: 10px;
  font-size: 15px;
  font-weight: 500;
  color: #000000;
}

.work-card__desc {
  margin-top: 2px;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
  color: #666666;
}

/* ----- Load more ----- */
.works-index__more {
  margin: 90px 0;
  text-align: center;
}

/* Flex so the gap between the label and the "+" is an exact 14px —
   word-spacing would widen the space inside "Load more" too. */
.works-more-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 16px 0;
  border: 0;
  border-radius: 3px;
  background: #ececec;
  font: inherit;
  font-size: 15px;
  color: #000000;
  cursor: pointer;
  transition: background 200ms ease;
}

.works-more-btn:hover {
  background: #dcdcdc;
}

/* Shown in place of the grid when a filter matches nothing. */
.works-index__empty {
  margin-top: 90px;
  text-align: center;
  font-size: 15px;
  font-weight: 400;
  color: #666666;
}

/* ----- Works responsive ----- */
@media (max-width: 900px) {
  .works {
    padding-top: 80px;
  }

  /* Not enough width to share a row: the pill drops below the count on
     its own line, left-aligned with everything else. Every row after it
     shifts down one. */
  .works-filter {
    grid-row: 3;
    justify-self: start;
    margin-top: 16px;
  }

  /* The panel is centred on the pill by default (left: 50% + translate),
     which pushes it off-screen once the pill sits hard left. Here it is
     pinned to the pill's own left edge and capped at the width the gutter
     leaves, so the chips wrap down instead of running past the screen.
     Scoped to .works-filter: the home page's pill is centred and keeps
     the shared behaviour. Higher specificity than pill.css's open-state
     rule, so the transform override survives. */
  .works-filter .filter-dd__panel,
  .works-filter .filter-dd.is-open .filter-dd__panel {
    left: 0;
    right: auto;
    min-width: 0;
    width: calc(100vw - 2 * var(--gutter));
    max-width: calc(100vw - 2 * var(--gutter));
    /* Opens downward here. Upward it would have to fit between the pill
       and the fixed top bar — a few hundred pixels on a phone, with the
       logo underneath it the moment the list is long. Below the pill
       there is the rest of the page, so the panel drops instead and the
       bar is never in its way. */
    top: calc(100% + 12px);
    bottom: auto;
    /* Whatever is left of the viewport under the pill, less the bar and a
       margin, with the chips scrolling inside if they overrun it. */
    max-height: calc(100vh - var(--topbar-h) - 140px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .works-filter .filter-dd__panel {
    transform: translateX(0) translateY(-8px);
  }

  .works-filter .filter-dd.is-open .filter-dd__panel {
    transform: translateX(0) translateY(0);
  }

  /* Chips take as many rows as they need. */
  .works-filter .filter-dd__options {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .works-index__grid  { grid-row: 4; }
  .works-index__empty { grid-row: 5; }
  .works-index__more  { grid-row: 6; }

  /* Every card spans the full width; the slot pattern's column spans are
     set inline by JS, so this needs !important to override them. */
  .works-index__grid {
    row-gap: 56px;
  }

  .work-card {
    grid-column: 1 / -1 !important;
  }
}