/* =================================================================
   HD BREAKPOINTS — High-DPI Retina + Large / Ultra-Wide Screens
   Covers all pages: home, about, physical, system, product detail,
   product template, blog.
   Loaded globally via enqueue-assets.php after main.css.
   ================================================================= */


/* =================================================================
   1. HIGH-DPI / RETINA DISPLAYS  (device-pixel-ratio ≥ 2)
      Targets: MacBook Retina, iPhone, iPad, Android HiDPI
   ================================================================= */
@media
    only screen and (-webkit-min-device-pixel-ratio: 2),
    only screen and (-min--moz-device-pixel-ratio: 2),
    only screen and (-o-min-device-pixel-ratio: 2/1),
    only screen and (min-device-pixel-ratio: 2),
    only screen and (min-resolution: 192dpi),
    only screen and (min-resolution: 2dppx) {

    /* ── Global ── */
    body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
    img  { image-rendering: -webkit-optimize-contrast; }

    /* ── Navbar ── */
    .navbar { height: 72px; }
    .navbar-logo { height: 48px; }

    /* ── Hero (home) ── */
    .hero-title    { font-size: clamp(28px, 4vw, 56px); }
    .hero-subtitle { font-size: clamp(14px, 1.6vw, 20px); }

    /* ── Smarter Cities ── */
    #smarter-cities { padding: 80px 40px; }
    .smarter-graphic-wrapper {/* height: 340px; */margin-bottom: 64px !important;}
    .smarter-title { font-size: 36px; }
    .smarter-desc  { font-size: 16px; }

    /* ── Products section (home) ── */
    .ps-title       { font-size: clamp(28px, 3vw, 44px); }
    .ps-card-img img { height: 200px; }
    .ps-card-title  { font-size: 15px; }
    .ps-card-desc   { font-size: 14px; }

    /* ── Stats ── */
    .stat-number { font-size: clamp(36px, 4vw, 52px); }
    .stat-label  { font-size: 13px; }

    /* ── Footer ── */
    .footer-col-heading  { font-size: 13px; }
    .footer-info-text    { font-size: 14px; }
    .footer-nav-list a   { font-size: 14px; }
    .footer-tagline      { font-size: 14px; }
    .footer-copyright-text { font-size: 12px; }

    /* ── Physical hero ── */
    .ph-hero__title  { font-size: clamp(32px, 4vw, 56px) !important; }
    .ph-header__title { font-size: clamp(28px, 3vw, 44px) !important; }
    .ph-header__desc p { font-size: 15px; }
    .ph-card__title  { font-size: 16px; }
    .ph-card__desc p { font-size: 14px; }

    /* ── Product detail ── */
    .pd-hero__title    { font-size: clamp(28px, 3.5vw, 48px); }
    .pd-hero__desc     { font-size: 15px; }
    .pd-overview__title { font-size: clamp(20px, 2vw, 28px); }
    .pd-overview__text p { font-size: 15px; }
    .pd-features__item { font-size: 15px; }
    .pd-specs__table td { font-size: 14px; }
    .pd-brochure__title { font-size: clamp(20px, 2vw, 30px); }
    .pd-cta__title     { font-size: clamp(20px, 2vw, 30px); }

    /* ── Product template ── */
    .pc-cat-intro__title,
    .ph-header__title  { font-size: clamp(28px, 3vw, 44px) !important; }
    .pc-product-name   { font-size: clamp(22px, 2.5vw, 32px); }
    .pc-product-desc p { font-size: 15px; }

    /* ── System integration ── */
    .sys-header__title { font-size: clamp(28px, 3vw, 44px); }
    .sys-header__desc p { font-size: 15px; }
    .sys-row__title    { font-size: clamp(18px, 2vw, 26px); }
    .sys-row__desc p   { font-size: 15px; }

    /* ── About page ── */
    .ap-about-heading  { font-size: clamp(32px, 3.5vw, 48px); }
    .ap-about-text p   { font-size: 15px; }
    .ap-vm-heading     { font-size: clamp(28px, 3vw, 44px); }
    .ap-section-heading { font-size: clamp(28px, 3vw, 44px); }
    .ap-lead-tagline   { font-size: clamp(28px, 3.5vw, 48px); }
    .ap-mentor-name    { font-size: clamp(28px, 3.5vw, 48px); }
    .ap-work-heading   { font-size: clamp(28px, 3vw, 44px); }
    .ap-tl-header h2   { font-size: clamp(28px, 3vw, 44px); }

    /* ── Blog ── */
    .blog-card-title   { font-size: 1rem; }
    .blog-card-excerpt { font-size: 0.875rem; }
}


