/* =========================================================
   responsive.css — Media queries consolidadas
   Surfcamp Ribadesella

   Breakpoints:
   - Mobile first (base styles en cada módulo)
   - 600px  → tablet pequeña
   - 860px  → tablet / desktop pequeño
   - 1100px → desktop
   - 1280px → desktop grande
   ========================================================= */

/* ── 600px ──────────────────────────────────────────────── */
@media (min-width: 600px) {
  .wk-grid { grid-template-columns: 1fr 1fr; }
  .tiles   { grid-template-columns: 1fr 1fr; }
}

/* ── 860px ──────────────────────────────────────────────── */
@media (min-width: 860px) {
  /* Header */
  .hdr-contact { display: flex; }
  .menu-btn    { display: none; }
  .nav-desktop { display: flex; }

  /* Lodging */
  .lodging { grid-template-columns: 1fr 1fr; }

  /* Includes grid */
  .inc-grid { grid-template-columns: repeat(3, 1fr); }

  /* Cross-sell */
  .csell-grid { grid-template-columns: repeat(3, 1fr); }

  /* Trust strip */
  .trust-strip { grid-template-columns: repeat(4, 1fr); }

  /* Split text + media */
  .split { grid-template-columns: 1fr 1fr; align-items: center; }
  .split.rev .split-media { order: 2; }

  /* Tiles */
  .tiles { grid-template-columns: repeat(3, 1fr); }

  /* Staff grid */
  .staff-grid { grid-template-columns: repeat(3, 1fr); }

  /* Contact */
  .contact-grid { grid-template-columns: 1fr 1fr; }

  /* Week selector */
  .wk-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── 1100px ─────────────────────────────────────────────── */
@media (min-width: 1100px) {
  /* Nav desktop visible */
  .nav-desktop { gap: 0; }

  /* Week selector */
  .wk-grid { grid-template-columns: repeat(4, 1fr); }

  /* Staff grid */
  .staff-grid { grid-template-columns: repeat(4, 1fr); }

  /* Tiles */
  .tiles { grid-template-columns: repeat(4, 1fr); }
}

/* ── Sticky bar móvil (ocultar en desktop) ─────────────── */
@media (min-width: 860px) {
  .mob-reserve-bar { display: none; }
}
@media (max-width: 859px) {
  .nav-desktop { display: none; }
  .hdr-contact { display: none; }
}