/* ==========================================================================
   WORK (/work/): one continuous archive grid (reference: Victor Berbel's
   collected work). Case studies keep the featured card (3:2, arrow, client /
   year), previews keep the square tile (plus); both sit in one 12-column
   grid, case studies first. Filters are large type with a small accent
   count. Cards, tiles, headings and the modal come from system.css.
   ========================================================================== */

.work-intro { padding-top: 112px; }
.work-intro__title { font-size: var(--sys-h2-size); }

/* Filters: big type with the count as a readable number beside it (Victor
   Berbel reference: same face, half the label, tight to the word), centred on
   the label's capital height rather than its line box. Real toggle buttons.
   One rule under the row; the current filter is marked by an ink bar on that
   rule, under the label only (never the count). */
.work-filters {
  display: flex;
  flex-wrap: wrap;
  column-gap: 40px;
  margin-top: 40px;
  border-bottom: 1px solid var(--sys-rule);
}
.work-filter {
  display: inline-flex;
  align-items: center;
  gap: 0.18em;
  padding-bottom: 18px;
  font-size: var(--sys-minor-h2-size);
  font-weight: var(--weight-regular);
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--sys-hero);
  transition: color var(--duration-base) var(--ease-standard);
}
.work-filter__label { position: relative; }
.work-filter__n {
  font-size: 0.5em;
  font-weight: var(--weight-regular);
  line-height: 1;
  letter-spacing: 0;
  color: var(--sys-accent);
  vertical-align: baseline;
  /* the line box centre sits below the capitals' centre: lift the count by
     the difference (measured on Pacaembu) so it centres optically */
  transform: translateY(-0.08em);
}
.work-filter__label::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(-18px - 1px);
  height: 2px;
  background: var(--sys-ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-base) var(--ease-standard);
}
.work-filter:hover,
.work-filter[aria-pressed="true"] { color: var(--sys-ink); }
.work-filter[aria-pressed="true"] .work-filter__label::after { transform: scaleX(1); }
.work-filter:focus-visible { outline-offset: 4px; }

/* One grid: case studies span 6 of 12 columns, previews 4. */
.work-grid-wrap { padding-top: 64px; padding-bottom: var(--sys-section-y); }
.work-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-flow: row dense;
  gap: 56px var(--grid-gutter);
  align-items: start;
}
.work-grid > .work-item--case { grid-column: span 6; }
.work-grid > .ptile { grid-column: span 4; }
.work-grid > [hidden] { display: none; }

@media (max-width: 1199px) { .work-intro { padding-top: 96px; } }
/* Phone filter: a select-only combobox (work.js). The closed control is a
   rounded panel with a hairline, a Nitti label, the current filter in the
   display face and a chevron disc. The open list is the colour-mode menu:
   the dark menu panel, 14px rows, the highlight on the active row and a
   check on the selected one. Hidden from 840px up. */
.work-select { display: none; position: relative; }
.work-select__label {
  position: absolute;
  top: 12px;
  left: 18px;
  font: var(--sys-detail);
  text-transform: uppercase;
  color: var(--sys-secondary);
  pointer-events: none;
}
.work-select__control {
  display: block;
  width: 100%;
  min-height: 72px;
  padding: 32px 56px 12px 18px;
  border: 1px solid var(--sys-rule);
  border-radius: 20px;
  background: var(--sys-surface);
  font-size: 21px;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--sys-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: border-color var(--duration-base) var(--ease-standard);
}
/* chevron in a disc; turns over while the list is open */
.work-select::after {
  content: "";
  position: absolute;
  top: 36px;
  right: 16px;
  width: 32px;
  height: 32px;
  margin-top: -16px;
  border-radius: 50%;
  background: var(--sys-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E") no-repeat center / 18px;
  pointer-events: none;
  transition: transform var(--duration-base) var(--ease-standard);
}
.work-select:has([aria-expanded="true"])::after { transform: rotate(180deg); }
.work-select__control:hover,
.work-select__control[aria-expanded="true"] { border-color: var(--sys-rule-strong); }
.work-select__control:focus-visible { outline: 2px solid var(--sys-accent); outline-offset: 2px; border-color: var(--sys-accent); }
.work-select__menu {
  position: absolute;
  z-index: 50;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  padding: 10px;
  border-radius: 20px;
  background: var(--sys-menu-bg);
  color: var(--sys-menu-ink);
  border: 1px solid var(--sys-menu-highlight);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12), 0 28px 64px -20px rgba(0, 0, 0, 0.5);
}
.work-select__menu[hidden] { display: none; }
.work-select__option {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 10px;
  align-items: center;
  min-height: 48px;   /* tap target */
  padding: 10px 12px;
  border-radius: 14px;
  font-size: 18px;
  line-height: 1.3;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.work-select__n { color: var(--sys-menu-caption); }
.work-select__option.is-active,
.work-select__option:hover { background: var(--sys-menu-highlight); }
.work-select__option[aria-selected="true"] { font-weight: var(--weight-semibold); }
.work-select__option[aria-selected="true"] .work-select__check {
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Tablet: the filter row scales with the viewport so it stays on one line */
@media (min-width: 840px) and (max-width: 1199px) {
  .work-filters { column-gap: clamp(20px, 2.6vw, 40px); }
  .work-filter { font-size: clamp(26px, 3.4vw, 40px); }
}
@media (max-width: 839px) {
  .work-intro { padding-top: 48px; }
  .work-filters { display: none; }
  .work-select { display: block; margin-top: 24px; }
  .work-select__control { font-size: clamp(16px, 5vw, 21px); }   /* "Brand + Creative (9)" fits at 320 */
  .work-grid-wrap { padding-top: 40px; }
  /* the four case studies full width, then the previews two across */
  .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 16px; }
  .work-grid > .work-item--case { grid-column: 1 / -1; }
  .work-grid > .ptile { grid-column: span 1; }
}