/*
  ciudad.css — Ajustes de las fichas estaticas /ciudad/<pais>/<ciudad>
  (scripts/generar-paginas-ciudad.js). El resto del aspecto sale de detalle.css
  (cabecera, tarjetas, .city-section) y seo.css (migas, bloque relacionado).
  En las fichas estaticas los titulos de seccion son <h2> y los subtitulos <h3>
  (en la version que pinta js/ciudad.js para otros idiomas siguen siendo h3/h4).
  Solo usa tokens de variables.css.
*/

.city-crumbs {
  padding-top: var(--space-2);
}

.city-crumbs a {
  color: var(--gold-300);
}

/* La cabecera estatica va justo debajo de las migas: menos aire arriba que la de pais. */
.city-static-header {
  padding-top: var(--space-6);
}

.city-static-header .detail-header__name {
  overflow-wrap: anywhere;
}

.city-meta {
  margin-top: var(--space-3);
}

.city-meta a,
.city-static a {
  color: var(--gold-300);
}

.city-static .city-section > h2 {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 600;
  line-height: var(--lh-heading);
  color: var(--text-primary);
  margin-bottom: var(--space-3);
}

.city-static .city-section > h3 {
  font-size: var(--fs-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-uppercase-sm);
  color: var(--text-tertiary);
  margin-top: var(--space-5);
  margin-bottom: var(--space-2);
}

.city-static .city-section > h2 + h3 {
  margin-top: 0;
}

.city-static .detail-list {
  margin-bottom: var(--space-3);
}

/* Mapa diferido: el alto ya esta reservado por .detail-map (sin saltos al cargar Leaflet). */
.detail-map__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  margin: 0;
  padding: var(--space-4);
  color: var(--text-tertiary);
  font-size: var(--fs-sm);
  text-align: center;
}

/* Tarjetas de solo texto (las fichas no tienen fotos propias): alto natural, sin recuadro de imagen. */
.content-card--texto {
  height: auto;
}