/* Project mosaic: the homepage gallery of project detail shots. */

/* Mauerwerk statt Raster.
 *
 * "Foto Originalgrösse" kam sechsmal, allein zu dieser Wand. Mit einem festen
 * Raster gibt es dafuer nur zwei Moeglichkeiten, und beide sind schlecht:
 * cover schneidet an, contain laesst 33 % der Flaeche leer und die Wand faellt
 * auseinander. Spalten fester Breite mit freier Hoehe koennen beides: jedes
 * Foto steht vollstaendig und in seinem eigenen Format da, und es bleiben nur
 * die 11 % am unteren, ausgefransten Rand.
 *
 * Der Preis: Spalten laufen von oben nach unten, die Lesereihenfolge ist also
 * nicht mehr zeilenweise. Fuer eine Bilderwand ohne Textbezug ist das ohne
 * Belang. */
.project-mosaic {
    list-style: none;
    column-count: 4;
    column-gap: 10px;
    margin-top: var(--space-xl);
}
.project-mosaic li {
    position: relative;
    break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: 10px;
}

/* Welche Kachel gross ist, steuert data-gross aus den Projektdaten. Eine
   Regel auf jede fuenfte Position waere beim naechsten neuen Projekt auf ein
   anderes Bild gerutscht. */

.project-mosaic a {
    display: block;
    position: relative;
    width: 100%;
    /* Keine feste Hoehe mehr: im Spaltensatz gibt das Bild die Hoehe vor.
       Mit height:100% blieb der Anker ohne Bezugshoehe und fiel auf 0 zusammen. */
    overflow: hidden;
    text-decoration: none;
}

/* "Foto Originalgrösse" - sechsmal angemerkt, allein fuer diese Wand. Damit
   gilt es jetzt ueberall auf der Seite: kein Projektfoto wird mehr
   angeschnitten, auch nicht in der Mosaikwand. */
.project-mosaic img {
    display: block;
    width: 100%;
    height: auto;               /* die Hoehe folgt dem Bild, nichts wird beschnitten */
    transition: opacity .25s ease;
}

.project-mosaic a:hover img,
.project-mosaic a:focus-visible img { opacity: .85; }

.mosaic-label {
    position: absolute;
    inset: auto 0 0 0;
    padding: var(--space-lg) var(--space-sm) var(--space-sm);
    background: linear-gradient(transparent, rgba(15, 17, 19, .88));
    font-family: var(--font-display);
    font-size: var(--step-0);
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--white);
    opacity: 0;
    transition: opacity .25s ease;
}

.project-mosaic a:hover .mosaic-label,
.project-mosaic a:focus-visible .mosaic-label { opacity: 1; }

/* Touch devices have no hover, so the label would never appear. */
@media (hover: none) {
    .mosaic-label { opacity: 1; }
}

@media (max-width: 980px) { .project-mosaic { column-count: 3; } }
@media (max-width: 620px) { .project-mosaic { column-count: 2; } }

/* Anmerkung 15 und 32: Die Bilder klebten aneinander. Etwas Luft und eine
   feine Umrandung trennen sie, ohne dass die Wand auseinanderfällt.
   Zweiter Durchgang: 10 px Abstand und eine Umrandung in --steel-800 (#343a40)
   waren zwar da, aber vor dem Abschnittshintergrund #262b30 kaum von den oft
   dunklen Bildraendern zu unterscheiden — der Kunde hat die Anmerkung darum
   erneut aufgemacht. Jetzt 16 px und eine Umrandung, die sich vom Hintergrund
   abhebt, statt in ihm zu verschwinden. */
.project-mosaic { gap: 16px; }
.project-mosaic a { border: 1px solid rgba(255, 255, 255, .16); }
.project-mosaic a:hover, .project-mosaic a:focus-visible { border-color: var(--accent); }

/* Anmerkungen 16 und 18 ("Dieses Bild größer") liefen ueber data-gross und
   zwei Rasterfelder. Im Spaltensatz haben alle Kacheln dieselbe Breite; ein
   hochkantes Foto wird dort von selbst hoeher und damit groesser. Die Auszeichnung
   bleibt in den Daten, falls die Betonung wieder gebraucht wird. */