/* The Work sheet's gallery: every example site, filtered by kind. The filter is radios and
   :has() alone, so it works without JavaScript; js/work-gallery.js adds the transition between
   filters and the ?type= link. Linked from the Work page itself: nothing here is in main.css. */
.wg { margin-top: clamp(28px, 4vh, 44px); }
.wg-filter { margin: 0 0 clamp(14px, 2vh, 20px); padding: 0; border: 0; min-width: 0; }
.wg-chips { display: flex; flex-wrap: wrap; gap: 8px; position: relative; }
.wg-legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wg-radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.wg-chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px;
  border: 1px solid var(--line-paper); border-radius: 999px; background: rgba(255, 255, 255, 0.35);
  font-family: var(--f-body); font-weight: 500; font-size: 14px; line-height: 1; color: var(--ink);
  cursor: pointer; user-select: none; transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}
.wg-chip:hover { border-color: var(--ink); }
.wg-n { font-family: var(--f-mono); font-size: 11px; color: rgba(11, 11, 15, 0.58); transition: color 0.3s; }
.wg-radio:checked + .wg-chip { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.wg-radio:checked + .wg-chip .wg-n { color: rgba(236, 234, 227, 0.72); }
.wg-radio:focus-visible + .wg-chip { outline: 2px solid var(--ember-deep); outline-offset: 3px; }
.wg-status { margin: 0 0 clamp(18px, 2.6vh, 28px); font-size: 13.5px; color: rgba(11, 11, 15, 0.62); }

.wg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: clamp(16px, 2vw, 28px); margin: 0; padding: 0; list-style: none; }
.wg-item { display: flex; min-width: 0; }
.wg-card {
  display: flex; flex-direction: column; width: 100%; border: 1px solid var(--line-paper);
  background: rgba(255, 255, 255, 0.35); color: var(--ink); text-decoration: none;
  transition: border-color 0.3s, transform 0.5s var(--ease);
}
.wg-card:hover { border-color: var(--ink); transform: translateY(-3px); }
.wg-card:focus-visible { outline: 2px solid var(--ember-deep); outline-offset: 3px; }
.wg-thumb { display: block; aspect-ratio: 960 / 573; overflow: hidden; background: var(--ink-2); border-bottom: 1px solid var(--line-paper); }
.wg-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 0.8s var(--ease); }
.wg-card:hover .wg-thumb img { transform: scale(1.02); }
.wg-body { display: flex; flex: 1; flex-direction: column; gap: 6px; padding: clamp(16px, 1.8vw, 22px); }
.wg-name { font-family: var(--f-display); font-weight: 500; font-size: clamp(20px, 1.6vw, 24px); line-height: 1.15; text-wrap: balance; }
.wg-desc { font-size: 14.5px; line-height: 1.55; color: rgba(11, 11, 15, 0.72); text-wrap: pretty; }

/* the filter, with no script at all (tools/build.mjs checks every category has its rule here) */
.wg:has(#wg-trades:checked) .wg-item:not([data-cat="trades"]),
.wg:has(#wg-dealers:checked) .wg-item:not([data-cat="dealers"]),
.wg:has(#wg-professional:checked) .wg-item:not([data-cat="professional"]),
.wg:has(#wg-fitness:checked) .wg-item:not([data-cat="fitness"]),
.wg:has(#wg-hospitality:checked) .wg-item:not([data-cat="hospitality"]),
.wg:has(#wg-travel:checked) .wg-item:not([data-cat="travel"]),
.wg:has(#wg-makers:checked) .wg-item:not([data-cat="makers"]),
.wg:has(#wg-arts:checked) .wg-item:not([data-cat="arts"]),
.wg:has(#wg-engineering:checked) .wg-item:not([data-cat="engineering"]) { display: none; }

/* between filters the cards move to their new places (js/work-gallery.js sets html.wg-vt for
   the length of the transition, and names only the cards near the screen: a hundred named
   groups would make every change a heavy one); the page itself stays put rather than sliding
   as it does between pages */
.wg-vt .wg-item.wg-vt-n { view-transition-name: var(--vt); view-transition-class: wg-card; }
::view-transition-group(*.wg-card) { animation-duration: 0.45s; animation-timing-function: var(--ease); }
html.wg-vt::view-transition-old(root), html.wg-vt::view-transition-new(root) { animation: none; }

@media (max-width: 720px) {
  .wg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .wg-thumb { aspect-ratio: 390 / 448; }
  .wg-body { padding: 12px; gap: 4px; }
  .wg-name { font-size: 17px; }
  .wg-desc { display: none; }
  .wg-chip { min-height: 36px; padding: 0 13px; font-size: 13px; flex: none; }
  /* nine filters would wrap into six rows on a phone: one row that scrolls sideways instead */
  .wg-chips {
    flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
    padding: 4px 28px 6px 0;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  }
  .wg-chips::-webkit-scrollbar { display: none; }
  .wg-chip { scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) {
  .wg-card, .wg-thumb img { transition: none; }
  .wg-card:hover { transform: none; }
  .wg-card:hover .wg-thumb img { transform: none; }
}