/* =================================================================
   2. LARGE SCREENS  1400px → 2560px
      Sub-ranges: 1400–1600 · 1601–1920 · 1921–2560
   ================================================================= */

/* ── 1400px – 1600px  (large laptop / small 4K monitor) ── */
@media (min-width: 1400px) and (max-width: 1600px) {

    /* Global */
    .container { max-width: 1360px; }

    /* Home hero */
    .hero-title    { font-size: clamp(44px, 4.5vw, 60px); }
    .hero-subtitle { font-size: 20px; }

    /* Smarter Cities */
    #smarter-cities { padding: 90px 60px; }
    .smarter-graphic-wrapper { height: 380px; margin-bottom: 72px !important; }
    .smarter-title { font-size: 42px; }
    .smarter-desc  { font-size: 17px; max-width: 760px; }

    /* Products (home) */
    .ps-title       { font-size: 50px; }
    .ps-card-img img { height: 220px; }
    .ps-card-title  { font-size: 15px; }
    .ps-card-desc   { font-size: 14px; }
    .ps-card-btn    { font-size: 15px; padding: 12px 36px; }

    /* Stats */
    .stat-number { font-size: 54px; }
    .stat-label  { font-size: 14px; }

    /* Physical */
    .ph-hero__title   { font-size: 60px !important; }
    .ph-header__title { font-size: 46px !important; }
    .ph-header__desc p { font-size: 16px; }
    .ph-cards-grid    { grid-template-columns: repeat(3, 1fr); gap: 28px; }
    .ph-card__title   { font-size: 18px; }
    .ph-card__desc p  { font-size: 14px; }
    .ph-cards-section { padding: 8px 40px 100px; }

    /* Product detail */
    .pd-hero__title    { font-size: 50px; }
    .pd-overview__title { font-size: 28px; }
    .pd-overview__text p { font-size: 16px; }
    .pd-features__title { font-size: 30px; }
    .pd-features__item  { font-size: 16px; }
    .pd-specs__table td { font-size: 15px; padding: 16px 22px; }
    .pd-brochure__title { font-size: 32px; }
    .pd-cta__title      { font-size: 32px; }
    .pd-cta__desc       { font-size: 16px; }

    /* Product template */
    .pc-cat-intro__title,
    .ph-header__title  { font-size: 46px !important; }
    .pc-product-name   { font-size: 34px; }
    .pc-product-desc p { font-size: 16px; }
    .pc-product-image img { max-height: 400px; }

    /* System integration */
    .sys-header__title { font-size: 46px; }
    .sys-header__desc p { font-size: 16px; }
    .sys-row__title    { font-size: 28px; }
    .sys-row__desc p   { font-size: 16px; }
    .sys-row           { gap: 72px; padding: 88px 0; }

    /* About */
    .ap-about-heading  { font-size: 50px; }
    .ap-about-text p   { font-size: 16px; }
    .ap-vm-heading     { font-size: 50px; }
    .ap-section-heading { font-size: 50px; }
    .ap-lead-tagline   { font-size: 50px; }
    .ap-mentor-name    { font-size: 50px; }
    .ap-work-heading   { font-size: 50px; }
    .ap-tl-header h2   { font-size: 50px; }
    .ap-tl-bignumber   { font-size: clamp(180px, 20vw, 300px); }

    /* Blog */
    .blog-grid         { grid-template-columns: repeat(2, 1fr); gap: 32px; }
    .blog-card-title   { font-size: 1.1rem; }

    /* Footer */
    .footer-col-heading  { font-size: 14px; }
    .footer-info-text    { font-size: 15px; }
    .footer-nav-list a   { font-size: 15px; }
    .footer-tagline      { font-size: 15px; }
}

