/* @docs responsive.css - global @media (max-width: ...) blocks extracted from the end of the original main.css: 900px (.layout, .sidebar, .sidebar-toggle, .topbar-search, .topbar-meta, .content, .keyfacts), 768px (topbar, brand, about hero/section, vars-footer, gulfinfra-footer-grid, ISTP cycle wrapper/toolbar/dl-btn/detail, table { display: block }, .istp-tabs/.istp-tab, .profile-header, .content, p.lede, a), 900px (.istp-anno-label), 600px (.istp-anno-label span), 480px (.topbar, .gulfinfra-footer-*, body.view-fullwidth .content, .about-hero h1, .istp-dl-btn, .ppp-table-wrapper/.ppp-table-scroll). Loaded BEFORE tabs.css so tabs.css desktop defaults continue to override these on >900px and tabs.css own @media (900px) block continues to win on <=900px for .profile-* selectors. */

        @media (max-width: 900px) {
            .layout { grid-template-columns: 1fr; }
            .sidebar {
                position: fixed; top: 58px; left: 0; right: 0;
                height: calc(100vh - 58px);
                z-index: 90;
                transform: translateX(-100%);
                transition: transform 0.25s ease;
                background: #fff;
            }
            .sidebar.open { transform: translateX(0); }
            .sidebar-toggle { display: inline-flex; }
            .topbar-search { display: none; }
            .topbar-meta { display: none; }
            .content { padding: 1.75rem 1.25rem 4rem; }
            .keyfacts dl { grid-template-columns: 1fr; gap: 0.15rem; }
            .keyfacts dt { padding-top: 8px; }
            .keyfacts dt:first-child { padding-top: 0; }
        }

        /* ========= MOBILE / PHONE OPTIMIZATIONS ========= */
        @media (max-width: 768px) {
            /* Topbar: tighter padding, brand stays clear */
            .topbar { padding: 0.6rem 0.9rem; }
            .topbar-inner { gap: 0.75rem; }
            .brand { font-size: 0.9rem !important; }
            .brand-mark svg { width: 26px; height: 26px; }
            /* Sidebar toggle is the only nav on mobile; make it touch-friendly */
            .sidebar-toggle { min-height: 38px; min-width: 56px; padding: 8px 12px; }
            /* About / methodology / overview content padding */
            body.view-fullwidth .content { padding: 1.75rem 1.1rem 3rem; }
            .about-hero { padding: 0.25rem 0 1.5rem; }
            .about-hero h1 { font-size: clamp(1.85rem, 8vw, 2.5rem); margin-bottom: 1rem; }
            .about-hero .lede { font-size: 1rem; line-height: 1.55; }
            .about-section { margin-bottom: 2rem; }
            .about-section h2 { font-size: 1.2rem; }
            .about-section p { font-size: 14.5px; line-height: 1.6; }
            /* Footer: stack columns nicely */
            .vars-footer { padding: 2.5rem 0 1.25rem; margin-top: 2.5rem; }
            .gulfinfra-footer-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
            .gulfinfra-footer-bottom { flex-direction: column; gap: 0.5rem; align-items: flex-start; }
            /* ISTP cycle diagram wrapper: tighter padding on mobile */
            .istp-cycle-wrapper { padding: 0.7rem 0.6rem 0.6rem !important; }
            .istp-cycle-toolbar { flex-wrap: wrap; justify-content: flex-start !important; }
            .istp-dl-btn { font-size: 10.5px !important; padding: 0.32rem 0.55rem !important; }
            .istp-cycle-detail dl { grid-template-columns: 1fr !important; row-gap: 0.15rem !important; }
            .istp-cycle-detail dt { padding-top: 0.45rem; }
            .istp-cycle-detail dt:first-child { padding-top: 0; }
            /* Wide data tables: horizontal scroll instead of overflow */
            table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
            /* Photo grids stay 1-up if they were forcing 2-up */
            .istp-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
            .istp-tab { white-space: nowrap; padding: 0.6rem 0.85rem !important; font-size: 13px !important; }
            /* Profile / industry headers wrap cleanly */
            .profile-header { padding: 0.9rem 1rem 1rem; }
            .profile-header-top { flex-direction: column; align-items: flex-start !important; gap: 0.6rem; }
            /* Topic content general padding tightening (non-fullwidth) */
            .content { padding: 1.25rem 1rem 3rem; }
            /* H1 size limit on industry pages */
            .content h1 { font-size: clamp(1.65rem, 6vw, 2.1rem); }
            .content h2 { font-size: 1.15rem; }
            /* Lede paragraphs */
            p.lede { font-size: 14.5px !important; line-height: 1.55 !important; }
            /* Make sure long monospaced URLs / source links don't blow out the layout */
            a { word-break: break-word; }
        }

        /* Annotated ISTP photo: shrink labels on tablets/phones so they don't overlap */
        @media (max-width: 900px) {
            .istp-anno-label { padding: 5px 8px !important; }
            .istp-anno-label strong { font-size: 11.5px !important; }
            .istp-anno-label span { font-size: 10px !important; }
        }
        @media (max-width: 600px) {
            .istp-anno-label span { display: none !important; }
            .istp-anno-label { max-width: 38% !important; }
        }

        /* Very small phones (older Android, narrow Huawei) */
        @media (max-width: 480px) {
            .topbar { padding: 0.55rem 0.7rem; }
            .gulfinfra-footer-grid { grid-template-columns: 1fr; gap: 1.5rem; }
            .gulfinfra-footer-tagline { max-width: 100%; }
            body.view-fullwidth .content { padding: 1.25rem 0.85rem 2.5rem; }
            .about-hero h1 { font-size: clamp(1.6rem, 9vw, 2.1rem); }
            .istp-dl-btn span, .istp-dl-btn { gap: 0.2rem !important; }
            /* Always allow tables to scroll horizontally */
            .ppp-table-wrapper, .ppp-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
        }