/* ═══════════════════════════════════════════════════════
   Le Château de Cirque — Mobile & Responsive Overrides
   css/mobile.css | Loaded on every page after css/main.css
   ═══════════════════════════════════════════════════════ */

/* ══ LAYOUT UTILITY CLASSES ══ */
.cols-2   { display: grid; grid-template-columns: 1fr 1fr; }
.cols-3   { display: grid; grid-template-columns: repeat(3, 1fr); }
.cols-4   { display: grid; grid-template-columns: repeat(4, 1fr); }
.cols-5   { display: grid; grid-template-columns: repeat(5, 1fr); }
.cols-split { display: grid; grid-template-columns: 55% 45%; }

/* ══ TABLET BREAKPOINT: 900px ══ */
@media (max-width: 900px) {
  .cols-3, .cols-4, .cols-5 { grid-template-columns: 1fr 1fr; }
  .cols-split { grid-template-columns: 1fr; }
}

/* ══ MOBILE BREAKPOINT: 600px ══ */
@media (max-width: 600px) {
  .cols-2, .cols-3, .cols-4, .cols-5, .cols-split { grid-template-columns: 1fr !important; }
  .container { padding: 0 20px; }
  img { max-width: 100%; height: auto; }

  /* Footer stack */
  .footer-inner { grid-template-columns: 1fr; gap: 28px; }

  /* Nav hamburger already handled in main.css */

  /* Notify form stack */
  .notify-form { flex-direction: column; }
  .notify-input { border-right: 1px solid var(--border); border-bottom: none; }
}