/* ============================================================
   work.css — die WORK-Rubrik (Sektion der Startseite)
   Vorbild juanmora.co/work: klebender Projekt-Index links,
   Projekte rechts untereinander mit Rubrik · Jahr · Rolle.
   Klick auf Cover oder Titel öffnet die Case-Study (components/case).
   ============================================================ */

/* --- Baukasten: ein Feed = eine Sektion ---------------------------------
   Jeder Feed (WORKFEED.create in feeds.js) rendert dieselbe Struktur.
   Der erste sieht exakt aus wie die Seite vorher; jeder weitere bekommt
   eine feine Trennlinie und etwas weniger Luft nach oben. */
.work-feed + .work-feed .work-head{
  padding-top: clamp(40px, 8vh, 90px);
  border-top: 1px solid var(--line);
}

/* --- Kopf ---------------------------------------------------------------- */
.work-head{
  padding-top: clamp(100px, 16vh, 190px);
  padding-bottom: clamp(30px, 6vh, 60px);
  align-items: end;
  row-gap: clamp(14px, 2.5vh, 26px);
}

.work-head-title{
  grid-column: 1 / span 7;
  margin: 0;
  font-family: var(--display-font);
  font-weight: var(--title-weight);   /* siehe styles/base.css, Rolle TITEL */
  font-size: var(--t-sec);
  line-height: 0.85;
  letter-spacing: -0.045em;
}

.work-head-note{
  grid-column: 9 / -1;
  margin: 0;
  align-self: end;
  font-size: var(--t-lead);
  color: var(--dim);
  text-wrap: pretty;
}

/* --- Filter -------------------------------------------------------------- */
/* Filterzeile klebt, solange man in der WORK-Sektion ist. Sie liegt darum
   NEBEN dem Kopf (siehe work.js) — sticky wandert nur im Elternelement.
   Eigener Grund + Hairline, weil die Galerie darunter durchläuft. */
