/* ============================================================
   SPECIALTY FOUNDATION SYSTEMS — Mobile Responsive Additions
   ============================================================
   ADDITIVE ONLY — No desktop styles are touched.
   All rules are scoped within media query breakpoints.
   ============================================================ */

/* ── 768px — Small tablets & large phones ────────────────── */
@media (max-width: 768px) {

    /* Hero — reduce vertical padding so tall hero is still
       usable on phones without excessive scrolling         */
    .hero-inner {
        padding-top: var(--sp-16);
        padding-bottom: var(--sp-16);
    }

    /* Hero scroll indicator — hide on mobile to prevent it
       overlapping the CTA buttons on short viewports       */
    .hero-scroll {
        display: none;
    }

    /* Section headers that use flex-between (e.g. "Our Work"
       row with "View All Projects" button) — stack vertically
       so the button doesn't get pushed offscreen           */
    .section-header.flex-between {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--sp-5);
    }

    /* Inner page (non-home) page hero — tighten vertical
       padding so it doesn't eat the whole viewport         */
    .page-hero {
        padding-top: calc(var(--nav-height) + 40px);
        padding-bottom: 40px;
    }

    /* Contact info card — reduce heavy padding for mobile   */
    .contact-info-card {
        padding: var(--sp-6);
    }

    /* Contact form card — reduce heavy padding for mobile   */
    .contact-form-card {
        padding: var(--sp-6);
    }

    /* Job apply form — reduce heavy padding for mobile      */
    .apply-form-wrap {
        padding: var(--sp-6);
    }

    /* Hero actions — ensure buttons wrap cleanly and are
       full-width on narrow screens so they don't clip      */
    .hero-actions {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Prevent buttons inside hero-actions from overflowing
       the viewport on narrow phones                         */
    .hero-actions .btn {
        width: 100%;
        justify-content: center;
    }

}

/* ── 480px — Small phones ────────────────────────────────── */
@media (max-width: 480px) {

    /* Hero inner — reduce horizontal padding further on
       very narrow devices                                   */
    .hero-inner {
        padding-left: var(--sp-4);
        padding-right: var(--sp-4);
    }

    /* Logo primary text — allow it to wrap and slightly
       reduce size so it never pushes the hamburger off the
       right edge of the header                              */
    .logo-text .primary {
        font-size: 0.92rem;
        white-space: normal;
        line-height: 1.2;
    }

    /* Stat numbers — reduce size for 2-column grid on phone
       so the numbers don't overflow their cells            */
    .stat-number {
        font-size: 2.2rem;
    }

    /* Modal overlay — tighten padding so modal has maximum
       usable width on small phones                         */
    .modal-overlay {
        padding: var(--sp-3);
    }

    /* Thesis card padding reduction on small phone          */
    .thesis-card {
        padding: var(--sp-6);
    }

    /* Contact info / form cards — further tighten on very
       small phones                                          */
    .contact-info-card,
    .contact-form-card,
    .apply-form-wrap {
        padding: var(--sp-5);
    }

    /* Page hero (inner pages) — reduce further for phones   */
    .page-hero p {
        font-size: 1rem;
    }

}

/* ── 380px — Ultra-narrow phones (edge case) ─────────────── */
@media (max-width: 380px) {

    /* Logo icon — very slightly reduce so logo + hamburger
       comfortably coexist on a 360px screen                */
    .logo-icon {
        width: 36px;
        height: 36px;
    }

    /* Reduce gap between logo icon and text so the combined
       logo takes less horizontal space                      */
    .site-logo {
        gap: var(--sp-2);
    }

    /* Ensure the header inner padding is tight enough for
       logo + hamburger to both fit                         */
    .header-inner {
        padding-left: var(--sp-3);
        padding-right: var(--sp-3);
    }

    /* Hero eyebrow pill — allow wrapping on tiny screens    */
    .hero-eyebrow {
        flex-wrap: wrap;
        font-size: 0.72rem;
    }

}