/* =====================================================================
   GENERATED FILE -- DO NOT EDIT.

   Built from _source/assets/components/work-preview.css by _dev/generate/theme-assets.mjs. Edit the
   snapshot and regenerate; a hand edit here fails the gate at commit
   rather than surviving to contradict its source. The snapshot is frozen:
   it has been the design of record since 2026-10-08 (frozenOn in its
   source.json), so it is edited in place and never re-synced.

     node _dev/generate/theme-assets.mjs redfish   rebuild this file

   The file below is the static site's stylesheet verbatim, comments and
   all, and unchanged: the work-preview component, every selector
   under .c-work-preview.

   NOTHING WORDPRESS-SPECIFIC GOES IN THIS FILE. Adapter rules that map
   block markup onto these components live in native-adapters.css, which
   is hand-written and loads after this one. Keeping them apart is what
   lets this copy stay diffable against the original.
   ===================================================================== */

/* work-preview: "Our work" on the home page: its head, the cove chart (its own
   component, .c-cove), the divider under the chart and the four photo tiles.
   Root: <section class="block c-work-preview">. */
.c-work-preview .gprev-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.c-work-preview .gprev-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: clamp(30px, 4vw, 48px); }
.c-work-preview .gprev-grid a { display: block; aspect-ratio: 4 / 3; }
.c-work-preview .gprev-grid .shot { display: block; height: 100%; transition: transform .35s var(--ease); }
.c-work-preview .gprev-grid .photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.c-work-preview .gprev-grid a:hover .shot { transform: scale(1.012); }

/* The rule that separates the chart from the photo tiles underneath. */
.c-work-preview .cove-after { display: flex; align-items: center; gap: 14px; margin: clamp(34px, 4vw, 52px) 0 22px; }
.c-work-preview .cove-after::after { content: ""; flex: 1; height: 1px; background: var(--line); }
/* the divider is an h3 now, so the weight is pinned back to the label weight */
.c-work-preview .cove-after span { font-weight: 500; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--faint); }
@media (max-width: 1080px) {
  .c-work-preview .gprev-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .c-work-preview .gprev-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  /* at ~152px a tile is narrower than its caption, so drop the label and keep the tag */
  .c-work-preview .gprev-grid .shot-label { display: none; }
  .c-work-preview .gprev-grid .shot-tag { top: 10px; left: 10px; font-size: 9.5px; padding: 4px 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .c-work-preview .gprev-grid .shot { transition: none; }
}