/* ============================================================
   PAGE: /ubicaciones/ — composicion del mapa de La Barra
   ------------------------------------------------------------
   Va en hoja propia y no en ez-design-system-v2, por dos razones:

   1. El mapa es de esta pagina y de ninguna otra. Moverle el
      cache-bust al sistema de diseno obliga a revalidar 37
      paginas por un cambio que solo se ve en una.
   2. Es el patron que ya usan /blog/, /contacto/, /home/,
      /servicios/ y /sobre-estudio/ en este mismo directorio.

   Se carga DESPUES del sistema de diseno, asi que estas reglas
   ganan por orden de fuente sin subir especificidad ni recurrir
   a !important. Las que quedan pisadas viven en la seccion
   ".ez-map-embed" del sistema de diseno.
   ============================================================ */


/* --- Escritorio: las dos columnas empiezan y terminan juntas ---
   El sistema de diseno deja .ez-location__inner en align-items:
   end, que con una sola sede solo alinea el pie: cuando la
   columna de texto es mas alta que el mapa (pasa en cuanto el
   ancho baja de ~1200px), el mapa se descuelga hacia abajo y su
   borde superior queda muy por debajo de "Nuestra ubicacion".

   Con stretch el mapa toma la altura de la fila, que es la de la
   columna de texto: los dos bordes coinciden arriba y abajo sin
   fijar un alto en pixeles que solo seria correcto a un ancho.
   El alto queda gobernado por el contenido de la izquierda (515px
   a 1440, dentro de la banda buscada de 500-540).

   El min-height es el piso, para que un texto corto no deje un
   mapa aplastado; el iframe se estira con el resto. */
@media (min-width: 901px) {
  .ez-ubicaciones-studio .ez-location__inner {
    align-items: stretch;
  }

  .ez-ubicaciones-studio .ez-location__map {
    display: flex;
  }

  .ez-ubicaciones-studio .ez-map-embed {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 500px;
  }

  /* height:auto anula los 450px fijos del sistema de diseno y los
     340px de su media query de 1024, que aqui solo servirian para
     romper la alineacion inferior. min-height:0 deja que el item
     flex se encoja si hiciera falta en vez de desbordar la caja. */
  .ez-ubicaciones-studio .ez-map-embed iframe {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
  }

  /* El rotulo no se estira: es una linea y va pegado bajo el mapa. */
  .ez-ubicaciones-studio .ez-map-embed__link {
    flex: 0 0 auto;
  }
}


/* --- Movil: el mapa va debajo de la informacion ----------------
   Una sola columna (el sistema de diseno ya lo hace a 900px). El
   alto baja a 300px: con el bbox centrado en el marcador, el punto
   sigue al centro y entra el contexto de La Barra sin que el mapa
   se coma la pantalla. */
@media (max-width: 900px) {
  .ez-ubicaciones-studio .ez-map-embed iframe {
    height: 300px;
  }
}


/* --- El iframe no desborda a lo ancho -------------------------
   Un iframe trae ancho intrinseco propio (300px por defecto) y no
   respeta el ancho de la grilla por si solo. max-width:100% sobre
   la caja y el marco evita el scroll horizontal en pantallas
   angostas, que es donde aparece. */
.ez-ubicaciones-studio .ez-map-embed,
.ez-ubicaciones-studio .ez-map-embed iframe {
  max-width: 100%;
}


/* --- Zonas de cobertura, apiladas en movil: divisor discreto ---
   El sistema de diseno ya baja ".ez-location-coverage__zones" a
   una columna bajo 640px (ver ez-design-system-v2.full.css), pero
   deja el mismo gap de escritorio y sin corte entre areas: tres
   parrafos sueltos se leen como uno solo. Un borde superior fino
   entre items consecutivos separa "Maldonado" de "Todo Uruguay" de
   "Exterior" sin caja ni sombra. */
@media (max-width: 640px) {
  .ez-ubicaciones-studio .ez-location-coverage__zones {
    gap: var(--sp-5);
  }
  .ez-ubicaciones-studio .ez-location-coverage__zones li + li {
    border-top: 1px solid rgba(205, 213, 224, 0.7);
    padding-top: var(--sp-5);
  }
}