/* ── 1601px – 1920px  (Full HD / 1080p monitors) ── */
@media (min-width: 1601px) and (max-width: 1920px) {

    /* Global */
    .container { max-width: 1560px; }

    /* Home hero */
    .hero-title    { font-size: clamp(52px, 5vw, 72px); }
    .hero-subtitle { font-size: 22px; }

    /* Smarter Cities */
    #smarter-cities { padding: 100px 80px; min-height: 720px; }
    .smarter-graphic-wrapper { height: 420px; margin-bottom: 80px !important; }
    .smarter-title { font-size: 46px; }
    .smarter-desc  { font-size: 18px; max-width: 800px; }
    .btn-pill-white { padding: 16px 52px; font-size: 16px; }

    /* Products (home) */
    .ps-title       { font-size: 56px; }
    .ps-card-img img { height: 240px; }
    .ps-card-title  { font-size: 16px; }
    .ps-card-desc   { font-size: 15px; }
    .ps-card-btn    { font-size: 15px; padding: 13px 40px; }

    /* Stats */
    .stat-number { font-size: 60px; }
    .stat-label  { font-size: 15px; }

    /* Physical */
    .ph-hero__title   { font-size: 68px !important; }
    .ph-header__title { font-size: 52px !important; }
    .ph-header__desc p { font-size: 17px; }
    .ph-cards-grid    { grid-template-columns: repeat(3, 1fr); gap: 32px; }
    .ph-card__title   { font-size: 20px; }
    .ph-card__desc p  { font-size: 15px; }
    .ph-cards-section { padding: 8px 60px 110px; }

    /* Product detail */
    .pd-hero__title    { font-size: 56px; }
    .pd-overview__title { font-size: 30px; }
    .pd-overview__text p { font-size: 17px; }
    .pd-features__title { font-size: 34px; }
    .pd-features__item  { font-size: 17px; }
    .pd-specs__table td { font-size: 16px; padding: 18px 24px; }
    .pd-brochure__title { font-size: 36px; }
    .pd-cta__title      { font-size: 36px; }
    .pd-cta__desc       { font-size: 17px; }

    /* Product template */
    .pc-cat-intro__title,
    .ph-header__title  { font-size: 52px !important; }
    .pc-product-name   { font-size: 38px; }
    .pc-product-desc p { font-size: 17px; }
    .pc-product-image img { max-height: 460px; }
    .pc-product-row    { gap: 100px; padding: 80px 0; }

    /* System integration */
    .sys-header__title { font-size: 52px; }
    .sys-header__desc p { font-size: 17px; }
    .sys-row__title    { font-size: 30px; }
    .sys-row__desc p   { font-size: 17px; }
    .sys-row           { gap: 80px; padding: 96px 0; }

    /* About */
    .ap-about-heading  { font-size: 54px; }
    .ap-about-text p   { font-size: 17px; }
    .ap-vm-heading     { font-size: 54px; }
    .ap-section-heading { font-size: 54px; }
    .ap-lead-tagline   { font-size: 54px; }
    .ap-mentor-name    { font-size: 54px; }
    .ap-work-heading   { font-size: 54px; }
    .ap-tl-header h2   { font-size: 54px; }
    .ap-tl-bignumber   { font-size: clamp(200px, 22vw, 340px); }
    #ap-about          { padding: 88px 120px; }
    #ap-timeline       { padding: 72px 120px 80px; }
    #ap-vision         { padding: 80px 120px; }
    #ap-awards         { padding: 72px 120px 88px; }
    #ap-testimonials   { padding: 72px 120px 88px; }
    #ap-lead           { padding: 0 120px; }
    #ap-mentor         { padding: 0 120px; }
    #ap-team           { padding: 80px 120px 96px; }
    #ap-work           { padding: 80px 120px 88px; }

    /* Blog */
    .blog-grid         { grid-template-columns: repeat(2, 1fr); gap: 36px; }
    .blog-card-title   { font-size: 1.15rem; }
    .blog-card-excerpt { font-size: 0.9rem; }

    /* Footer */
    .footer-col-heading  { font-size: 14px; }
    .footer-info-text    { font-size: 15px; }
    .footer-nav-list a   { font-size: 15px; }
    .footer-tagline      { font-size: 15px; }
    .footer-copyright-text { font-size: 13px; }
}