.work-filter{
  position: sticky;
  top: var(--nav-h);        /* unter der festen Kopfzeile */
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: clamp(10px, 1.6vh, 16px);
  padding-bottom: clamp(8px, 1.4vh, 14px);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.work-filter > *{ grid-column: auto; }

.work-filter-btn{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 44px;
  /* rahmenlos, siehe styles/templates.css («2b. Die Knöpfe der Website») */
  color: var(--ink);
  font: inherit;
  font-family: var(--text2-font);
  font-variation-settings: var(--axis-ui);
  /* `font: inherit` setzt Familie, Grösse UND Gewicht zurück — alle drei
     hier wieder setzen (Rollen siehe styles/base.css). */
  font-size: var(--btn-size);
  font-weight: var(--text2-weight);
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.28s ease, border-color 0.28s ease, color 0.28s ease;
}
/* Hover: Rahmen + Blau · aktiver Filter: Fläche in Blau, siehe templates.css */

.work-filter-count{
  font-variant-numeric: tabular-nums;
  opacity: 0.6;
}

/* --- Zwei-Spalten-Körper -------------------------------------------------- */
.work-body{
  align-items: start;
  padding-bottom: clamp(50px, 10vh, 120px);
}

/* --- Klebende Titelliste links (juanmora) ------------------------------- */
.work-index{
  grid-column: 1 / span 3;
  position: sticky;
  top: calc(var(--nav-h) + 74px);   /* unter der klebenden Filterzeile */
  align-self: start;
}

.work-index-list{
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.work-index-item{ border-bottom: 1px solid var(--line); }
.work-index-item.is-hidden{ display: none; }

.work-index-link{
  display: block;
  padding: 11px 0;
  color: var(--ink);
  text-decoration: none;
  transition: padding-left 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.work-index-title{
  display: block;
  font-size: var(--t-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.6;
  transition: opacity 0.3s ease;
}

/* Rubrik erscheint erst beim Hervorheben — hält die Liste ruhig */
.work-index-cat{
  display: block;
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Hervorgehobener Titel (Hover hier ODER auf der Kachel) */
.work-index-item.is-active .work-index-link{ padding-left: 8px; }
.work-index-item.is-active .work-index-title{ opacity: 1; }
.work-index-item.is-active .work-index-cat{ opacity: 1; transform: none; }

/* ============================================================
   FOTOGALERIE rechts — MOSAIK (User 2026-08-18, Vorbild partizan.com/work)

   · dicht gepackt: schmale Fugen, keine Löcher (`grid-auto-flow: dense`)
   · unterschiedlich grosse Kacheln auf EINEM Raster: die Zeilen sind fein
     (ein Viertel Spaltenbreite), jede Kachel belegt so viele davon, wie ihr
     Format braucht — home/work.js (layoutMosaic) setzt --sc/--sr je Kachel
   · jede vierte Kachel nimmt zwei Spalten → die grossen Felder
   · FARBIG. Bis 2026-08-18 lag die Galerie im Ruhezustand in Graustufen und
     nur das hervorgehobene Projekt wurde bunt (User: «mache die feeds im
     worksektion wieder bunt»)
   ============================================================ */
.work-gallery{
  --gal-gap: clamp(12px, 1.5vw, 26px);   /* mehr Luft = ruhiger (User 2026-09-25) */
  grid-column: 5 / -1;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  grid-auto-rows: var(--row, 90px);
  grid-auto-flow: row dense;   /* füllt Lücken mit der nächsten passenden Kachel */
  gap: var(--gal-gap);
}

/* Ohne Titelliste (index: false) nimmt die Galerie die volle Breite */
.work-body[data-index="off"] .work-gallery{ grid-column: 1 / -1; }

.gal-item{
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-family: var(--text2-font);
  font-variation-settings: var(--axis-ui);
  /* `font: inherit` setzt Familie, Grösse UND Gewicht zurück — alle drei
     hier wieder setzen (Rollen siehe styles/base.css). */
  font-size: var(--btn-size);
  font-weight: var(--text2-weight);
  text-align: left;
  cursor: pointer;
}
.gal-item.is-hidden{ display: none; }

/* Wie viele Felder die Kachel belegt — die Zahlen kommen aus layoutMosaic() */
.gal-item{
  grid-column: span var(--sc, 1);
  grid-row: span var(--sr, 4);
}

/* Schluss-Kachel am Ende des Mosaiks (feed.outro in feeds.js, User
   2026-09-23: «kommen noch paar coole projekte dazu») — kein Foto, darum
   fest bemessen statt über layoutMosaic() (das kennt nur .gal-item).
   Halb so gross wie früher (User 2026-09-25): 1 Spalte × 4 Zeilen statt
   2 × 8. KEIN Radius, siehe .gal-frame oben. */
.gal-outro{
  grid-column: span 1;
  grid-row: span 4;
  display: flex;
  flex-direction: column;       /* <small> UNTER den Titel, nicht daneben */
  justify-content: flex-end;
  padding: clamp(14px, 1.6vw, 22px);
  background: var(--blue);
  color: #fff;
  font-family: var(--display-font);
  font-weight: var(--title-weight);   /* siehe styles/base.css, Rolle TITEL */
  font-size: clamp(1rem, 1.5vw, 1.35rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.gal-outro small{
  display: block;
  margin-top: 8px;
  font-family: var(--text2-font);
  font-variation-settings: var(--axis-ui);
  font-size: var(--t-label);
  font-weight: var(--text2-weight);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.8;
}
@media (max-width: 560px){
  .gal-outro{ grid-column: span 1; grid-row: span 3; }
}

/* Der Rahmen füllt sein Feld im Raster — die Höhe kommt also vom Raster,
   nicht mehr vom Seitenverhältnis des Bildes (--ar wird nicht mehr
   gebraucht). Das Bild wird zugeschnitten (`object-fit: cover`, site.css). */
.gal-frame{
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* KEIN Radius (User 2026-08-18) — im dichten Mosaik zählt die Kante:
     runde Ecken liessen zwischen den Kacheln lauter kleine Löcher stehen. */
  border-radius: 0;
  background: var(--surface-3);
}

/* Der blaue Hover-Rahmen ist eine EIGENE Ebene über dem Medium, nicht
   eine outline AM <img>/<video> (User 2026-09-25: «rahmen nicht alle
   richtig dargestellt»): ein Video läuft im Browser auf einer eigenen
   Grafik-Ebene und deckte die outline an sich selbst zu — bei Video-Kacheln
   fehlte der Rahmen. Das ::after liegt im Stapel NACH dem Medium und damit
   immer darüber. inset: 0 = genau die Kachel = genau das Bild (cover). Der
   Rahmen wächst nach innen, drängt also keinen Nachbarn weg. */
.gal-frame::after{
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  box-shadow: inset 0 0 0 0 var(--blue);
  transition: box-shadow 0.25s ease;
}

.gal-placeholder{
  display: grid;
  place-items: center;
  font-size: var(--t-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
}

/* Anzahl der Medien, klein in der Ecke */
.gal-count{
  position: absolute;
  right: 10px;
  top: 10px;          /* oben — unten links liegt das Titel-Etikett */
  z-index: 2;         /* über dem Hover-Rahmen (.gal-frame::after) */
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: rgba(250, 246, 239, 0.86);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transition: opacity 0.35s ease;
}

/* --- Hervorgehoben: ein blauer Rahmen ums Bild, die anderen treten zurück
   (User 2026-08-29: «nicht leicht reinzoomen sondern einen rahmen … blau»)
   — der Rahmen selbst ist .gal-frame::after (siehe oben), eine eigene
   Ebene ÜBER dem Medium («es muss vor dem medium sein»). */
.gal-item.is-active{ z-index: 2; }
.gal-item.is-active .gal-frame::after{ box-shadow: inset 0 0 0 6px var(--blue); }
.gal-item.is-active .gal-count{ opacity: 1; }

/* Solange EIN Projekt hervorgehoben ist, treten die anderen zurück. Nur noch
   über die Deckkraft — im Mosaik gäbe es für ein Schrumpfen keinen Platz,
   die Fuge würde ungleich. */
.work-gallery.has-active .gal-item:not(.is-active) .gal-frame{ opacity: 0.62; }
.gal-frame{ transition: opacity 0.45s ease; }

/* --- Der Titel am Cursor -------------------------------------------------
   Beim Überfahren einer Kachel hängt der Projekttitel am Zeiger (work.js,
   initCursorLabel) — User 2026-08-18: «so sieht es viel cooler aus».

   ZWEI Elemente: aussen die Mausverfolgung (dort schreibt JS `transform`),
   innen das Aussehen samt Kippwinkel und Versatz. Sonst überschriebe die eine
   Transformation die andere.                                               */
.gal-cursor{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 960;               /* über dem Kreis (950), unter dem Popover */
  pointer-events: none;       /* die Kachel darunter bleibt der Knopf */
  will-change: transform;
}

.gal-cursor-in{
  display: inline-block;
  padding: 7px 14px 6px;
  /* GERADE, ohne Radius, dünne Schrift (User 2026-08-18). `font-weight`
     greift, weil --axis-ui keine 'wght'-Achse nennt (SCHRIFT-Block in
     styles/base.css). */
  border-radius: 0;
  background: var(--blue);
  color: #fff;
  font-family: var(--text2-font);
  font-variation-settings: var(--axis-ui);
  font-size: var(--btn-size);
  font-weight: 320;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  transform-origin: 0 0;
  /* Nur der Versatz nach rechts unten, damit das Etikett nicht auf der
     Zeigerspitze klebt — kein Kippwinkel mehr. */
  transform: translate(16px, 16px) scale(0.92);
  opacity: 0;
  transition: opacity 0.22s ease,
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.gal-cursor.is-on .gal-cursor-in{
  opacity: 1;
  transform: translate(16px, 16px) scale(1);
}

/* --- Titel-Etikett auf der Kachel (nur ohne Zeiger) ----------------------
   User 2026-08-18: unter den Kacheln stand Titel · Jahr · Art · Rolle, und
   die Galerie las sich dadurch wie eine Liste mit Bildern. Jetzt trägt die
   Vorschau nur noch Bilder mit Abstand dazwischen; der Titel kommt beim
   Überfahren.

   Das Etikett liegt ABSOLUT über dem unteren Rand des Rahmens — so nimmt es
   keine Höhe weg (zwischen zwei Bildern steht nur --gal-gap) und die
   Spaltenverteilung rechnet weiter mit dem reinen Seitenverhältnis. Es sitzt
   NICHT im Rahmen, damit der Zoom (scale 1.06) die Schrift nicht mitzieht. */
.gal-item{ position: relative; }

.gal-label{
  display: none;              /* mit Zeiger übernimmt .gal-cursor */
  position: absolute;
  z-index: 2;                 /* über dem Hover-Rahmen */
  left: 10px;
  bottom: 10px;
  max-width: calc(100% - 20px);
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: rgba(250, 246, 239, 0.86);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--ink);
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;   /* der Knopf darunter bleibt der Klickfänger */
}

/* Sichtbar wird es nur ohne Zeiger, siehe @media (hover: none) weiter unten */

/* Hinweis, wenn ein Filter nichts übrig lässt */
.work-empty{
  grid-column: 1 / -1;
  padding: 60px 0;
  color: var(--dim);
}

/* --- Schmale Screens ------------------------------------------------------ */
@media (max-width: 980px){
  .work-head-title{ grid-column: 1 / -1; }
  .work-head-note{ grid-column: 1 / -1; }
  /* Titelliste weg — kein Platz daneben. Die Titel kommen dort dauerhaft
     aufs Bild (siehe @media (hover: none)). */
  .work-index{ display: none; }
  .work-gallery{ grid-column: 1 / -1; }
}

/* Ohne Hover (Touch): die Titel dauerhaft aufs Bild, sonst blieben die
   Projekte namenlos. */
@media (hover: none){
  .gal-label{ display: block; opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce){
  .gal-label{ transform: none; }
}

/* ENTFALLEN mit dem Mosaik (2026-08-18): die GEGENLÄUFIG scrollenden Spalten
   (`animation-timeline: view()` auf `.gal-col:nth-child(odd)`, Vorbild
   scroll-driven-animations.style). Ein Mosaik hat keine Spaltenelemente mehr,
   über die sich eine Kachel spannen liesse, und einzelne Kacheln
   gegeneinander zu verschieben risse die dichte Packung auf. Wer die Bewegung
   zurückwill, braucht wieder echte .gal-col-Spalten — und damit das alte
   Masonry statt des Mosaiks. */