/* Block: Stellenliste (Tabelle)
   Sollwerte am Figma-Screenshot ausgemessen (.figma-ref/Sprint 2/Karriere*.png,
   Werkzeuge .figma-ref/px.mjs und .figma-ref/ink.mjs), 2026-08-12:

   Überschrift   D 34px · T/M 22px · Literata SemiBold #263864
   Zellen        alle drei Breakpoints 20px Poppins, Zeile 30px, #263864
                 Stellentitel SemiBold, Bereich/Standort Regular
   Spaltenköpfe  20px Poppins SemiBold – NUR auf Desktop, T/M zeigen sie nicht
   Linie         2px #6BE381; oben immer, unten NUR auf Desktop
   Zeilen        Grund #F4F5F7 · D/T 64px hoch · Abstand D/T 24px, M 16px
   Spalten (D)   50% / 35% / 15% bei 10px Innenabstand der Zeile – damit sitzen
                 Bereich bei 863px und der Pin bei 1371px wie im Figma
   Pin           32 × 40, Strich 3,5, grün · Abstand zum Ortsnamen 18px
   Umbruch       ab 1200px Tabelle mit Köpfen · 768–1199px einzeilig ohne Köpfe
                 (Zellen hugen den Inhalt) · darunter gestapelte Karten
   Keine clamp()-Größen – feste Stufen je Breakpoint. */

/* Abstand oberhalb/unterhalb der Sektion: assets/css/section-spacing.css
   (Mobil bewusst nur 24px nach unten – Figma: 26px bis zum nächsten Block) */

.job-list-headline {
    font-family: var(--font-heading);
    font-weight: var(--fw-semibold);
    color: var(--color-dark);
    font-size: 22px;
    line-height: normal;
    margin-top: 0;
    margin-bottom: 12px;
}

/* Die Spaltenköpfe sind reine Beschriftung der Desktop-Tabelle. */
.job-list-head {
    display: none;
}

.job-list {
    list-style: none;
    margin: 0;
    padding: 16px 0 0;                         /* Abstand grüne Linie → erste Karte */
    border-top: 2px solid var(--color-green);
}

.job-list-item + .job-list-item {
    margin-top: 16px;
}

.job-row {
    background-color: var(--color-surface);
    padding: 12px 16px;
    text-decoration: none;
    color: var(--color-dark);
    transition: background-color 0.15s ease;
}

.job-row:hover,
.job-row:focus-visible {
    background-color: #e9ebef;
    color: var(--color-dark);
}

/* Auf Mobil steht jede Zelle in einer eigenen Zeile. */
.job-cell {
    width: 100%;
    font-family: var(--font-body);
    font-weight: var(--fw-normal);
    font-size: var(--fs-copy-m);               /* 20px */
    line-height: 30px;
    color: var(--color-dark);
}

/* Der Stellentitel ist ein h3 – Browser-Vorgaben zurücksetzen. */
.job-cell-title {
    font-weight: var(--fw-semibold);
    margin: 0 0 20px;
}

.job-cell-area {
    margin-bottom: 12px;
}

.job-cell-location {
    display: flex;
    align-items: center;
    gap: 18px;
}

.job-pin {
    flex: 0 0 auto;
    width: 32px;
    height: 40px;
    color: var(--color-green);
}

.job-list-empty {
    font-family: var(--font-body);
    font-size: var(--fs-copy-s);               /* 16px */
    line-height: 1.6;
    color: var(--color-text);
    margin: 0;
}

/* ── Tablet (≥768px) ─────────────────────────────────────────
   Figma löst die Spalten auf: Titel, Bereich und Standort stehen
   einzeilig nebeneinander und hugen ihren Inhalt – sie fluchten
   also bewusst NICHT untereinander. */
@media (min-width: 768px) {
    .job-list-headline {
        margin-bottom: 28px;
    }

    .job-list {
        padding-top: 32px;
    }

    .job-list-item + .job-list-item {
        margin-top: 24px;
    }

    .job-row {
        align-items: center;
        /* nowrap ist hier entscheidend: Bei flex-wrap: wrap (Bootstraps .row)
           bricht der Browser um, BEVOR er schrumpft – flex-shrink am Titel
           käme dann nie zum Zug. */
        flex-wrap: nowrap;
        column-gap: 20px;                      /* Figma Tablet: 20px Titel→Bereich */
        min-height: 64px;
        padding: 8px 9px;
    }

    .job-cell {
        width: auto;
    }

    /* Bei 768px steht die längste Stellenbezeichnung im Figma auf 4px genau in
       der Zeile. Bootstrap setzt auf .row > * ein flex-shrink: 0 – damit würde
       der Standort bei einem einzigen Pixel Überhang komplett in die nächste
       Zeile rutschen. Stattdessen darf der Titel schrumpfen und notfalls in
       sich umbrechen; die drei Spalten bleiben nebeneinander. */
    .job-cell-title {
        flex-shrink: 1;
        min-width: 0;
    }

    .job-cell-area,
    .job-cell-location {
        flex-shrink: 0;
    }

    .job-cell-title,
    .job-cell-area {
        margin-bottom: 0;
    }
}

/* ── Desktop (≥1200px) ───────────────────────────────────────
   Erst hier wird daraus die Tabelle mit Spaltenköpfen und
   unterer Abschlusslinie. */
@media (min-width: 1200px) {
    .job-list-headline {
        font-size: 34px;
        margin-bottom: 34px;
    }

    .job-list-head {
        display: flex;
        align-items: center;
        padding: 0 10px;
        margin-bottom: 22px;
    }

    .job-list-head .job-cell {
        font-weight: var(--fw-semibold);
    }

    .job-list {
        padding-bottom: 22px;
        border-bottom: 2px solid var(--color-green);
    }

    .job-row {
        column-gap: 0;
        padding: 8px 10px;
    }

    /* Prozentwerte statt col-Klassen: 50/35/15 trifft die im Figma
       gemessenen Spaltenkanten, die Bootstrap-Zwölftel nicht. */
    .job-cell-title {
        width: 50%;
    }

    .job-cell-area {
        width: 35%;
    }

    .job-cell-location {
        width: 15%;
    }
}