/* ---------- Work (Selected) ---------- */
.work {
  /* The gap between the opening paragraph and the line above "Work" is the one Info has between its headline and
     the line above Services/Sectors/Clients (.info-media margin-top, css/info.css) — client request, change them
     together. It does not depend on the format: the hero hugs the video (--hero-final-height, js/intro.js). */
  padding-top: calc(clamp(80px, 12vw, 200px) + 12px);
  /* padding-bottom is larger on purpose — the heading's own line-height
     adds visible "air" above its ink that the tag pills at the bottom of
     the grid don't have, so equal values read as unequal. */
  padding-bottom: 200px;
}

/* The thin line above "Work", like the one above Services/Sectors/Clients on Info (.info-divider, css/info.css;
   --info-rule is defined there and in the same grey here). 16px between it and the heading, like Info. */
:root {
  --work-rule: rgba(17, 17, 17, 0.14);
}

[data-theme="dark"] {
  --work-rule: rgba(245, 245, 245, 0.22);
}

.work-rule {
  margin-bottom: 16px;
}

.work-divider {
  grid-column: 1 / -1;
  border: 0;
  border-top: 1px solid var(--work-rule);
  transition: border-color 0.3s ease;
}

.work-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-left: var(--grid-margin);
  padding-right: var(--grid-margin);
  max-width: var(--content-max);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 48px;
}

/* "(Selected)": the small top-left note of the headline, the same as the numbers 1, 2, 3 on Info (.info-block-num,
   css/info.css) but after the word: body text size, lighter weight, the grey of the changing word of the home question (#8c8c8c, .rw-word in css/work-intro.css), 12px from "Work", its digits' top on the
   word's cap height (0.187 × the word's size − 4.6px; the clamp() is the word's font-size, same as .work-title —
   change both together). */
.work-title-note {
  position: relative;
  top: calc(clamp(28px, 2.5vw, 56px) * 0.187 - 4.6px);
  display: inline-block;
  margin-left: 12px;
  vertical-align: top;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  color: #8c8c8c;
  transition: color 0.3s ease;
}

/* Phones: a quarter less of that space (12px → 9px). */
@media (max-width: 767px) {
  .work-title-note {
    margin-left: 9px;
  }
}

.work-title {
  font-family: var(--font-body);
  /* Same in every property as the headline on project pages (.project-title,
     css/project.css) — client request, change both together. */
  font-size: clamp(28px, 2.5vw, 56px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

/* .grid already sets the 12-col track + margin/gutter (css/grid.css);
   row-gap is added here since project rows read better with more
   breathing room than the shared column gutter. */
.work-grid {
  row-gap: 64px;
}

.work-card {
  display: block;
  text-decoration: none;
  color: inherit;
}

.work-card-media {
  position: relative;
  /* No fixed aspect-ratio here on purpose — each card's box takes the
     shape of its own image/video at its real proportions instead of
     cropping every card into the same box (see docs/selected-work-section.md). */
  overflow: hidden;
  border-radius: var(--nav-radius);
  background: var(--color-surface);
  transition: background-color 0.3s ease;
}

.work-card-video {
  display: block;
  width: 100%;
  height: auto;
}

/* Dayhoff's logo: an inline SVG (fill="currentColor") like the footer's, so
   the colour is set here and switches with the theme — near-black on light,
   near-white on dark — with the same 0.3s fade as the footer logo. */
/* No grey box behind the logo: just its own outline on the page background. */
.work-card-media--logo {
  background: transparent;
}

.work-card-logo {
  display: block;
  width: 100%;
  height: auto;
  color: var(--color-text);
  transition: color 0.3s ease;
}

.work-card-content {
  display: flex;
  /* Column, not row: tags always sit below the title. A row with wrap
     put tags to the title's right when it was short and below it when
     long, which read as inconsistent across cards — client request to
     unify on one layout regardless of title length. */
  flex-direction: column;
  align-items: flex-start;
  /* Same gap as the media's own margin-top above, so the title-to-tags
     spacing reads consistently with the media-to-content spacing. */
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.work-card-title {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 600;
  transition: color 0.3s ease;
}

/* Mouse only: hovering a card greys its name, like the pager's name on project pages. */
@media (hover: hover) and (pointer: fine) {
  .work-card:hover .work-card-title {
    color: var(--nav-link-inactive);
  }
}

.work-card-tags {
  display: flex;
  flex-wrap: wrap;
  /* Half of --space-2 (8px) — a value specific to these tags, not tied
     to the shared spacing token. */
  gap: 4px;
  list-style: none;
}

.work-card-tag {
  padding: 5px var(--space-3);
  background: var(--color-surface);
  /* Smaller than --nav-radius (5px) on purpose — being tested at this
     size specifically for these small pills, not tied to the shared
     token used by the nav/buttons elsewhere. */
  border-radius: 3px;
  font-size: 12px;
  font-weight: 500;
  color: var(--nav-link-inactive);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Phones only: tablets (768–1180px) keep the laptop composition of the grid
   (card widths and spacers set in index.html) — client request. */
@media (max-width: 767px) {
  /* Spacer columns between cards (see index.html) only make sense next to
     the cards they separate at the desktop widths — cards stack to one
     column below this width, so a spacer would land in a row of its own. */
  .work-grid-spacer {
    display: none;
  }

  /* Every card collapses to one column below this width, whatever .w-N
     it was given for the desktop layout — a plain .work-card selector
     instead of listing each width class means new project sizes never
     need to be added here too. */
  .work-card {
    grid-column: span 12;
  }

  /* Stacked order: Dayhoff comes before BNE Sonora. The DOM order stays the
     desktop one (BNE Sonora, spacer, Dayhoff); only the cards above Dayhoff
     are pushed ahead of it so it lands right after BNE Merch. */
  .work-card[href="/projects/msp/"],
  .work-card[href="/projects/bne-merch/"] {
    order: -2;
  }

  .work-card[href="/projects/dayhoff/"] {
    order: -1;
  }
}

/* Phones and tablets: half the space under the last block before the footer shows. */
@media (max-width: 1180px) {
  .work {
    padding-bottom: 100px;
  }
}

/* Same tiers as Info's line (css/info.css): between 1181 and 1360 px 48px under the line; up to 1180 px the gap
   above it is half of 120px + --content-top-space (88px) and 16px under it. */
@media (max-width: 1360px) {
  .work-rule {
    margin-bottom: 48px;
  }
}

@media (max-width: 1180px) {
  .work {
    padding-top: calc((120px + var(--content-top-space)) / 2);
  }

  .work-rule {
    margin-bottom: 16px;
  }
}

/* Tablets (768–1180px): "Selected Work" is at most 5 columns wide, like the
   project headlines (5 columns = 5/12 of the width plus 4 gutters, i.e.
   (100% + gutter) × 5/12 − gutter). */
@media (min-width: 768px) and (max-width: 1180px) {
  .work-title {
    max-width: calc((100% + var(--grid-gutter)) * 5 / 12 - var(--grid-gutter));
  }
}