/* Personio Jobs (IT-WINGS) - Basis-Styles.
   Alle anpassbaren Werte kommen als CSS-Variablen aus dem Backend (inline gesetzt).
   Theme-Overrides sind jederzeit moeglich. */

.pjw-jobs {
    --pjw-primary: #1a56db;
    --pjw-text: #1f2937;
    --pjw-muted: #6b7280;
    --pjw-bg: #ffffff;
    --pjw-border: #e5e7eb;
    --pjw-border-width: 1px;
    --pjw-radius: 10px;
    --pjw-gap: 16px;
    color: var(--pjw-text);
    box-sizing: border-box;
}
.pjw-jobs *,
.pjw-jobs *::before,
.pjw-jobs *::after { box-sizing: border-box; }

.pjw-empty { color: var(--pjw-muted); font-style: italic; }

/* Karte */
.pjw-card {
    background: var(--pjw-bg);
    border: var(--pjw-border-width) solid var(--pjw-border);
    border-radius: var(--pjw-radius);
    padding: calc(var(--pjw-gap) * 1.1);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pjw-card-title { margin: 0; font-size: 1.15rem; line-height: 1.3; }

.pjw-meta-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.pjw-meta { font-size: .9rem; color: var(--pjw-muted); }
.pjw-meta-label { font-weight: 600; color: var(--pjw-text); }
.pjw-meta-value { color: var(--pjw-muted); }

.pjw-desc { font-size: .92rem; color: var(--pjw-text); }
.pjw-desc :is(h1,h2,h3,h4) { font-size: 1rem; margin: .4em 0 .2em; }

/* Bewerben-Button (alle Werte aus den Backend-Einstellungen) */
.pjw-apply {
    align-self: var(--pjw-btn-align, flex-start);
    margin-top: auto;
    display: inline-block;
    box-sizing: border-box;
    text-align: center;
    text-decoration: none;
    background: var(--pjw-btn-bg, var(--pjw-primary));
    color: var(--pjw-btn-text, #fff) !important;
    padding: var(--pjw-btn-pad-y, 8px) var(--pjw-btn-pad-x, 16px);
    border-radius: var(--pjw-btn-radius, var(--pjw-radius));
    width: var(--pjw-btn-width, auto);
    font-weight: 600;
    font-size: .9rem;
    cursor: pointer;
    transition: background var(--pjw-btn-transition, 200ms) ease,
                color var(--pjw-btn-transition, 200ms) ease,
                transform var(--pjw-btn-transition, 200ms) ease,
                box-shadow var(--pjw-btn-transition, 200ms) ease,
                filter var(--pjw-btn-transition, 200ms) ease;
}
.pjw-apply:hover,
.pjw-apply:focus-visible {
    background: var(--pjw-btn-hover-bg, var(--pjw-btn-bg));
    color: var(--pjw-btn-hover-text, var(--pjw-btn-text)) !important;
    transform: var(--pjw-btn-hover-transform, none);
    text-decoration: var(--pjw-btn-hover-decoration, none);
    filter: var(--pjw-btn-hover-filter, none);
    box-shadow: var(--pjw-btn-hover-shadow, none);
}

/* Grid */
.pjw-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--pjw-gap);
}

/* Liste */
.pjw-list { display: flex; flex-direction: column; gap: var(--pjw-gap); }
.pjw-row {
    display: flex; align-items: center; justify-content: space-between; gap: var(--pjw-gap);
    background: var(--pjw-bg);
    border: var(--pjw-border-width) solid var(--pjw-border);
    border-radius: var(--pjw-radius);
    padding: calc(var(--pjw-gap) * 0.9);
}
.pjw-row-title { margin: 0 0 6px; font-size: 1.05rem; }
.pjw-meta-inline { flex-direction: row; flex-wrap: wrap; gap: 4px 14px; }

/* Tabelle */
.pjw-table-wrap { overflow-x: auto; }
.pjw-table {
    width: 100%; border-collapse: collapse;
    border: var(--pjw-border-width) solid var(--pjw-border);
    border-radius: var(--pjw-radius); overflow: hidden;
}
.pjw-table th, .pjw-table td {
    text-align: left; padding: 10px 12px;
    border-bottom: 1px solid var(--pjw-border);
    font-size: .92rem;
}
.pjw-table th { background: color-mix(in srgb, var(--pjw-primary) 8%, var(--pjw-bg)); color: var(--pjw-text); }
.pjw-table tr:last-child td { border-bottom: 0; }
.pjw-table-action { text-align: right; white-space: nowrap; }

/* Slider */
.pjw-slider { position: relative; display: flex; align-items: center; gap: 8px; }
.pjw-slider-track {
    display: flex; gap: var(--pjw-gap); overflow-x: auto; scroll-behavior: smooth;
    scroll-snap-type: x mandatory; padding: 4px; flex: 1;
    -ms-overflow-style: none; scrollbar-width: none;
}
.pjw-slider-track::-webkit-scrollbar { display: none; }
.pjw-slide { flex: 0 0 280px; scroll-snap-align: start; }
.pjw-slider-nav {
    flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
    border: var(--pjw-border-width) solid var(--pjw-border);
    background: var(--pjw-bg); color: var(--pjw-text);
    font-size: 20px; line-height: 1; cursor: pointer;
}
.pjw-slider-nav:hover { border-color: var(--pjw-primary); color: var(--pjw-primary); }

/* Responsive */
@media (max-width: 640px) {
    .pjw-row { flex-direction: column; align-items: flex-start; }
    .pjw-table thead { display: none; }
    .pjw-table, .pjw-table tbody, .pjw-table tr, .pjw-table td { display: block; width: 100%; }
    .pjw-table tr { border-bottom: var(--pjw-border-width) solid var(--pjw-border); }
    .pjw-table td { border: 0; padding: 6px 12px; }
    .pjw-table td::before {
        content: attr(data-label) ": "; font-weight: 600; color: var(--pjw-text);
    }
    .pjw-table-action::before { content: ""; }
}