/* ============================================================
   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(6px, 0.7vw, 12px);
  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);
}

/* 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);
}

.gal-frame .media{
  /* FARBIG. Der Rahmen sitzt am BILD, nicht am Rahmen-Element: im dichten
     Mosaik schöbe sich eine wachsende Kachel sonst über ihre Nachbarn.
     outline-width startet bei 0, damit sie beim Erscheinen mitwächst statt
     hart einzuspringen (siehe .is-active weiter unten). */
  outline: 0 solid var(--blue);
  outline-offset: -6px;
  transition: outline-width 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 */
  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»)
   — `outline` statt `box-shadow`: eine Ecke drin blieb der Rahmen sonst
   unterm Bildinhalt verdeckt («es muss vor dem medium sein») — outline
   liegt garantiert über dem Inhalt, in jedem Browser. Negativer Offset hält
   ihn innen, damit nichts über die Kachel hinausragt oder den Nachbarn
   verdeckt. */
.gal-item.is-active{ z-index: 2; }
.gal-item.is-active .gal-frame .media{ outline-width: 6px; }
.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;
  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. */