/**
 * Neros Design and Construction — responsive layer.
 *
 * Every rule in front-page.php / page-projects.php / page-gallery.php is an
 * inline style, so this file overrides specific ones at smaller viewports
 * using attribute-substring selectors ([style*="..."]) plus a few stable
 * hooks that already exist in the markup (data-screen-label, header,
 * footer). Nothing here changes the desktop design — every rule is scoped
 * inside a max-width media query, and every value used here was checked
 * against the theme's HTML to make sure it only matches the elements it's
 * meant to.
 *
 * Breakpoints: 1024px (small laptop/tablet), 768px (tablet / large phone),
 * 480px (phone).
 */

/* Prevent any accidental horizontal scroll on small screens. */
html {
  overflow-x: hidden;
  scroll-behavior: smooth;
}
body {
  overflow-x: hidden;
}

/* ==========================================================================
   Tablet and below (≤1024px)
   ========================================================================== */
@media screen and (max-width: 1024px) {
  /* Testimonial carousel: 3 cards per view is too cramped once the
     viewport can't comfortably fit them — go to 2. */
  [style*="flex:0 0 calc((100% - 48px) / 3)"] {
    flex: 0 0 calc((100% - 24px) / 2) !important;
    min-width: 240px !important;
  }
}

/* ==========================================================================
   Tablet / large phone (≤768px)
   ========================================================================== */
@media screen and (max-width: 768px) {

  /* ---- Typography: scale the big display sizes down ---- */
  [style*="font-size:60px"] { font-size: 36px !important; }
  [style*="font-size:56px"] { font-size: 34px !important; }
  [style*="font-size:52px"] { font-size: 32px !important; }
  [style*="font-size:48px"] { font-size: 30px !important; }
  [style*="font-size:44px"] { font-size: 30px !important; }
  [style*="font-size:42px"] { font-size: 26px !important; }
  [style*="font-size:26px"] { font-size: 22px !important; } /* portfolio card titles */

  /* ---- Header ---- */
  header[style*="padding:22px 40px"] { padding: 16px 20px !important; }
  [style*="height:78px"] { height: 54px !important; } /* header logo */

  /* ---- Fullscreen menu panel ---- */
  [style*="padding:104px 40px 40px"] { padding: 84px 16px 24px !important; }
  [style*="grid-template-columns:1.15fr 1fr"] { grid-template-columns: 1fr !important; }
  [style*="padding:0 56px"] { padding: 0 22px !important; }
  [style*="border-left:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;gap:26px"] {
    border-left: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, .1) !important;
    padding-top: 28px !important;
    margin-top: 8px !important;
  }
  [style*="margin:40px 56px 0"] { margin: 28px 20px 0 !important; }

  /* ---- Section rhythm (112px top/bottom is a lot on a phone) ---- */
  [style*="padding:112px 0"] { padding: 64px 0 !important; }
  [data-screen-label="Featured Projects"][style*="padding:112px 0 0"] { padding: 64px 0 0 !important; }
  [data-screen-label="Featured Projects"][style*="128px"] { padding: 64px 0 72px !important; }
  [style*="padding:128px 0"] { padding: 72px 0 !important; }
  [data-screen-label="Consultation"] { padding: 56px 20px !important; }
  [data-screen-label="Project Gallery"] { padding: 56px 0 64px !important; }
  [data-screen-label="Spotlight"] { padding: 56px 0 !important; }

  /* ---- Sticky "Featured Projects" image panels ---- */
  [style*="left:48px;bottom:52px"] { left: 22px !important; bottom: 28px !important; }

  /* ---- Portfolio cards ---- */
  [style*="height:520px"] { height: 380px !important; }

  /* ---- Hero banners on Projects / Gallery pages ---- */
  [style*="height:480px"] { height: 360px !important; } /* Projects hero */
  [style*="height:440px"] { height: 320px !important; } /* Gallery hero */
  [style*="height:460px"] { height: 300px !important; } /* Gallery spotlight image */

  /* ---- Footer logos ---- */
  [style*="height:130px"] { height: 92px !important; } /* home footer logo */
  [style*="height:96px"]  { height: 76px !important; } /* projects/gallery footer logo */

  /* ---- Floating chat launcher ---- */
  [style*="position:fixed;right:28px;bottom:28px"] { right: 16px !important; bottom: 16px !important; }
}

/* ==========================================================================
   Phone (≤480px)
   ========================================================================== */
@media screen and (max-width: 480px) {

  /* Tighten the shared 40px page gutter used by nearly every section's
     content wrapper, so text isn't fighting the edge of a small screen. */
  [style*="padding:0 40px"]     { padding: 0 20px !important; }
  [style*="padding:0 40px 44px"] { padding: 0 20px 32px !important; } /* gallery footer top row */

  /* Slightly tighter type on the very smallest screens. */
  [style*="font-size:60px"] { font-size: 30px !important; }
  [style*="font-size:56px"] { font-size: 28px !important; }
  [style*="font-size:52px"] { font-size: 26px !important; }
  [style*="font-size:48px"] { font-size: 26px !important; }
  [style*="font-size:44px"] { font-size: 24px !important; }
  [style*="font-size:42px"] { font-size: 22px !important; }

  /* One card per view in the testimonial carousel. */
  [style*="flex:0 0 calc((100% - 48px) / 3)"] {
    flex: 0 0 100% !important;
    min-width: 0 !important;
    padding: 28px 22px !important;
  }

  /* Collapse the About-section stat tiles to one column and shrink their
     padding so the big numerals have room to breathe. */
  [data-delay="140"][style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
  [style*="padding:40px 28px;text-align:center"] { padding: 24px 20px !important; }

  /* A clean single column for the gallery masonry on small phones. */
  [style*="columns:4 240px"] { columns: 1 auto !important; }

  /* Tighter fullscreen menu on very small phones. */
  [style*="padding:104px 40px 40px"] { padding: 76px 12px 20px !important; }
  [style*="padding:0 56px"] { padding: 0 16px !important; }
}