/* ============================================================
   S7 Builders — Responsive Overrides
   Mobile-first breakpoints for all page layouts
   ============================================================ */

/* -----------------------------------------------------------
   BASE MOBILE RESETS (≤767px)
   ----------------------------------------------------------- */
@media (max-width: 767px) {

  /* Two-column grids collapse to single column */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1fr 1.6fr"],
  [style*="grid-template-columns:1fr 340px"],
  [style*="grid-template-columns:1fr 300px"],
  [style*="grid-template-columns:1fr minmax"] {
    grid-template-columns: 1fr !important;
  }

  /* Sidebar goes below on mobile */
  [style*="grid-template-columns:1fr 300px"] > aside,
  [style*="grid-template-columns:1fr 340px"] > aside,
  [style*="grid-template-columns:1fr minmax(260px,320px)"] > aside {
    position: static !important;
  }

  /* Project gallery 3-col → 2-col */
  [style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Hero stats stack */
  .hero-stats {
    flex-direction: column;
    gap: var(--space-4);
  }

  .hero-stat-divider {
    display: none;
  }

  /* Hero 2-col → single col on mobile (hide image) */
  .hero-inner {
    grid-template-columns: 1fr !important;
    padding-bottom: 5rem;
  }
  .hero-img-wrap { display: none; }

  /* Hero slider — smaller arrows on mobile */
  .slider-arrow {
    width: 40px;
    height: 40px;
  }
  .slider-arrow svg {
    width: 18px;
    height: 18px;
  }
  .slider-prev { left: 0.5rem; }
  .slider-next { right: 0.5rem; }
  .slider-dots { bottom: 4.5rem; }

  /* Footer columns */
  .footer-top {
    grid-template-columns: 1fr !important;
  }

  /* CTA band */
  [style*="justify-content:space-between"][style*="flex-wrap:wrap"] {
    flex-direction: column;
    text-align: center;
  }

  /* Stats grid — 2 columns on mobile */
  .stats-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Process grid — 2 cols on mobile */
  [style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Form grid collapse */
  [style*="grid-template-columns:1fr 1fr"][style*="margin-bottom:1.25rem"] {
    grid-template-columns: 1fr !important;
  }

  /* Hero title size */
  .hero-title {
    font-size: clamp(2.25rem, 8vw, 3rem);
  }

  /* Page hero title */
  .page-hero-title {
    font-size: clamp(1.75rem, 6vw, 2.5rem);
  }

  /* Section label hidden on very small screens (optional) */
  .hero-label {
    font-size: 0.7rem;
  }

  /* Contact band */
  [class*="section"][style*="padding-block:3.5rem"] > .container > [style*="justify-content:center"] {
    flex-direction: column;
  }
}

/* -----------------------------------------------------------
   TABLET (768px – 1023px)
   ----------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {

  /* About grid on tablet — reduce gap */
  [style*="grid-template-columns:1fr 1fr"] {
    gap: 2rem !important;
  }

  /* Blog: sidebar goes below on tablet */
  [style*="grid-template-columns:1fr minmax(260px,320px)"] {
    grid-template-columns: 1fr !important;
  }

  [style*="grid-template-columns:1fr minmax(260px,320px)"] > aside {
    position: static !important;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    align-items: start;
  }

  /* Project detail sidebar */
  [style*="grid-template-columns:1fr 340px"],
  [style*="grid-template-columns:1fr 300px"] {
    grid-template-columns: 1fr !important;
  }

  /* Stats grid — 2×2 on tablet */
  .stats-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Gallery 4-col → 2-col */
  .gallery-grid {
    columns: 2 !important;
  }
}

/* -----------------------------------------------------------
   LAPTOP (1024px – 1279px)
   ----------------------------------------------------------- */
@media (min-width: 1024px) and (max-width: 1279px) {

  /* Slightly reduce padding */
  :root {
    --container-pad: clamp(1.5rem, 3vw, 3rem);
  }

  /* Nav links slightly smaller */
  .nav-link {
    font-size: 0.8rem;
    padding: var(--space-2) 0.6rem;
  }
}

/* -----------------------------------------------------------
   LARGE DESKTOP (1440px+)
   ----------------------------------------------------------- */
@media (min-width: 1440px) {
  .gallery-grid {
    columns: 5 !important;
  }
}

/* -----------------------------------------------------------
   PRINT STYLES
   ----------------------------------------------------------- */
@media print {
  .site-header,
  .hamburger,
  .back-to-top,
  .filter-bar,
  .pagination,
  .footer-social,
  .nav-cta {
    display: none !important;
  }

  .site-footer {
    background: #fff !important;
    color: #000 !important;
  }

  .footer-col-title,
  .footer-link,
  .footer-copyright {
    color: #000 !important;
  }

  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #666;
  }

  .hero {
    min-height: auto;
    background: #f0f4f8 !important;
    padding: 2rem !important;
  }

  .hero-title, .hero-subtitle {
    color: #000 !important;
  }
}

/* -----------------------------------------------------------
   HIGH CONTRAST MODE
   ----------------------------------------------------------- */
@media (prefers-contrast: high) {
  :root {
    --c-blue: #005BA1;
    --c-green: #327A25;
    --c-gray-500: #444;
  }

  .btn-primary {
    outline: 2px solid currentColor;
  }

  .card,
  .service-card,
  .project-card,
  .blog-card {
    border-width: 2px;
  }
}