/* ============================================================
   Colworth Garden Rooms — Custom Styles
   Use this file for CSS that Tailwind cannot express on its own:
   complex animations, multi-step transitions, vendor-prefix
   rules, and third-party component overrides.
   ============================================================ */

/* ------------------------------------------------------------
   1. Global Resets & Base
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; }

/* ------------------------------------------------------------
   2. Typography
   ------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  color: #1A1A1A;
}

/* ------------------------------------------------------------
   3. Custom Components
   ------------------------------------------------------------ */
/* Add bespoke component styles here (e.g. hero overlays,
   product cards, gallery grids) */

/* ------------------------------------------------------------
   4. Utilities & Helpers
   ------------------------------------------------------------ */
/* Add one-off utility rules here that can't be expressed as
   Tailwind classes */

/* ------------------------------------------------------------
   5. Responsive Overrides
   Fix inline-styled page content grids to stack on mobile.
   Page sections use style="display:grid;grid-template-columns:1fr 1fr"
   which cannot respond to breakpoints without explicit overrides.
   ------------------------------------------------------------ */
@media (max-width: 767px) {
  main div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  main div[style*="grid-template-columns"] img[style*="height:"] {
    height: 220px !important;
    width: 100% !important;
    object-fit: cover;
  }

  main section[style*="min-height:600px"],
  main section[style*="min-height: 600px"] {
    min-height: 380px !important;
  }

  main div[style*="gap:60px"],
  main div[style*="gap: 60px"] {
    gap: 24px !important;
  }
}