/* ============================================================
   projects.css — KUN projektoversigtens egne regler (Fase 3)
   Kræver tokens.css + base.css + components.css.

   Bruges af den flade projekter.html.
   Genbrug fra Fase 2: masthead, sticky nav, mobilheader, mobilmenu,
   Lenis, sort footer og hele projektkortet (.work__item, .work__media,
   .work__meta, .work__title, .work__client, .work__cat).
   Herunder står udelukkende: sidetitel, filterrække og gridets egne
   breakpoints. (Ingen listevisning, ingen Grid/List-vælger.)
   ============================================================ */

/* ---- Gutters: 20px ≥810, 10px ≤809 (målt på referencen).
   Kun sidens indhold — masthead og footer beholder deres egne 20px. ---- */
@media (max-width: 809px) {
  main .container { padding-inline: var(--work-gutter-mobile); }
}

/* ============================================================
   SIDETITEL
   ============================================================ */
/* Referencen bruger 140px topluft over en 32px fixed topbar. Vores
   masthead er en høj identitetsblok i normalt flow, så 140px bevares
   ≥810 og reduceres ≤809, hvor den kompakte mobilheader overtager. */
.projects-head { padding-top: 140px; }

.projects-title {
  font-size: 80px;                    /* ≥1200 — målt                */
  font-weight: var(--fw-medium);      /* 500                          */
  line-height: 1;                     /* målt: lh = font-size         */
  letter-spacing: -0.06em;            /* målt: −4.8px ved 80px        */
  text-transform: uppercase;
  color: var(--fg);
  margin: 0;
}

/* ============================================================
   FILTERRÆKKE
   ============================================================ */
.projects-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 32px;                   /* målt kolonne-gap på referencen */
}

.filters {
  display: flex;
  flex-wrap: wrap;                    /* ombryder frit på mobil        */
  gap: 6px;
}

/* Semantiske knapper (referencen bruger <div> uden rolle — vi gør det bedre) */
.filter {
  font-family: inherit;
  font-size: 12px;
  font-weight: var(--fw-semibold);
  line-height: 1;
  letter-spacing: -0.24px;
  text-transform: uppercase;
  padding: 8px 12px;                  /* → 28px høj, som målt          */
  border: 0;
  border-radius: 0;                   /* ingen afrundede hjørner       */
  background: #F2F2F2;
  color: var(--fg);
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--ease-standard),
              color var(--motion-fast) var(--ease-standard);
}
.filter[aria-pressed="true"] {
  background: var(--inv-bg);
  color: var(--inv-fg);
}
.filter:hover { background: var(--line-strong); }
.filter[aria-pressed="true"]:hover { background: var(--inv-bg); }

/* ============================================================
   GRID — 4 / 2 / 1 (referencens breakpoints)
   ============================================================ */
.projects-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px 8px;                      /* row 12 · column 8 — målt      */
  padding-block: 32px 80px;           /* målt: 32px over, 80px under   */
  margin: 0;
}
@media (min-width: 810px) {
  .projects-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .projects-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ============================================================
   FILTRERING — skjulte kort må ikke fylde i layoutet
   ([hidden] skal slå .work__item's display: block)
   ============================================================ */
.work__item[hidden] { display: none !important; }

/* ============================================================
   RESPONSIVE — sidetitlens målte trin
   ============================================================ */
@media (max-width: 1199px) {
  .projects-title { font-size: 60px; }              /* målt 810–1199   */
}

@media (max-width: 809px) {
  .projects-head { padding-top: 64px; }
  .projects-title { font-size: 40px; }              /* målt ≤809       */
}