/* ============================================================================
   3SIXTY — Responsive / Breakpoints  (MOBILE-FIRST)
   ----------------------------------------------------------------------------
   Base styles target 320px. Layer enhancements UP with min-width queries.
   Never write max-width-first. Breakpoints (literal px — CSS vars can't be
   used in @media):
     320  base   · 375  sm  · 768  md  · 1024 lg  · 1280 xl  · 1536 2xl
   ============================================================================ */

/* --- Container -------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);   /* 1200 */
  margin-inline: auto;
  padding-inline: var(--container-px);
}
.container--narrow { max-width: var(--container-narrow); }

/* --- Reference media-query ladder (copy these literals everywhere) ---------
   @media (min-width: 375px)  { ... }   sm
   @media (min-width: 768px)  { ... }   md
   @media (min-width: 1024px) { ... }   lg
   @media (min-width: 1280px) { ... }   xl
   @media (min-width: 1536px) { ... }   2xl
   --------------------------------------------------------------------------- */

/* --- Responsive visibility utilities --------------------------------------- */
.hide          { display: none !important; }
.show-md,
.show-lg       { display: none; }

@media (min-width: 768px) {
  .hide-md     { display: none !important; }
  .show-md     { display: revert; }
}
@media (min-width: 1024px) {
  .hide-lg     { display: none !important; }
  .show-lg     { display: revert; }
}

/* --- Responsive auto grid (cards/galleries) -------------------------------- */
.grid-auto {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;                 /* 320–767: single column */
}
@media (min-width: 768px) {
  .grid-auto { grid-template-columns: repeat(2, 1fr); }   /* tablet: 2-up */
}
@media (min-width: 1024px) {
  .grid-auto { grid-template-columns: repeat(3, 1fr); }   /* laptop+: 3-up */
}

/* --- Section rhythm already fluid via --section-y -------------------------- */
.section { padding-block: var(--section-y); }

/* --- Mobile-only sticky action bar (Book / WhatsApp) ----------------------- */
.mobile-actionbar { display: flex; }
@media (min-width: 1024px) {
  .mobile-actionbar { display: none; }   /* desktop uses the header CTA */
}