/* =====================================================================
   jp-solo.css
   Styles used only by the SOLO 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 Pay (tiered build-up)  2 Band callout  3 Safety tweaks
   4 Responsive (phone)
   ===================================================================== */

/* ===== 1. Pay: tiered build-up box ===== */
.jp-rate-tag { margin-top: 10px; font-size: 14px; }
.jp-rate-tag:empty { display: none; }
.jp-rate-note { font-size: 15px; margin-top: 6px; }
.jp-partial-spaced { margin-top: 12px; }

.jp-sp-group { padding: 14px 22px 8px; }

.jp-sp-group-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 22px;
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1.1;
}

.jp-sp-tier {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
}

.jp-sp-tier + .jp-sp-tier { border-top: 1px dashed var(--bn-line-dark); }

.jp-sp-exp {
    flex: none;
    background: var(--bn-yellow);
    color: var(--bn-char);
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 3px 12px;
    border-radius: 99px;
    white-space: nowrap;
}

.jp-sp-exp.jp-sp-exp-dark { background: var(--bn-char); color: var(--bn-yellow); }

/* In the solo box every row sits under a divider */
.jp-sp-row { border-top: 1px solid var(--bn-line-dark); }

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

.jp-sp-to {
    font-family: 'Source Sans 3', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--bn-on-dark);
}

/* Total block holds the tiers */
.jp-sp-total { padding: 14px 22px 8px; }

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

.jp-sp-total .jp-sp-tier + .jp-sp-tier { border-top: 1px dashed rgba(35,31,32,.35); }
.jp-sp-total .jp-sp-val { font-size: 34px; color: var(--bn-char); }
.jp-sp-total .jp-sp-to,
.jp-sp-total .jp-sp-mi { color: var(--bn-char); }

/* Home time: single full-width tile */
.jp-home .jp-facts { grid-template-columns: 1fr; }

/* ===== 2. Band pay callout (used by shared partials) ===== */
.jp-band {
    background: var(--bn-char);
    border-top: 4px solid var(--bn-yellow);
    border-radius: 12px;
    padding: 20px;
    color: #fff;
}

.jp-band-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 14px; }

.jp-band-tag {
    background: var(--bn-yellow);
    color: var(--bn-char);
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 4px 14px;
    border-radius: 99px;
}

.jp-band-sub { font-weight: 600; font-size: 16px; color: var(--bn-on-dark); }

.jp-band-pills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

.jp-band-pill {
    background: rgba(255,255,255,.06);
    border: 1px solid var(--bn-line-dark);
    border-left: 4px solid var(--bn-red-logo);
    border-radius: 10px;
    padding: 12px 16px;
}

.jp-band-miles {
    font-family: var(--font-head);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: 14px;
    font-weight: 700;
    color: var(--bn-on-dark-muted);
    margin-bottom: 4px;
}

.jp-band-pay {
    font-family: var(--font-head);
    font-size: 36px;
    font-weight: 700;
    line-height: 1;
    color: var(--bn-yellow);
}

.jp-band-pay small { font-size: 15px; font-weight: 600; color: var(--bn-on-dark); }
.jp-band-note { font-size: 13px; color: var(--bn-on-dark-muted); margin-top: 12px; }

/* ===== 3. Safety tweaks ===== */
.jp-dark-card .jp-big { font-size: 50px; margin-bottom: 12px; }

/* ===== 4. Responsive ===== */

/* Phone (600px and down) */
@media (max-width: 600px) {
    /* Tiered pay box */
    .jp-sp-group { padding: 10px 14px 4px; }
    .jp-sp-group-title { font-size: 16px; gap: 8px; }
    .jp-sp-tier { padding: 7px 0; gap: 8px; }
    .jp-sp-exp { font-size: 13px; padding: 3px 9px; }
    .jp-sp-val { font-size: 20px; }
    .jp-sp-to { font-size: 11px; }
    .jp-sp-total { padding: 10px 14px 4px; }
    .jp-sp-total-label { font-size: 16px; }
    .jp-sp-total .jp-sp-val { font-size: 24px; }
    .jp-sp-note .jp-sp-link { display: block; margin-top: 4px; margin-left: 12px; }

    /* Band pay: keep two pills side by side */
    .jp-band { padding: 14px; border-radius: 10px; }
    .jp-band-head { margin-bottom: 10px; }
    .jp-band-sub { font-size: 14px; }
    .jp-band-pills { gap: 8px; }
    .jp-band-pill { padding: 8px 10px; }
    .jp-band-miles { font-size: 12px; }
    .jp-band-pay { font-size: 26px; }
    .jp-band-pay small { font-size: 12px; }

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

    /* Running area: lead text and info card stack, then the map below */
    .jp-running-info { flex-direction: column; align-items: stretch; gap: 10px; }
}