/* ============================================================
 * responsive.css — Responsive layer for the public site.
 *
 * The public pages were ported 1:1 from a desktop JSX design and use
 * hardcoded inline styles (padding ... 64px, grid-template-columns:
 * repeat(4,1fr), etc.) with no media queries. Inline styles can't be
 * overridden by normal external rules, so every override here uses
 * !important and targets the repeated inline patterns via attribute-
 * substring selectors ([style*="..."]). The patterns are consistent
 * across pages because they all came from the same design system.
 *
 * The mobile navigation (hamburger) lives in _inc/nav.php's own <style>
 * block to keep the nav self-contained.
 *
 * Breakpoints: 992 (tablet) · 768 (large phone) · 600 (type/footer) · 480 (phone)
 * ============================================================ */

/* Safety net: never allow horizontal scroll from a stray absolute element. */
html, body { overflow-x: hidden; max-width: 100%; }

/* ─── Tablet: thin out the densest 4-up card grids ─────────────────── */
@media (max-width: 992px) {
  [style*="repeat(4, 1fr)"] { grid-template-columns: 1fr 1fr !important; }
}

/* ─── Large phone / small tablet ───────────────────────────────────── */
@media (max-width: 768px) {
  /* Horizontal padding: any element whose inline shorthand uses 64px on
     the sides. Longhand left/right override only the horizontal axis and
     leave the (varied) vertical padding intact. */
  [style*=" 64px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Card / content grids → 2 columns */
  [style*="repeat(4, 1fr)"],
  [style*="repeat(3, 1fr)"] { grid-template-columns: 1fr 1fr !important; }
  [style*="repeat(2, 1fr)"] { grid-template-columns: 1fr !important; }

  /* Two-column content splits (hero/about/services/property layouts) → stack.
     Unscoped on purpose: some pages (e.g. propiedad.php) place these grids in
     plain <div>/<main> wrappers, not inside <section>. The footer rule below
     has higher specificity so the footer mega-grid is unaffected. */
  [style*="1.4fr 1fr"],
  [style*="1.2fr 1fr"],
  [style*="1.05fr 1fr"],
  [style*="1fr 1.1fr"],
  [style*="1fr 1fr"] { grid-template-columns: 1fr !important; }

  /* Disable sticky side columns once stacked (e.g. propiedad.php agent card).
     OJO: excluir el <header> del nav — si se vuelve static pierde el z-index y
     el contenido de la página tapa el menú móvil desplegable. */
  [style*="position: sticky"]:not(header) { position: static !important; top: auto !important; }

  /* Search panel grid (uses classes, not inline) */
  .sp-grid { grid-template-columns: 1fr 1fr !important; }

  /* Footer mega-grid (higher specificity than the generic split rule above) */
  footer > div[style*="1.4fr"] { grid-template-columns: 1fr 1fr !important; gap: 28px !important; }

  /* Top contact bar: left-align the wrapped lines instead of pushing right */
  header > div[style*="flex-end"] { justify-content: flex-start !important; font-size: 11px !important; }
}

/* ─── Phone: stack headers + scale oversized fixed type ────────────── */
@media (max-width: 600px) {
  /* Section header rows that put a title and a "Ver todas →" link apart */
  section [style*="justify-content: space-between"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }

  /* Oversized fixed display type → fluid */
  section h1[style] { font-size: clamp(34px, 9vw, 48px) !important; }
  section h2[style] { font-size: clamp(30px, 8vw, 48px) !important; }
  /* Script subtitles ported at 36px */
  section [style*="font-size: 36px"] { font-size: 24px !important; }

  /* Footer bottom bar (copyright / tagline) → stack + center */
  footer > div[style*="space-between"] {
    flex-direction: column !important;
    gap: 8px !important;
    text-align: center !important;
  }
}

/* ─── Small phone: everything single-column ────────────────────────── */
@media (max-width: 480px) {
  [style*=" 64px"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  [style*="repeat(4, 1fr)"],
  [style*="repeat(3, 1fr)"] { grid-template-columns: 1fr !important; }

  .sp-grid,
  .sp-grid-codigo { grid-template-columns: 1fr !important; }
  .sp-wrap { padding: 18px !important; }

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

/* ============================================================
 * Rediseño 2026 — patrones nuevos que no cubrían las reglas de arriba:
 *   · grillas escritas sin espacio tras la coma  → repeat(4,1fr)
 *   · grilla de 5 columnas (sección "Cómo trabajamos")
 *   · nav transparente de la home dentro del menú móvil
 * ============================================================ */

/* Tablet */
@media (max-width: 992px) {
  [style*="repeat(4,1fr)"] { grid-template-columns: 1fr 1fr !important; }
  [style*="repeat(5, 1fr)"],
  [style*="repeat(5,1fr)"] { grid-template-columns: repeat(3, 1fr) !important; }
}

/* Large phone */
@media (max-width: 768px) {
  [style*="repeat(4,1fr)"],
  [style*="repeat(3,1fr)"],
  [style*="repeat(5, 1fr)"],
  [style*="repeat(5,1fr)"] { grid-template-columns: 1fr 1fr !important; }
  [style*="repeat(2,1fr)"] { grid-template-columns: 1fr !important; }

  /* Padding horizontal en el patrón sin espacio (buscar.php) */
  [style*="64px 96px"], [style*="40px 64px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Hero: en móvil no forzar viewport completo (el panel de búsqueda no entra) */
  section[style*="min-height: 100vh"] { min-height: auto !important; }
  section[style*="min-height: 100vh"] > div[style*="padding: 120px"] {
    padding-top: 104px !important;
    padding-bottom: 40px !important;
  }
}

/* Phone: todo a una columna */
@media (max-width: 560px) {
  [style*="repeat(4, 1fr)"], [style*="repeat(4,1fr)"],
  [style*="repeat(3, 1fr)"], [style*="repeat(3,1fr)"],
  [style*="repeat(5, 1fr)"], [style*="repeat(5,1fr)"] {
    grid-template-columns: 1fr !important;
  }
}

/* ─── Menú móvil ──────────────────────────────────────────────────────
   En la home el nav es transparente con texto claro (sobre el hero); al
   abrir el panel desplegable el fondo es claro, así que hay que volver el
   texto oscuro para que se lea. */
@media (max-width: 900px) {
  .dlr-collapse .dlr-mainnav > .nav-item > button,
  .dlr-collapse .dlr-mainnav > a,
  .dlr-collapse .dropdown a { color: var(--fg-default) !important; }

  .dlr-collapse {
    max-height: calc(100vh - 96px) !important;
    overflow-y: auto !important;
    background: var(--bg-surface) !important;
    z-index: 60 !important;
  }
  /* El header del NAV siempre por encima del contenido de la página.
     Importante: varias páginas usan <header> también para su hero, así que
     acotamos al primero (el del nav) y bajamos los demás. */
  body > header:first-of-type { z-index: 50 !important; }
  body > header:not(:first-of-type) { z-index: auto !important; }
  /* El panel del dropdown dentro del menú móvil: sin vidrio ni sombra */
  .dlr-collapse .nav-item .dropdown {
    background: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    border: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
  }
}