/* ============================================================
   7 CENTRAL — RESPONSIVE.CSS
   Full mobile-first responsive system
   Breakpoints:
     ≤ 1280px  laptop-sm
     ≤ 1024px  tablet-lg
     ≤  768px  tablet
     ≤  640px  phablet
     ≤  480px  mobile
     ≤  375px  mobile-sm
     ≥ 1440px  desktop-lg (upscale)
   ============================================================ */

/* ══════════════════════════════════════════════════════════
   NAV — add hamburger show/hide here since nav.css has none
══════════════════════════════════════════════════════════ */

/* Desktop default — hide burger */
.hamburger           { display: none; }
.mobile-menu         { display: block; } /* visibility toggled by .open class */

/* Below 860px — hide desktop links, show burger */
@media (max-width: 860px) {
  .nav-links,
  .btn-nav-cta        { display: none !important; }
  .hamburger          { display: flex; }
  .nav-right          { gap: 10px; }
}

/* Compact live button on smaller screens */
@media (max-width: 480px) {
  .btn-live-site {
    padding: 7px 12px 7px 10px;
    font-size: 0.7rem;
    gap: 6px;
  }
}

/* ══════════════════════════════════════════════════════════
   1. LAPTOP SM  ≤ 1024px
══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

  /* Layout */
  .container          { padding: 0 32px; }
  .section-pad        { padding: 88px 0; }
  .section-pad-sm     { padding: 60px 0; }

  /* Typography */
  h1                  { font-size: clamp(2.3rem, 4.5vw, 3.6rem); }
  h2                  { font-size: clamp(1.75rem, 3vw, 2.5rem); }

  /* Nav */
  .nav-container      { padding: 0 28px; }
  .nav-links .nav-link{ padding: 8px 10px; font-size: 0.8rem; }

  /* Hero */
  .hero-headline      { font-size: clamp(1.6rem, 2.5vw, 2.6rem); }
  .hero-content-block { padding: 28px 24px 0; }

  /* Home — grids */
  .grid-4             { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .grid-3             { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .stats-grid         { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .features-grid      { grid-template-columns: repeat(2, 1fr); gap: 20px; }

  /* Home — two-col splits */
  .intro-strip-inner  { gap: 48px; }
  .project-overview-inner { gap: 48px; }
  .faq-inner          { gap: 48px; }
  .contact-cta-inner  { padding: 44px 48px; }

  /* Inner pages */
  .split-section              { gap: 44px; }
  .unit-types-grid            { grid-template-columns: repeat(2, 1fr); }
  .amenities-grid             { grid-template-columns: repeat(4, 1fr); }
  .mvv-grid                   { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .trust-grid                 { grid-template-columns: repeat(2, 1fr); }
  .blog-grid                  { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid               { grid-template-columns: repeat(2, 1fr); gap: 22px; }
  .contact-info-grid          { grid-template-columns: repeat(2, 1fr); }
  .contact-main-grid          { gap: 40px; }
  .portfolio-featured         { gap: 0; }
  .pf-featured-content        { padding: 40px; }
  .stats-strip-inner          { flex-wrap: wrap; }
  .ss-item                    { min-width: 160px; }

  /* Footer */
  .footer-grid        { grid-template-columns: 1fr 1fr; gap: 32px; }
}

/* ══════════════════════════════════════════════════════════
   2. TABLET  ≤ 768px
══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* CSS custom props */
  :root { --nav-height: 64px; }

  /* Layout */
  .container          { padding: 0 22px; }
  .section-pad        { padding: 72px 0; }
  .section-pad-sm     { padding: 52px 0; }

  /* Typography */
  h1                  { font-size: clamp(2rem, 7.5vw, 2.8rem); letter-spacing: -0.02em; }
  h2                  { font-size: clamp(1.6rem, 5.5vw, 2.2rem); }
  h3                  { font-size: clamp(1.15rem, 3.8vw, 1.5rem); }
  h4                  { font-size: 1.05rem; }
  p                   { font-size: 0.97rem; }
  .section-subtitle   { font-size: 0.98rem; margin-bottom: 40px; }
  .overline           { font-size: 0.64rem; }

  /* Grids collapse */
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; gap: 18px; }

  /* ── NAV ── */
  .nav-container      { padding: 0 20px; }

  /* ── HERO ── */
  .hero               { height: auto; min-height: unset; padding-bottom: 32px; }
  .hero-headline      { font-size: clamp(1.5rem, 5vw, 2.4rem); }
  .hero-sub           { font-size: 0.88rem; }
  .hero-content-block { padding: 20px 20px 0; flex: none; justify-content: flex-start; }
  .hero-scroll-hint   { display: none; }

  /* ── HOME — Intro ── */
  .intro-strip-inner  { grid-template-columns: 1fr; gap: 40px; }
  .intro-img-small-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .intro-cta-wrap     { flex-direction: column; gap: 10px; }
  .intro-cta-wrap .btn{ width: 100%; max-width: 300px; justify-content: space-between; }

  /* ── HOME — Stats ── */
  .stats-grid         { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .stat-card          { padding: 28px 18px; }

  /* ── HOME — Features ── */
  .features-grid      { grid-template-columns: 1fr; gap: 14px; }
  .feature-card       { padding: 28px 24px; }

  /* ── HOME — Project overview ── */
  .project-overview-inner { grid-template-columns: 1fr; gap: 40px; }
  .po-img-wrap            { aspect-ratio: 16/10; }
  .po-specs-grid          { grid-template-columns: repeat(2, 1fr); }

  /* ── HOME — FAQ ── */
  .faq-inner          { grid-template-columns: 1fr; gap: 40px; }

  /* ── HOME — Contact CTA ── */
  .contact-cta-inner  {
    flex-direction: column;
    padding: 36px 28px;
    gap: 28px;
  }
  .contact-cta-actions { flex-direction: column; width: 100%; }
  .contact-cta-actions .btn { width: 100%; justify-content: space-between; }

  /* ── HOME — Invest band ── */
  .invest-band        { padding: 80px 0; }

  /* ── INNER PAGES — Splits ── */
  .split-section,
  .split-section.reverse { grid-template-columns: 1fr; direction: ltr; gap: 36px; }
  .split-img          { aspect-ratio: 16/10; }

  /* ── PROJECT PAGE ── */
  .stats-strip        { padding: 40px 0; }
  .stats-strip-inner  { flex-wrap: wrap; justify-content: center; gap: 0; }
  .ss-item            { min-width: 50%; padding: 16px 12px; }
  .ss-divider         { display: none; }
  .unit-types-grid    { grid-template-columns: 1fr; gap: 18px; }
  .amenities-grid     { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .amenity-item       { padding: 20px 12px; }
  .location-facts     { gap: 10px; }
  .map-placeholder iframe { height: 300px; }
  .invest-cta-section { padding: 80px 0; }

  /* ── ABOUT PAGE ── */
  .mvv-grid           { grid-template-columns: 1fr; gap: 16px; }
  .partner-stats      { display: flex; }
  .ps-item            { flex: 1; padding: 14px 10px; }
  .trust-grid         { grid-template-columns: 1fr; gap: 16px; }
  .partner-badge      { display: none; }
  .value-chips        { flex-wrap: wrap; gap: 8px; }

  /* ── PORTFOLIO PAGE ── */
  .portfolio-filter   { gap: 6px; flex-wrap: wrap; }
  .pf-btn             { padding: 8px 16px; font-size: 0.77rem; }
  .portfolio-featured { grid-template-columns: 1fr; }
  .pf-featured-content{ padding: 28px 24px; }
  .pf-specs           { grid-template-columns: 1fr 1fr; }
  .portfolio-img-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .pi-main            { grid-column: 1 / -1; aspect-ratio: 16/9; }

  /* ── BLOG PAGE ── */
  .blog-featured      { grid-template-columns: 1fr; }
  .bf-image           { aspect-ratio: 16/9; }
  .bf-content         { padding: 28px 24px; }
  .bf-content h2      { font-size: 1.5rem; }
  .blog-grid          { grid-template-columns: 1fr; gap: 20px; }

  /* ── GALLERY PAGE ── */
  .gallery-grid              { grid-template-columns: 1fr 1fr; gap: 16px; }
  .gallery-card-body         { padding: 16px 16px 20px; }
  .gallery-card-title        { font-size: 0.98rem; }
  .gallery-card-text         { font-size: 0.84rem; }
  .gallery-lightbox          { padding: 0; }
  .gallery-lightbox-inner    { grid-template-columns: 1fr; max-height: 92vh; border-radius: 0; max-width: 100%; height: 100%; }
  .gallery-lightbox-img-wrap { max-height: 46vh; }
  .gallery-lightbox-img      { max-height: 46vh; }
  .gallery-lightbox-caption  { padding: 22px 24px; overflow-y: auto; }
  .gallery-lightbox-nav      { width: 40px; height: 40px; font-size: 1.3rem; }
  .gallery-lightbox-prev     { left: 12px; }
  .gallery-lightbox-next     { right: 12px; }
  .gallery-lightbox-close    { top: 12px; right: 12px; width: 38px; height: 38px; }

  /* ── CONTACT PAGE ── */
  .contact-info-grid  { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .ci-card            { padding: 24px 18px; }
  .contact-main-grid  { grid-template-columns: 1fr; gap: 40px; }

  /* ── FOOTER ── */
  .footer-newsletter-inner { flex-direction: column; gap: 24px; }
  .newsletter-form    { width: 100%; min-width: 0; }
  .newsletter-form input { min-width: 0; flex: 1; }
  .footer-grid        { grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer-bottom-inner{ flex-direction: column; text-align: center; gap: 12px; }
  .footer-legal       { justify-content: center; flex-wrap: wrap; }
}

/* ══════════════════════════════════════════════════════════
   3. PHABLET  ≤ 640px
══════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

  /* Footer collapses to single column */
  .footer-grid        { grid-template-columns: 1fr; gap: 28px; }
  .footer-main        { padding: 52px 0 40px; }
  .footer-newsletter  { padding: 44px 0; }
  .footer-newsletter h3 { font-size: 1.5rem; }
  .footer-newsletter-inner { padding: 0 22px; }

  /* Contact */
  .contact-info-grid  { grid-template-columns: 1fr 1fr; }

  /* Stats */
  .stats-grid         { grid-template-columns: 1fr 1fr; }

  /* Partner stats */
  .partner-stats      {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }

  /* Amenities */
  .amenities-grid     { grid-template-columns: repeat(2, 1fr); }

  /* Blog newsletter form */
  .inline-newsletter-form {
    flex-direction: column;
    border-radius: var(--radius-lg);
    overflow: visible;
    border: none;
    background: transparent;
    box-shadow: none;
    gap: 10px;
  }
  .inline-newsletter-form input {
    border: 1.5px solid var(--border-light);
    border-radius: 980px;
    padding: 13px 20px;
    width: 100%;
  }
  .inline-newsletter-form .btn {
    width: 100%;
    justify-content: center;
    border-radius: 980px;
    margin: 0;
  }
}

/* ══════════════════════════════════════════════════════════
   4. MOBILE  ≤ 480px
══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* Layout */
  .container          { padding: 0 16px; }
  .section-pad        { padding: 60px 0; }
  .section-pad-sm     { padding: 44px 0; }

  /* Typography */
  h1                  { font-size: clamp(1.85rem, 9.5vw, 2.4rem); }
  h2                  { font-size: clamp(1.4rem, 7vw, 1.85rem); }
  h3                  { font-size: 1.15rem; }
  p                   { font-size: 0.94rem; line-height: 1.78; }
  .overline           { font-size: 0.62rem; letter-spacing: 0.17em; }
  .section-subtitle   { font-size: 0.93rem; }

  /* Buttons */
  .btn                { font-size: 0.77rem; padding: 8px 8px 8px 16px; gap: 10px; }
  .btn-arrow-icon     { width: 26px; height: 26px; }
  .hero-actions .btn  { max-width: 100%; }

  /* ── HERO ── */
  .hero-headline      { font-size: clamp(1.3rem, 7vw, 2rem); }
  .hero-overline      { margin-bottom: 8px; }
  .hero-content-block { padding: 16px 16px 0; }

  /* ── NAV ── */
  .nav-container      { padding: 0 16px; }
  .nav-7clogo         { height: 30px; }
  .mobile-menu        { padding: 36px 20px; }
  .mobile-menu a      { font-size: 1.5rem; padding: 14px 0; }
  .mobile-menu .mobile-cta-wrap { margin-top: 28px; }

  /* ── Cards ── */
  .card-body          { padding: 20px 20px 24px; }

  /* ── Stat cards ── */
  .stats-grid         { grid-template-columns: 1fr 1fr; gap: 12px; }
  .stat-card          { padding: 22px 14px; }
  .stat-number        { font-size: 2rem; }
  .stat-label         { font-size: 0.68rem; }

  /* ── Features ── */
  .feature-card       { padding: 24px 20px; }
  .feature-icon-wrap  { width: 44px; height: 44px; }

  /* ── Project overview ── */
  .po-specs-grid      { grid-template-columns: repeat(2, 1fr); }
  .po-spec-value      { font-size: 1.3rem; }

  /* ── Amenities ── */
  .amenities-grid     { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .amenity-item       { padding: 16px 10px; gap: 8px; }
  .amenity-item span  { font-size: 0.76rem; }
  .amenity-item .amenity-icon { width: 38px; height: 38px; border-radius: 10px; }

  /* ── Page heroes ── */
  .page-hero          { padding: 130px 0 60px !important; }
  .page-hero h1       { font-size: clamp(2rem, 8.5vw, 2.8rem); letter-spacing: -0.015em; }
  .page-breadcrumb    { font-size: 0.78rem; }

  /* ── Stats strip (project page) ── */
  .ss-item            { min-width: 50%; padding: 14px 10px; }
  .ss-num             { font-size: 2rem; }
  .ss-label           { font-size: 0.66rem; }

  /* ── Unit cards ── */
  .unit-card-body     { padding: 20px 18px 24px; }
  .unit-features li   { font-size: 0.82rem; }

  /* ── About page ── */
  .mvv-card           { padding: 28px 22px; }
  .mvv-card .mvv-icon { width: 48px; height: 48px; border-radius: 14px; }
  .trust-item         { padding: 24px 20px; }
  .trust-num          { font-size: 1.8rem; }
  .partner-stats      { display: grid; grid-template-columns: repeat(3, 1fr); }
  .ps-val             { font-size: 1.3rem; }
  .ps-lbl             { font-size: 0.62rem; }

  /* ── Portfolio page ── */
  .portfolio-filter   { justify-content: flex-start; }
  .pf-btn             { padding: 7px 14px; font-size: 0.74rem; }
  .pf-featured-content { padding: 22px 18px; }
  .pf-specs           { grid-template-columns: 1fr; gap: 8px; }
  .portfolio-img-grid { grid-template-columns: 1fr; }
  .pi-small           { display: none; }
  .pi-main            { aspect-ratio: 16/9; }

  /* ── Blog page ── */
  .bc-body            { padding: 18px 18px 22px; }
  .bc-category        { font-size: 0.62rem; padding: 3px 10px; }
  .blog-pagination    { flex-wrap: wrap; gap: 6px; }
  .pag-btn            { width: 36px; height: 36px; font-size: 0.8rem; }

  /* ── Gallery page ── */
  .gallery-grid              { grid-template-columns: 1fr; gap: 16px; }
  .gallery-card-tag          { font-size: 0.6rem; padding: 3px 10px; }
  .gallery-lightbox-img-wrap { max-height: 38vh; }
  .gallery-lightbox-img      { max-height: 38vh; }
  .gallery-lightbox-caption h3 { font-size: 1.2rem; }
  .gallery-lightbox-caption p  { font-size: 0.88rem; }

  /* ── Contact page ── */
  .contact-info-grid  { grid-template-columns: 1fr; }
  .ci-card            { padding: 20px 14px; }
  .ci-card .ci-icon   { width: 44px; height: 44px; }
  .form-control       { padding: 12px 16px; font-size: 0.92rem; }

  /* ── FAQ ── */
  .accordion-header   { padding: 16px 18px; font-size: 0.93rem; }
  .accordion-body p   { padding: 16px 18px; font-size: 0.9rem; }

  /* ── Footer ── */
  .footer-grid        { padding: 0 16px; }
  .footer-bottom-inner{ padding: 0 16px; }
  .footer-copy        { font-size: 0.74rem; }
  .footer-legal a     { font-size: 0.72rem; }
  .project-of-img     { height: 24px; }
  .project-of-dha-img { height: 32px; max-width: 32px; }
  .project-of-divider { margin: 0 10px; }
  .project-of-logos   { padding: 10px 14px; }
  .dha-footer-badge   { flex-direction: column; align-items: flex-start; gap: 8px; }
  .footer-socials     { flex-wrap: wrap; }
  .newsletter-form    { flex-direction: column; align-items: stretch; border-radius: 24px; padding: 16px 16px 10px; min-width: 0; }
  .newsletter-form input { padding: 8px 4px; font-size: 0.88rem; }
  .newsletter-form button { width: 100%; justify-content: center; padding: 11px 18px; }

  /* ── Float CTA ── */
  .float-cta          { right: 14px; bottom: 18px; gap: 8px; }
  .float-cta-btn      { padding: 9px 14px; font-size: 0.76rem; }

  /* ── Contact CTA ── */
  .contact-cta-inner  { padding: 28px 18px; }

  /* ── Dividers ── */
  .divider-gold       { margin: 14px 0 26px; }
  .divider-gold.center{ margin: 14px auto 26px; }

  /* ── Chips ── */
  .info-chips, .value-chips { flex-wrap: wrap; gap: 7px; }
  .chip               { font-size: 0.72rem; padding: 5px 12px; }
}

/* ══════════════════════════════════════════════════════════
   5. SMALL MOBILE  ≤ 375px
══════════════════════════════════════════════════════════ */
@media (max-width: 375px) {
  .container          { padding: 0 14px; }
  h1                  { font-size: 1.75rem; }
  h2                  { font-size: 1.38rem; }
  h3                  { font-size: 1.05rem; }
  .hero-headline      { font-size: 1.3rem; }
  .btn                { font-size: 0.72rem; padding: 7px 7px 7px 14px; }
  .btn-arrow-icon     { width: 24px; height: 24px; }
  .stats-grid         { grid-template-columns: 1fr; }
  .amenities-grid     { grid-template-columns: 1fr 1fr; }
  .pf-btn             { padding: 6px 12px; font-size: 0.7rem; }
  .footer-socials     { flex-wrap: wrap; gap: 6px; }
  .contact-info-grid  { grid-template-columns: 1fr; }
  .nav-7clogo         { height: 26px; }
  .mobile-menu a      { font-size: 1.3rem; }
  .ss-item            { min-width: 100%; }
  .partner-stats      { grid-template-columns: 1fr; }
  .ps-item            { border-right: none; border-bottom: 1px solid var(--border-light); }
  .ps-item:last-child { border-bottom: none; }
}

/* ══════════════════════════════════════════════════════════
   6. LARGE DESKTOP  ≥ 1440px  — scale up
══════════════════════════════════════════════════════════ */
@media (min-width: 1440px) {
  .container          { max-width: 1360px; }
  h2                  { font-size: 3.1rem; }                     /* was 3.6rem */
  .hero-headline      { font-size: 3rem; }
  .section-pad        { padding: 120px 0; }
  .features-grid      { grid-template-columns: repeat(3, 1fr); }
  .stats-grid         { grid-template-columns: repeat(4, 1fr); }
  .amenities-grid     { grid-template-columns: repeat(6, 1fr); }
  .blog-grid          { grid-template-columns: repeat(3, 1fr); }
  .mvv-grid           { grid-template-columns: repeat(3, 1fr); }
  .trust-grid         { grid-template-columns: repeat(3, 1fr); }
  .footer-grid        { grid-template-columns: 1.8fr 1fr 1fr 1.3fr; }
}

/* ══════════════════════════════════════════════════════════
   7. TOUCH DEVICE FIXES  (no hover states)
══════════════════════════════════════════════════════════ */
@media (hover: none) {
  .card:hover,
  .stat-card:hover,
  .feature-card:hover,
  .blog-card:hover,
  .unit-card:hover,
  .mvv-card:hover,
  .trust-item:hover,
  .ci-card:hover       { transform: none !important; box-shadow: var(--shadow-card); }
  .btn:hover           { transform: none !important; }
  .float-cta-btn:hover { transform: none !important; }
  .social-icon:hover   { transform: none !important; }
  .img-overlay-wrap:hover img { transform: none; }
}

/* ══════════════════════════════════════════════════════════
   8. PRINT  — clean output
══════════════════════════════════════════════════════════ */
@media print {
  #navbar, .float-cta, #live-modal,
  #preloader, .cursor-glow,
  .hero-scroll-hint, .mobile-menu { display: none !important; }
  body            { background: white; color: black; font-size: 12pt; }
  .hero           { min-height: auto; padding: 40px 0; }
  .hero-content-block { position: static; padding: 20px; }
  .hero-headline,
  .hero-sub       { color: black !important; }
  a               { color: black; text-decoration: none; }
  .container      { max-width: 100%; padding: 0 20px; }
  .section-pad    { padding: 32px 0; }
}

/* ══════════════════════════════════════════════════════════
   ██  MOBILE RESPONSIVENESS FIXES  (added 2026-06-12)
   ══════════════════════════════════════════════════════════
   FIX 1 — Navbar always sticky (JS side: nav-hidden no longer
            added on mobile scroll; see components.js initNavScroll)
   FIX 2 — Viewport meta updated on all HTML files to include
            maximum-scale=1.0 & user-scalable=no (prevents
            zoom-out white-space on the right side)
   FIX 3 — Additional mobile overflow & layout hardening below
   ══════════════════════════════════════════════════════════ */

/* ── FIX 3A: Global overflow lock ──────────────────────────
   Prevent ANY element from causing horizontal scroll /
   white-space on the right at any viewport width.
   html already has overflow-x:hidden in style.css; this
   reinforces it and catches dynamically-injected elements. */
@media (max-width: 860px) {
  html,
  body {
    overflow-x: hidden !important;
    /* Ensure the root never exceeds screen width */
    max-width: 100vw;
  }

  /* Catch any rogue fixed-width elements that break layout */
  * {
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* ── FIX 3B: Newsletter form input min-width override ───────
   style.css sets min-width:220px on .newsletter-form input
   which forces horizontal overflow on narrow screens. */
@media (max-width: 640px) {
  .newsletter-form input {
    min-width: 0 !important; /* override the 220px from style.css */
    width: 100%;
  }
}

/* ── FIX 3C: nav-hidden class neutralised on all viewports ──
   Even if the class somehow gets added (e.g. old cached JS),
   this CSS override ensures the nav never disappears. */
#navbar.nav-hidden {
  transform: none !important;
  -webkit-transform: none !important;
}

/* ── FIX 3D: Mobile menu z-index & safe-area padding ────────
   On phones with notches / home-indicator bars, ensure the
   mobile menu doesn't get clipped at the bottom. */
@media (max-width: 860px) {
  .mobile-menu {
    padding-bottom: max(40px, env(safe-area-inset-bottom, 40px));
  }

  /* Ensure the hamburger tap target is large enough (44px min) */
  .hamburger {
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
    align-items: center;
  }
}

/* ── FIX 3E: Hero section full-width on mobile ───────────────
   Prevent any overflow from masked text on small screens. */
@media (max-width: 768px) {
  .hero-text-wrap {
    overflow: hidden;
  }

  /* Float CTA — keep within viewport */
  .float-cta {
    max-width: calc(100vw - 28px);
  }
}

/* ── FIX 3F: Table & pre overflow (blog / content pages) ────
   Tables and preformatted text are common overflow culprits. */
@media (max-width: 768px) {
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  pre,
  code {
    white-space: pre-wrap;
    word-break: break-word;
    max-width: 100%;
  }
}

/* ── FIX 3G: Image grid overflow prevention ─────────────────
   Intrinsically-sized images inside grids can exceed column
   width on very narrow screens. */
@media (max-width: 480px) {
  .portfolio-img-grid img,
  .po-img-wrap img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }
}

/* ── FIX 3H: Footer bottom inner — word wrap ────────────────
   Long copyright strings can overflow on small screens. */
@media (max-width: 480px) {
  .footer-copy {
    word-break: break-word;
    text-align: center;
  }
}