/* =========================================================================
   responsive.css - breakpoints at 1024 (tablet) and 768 (mobile).
   Stack, never hide. Mirrors Wope's single-column mobile collapse.
   ========================================================================= */

/* --- Tablet (≤ 1024px) --------------------------------------------------- */
@media (max-width: 1024px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
  .client-logos { grid-template-columns: repeat(3, 1fr); }
  .stats  { grid-template-columns: repeat(2, 1fr); gap: 2rem 1.5rem; }
  .steps  { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .footer-brand { grid-column: 1 / -1; }
  .detail-grid { grid-template-columns: 1fr; }
  .side-card { position: static; }
}

/* --- Mobile (≤ 768px) ---------------------------------------------------- */
@media (max-width: 768px) {
  /* nav collapses to slide-down panel */
  .nav-links, .nav-actions { display: none; }
  .nav-toggle { display: inline-flex; }

  .site-header.nav-open { background: rgba(7, 11, 20, 0.98); }
  .mobile-nav {
    position: fixed; inset: 0 0 auto 0; top: var(--header-h, 64px); z-index: 90;
    background: rgba(7, 11, 20, 0.98); backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
    padding: 1rem var(--gutter) 1.75rem;
    display: grid; gap: 0.25rem;
    transform: translateY(-12px); opacity: 0; pointer-events: none;
    transition: transform 0.28s var(--ease), opacity 0.28s var(--ease);
    max-height: calc(100dvh - var(--header-h, 64px)); overflow-y: auto;
  }
  .mobile-nav.is-open { transform: none; opacity: 1; pointer-events: auto; }
  .mobile-nav a {
    padding: 0.95rem 0.5rem; font-size: 1.1rem; color: var(--text-strong);
    border-bottom: 1px solid var(--border);
  }
  .mobile-nav .mobile-actions { display: grid; gap: 0.75rem; margin-top: 1.25rem; }
  .mobile-nav .mobile-actions .btn { width: 100%; }

  /* feature blocks stack, media always below text */
  .feature { grid-template-columns: 1fr; gap: 1.75rem; }
  .feature:nth-child(even) .feature-media { order: 0; }

  .grid-3, .grid-2, .grid-4 { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
  .client-logos { grid-template-columns: repeat(2, 1fr); }

  /* contact: single column, ordered intro -> form -> details (form above the
     details, not buried beneath them) */
  .contact-grid { grid-template-columns: 1fr; row-gap: clamp(1.5rem, 5vw, 2rem); }
  .contact-grid > .contact-intro { grid-column: 1; grid-row: auto; order: 1; }
  .contact-grid > .form-card     { grid-column: 1; grid-row: auto; order: 2; }
  .contact-grid > .contact-info  { grid-column: 1; grid-row: auto; order: 3; }
  .contact-intro .lead { margin-bottom: 0; }

  .cta-form { flex-direction: column; }
  .cta-form .btn { width: 100%; }
  /* stop the email input from inheriting a 240px flex-basis as height in the
     column layout (which rendered it as a giant pill) */
  .cta-form input { flex: 0 0 auto; width: 100%; }

  .footer-bottom { flex-direction: column; align-items: flex-start; }

  /* Home hero animation: the desktop composition is a fixed 1248px layout, so
     on a phone it would render as a huge off-scale slice. Like wope, shrink the
     whole grid + bloom so it fits the viewport (grid converges edge-to-edge,
     bloom stays centered behind the text). It scales about its own centre, so
     the translate(-50%,-50%) keeps it centred. */
  .hero-anim { transform: translate(-50%, -50%) scale(0.66); }
  /* soften the scaled-down wireframe so the gold bloom + headline lead,
     instead of thin scattered grid lines */
  .hero-anim-top { opacity: 0.45; }
  .hero-anim-bottom-background { opacity: 0.55; }

  /* pull the hero a touch tighter and tidy the stats into a calm 2x2 block */
  .hero { padding-bottom: clamp(2rem, 5vw, 3rem); }
  .stats { gap: 1.5rem 1rem; }
  .stat .stat-num { font-size: clamp(2rem, 11vw, 2.75rem); }

  /* Carousel: one prominent card with a tasteful peek of the next, tighter
     gap, and cards flush-aligned to the container edge (no side bleed). */
  .svc-carousel-viewport {
    gap: 1rem;
    padding: 8px 0 16px;
    margin: -8px 0 -16px;
    scroll-padding-inline: 0;
  }
  .svc-slide { flex-basis: 82%; min-width: 0; }
  .svc-carousel-controls { justify-content: center; margin-top: 1.25rem; }

  /* lightbox: smaller nav buttons, pulled fully to the edge */
  .lightbox-close, .lightbox-nav { width: 38px; height: 38px; }
  .lightbox-prev { left: 0.5rem; }
  .lightbox-next { right: 0.5rem; }
}

/* --- Small mobile (≤ 480px) ---------------------------------------------- */
@media (max-width: 480px) {
  .stats { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; }

  /* smaller phones: scale the hero composition down further so the grid still
     fills the narrow viewport without dwarfing the text */
  .hero-anim { transform: translate(-50%, -50%) scale(0.48); }
}

/* --- Ultra-wide ---------------------------------------------------------- */
@media (min-width: 1600px) {
  :root { --container: 1320px; }
}