/* =====================================================================
   jp-team.css
   Styles used only by the TEAM job pages. Load AFTER jp-otr-common.css.
   Anything here that overrides or extends common also carries its own
   tablet/phone rules so the load order never fights the media queries.

   Sections: 1 Hero collage  2 (notice moved to common)  3 Pay (single-rate box)
   5 Safety tweaks  6 Misc  7 Responsive
   ===================================================================== */

/* ===== 1. Hero collage (tall photo left, two stacked right on desktop) ===== */
.jp-collage-2, .jp-collage-3 { display: none; }

/* ===== 3. Pay: single-rate build-up box ===== */
.jp-base-rate-num {
    font-family: var(--font-head);
    font-size: 64px;
    font-weight: 700;
    line-height: 1;
    color: var(--bn-red);
    margin: 8px 0 4px;
}

.jp-unit { font-size: 24px; color: var(--bn-char); letter-spacing: 0; }
.jp-rate-note { font-size: 15px; margin-top: 4px; }

.jp-stackpay { margin-top: 20px; }

/* Rows are separated by a divider only between rows */
.jp-sp-row + .jp-sp-row { border-top: 1px solid var(--bn-line-dark); }

.jp-sp-val { font-family: var(--font-head); font-weight: 700; font-size: 26px; white-space: nowrap; }

.jp-sp-total {
    padding: 16px 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.jp-sp-total-label {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 20px;
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1.1;
}

.jp-sp-total-val { font-family: var(--font-head); font-weight: 700; font-size: 44px; line-height: 1; white-space: nowrap; }
.jp-sp-unit { font-family: 'Source Sans 3', sans-serif; font-size: 18px; font-weight: 600; }

.jp-sp-star { color: var(--bn-yellow); font-size: 13px; line-height: 1; margin-left: 2px; }
.jp-sp-tag-yellow .jp-sp-star { color: var(--bn-char); }

/* ===== 5. Safety tweaks ===== */
.jp-dark-card .jp-big { font-size: 42px; margin-bottom: 8px; }

/* ===== 6. Misc ===== */
#additional-pay { scroll-margin-top: 70px; } /* keeps the heading clear of the site navbar */

.jp-details details ul { margin: 12px 0 20px; padding-left: 20px; line-height: 1.7; }

/* ===== 7. Responsive ===== */

/* Desktop (993px and up) */
@media (min-width: 993px) {
    /* Collage: tall photo left, two stacked right */
    .jp-hero-media {
        display: grid;
        grid-template-columns: 1.2fr 1fr;
        grid-template-rows: 1fr 1fr;
        gap: 12px;
        background: none;
        overflow: visible;
        border-radius: 0;
    }

    .jp-hero-media img { border-radius: 16px; background: var(--bn-char-hover); }
    .jp-collage-1 { grid-row: 1 / span 2; }
    .jp-collage-2, .jp-collage-3 { display: block; }

    /* Running area: text left, map right */
    .jp-sec-compact .jp-running-grid { grid-template-columns: minmax(0, 1fr) 420px; gap: 32px; }
    .jp-sec-compact .jp-running-lead { margin: 0 0 16px; }
    .jp-sec-compact .jp-map-card { padding: 10px; }
}

/* Tablet and below (992px and down) */
@media (max-width: 992px) {
    .jp-running-grid { grid-template-columns: 1fr; }
}

/* Phone (600px and down) */
@media (max-width: 600px) {

    /* Base rate + pay box */
    .jp-base-rate-num { font-size: 30px; margin: 4px 0 2px; }
    .jp-unit { font-size: 16px; }
    .jp-stackpay { margin-top: 14px; }
    .jp-sp-val { font-size: 20px; }
    .jp-sp-total { padding: 12px 14px; }
    .jp-sp-total-label { font-size: 16px; }
    .jp-sp-total-val { font-size: 32px; }
    .jp-sp-unit { font-size: 14px; }

    /* Home time group */
    .jp-home { margin-top: 22px; padding-top: 20px; }
    .jp-home::before { width: 52px; }
    .jp-home-label { top: -10px; left: 62px; padding: 0 8px; font-size: 12px; }

    /* Facts */
    .jp-facts { grid-template-columns: 1fr; margin-top: 12px; gap: 8px; }
    .jp-facts li { padding: 8px 12px; font-size: 14px; gap: 10px; }
    .jp-facts li.jp-fact-lead { font-size: 15px; }
    .jp-facts strong { font-size: 12px; }
    .jp-facts .fa { font-size: 20px; }

    /* Safety */
    .jp-dark-card .jp-big { font-size: 26px; margin-bottom: 4px; }

    /* Running area */
    .jp-running-lead { margin-bottom: 10px; }

    /* Partials */
    .jp-partial, .jp-partial ul { line-height: 1.5; }
    .jp-partial p { margin-bottom: 8px; }
}