/* ==========================================================================
   Responsive breakpoints
   576px  – small devices (phones landscape)
   768px  – tablets
   992px  – small desktops
   ========================================================================== */

/* ------------------------------------------------------------------
   Hamburger / mobile nav – hidden on desktop, shown on mobile
   ------------------------------------------------------------------ */

.mobileNav {
    display: none;
}

.desktopNav {
    display: block;
}

/* ------------------------------------------------------------------
   992px – small desktops
   ------------------------------------------------------------------ */

@media (max-width: 992px) {

    /* People grid: 6 → 3 columns */
    .peopleContainer {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    /* Content grid: 5 → 3 columns */
    .contentFeaturedContainer {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    /* Practice areas hero: 4-col → 2-col */
    .heroSectionItems {
        grid-template-columns: 1fr 1fr !important;
    }

    /* Focus areas: 4 → 2 columns */
    .focusAreasItems {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Focus areas header: side-by-side → stacked */
    .focusAreasHeader {
        grid-template-columns: 1fr !important;
    }

    /* Footer links: 4-col → 2-col */
    .footerLinksContainer {
        grid-template-columns: 1fr 1fr !important;
        white-space: normal !important;
    }

    /* Contact companies: 3-col → 2-col */
    .companyItems {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Careers grid: 4 → 2 */
    .careersItems {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Title header container */
    .titleHeaderContainer {
        grid-template-columns: 1fr !important;
    }

    /* Staff image grid (careers): 4 → 2 */
    .staffImageContainer {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ------------------------------------------------------------------
   768px – tablets
   ------------------------------------------------------------------ */

@media (max-width: 768px) {

    /* Practice area pages: 2-col → stacked */
    .practiceareaContainer {
        grid-template-columns: 1fr !important;
    }

    /* Show mobile nav, hide desktop nav */
    .mobileNav {
        display: block;
    }

    .desktopNav {
        display: none;
    }

    /* Reduce outer padding */
    .siteInnerLimit {
        width: 95%;
        padding: 15px;
    }

    /* People grid: 3 → 2 columns */
    .peopleContainer {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Content grid: 3 → 2 columns */
    .contentFeaturedContainer {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Practice areas hero: stack completely */
    .heroSectionItems {
        grid-template-columns: 1fr !important;
    }

    /* Focus areas: 2 → 1 column */
    .focusAreasItems {
        grid-template-columns: 1fr !important;
    }

    /* Footer links: stack */
    .footerLinksContainer {
        grid-template-columns: 1fr !important;
        white-space: normal !important;
        gap: 20px !important;
    }

    /* Footer branding: stack */
    .footerBrandingContainer {
        grid-template-columns: 1fr !important;
    }

    /* Contact companies: single column */
    .companyItems {
        grid-template-columns: 1fr !important;
    }

    /* Careers: single column */
    .careersItems {
        grid-template-columns: 1fr !important;
    }

    /* Nav: publicNav stacks */
    .publicNav {
        grid-template-columns: 1fr !important;
        text-align: center;
    }

    /* Two-column layouts: stack */
    .twoColumnLayout {
        grid-template-columns: 1fr !important;
    }

    /* Post layout */
    .postLayout {
        grid-template-columns: 1fr !important;
    }

    /* Blog post layout: side-by-side → stacked */
    .blogPostContainer {
        grid-template-columns: 1fr !important;
    }

    /* Page banner: side-by-side → stacked */
    .pageBannerContainer {
        grid-template-columns: 1fr !important;
        width: 100% !important;
    }

    /* Horizontal content item: side-by-side → stacked */
    .contentItemHorizontalContainer {
        grid-template-columns: 1fr !important;
    }

    /* Staff images: stays at 2 */
    .staffImageContainer {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Tables: allow horizontal scroll */
    .itemTable {
        display: block;
        overflow-x: auto;
    }

    /* Reduce base font size slightly */
    body {
        font-size: 16px;
    }

    .fontExtraExtraLarge {
        font-size: 24px;
    }

    .fontExtraLarge, .pageTitle {
        font-size: 20px;
    }

    .fontLarge {
        font-size: 18px;
    }

    /* Reduce padding on page content areas */
    div[style*="padding-left: 35px"] {
        padding-left: 15px !important;
    }

    /* Navigation wrapper padding */
    div[style*="padding-left: 25px"] {
        padding-left: 10px !important;
        padding-right: 10px !important;
        padding-top: 15px !important;
    }
}

/* ------------------------------------------------------------------
   576px – phones
   ------------------------------------------------------------------ */

@media (max-width: 576px) {

    /* People grid: single column */
    .peopleContainer {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    /* Content grid: single column */
    .contentFeaturedContainer {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    /* Focus area items: stack image + text */
    .focusAreasItem {
        grid-template-columns: 1fr !important;
    }

    /* Reduce siteInnerLimit further */
    .siteInnerLimit {
        width: 100%;
        padding: 10px;
    }

    /* Smaller fonts */
    body {
        font-size: 15px;
    }

    .fontExtraExtraLarge {
        font-size: 22px;
    }

    .fontExtraLarge, .pageTitle {
        font-size: 18px;
    }

    .fontLarge {
        font-size: 16px;
    }

    /* People item text: reduce min-height */
    .peopleItemText {
        min-height: auto;
        padding: 10px;
    }

    /* Hero section text: reduce min-height */
    .heroSectionItemText {
        min-height: auto;
        padding: 8px;
    }

    /* Content item text */
    .contentItemStandardText {
        padding: 10px;
    }

    /* Staff images: stays at 2 columns */
    .staffImageContainer {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Blog post */
    .blogPostContainer {
        grid-template-columns: 1fr !important;
    }

    /* Content horizontal */
    .contentItemHorizontalContainer {
        grid-template-columns: 1fr !important;
    }

    /* Page banner */
    .pageBannerContainer {
        grid-template-columns: 1fr !important;
        width: 100% !important;
    }

    /* Modal: full-width on phones */
    .modalOuter {
        max-width: 95vw;
        max-height: 90vh;
        overflow-y: auto;
    }
}