/* Responsive overrides — many layouts in /components use inline grids,
   so these rules use attribute selectors + !important to override them. */

/* ============================================================
   TABLET — up to 1024px
   ============================================================ */
@media (max-width: 1024px) {
  section { padding-top: 96px !important; padding-bottom: 96px !important; }
  footer  { padding-top: 96px !important; padding-bottom: 32px !important; }

  /* Loosen oversized 80–60px gaps */
  [style*="gap: 80px"] { gap: 56px !important; }
  [style*="gap: 60px"] { gap: 48px !important; }

  /* Manifesto narrow first column */
  [style*="grid-template-columns: 240px 1fr"] {
    grid-template-columns: 160px 1fr !important;
    gap: 40px !important;
  }
}

/* ============================================================
   MOBILE — up to 768px
   ============================================================ */
@media (max-width: 768px) {
  /* ---- Containers + section rhythm ---- */
  .container, .container-tight { width: min(100%, 92vw); }
  section { padding-top: 64px !important; padding-bottom: 64px !important; }
  footer  { padding-top: 72px !important; padding-bottom: 32px !important; }

  /* ---- Stack 2-column grids (any inline variant) ---- */
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: 1.05fr 1fr"],
  [style*="grid-template-columns: 1.4fr 1fr"],
  [style*="grid-template-columns: 1fr 1.1fr"],
  [style*="grid-template-columns: 1fr 1.3fr"],
  [style*="grid-template-columns: 1fr 1.6fr"],
  [style*="grid-template-columns: 1fr 1.2fr"],
  [style*="grid-template-columns: 240px 1fr"],
  [style*="grid-template-columns: 0.7fr 1.2fr"] {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  /* ---- 4-col footer columns ➝ 2x2 ---- */
  [style*="grid-template-columns: 1.4fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 40px !important;
  }

  /* ---- Process: 4 cols ➝ 1 col with horizontal dividers ---- */
  [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
  #proceso [style*="grid-template-columns: repeat(4, 1fr)"] > div {
    border-right: 0 !important;
    border-bottom: 1px solid var(--marfil) !important;
    padding: 36px 0 !important;
    padding-left: 0 !important;
  }
  #proceso [style*="grid-template-columns: repeat(4, 1fr)"] > div:last-child {
    border-bottom: 0 !important;
  }

  /* ---- Experience timeline: 6 cols ➝ 2 ---- */
  [style*="grid-template-columns: repeat(6, 1fr)"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 28px 20px !important;
  }

  /* ---- Hero mini-stats: 3 cols ➝ 2, no inner borders ---- */
  [style*="grid-template-columns: repeat(3, auto)"] {
    grid-template-columns: 1fr 1fr !important;
    row-gap: 20px !important;
  }
  #hero [style*="grid-template-columns: repeat(3, auto)"] > div {
    border-left: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* ---- Multi-column text + masonry ---- */
  [style*="column-count: 2"] { column-count: 1 !important; }
  [style*="column-count: 3"] { column-count: 2 !important; column-gap: 14px !important; }

  /* ---- justify-self: end (filter rows, footer CTA) align left on mobile ---- */
  [style*="justify-self: end"] { justify-self: start !important; }

  /* ---- Disable sticky on small screens ---- */
  [style*="position: sticky"] { position: static !important; }

  /* ============================================================
     SECTION-SPECIFIC TWEAKS
     ============================================================ */

  /* ---- HERO ---- */
  #hero { padding-top: 110px !important; padding-bottom: 56px !important; }
  #hero h1.display { font-size: clamp(40px, 11vw, 64px) !important; }
  /* Hide decorative watermark + vertical caption on mobile */
  #hero [style*="opacity: 0.06"] { display: none !important; }
  #hero [style*="writing-mode"]  { display: none !important; }
  /* Move the floating "Reservas 2026" tag inline so it doesn't overflow */
  #hero [style*="bottom: -32px"] {
    position: static !important;
    margin-top: 16px !important;
    max-width: none !important;
  }

  /* ---- Marquee shrink ---- */
  .marquee { margin-top: 64px !important; }
  .marquee-track { font-size: 24px !important; gap: 36px !important; }

  /* ---- NAV: hide link rows, keep monogram + Reservar ---- */
  header > .container {
    grid-template-columns: auto 1fr !important;
    padding: 12px 0 !important;
  }
  header > .container > nav.nav-left { display: none !important; }
  header > .container > nav.nav-right > button:not(.btn-rose) { display: none !important; }
  header > .container > nav.nav-right {
    justify-content: flex-end !important;
    gap: 0 !important;
  }

  /* ---- TESTIMONIALS: shrink decorative quote mark ---- */
  #testimonios [style*="font-size: 200px"] {
    font-size: 120px !important;
    top: -20px !important;
    left: -10px !important;
  }

  /* ---- BOOKING MODAL ---- */
  div[style*="grid-template-columns: 0.7fr 1.2fr"] {
    max-height: 92vh !important;
    overflow: auto !important;
  }
  /* Tighten modal sidebar + form padding when stacked */
  div[style*="grid-template-columns: 0.7fr 1.2fr"] > div { padding: 24px !important; }
  /* Remove absolute "Respuesta < 24 hrs" footer in sidebar so it flows naturally */
  div[style*="grid-template-columns: 0.7fr 1.2fr"] > div:first-child > div[style*="bottom: 36px"] {
    position: static !important;
    margin-top: 24px !important;
  }
  /* Booking step 1 service tiles: 2 cols ➝ 1 to fit longer labels */
  div[style*="grid-template-columns: 1fr 1fr"][style*="gap: 12"] {
    grid-template-columns: 1fr !important;
  }
  /* Modal close button: nudge inside the now-stacked layout */
  div[style*="grid-template-columns: 0.7fr 1.2fr"] button[style*="position: absolute"][style*="top: 20px"] {
    top: 12px !important;
    right: 12px !important;
  }

  /* ---- FAQ ---- */
  /* Only shrink the question text inside accordion buttons, not the h2 heading */
  #preguntas button .display { font-size: 18px !important; }

  /* ---- GALLERY filter row ---- */
  #galeria [style*="justify-self: end"] { justify-self: start !important; }

  /* ---- FOOTER bottom legal row: stack vertically ---- */
  footer .container > div[style*="justify-content: space-between"]:last-child {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    text-align: left !important;
  }
}

/* ============================================================
   SMALL MOBILE — up to 480px
   ============================================================ */
@media (max-width: 480px) {
  section { padding-top: 56px !important; padding-bottom: 56px !important; }

  /* Single-column masonry */
  [style*="column-count: 3"] { column-count: 1 !important; }

  /* Single-column footer */
  [style*="grid-template-columns: 1.4fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Single-column timeline */
  [style*="grid-template-columns: repeat(6, 1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* Headlines a touch smaller */
  #hero h1.display { font-size: clamp(36px, 12vw, 56px) !important; }

  /* Footer CTA banner: stack heading + button */
  footer [style*="grid-template-columns: 1.4fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}