/**
 * body_style_mobile.css
 * Mobile and tablet overrides (max-width: 1299px).
 *
 * Organised in two tiers:
 *   1. Tablet  (max-width: 1299px) – adjustments for ≤1299px
 *   2. Phone   (max-width: 600px)  – tighter adjustments for small phones
 *
 * The base layout (body_style_general.css) is already mobile-first,
 * so these rules handle fine-tuning and edge cases.
 */

/* =========================
   TIER 1 – TABLET & NARROW DESKTOP  (≤ 1299px)
========================= */

@media (max-width: 1299px) {

    /* --- Layout tokens ---------------------------------- */

    :root {
        --header-height:     70px;
        --section-v-padding: 48px;
        --inner-h-padding:   24px;
    }

    /* --- Header offset ---------------------------------- */

    .content-container {
        padding-top: var(--header-height);
    }

    .header-separator {
        top: var(--header-height);
    }

    /* --- Section inner ---------------------------------- */

    /* Slightly less bottom margin between blocks */
    .ks-section-inner > div {
        margin-bottom: 24px;
    }

    /* --- Two-column: stays single column on tablet too -- */
    .ks-two-col {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    /* --- Three-column: 2-up on tablet ------------------- */
    .ks-three-col {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    /* --- CTA -------------------------------------------- */

    .ks-cta {
        padding: 48px var(--inner-h-padding);
    }

    /* CTA buttons: centred column */
    .ks-cta .ks-btn,
    .ks-cta .ks-btn-outline {
        display: block;
        width: fit-content;
        margin: 0 auto 12px;
    }

    /* Reset margin-left only when outline follows a primary button (sibling) */
    .ks-btn + .ks-btn-outline {
        margin-left: 0;
    }

    /* --- Hero inline button divs in HTML content -------- */
    /* Hero sections use inline style="display:flex;gap:16px"
       We override those to stack on mobile. */
    .ks-section [style*="display: flex"][style*="gap: 16px"],
    .ks-section [style*="display:flex"][style*="gap:16px"] {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }

    /* --- Specs table ------------------------------------ */
    /* Let long values wrap instead of overflow */
    .ks-specs td {
        word-break: break-word;
    }

    /* Slightly narrower label column on tablet */
    .ks-specs td:first-child {
        width: 40%;
    }

    /* --- Highlight box ---------------------------------- */
    .ks-highlight-box {
        margin: 20px 0;
    }

    .ks-highlight-box p {
        max-width: 100%;  /* remove 50ch cap – no need to restrict on narrow screens */
    }

    /* --- Job card header -------------------------------- */
    /* Badges stack below title on tablet */
    .job-card .job-header {
        flex-direction: column;
        gap: 8px;
    }
}

/* =========================
   TIER 2 – PHONE  (≤ 600px)
========================= */

@media (max-width: 600px) {

    /* --- Layout tokens ---------------------------------- */

    :root {
        --header-height:     60px;
        --section-v-padding: 36px;
        --inner-h-padding:   16px;
    }

    /* --- Typography ------------------------------------ */

    h1, .section-title {
        font-size: 24px;
        letter-spacing: -0.01em;
    }

    h2 {
        font-size: 22px;
    }

    h3 {
        font-size: 18px;
    }

    /* Hero large titles (set via inline style in HTML) */
    /* We override the inline font-size for all hero h1 elements */
    .ks-section h1[style*="font-size: 44px"],
    .ks-section h1[style*="font-size:44px"] {
        font-size: 28px !important;
        line-height: 1.2 !important;
    }

    /* Hero eyebrow text */
    .ks-section p[style*="font-size: 13px"] {
        font-size: 11px !important;
    }

    /* Hero body paragraph */
    .ks-section p[style*="font-size: 19px"],
    .ks-section p[style*="font-size:19px"] {
        font-size: 16px !important;
    }

    /* Section subtitle */
    .section-subtitle {
        margin-bottom: 28px;
        font-size: 15px;
    }

    /* General paragraphs */
    p {
        font-size: 16px;
    }

    .ks-p {
        font-size: 16px;
    }

    /* --- Grids ----------------------------------------- */

    /* All grids → single column on phone */
    .ks-two-col,
    .ks-three-col {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* --- Sections -------------------------------------- */

    .ks-section {
        padding: var(--section-v-padding) 0;
    }

    /* --- Cards ----------------------------------------- */

    .ks-card {
        padding: 22px 18px;
    }

    /* --- Steps ----------------------------------------- */

    .ks-steps {
        gap: 20px;
    }

    .ks-step {
        gap: 14px;
    }

    .ks-step-number {
        width: 36px;
        height: 36px;
        font-size: 14px;
        flex-shrink: 0;
    }

    /* --- CTA -------------------------------------------- */

    .ks-cta {
        padding: 36px 16px;
    }

    .ks-cta h2 {
        font-size: 22px;
    }

    .ks-cta p {
        font-size: 15px;
        margin-bottom: 24px;
    }

    /* CTA buttons: full width on phone */
    .ks-cta .ks-btn,
    .ks-cta .ks-btn-outline,
    .ks-cta a.ks-btn {
        display: block;
        width: 100%;
        max-width: 320px;
        text-align: center;
        margin: 0 auto 10px;
        box-sizing: border-box;
    }

    /* --- Buttons standalone ----------------------------- */

    .ks-btn {
        padding: 13px 24px;
        font-size: 15px;
    }

    /* --- Hero sections: reduce inline padding ----------- */
    /* Hero sections use inline style="padding-top: 60px; padding-bottom: 60px"
       We need to reduce this on phones */
    .ks-section[style*="background: linear-gradient"] .ks-section-inner,
    .ks-section[style*="background:linear-gradient"] .ks-section-inner {
        padding-top: 36px !important;
        padding-bottom: 36px !important;
    }

    /* --- Specs table ------------------------------------ */

    /* Stack label/value vertically on very narrow phones */
    .ks-specs,
    .ks-specs tbody,
    .ks-specs tr {
        display: block;
    }

    .ks-specs tr {
        border-bottom: none;
        padding: 10px 0;
        border-top: 1px solid var(--color-border);
    }

    .ks-specs td {
        display: block;
        width: 100% !important;
        padding: 4px 12px;
    }

    .ks-specs td:first-child {
        background: transparent;
        padding-bottom: 2px;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        color: var(--color-muted);
    }

    .ks-specs td:last-child {
        font-size: 15px;
        color: var(--color-dark);
        padding-top: 2px;
        padding-bottom: 8px;
    }

    /* --- Highlight box ---------------------------------- */

    .ks-highlight-box {
        padding: 16px 18px;
    }

    .ks-highlight-box p {
        font-size: 14px;
    }

    /* --- Contact form ----------------------------------- */

    .contact-form {
        gap: 16px;
    }

    .form-group input,
    .form-group textarea,
    .form-group select {
        font-size: 16px; /* iOS: keep at 16px to prevent auto-zoom */
        padding: 12px 14px;
    }

    /* --- Contact info ----------------------------------- */

    .contact-info-block {
        gap: 20px;
    }

    .contact-info-icon {
        width: 38px;
        height: 38px;
    }

    /* --- Job cards -------------------------------------- */

    .job-card {
        padding: 20px 16px;
    }

    .job-card h3 {
        font-size: 17px;
    }

    /* --- Divider ---------------------------------------- */

    .ks-divider {
        margin: 28px 0;
    }

    /* --- Badges ----------------------------------------- */

    .ks-badge {
        font-size: 11px;
        padding: 3px 10px;
    }

    /* --- Back-link in job hero (arrow + text) ----------- */
    .ks-section a[style*="display: inline-flex"],
    .ks-section a[style*="display:inline-flex"] {
        font-size: 12px !important;
    }
}