/* ── 1921px – 2560px  (2K / QHD / 4K monitors) ── */
@media (min-width: 1921px) and (max-width: 2560px) {

    /* Global */
    .container { max-width: 1800px; }
    body { font-size: 17px; }

    /* Home hero */
    .hero-title    { font-size: clamp(64px, 5.5vw, 88px); }
    .hero-subtitle { font-size: 24px; }

    /* Smarter Cities */
    #smarter-cities { padding: 120px 100px; min-height: 800px; }
    .smarter-graphic-wrapper {height: 719px;margin-bottom: 88px !important;max-width: 1200px;}
    .smarter-title { font-size: 52px; }
    .smarter-desc  { font-size: 20px; max-width: 900px; }
    .btn-pill-white { padding: 18px 60px; font-size: 17px; }
    .text-content-wrapper { max-width: 900px; }

    /* Products (home) */
    .ps-title       { font-size: 64px; }
    .ps-card-img img { height: 280px; }
    .ps-card-title  { font-size: 18px; }
    .ps-card-desc   { font-size: 16px; }
    .ps-card-btn    { font-size: 16px; padding: 14px 44px; }

    /* Stats */
    .stat-number { font-size: 72px; }
    .stat-label  { font-size: 16px; letter-spacing: 1.5px; }

    /* Physical */
    .ph-hero__title   { font-size: 80px !important; }
    .ph-header__title { font-size: 60px !important; }
    .ph-header__desc p { font-size: 18px; }
    .ph-cards-grid    { grid-template-columns: repeat(3, 1fr); gap: 40px; }
    .ph-card__title   { font-size: 22px; }
    .ph-card__desc p  { font-size: 16px; }
    .ph-cards-section { padding: 8px 80px 120px; }

    /* Product detail */
    .pd-hero__title    { font-size: 64px; }
    .pd-hero__desc     { font-size: 18px; }
    .pd-overview__title { font-size: 34px; }
    .pd-overview__text p { font-size: 18px; }
    .pd-features__title { font-size: 38px; }
    .pd-features__item  { font-size: 18px; }
    .pd-specs__table td { font-size: 17px; padding: 20px 28px; }
    .pd-brochure__title { font-size: 40px; }
    .pd-cta__title      { font-size: 40px; }
    .pd-cta__desc       { font-size: 18px; }

    /* Product template */
    .pc-cat-intro__title,
    .ph-header__title  { font-size: 60px !important; }
    .pc-product-name   { font-size: 44px; }
    .pc-product-desc p { font-size: 18px; }
    .pc-product-image img { max-height: 520px; }
    .pc-product-row    { gap: 120px; padding: 96px 0; }

    /* System integration */
    .sys-header__title { font-size: 60px; }
    .sys-header__desc p { font-size: 18px; }
    .sys-row__title    { font-size: 34px; }
    .sys-row__desc p   { font-size: 18px; }
    .sys-row           { gap: 96px; padding: 112px 0; }

    /* About */
    .ap-about-heading  { font-size: 60px; }
    .ap-about-text p   { font-size: 18px; }
    .ap-vm-heading     { font-size: 60px; }
    .ap-section-heading { font-size: 60px; }
    .ap-lead-tagline   { font-size: 60px; }
    .ap-mentor-name    { font-size: 60px; }
    .ap-work-heading   { font-size: 60px; }
    .ap-tl-header h2   { font-size: 60px; }
    .ap-tl-bignumber   { font-size: clamp(240px, 24vw, 400px); }
    #ap-about          {padding: 100px 160px;max-width: 2060px !important;}
    #ap-timeline       {padding: 88px 160px 96px;max-width: 2148px !important;}
    #ap-vision         {padding: 96px 160px;max-width: 2060px !important;}
    #ap-awards         {padding: 88px 160px 104px;max-width: 2060px !important;}
    #ap-testimonials   {padding: 88px 160px 104px;max-width: 2060px !important;}
    #ap-lead           {padding: 0 160px;max-width: 2060px !important;}
    #ap-mentor         {padding: 0 160px;max-width: 2060px !important;}
    #ap-team           {padding: 96px 160px 112px;max-width: 2060px !important;margin: 0 auto;}
    #ap-work           {padding: 96px 160px 104px;max-width: 2060px !important;}
    .ap-subnav-inner   { padding: 0 160px; }
    .ap-subnav-links   { gap: 56px; }
    .ap-subnav-link    { font-size: 17px; }

    /* Blog */
    .blog-grid         { grid-template-columns: repeat(2, 1fr); gap: 44px; }
    .blog-card-title   { font-size: 1.25rem; }
    .blog-card-excerpt { font-size: 0.95rem; }
    .pxl-blog-page-wrapper { max-width: 1800px; }

    /* Footer */
    .footer-col-heading  { font-size: 15px; }
    .footer-info-text    { font-size: 16px; }
    .footer-nav-list a   { font-size: 16px; }
    .footer-tagline      { font-size: 16px; }
    .footer-copyright-text { font-size: 14px; }
    .footer-social-btn   { width: 44px; height: 44px; }
    .footer-social-btn img { width: 20px; height: 20px; }
}

/* ── 2561px and above  (true 4K / 5K) ── */
@media (min-width: 2561px) {
    .container { max-width: 2200px; }
    body { font-size: 18px; }
    .hero-title    { font-size: 96px; }
    .hero-subtitle { font-size: 26px; }
    .smarter-graphic-wrapper { height: 560px; max-width: 1400px; }
    .smarter-title { font-size: 58px; }
    .ph-hero__title   { font-size: 88px !important; }
    .ph-header__title { font-size: 68px !important; }
    .pd-hero__title   { font-size: 72px; }
    .pc-product-name  { font-size: 48px; }
    .sys-header__title { font-size: 68px; }
    .ap-about-heading  { font-size: 68px; }
    .ap-section-heading { font-size: 68px; }
}