/* =====================================================
   Landalan – Responsive layout utilities
   All pages link this file from their <helmet> block.
   ===================================================== */

/* Prevent horizontal overflow on all pages */
html, body { overflow-x: hidden; }

/* ---- Content wrappers ---- */
.w     { max-width: 1200px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }
.w-sm  { max-width: 820px;  margin: 0 auto; padding-left: 32px; padding-right: 32px; }
.w-art { max-width: 760px;  margin: 0 auto; padding-left: 32px; padding-right: 32px; }

/* ---- Standard vertical padding ---- */
.sec-y { padding-top: 92px; padding-bottom: 92px; }

/* ---- Nav ---- */
.nav-links { display: flex; align-items: center; gap: 28px; }

/* ---- Hero 2-col grid ---- */
.l-hero { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 64px; align-items: center; }

/* Hero stats strip */
.hero-stats { display: flex; gap: 34px; flex-wrap: wrap; margin-top: 46px; padding-top: 28px; border-top: 1px solid #e7ebef; }

/* ---- 2-column grids ---- */
.l-2col     { display: grid; grid-template-columns: 1fr 1fr;       gap: 56px; align-items: end;    }
.l-2col-cta { display: grid; grid-template-columns: 1.1fr 0.9fr;   gap: 56px; align-items: center; }
.l-form-out { display: grid; grid-template-columns: 0.9fr 1.1fr;   gap: 64px; align-items: start;  }

/* ---- 3-column grids ---- */
.l-3col       { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.l-3col-tile  { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;  }
.l-2col-tile  { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;  }

/* tile border colours applied separately so dark/light variants share the layout */
.tile-light { background: #e1e7ec;               border: 1px solid #e1e7ec;               }
.tile-dark  { background: rgba(255,255,255,.12);  border: 1px solid rgba(255,255,255,.12); }
.tile-mid   { background: #e7ebef;                border: 1px solid #e7ebef;               }

/* ---- 4-column grids ---- */
.l-4col-tile  { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; }

/* ---- Form inner ---- */
.l-form-in { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

/* ---- Footer ---- */
.l-footer { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 48px; }

/* =====================================================
   RESPONSIVE BREAKPOINTS
   ===================================================== */

/* --- Tablet / small laptop (≤ 900 px) --- */
@media (max-width: 900px) {
  .w, .w-sm, .w-art { padding-left: 20px; padding-right: 20px; }
  .sec-y             { padding-top: 56px; padding-bottom: 56px; }

  .nav-links { display: none; }

  .l-hero     { grid-template-columns: 1fr; gap: 32px; }
  .l-2col     { grid-template-columns: 1fr; gap: 24px; }
  .l-2col-cta { grid-template-columns: 1fr; gap: 28px; }
  .l-form-out { grid-template-columns: 1fr; gap: 36px; }

  .l-3col, .l-3col-tile { grid-template-columns: repeat(2, 1fr); }
  .l-4col-tile           { grid-template-columns: repeat(2, 1fr); }
  .l-footer              { grid-template-columns: 1fr 1fr; gap: 32px; }
}

/* --- Mobile (≤ 560 px) --- */
@media (max-width: 560px) {
  .sec-y { padding-top: 40px; padding-bottom: 40px; }

  .l-3col, .l-3col-tile, .l-2col-tile, .l-4col-tile, .l-footer { grid-template-columns: 1fr; }
  .l-form-in { grid-template-columns: 1fr; }
  .hero-stats { gap: 20px; }

  /* Shrink the hero image aspect ratio so it doesn't dominate the screen */
  .hero-img { aspect-ratio: 16 / 9 !important; }
}