/* ==========================================================================
   responsive.css — Breakpoint Layer (Mobile First)
   Bankenveld Golf Estate
   Load LAST so its media-query overrides win. Base styles target mobile;
   min-width queries progressively enhance up to large desktop.

   Breakpoints
     sm  ≥ 640px   large phone / small tablet portrait
     md  ≥ 768px   tablet portrait
     lg  ≥ 1024px  tablet landscape / small laptop
     xl  ≥ 1280px  laptop / desktop
     2xl ≥ 1536px  large desktop
   ========================================================================== */

/* --------------------------------------------------------------------------
   MOBILE BASE (≤ 639px) — nav collapses to hamburger + mobile menu
   -------------------------------------------------------------------------- */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem; height: 2.75rem;
  z-index: var(--z-overlay);
}
.site-nav { display: none; }         /* desktop inline nav hidden on mobile */
.floating-nav { display: flex; }     /* floating dock is the mobile primary */

/* --------------------------------------------------------------------------
   SM ≥ 640px
   -------------------------------------------------------------------------- */
@media (min-width: 640px) {
  .gallery__grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}

/* --------------------------------------------------------------------------
   MD ≥ 768px  (tablet)
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  :root { scroll-padding-top: 7rem; }

  .grid-md-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-md-3 { grid-template-columns: repeat(3, 1fr); }
}

/* --------------------------------------------------------------------------
   LG ≥ 1024px  (desktop nav appears)
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .nav-toggle    { display: none; }
  .site-nav      { display: block; }
  .mobile-menu   { display: none; }

  .grid-lg-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-lg-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-lg-4 { grid-template-columns: repeat(4, 1fr); }

  /* Floating dock is a signature element — it persists across all breakpoints. */
}

/* --------------------------------------------------------------------------
   XL ≥ 1280px  (laptop / desktop)
   -------------------------------------------------------------------------- */
@media (min-width: 1280px) {
  .container { padding-inline: var(--space-8); }
}

/* --------------------------------------------------------------------------
   2XL ≥ 1536px  (large desktop)
   -------------------------------------------------------------------------- */
@media (min-width: 1536px) {
  :root { --gutter: 4rem; }
}

/* --------------------------------------------------------------------------
   ORIENTATION / TALL SCREENS
   -------------------------------------------------------------------------- */
@media (orientation: landscape) and (max-height: 500px) {
  .hero { min-height: 120svh; }
}

/* --------------------------------------------------------------------------
   PRINT
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .floating-nav, .loader, .mobile-menu, .btn { display: none !important; }
  body { color: #000; background: #fff; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}