/* ==========================================================================
   COLLABS — Gemeinsame Styles für Übersichtsseite und Einzelartikel
   ========================================================================== */

/* --------------------------------------------------------------------------
   ÜBERSICHT: Liste aller Bild-Dialoge
   -------------------------------------------------------------------------- */

.collab-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.collab-list li {
    padding: 28px 0;
    border-bottom: 1px solid var(--color-border);
}

.collab-list li:first-child {
    padding-top: 0;
}

.collab-list a {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    text-decoration: none;
    color: inherit;
}

/* Thumbnail-Paar: zwei Hochformat-Bilder nebeneinander.
   Feste Pixelbreiten pro Bild statt calc() – das ist robuster.
   Jedes Bild 100px breit, Gap 8px → Container gesamt 208px. */
.collab-list__thumbs {
    display: flex;
    flex-shrink: 0;
    gap: 8px;
}

.collab-list__thumbs img {
    width: 140px;
    aspect-ratio: 3 / 4;   /* 100×133px pro Bild */
    object-fit: cover;
    display: block;
    border-radius: 4px;
}

.collab-list__text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.collab-list__date {
    display: block;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-light);
    margin-bottom: 6px;
}

.collab-list__title {
    display: block;
    font-weight: 700;
    font-size: 1.3rem;
    margin-bottom: 8px;
    color: var(--color-dunkelblau);
}

.collab-list a:hover .collab-list__title {
    color: var(--color-orange);
}

.collab-list p.collab-list__excerpt {
    margin: 0 0 10px;
    color: var(--color-text-muted);
    font-size: 0.98rem;
}

.collab-list__partner {
    display: block;
    font-size: 0.82rem;
    color: var(--color-text-light);
    margin-top: auto;
}

/* --------------------------------------------------------------------------
   EINZELARTIKEL: Bildpaar und Text
   -------------------------------------------------------------------------- */

.collab-pair {
    display: flex;
    gap: 16px;
    margin-bottom: 12px;
}

.collab-pair figure {
    flex: 1;
    margin: 0;
}

.collab-pair img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
}

.collab-pair figcaption {
    margin-top: 8px;
    font-size: 0.85rem;
    color: var(--color-text-light);
    text-align: center;
}

.collab-pair figcaption a {
    color: var(--color-text-light);
    text-decoration: none;
}

.collab-pair figcaption a:hover {
    color: var(--color-orange);
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
    .collab-list__thumbs img {
        width: 100px;    /* zwei Bilder à 70px + 8px Gap = 148px gesamt */
    }

    .collab-pair {
        flex-direction: column;
    }
}

/* --------------------------------------------------------------------------
   ZURÜCK-LINK zur Übersichtsseite
   -------------------------------------------------------------------------- */

.back-link {
    margin: 0 0 24px;
    font-size: 0.88rem;
}

.back-link a {
    color: var(--color-text-light);
    text-decoration: none;
}

.back-link a:hover {
    color: var(--color-orange);
}