/* ==========================================================================
   locations.css
   --------------------------------------------------------------------------
   Sección "Nuestras sedes" de la home.

   Aquí SOLO vive el envoltorio de sección: fondo, espaciado y los encabezados
   de país. La tarjeta (.gt-location) y la rejilla (.gt-locations__grid) están
   en components.css, porque se reutilizarán en una futura página de contacto o
   de instalaciones.

   Se carga DESPUÉS de news.css y ANTES de responsive.css.

   Mobile-first: los estilos base son los de móvil.
   ========================================================================== */


/* --------------------------------------------------------------------------
   .gt-locations — envoltorio de la sección
   --------------------------------------------------------------------------
   FONDO BLANCO. La sección de noticias que va justo encima es gris, y el pie
   de página que viene después también: en blanco, esta sección queda recortada
   entre las dos y la página cierra con un ritmo gris → blanco → gris.

   Las tarjetas son blancas y aquí no se recortan por contraste de fondo, sino
   por su sombra, igual que las de servicios sobre la sección de pestañas.
   -------------------------------------------------------------------------- */

.gt-locations {
  background-color: var(--color-bg);
  padding-block: 56px;
}


/* --------------------------------------------------------------------------
   Grupo de país
   --------------------------------------------------------------------------
   Los dos países van en pestañas (ver .gt-tabs en components.css). Con las
   pestañas activas solo se ve un panel, así que esta separación solo hace
   falta en el caso sin JavaScript, cuando los dos se ven seguidos.
   -------------------------------------------------------------------------- */

.gt-tabs:not(.gt-tabs--ready) .gt-locations__group + .gt-locations__group {
  margin-top: 48px;
}


/* --------------------------------------------------------------------------
   Con las pestañas activas, el encabezado de país se oculta VISUALMENTE: la
   pestaña ya dice en qué país estás y repetirlo justo debajo sobra.

   Se oculta con la utilidad .gt-visually-hidden y no con display: none a
   propósito — el <h3> sigue en el árbol de accesibilidad y en el texto de la
   página, así que ni los lectores de pantalla ni los buscadores pierden el
   nombre del país.
   -------------------------------------------------------------------------- */

.gt-tabs--ready .gt-locations__country {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   .gt-locations__country — encabezado de país
   --------------------------------------------------------------------------
   SIN BANDERA, a propósito. Las banderas como emoji no se renderizan en
   Windows —salen las dos letras del código de país, "ES" e "IT"—, y como SVG
   añadirían dos archivos o un bloque de marcado para un adorno que no aporta
   información que el nombre del país no dé ya.

   La regla del proyecto es la misma que aplicamos a los iconos de las tarjetas:
   SVG que hereda color, nunca emoji.
   -------------------------------------------------------------------------- */

.gt-locations__country {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;

  margin: 0 0 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);

  font-family: var(--font-primary);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-primary);
}

/* Contador de sedes: información secundaria, en gris y con peso normal, para
   que no compita con el nombre del país. */
.gt-locations__count {
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: rgba(0, 0, 0, 0.55);
}


/* --------------------------------------------------------------------------
   Ampliaciones por breakpoint
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {

  .gt-locations { padding-block: 80px; }

  .gt-locations__group + .gt-locations__group { margin-top: 48px; }

  .gt-locations__country {
    font-size: 1.25rem;
    margin-bottom: 24px;
  }

}

@media (min-width: 1024px) {

  .gt-locations { padding-block: 64px; }

  .gt-locations__group + .gt-locations__group { margin-top: 56px; }

  .gt-locations__country { font-size: 1.375rem; }

}

@media (min-width: 1280px) {

  .gt-locations { padding-block: 72px; }

}