/* Práce (/prace): inzerce práce a záskoků. Tmavá hlavička a čipy z bands.css (.bands-head, .gchip), filtry, detail,
   Moje inzeráty a formulář z bazar.css (.bz-*), tady jen vlastní hero, záložky druhu, karty inzerátů a drobnosti. */

/* hlavička: fotka (img/brand/jobs-hero.webp), ztmavení zleva z bands.css (.bands-head::before) */
.bands-head--jobs { background: var(--dark) url('../img/brand/jobs-hero.webp?v=1') 65% 45% / cover no-repeat; padding: 34px 0 26px; }
.bands-head--jobs > .wrap { position: relative; }   /* obsah nad ztmavením fotky */

/* záložky druhu (Vše / Práce / Záskok a výpomoc) a čipy směru (Hledám / Nabízím) */
.jb-switch { display: flex; justify-content: space-between; align-items: center; gap: 12px 20px; flex-wrap: wrap; margin: 22px 0 0; }
.jb-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16); }
.jb-tab { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 9px; color: var(--on-dark); font-weight: 700; font-size: 14px; transition: background .15s, color .15s; }
.jb-tab:hover { background: rgba(255, 138, 0, .16); color: #fff; }
.jb-tab.is-active { background: var(--grad) border-box; color: var(--dark); }
.jb-dirs { display: flex; gap: 8px; flex-wrap: wrap; }
.bands-head--jobs .genre-chips { margin-top: 16px; }

/* štítky druhu a směru */
.jb-badge { font-weight: 700; }
.jb-badge--job-offer { background: var(--accent-soft); color: var(--accent-ink); border-color: #fde2b5; }
.jb-badge--job-seek { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.jb-badge--standin-seek { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.jb-badge--standin-offer { background: #f0fdf4; color: #166534; border-color: #bbf7d0; }

/* karty inzerátů */
.jgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.jcard { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; align-items: start; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); transition: transform .2s, box-shadow .2s, border-color .2s; animation: bz-fade .35s backwards; animation-delay: calc(var(--i, 0) * 25ms); }
.jcard:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--line-2); }
.jcard.is-off { opacity: .7; }
.jcard-ico { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--dark-2); color: var(--orange); }
.jcard-body { display: grid; gap: 5px; min-width: 0; }
.jcard-top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.jcard-title { color: var(--text); font-weight: 700; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.jcard-title:hover { color: var(--accent-ink); }
.jcard-meta { display: flex; gap: 4px 12px; flex-wrap: wrap; }
.jcard-meta > span { display: inline-flex; gap: 4px; align-items: center; min-width: 0; }
.jcard-reward { font: 800 15px var(--font-head); color: var(--text); }
@media (prefers-reduced-motion: reduce) { .jcard { animation: none; } }

/* detail */
.jb-head { display: flex; gap: 16px; align-items: center; }
.jb-head h1 { font-size: 26px; margin: 8px 0 0; overflow-wrap: anywhere; }
.jb-head-ico { flex: 0 0 auto; width: 64px; height: 64px; border-radius: 16px; display: grid; place-items: center; background: var(--dark-2); color: var(--orange); }
.jb-reward { display: grid; margin: 0 0 8px; }
.jb-reward strong { font: 800 22px var(--font-head); overflow-wrap: anywhere; }
.jb-row-ico { background: var(--dark-2); }

/* karta záskoků na stránce akce */
.jb-event-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.jb-event-list a { display: grid; gap: 2px; padding: 8px 10px; border-radius: var(--radius-sm); border: 1px solid var(--line); color: var(--text); }
.jb-event-list a:hover { border-color: var(--accent); }
.jb-event-list a:hover strong { color: var(--accent-ink); }

/* formulář: výběr akce jen u záskoku, termín ne u muzikanta, popisky směru podle druhu */
.jb-formswitch { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.jb-formswitch .bz-types { margin: 0; }
.jb-form:not(:has(input[name="type"][value="standin"]:checked, input[name="type"][value="gig"]:checked)) .jb-event,
.jb-form:not(:has(input[name="type"][value="standin"]:checked)) .jb-opt,
.jb-form:has(input[name="type"][value="musician"]:checked) .jb-dates { display: none; }
.jb-dl:not(.jb-dl--job) { display: none; }
.jb-form:has(input[name="type"][value="standin"]:checked) .jb-dl--job,
.jb-form:has(input[name="type"][value="musician"]:checked) .jb-dl--job,
.jb-form:has(input[name="type"][value="gig"]:checked) .jb-dl--job { display: none; }
.jb-form:has(input[name="type"][value="standin"]:checked) .jb-dl--standin,
.jb-form:has(input[name="type"][value="musician"]:checked) .jb-dl--musician,
.jb-form:has(input[name="type"][value="gig"]:checked) .jb-dl--gig { display: inline; }
.jb-badge--gig-offer { background: #fff7ed; color: #c2410c; border-color: #fed7aa; }
.jb-badge--gig-seek { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.jb-badge--musician-offer { background: #faf5ff; color: #7e22ce; border-color: #e9d5ff; }
.jb-badge--musician-seek { background: #fdf4ff; color: #a21caf; border-color: #f5d0fe; }

@media (max-width: 1100px) { .jgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
    .jgrid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .jb-tabs { width: 100%; }
    .jb-tab { flex: 1; justify-content: center; padding: 8px 10px; font-size: 13px; }
    .jcard { grid-template-columns: 44px minmax(0, 1fr); padding: 12px; }
    .jcard-ico { width: 44px; height: 44px; }
}
@media (max-width: 640px) {
    .jb-tabs { display: flex; flex-wrap: wrap; max-width: 100%; }
    .jb-tab { flex: 1 1 auto; justify-content: center; padding: 8px 10px; }
}