/*
 * Hub de zona/ciudad (vista info) — inc/views/zona-info.php e
 * inc/views/ciudad-info.php.
 *
 * Solo lo que el grid de Flatsome no da gratis: el ancho de las columnas
 * sale de `.row > .col.large-6` (flatsome.css), acá va la tipografía y las
 * cajas propias del hub. Se encola solo en esta vista (ver
 * mdpd_portal_hub_info_assets() en inc/front/hub-assets.php).
 */

/* --- Fila 1: imagen + título/descripción/resumen --- */
.mdpd-hub-hero {
	align-items: flex-start;
}

.mdpd-hub-hero__img img {
	width: 100%;
	height: auto;
	border-radius: var(--mdpd-caja-radio, 0.75rem);
	display: block;
}

.mdpd-hub-hero__titulo {
	margin-bottom: 0.5rem;
}

.mdpd-hub-hero__desc {
	margin-bottom: 1.25rem;
}

.mdpd-hub-hero__desc > *:last-child {
	margin-bottom: 0;
}

/* --- Resumen de stock --- */
.mdpd-hub-resumen {
	border-top: 1px solid #e3e9ec;
	padding-top: 1rem;
}

.mdpd-hub-resumen__total {
	margin-bottom: 0.75rem;
	font-size: 1rem;
}

.mdpd-hub-resumen__total strong {
	font-size: 1.375rem;
	color: var(--fs-color-primary, #168ea6);
}

.mdpd-hub-resumen__ops {
	list-style: none;
	margin: 0 0 0.875rem;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.mdpd-hub-resumen__op {
	flex: 1 1 12rem;
	margin: 0;
	padding: 0.625rem 0.75rem;
	border: 1px solid #e3e9ec;
	border-radius: var(--mdpd-caja-radio, 0.75rem);
	line-height: 1.35;
}

/* Mismo par de colores que los marks del mapa: venta verde, alquiler azul. */
.mdpd-hub-resumen__op--venta {
	border-left: 3px solid #2bb583;
}

.mdpd-hub-resumen__op--alquiler {
	border-left: 3px solid #2f95bd;
}

.mdpd-hub-resumen__op-n {
	font-size: 1.125rem;
	font-weight: 700;
}

.mdpd-hub-resumen__op-label {
	font-size: 0.875rem;
}

.mdpd-hub-resumen__op-rango {
	display: block;
	font-size: 0.75rem;
	opacity: 0.7;
}

.mdpd-hub-resumen__tipos {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
}

.mdpd-hub-resumen__tipo {
	margin: 0;
	padding: 0.2rem 0.6rem;
	border-radius: 2rem;
	background: #f1f5f6;
	font-size: 0.8125rem;
	line-height: 1.4;
}

.mdpd-hub-resumen__tipo-n {
	font-weight: 700;
	margin-right: 0.125rem;
}

/* --- Fila 2: galería, SOLO miniaturas ---
   El lightbox (Magnific Popup, nativo de Flatsome) sigue abriendo la foto
   grande; en la fila no queremos fotos gigantes, solo la tira de thumbs. */
.mdpd-hub-galeria .gallery-col,
.mdpd-hub-galeria .col {
	padding-bottom: 0.5rem;
}

.mdpd-hub-galeria .box-image {
	border-radius: 0.375rem;
	overflow: hidden;
}

/* --- Slider de logos de inmobiliarias ---
   Las cajas de logo son las mismas del listado de inmobiliarias
   (.mdpd-inmo-logo-box, en style.css, que carga siempre): acá solo va el
   espaciado del bloque, para no tener el mismo logo estilado en dos lados. */
.mdpd-hub-inmos {
	margin-top: 1.5rem;
}

.mdpd-hub-inmos .mdpd-inmo-logo-box {
	margin-bottom: 0;
}

/* --- Fila de estadísticas --- */
.mdpd-hub-stats {
	margin-top: 1.5rem;
}

.mdpd-hub-stats__grid {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	align-items: flex-start;
}

.mdpd-hub-stats__m2 {
	flex: 1 1 16rem;
}

.mdpd-hub-stats__tipos {
	flex: 2 1 22rem;
}

.mdpd-hub-stats__subtitulo {
	font-size: 0.875rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	opacity: 0.65;
	margin-bottom: 0.75rem;
}

.mdpd-hub-stats__m2-lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.mdpd-hub-stats__m2-item {
	flex: 1 1 10rem;
	margin: 0;
	padding: 0.75rem;
	border: 1px solid #e3e9ec;
	border-radius: var(--mdpd-caja-radio, 0.75rem);
}

.mdpd-hub-stats__m2-item--venta {
	border-left: 3px solid #2bb583;
}

.mdpd-hub-stats__m2-item--alquiler {
	border-left: 3px solid #2f95bd;
}

.mdpd-hub-stats__m2-label {
	display: block;
	font-size: 0.8125rem;
	opacity: 0.7;
}

.mdpd-hub-stats__m2-valor {
	display: block;
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.2;
}

.mdpd-hub-stats__m2-unidad {
	display: block;
	font-size: 0.6875rem;
	opacity: 0.6;
}

/* --- Torta de tipos (SVG generado en PHP, sin librería) --- */
.mdpd-hub-stats__torta-wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	align-items: center;
}

.mdpd-hub-stats__torta {
	flex: 0 0 auto;
	width: 10rem;
	height: 10rem;
	/* El dasharray se dibuja desde las 3 en punto: rotar para arrancar
	   arriba, que es de donde la leyenda lee el orden. */
	transform: rotate(-90deg);
}

.mdpd-hub-stats__leyenda {
	flex: 1 1 12rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.mdpd-hub-stats__leyenda-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0.25rem;
	font-size: 0.8125rem;
	line-height: 1.4;
}

.mdpd-hub-stats__swatch {
	flex: 0 0 auto;
	width: 0.75rem;
	height: 0.75rem;
	border-radius: 0.1875rem;
}

.mdpd-hub-stats__leyenda-label {
	flex: 1 1 auto;
}

.mdpd-hub-stats__leyenda-n {
	font-weight: 600;
	white-space: nowrap;
}

.mdpd-hub-stats__leyenda-n small {
	font-weight: 400;
	opacity: 0.6;
}

/* --- CTA final --- */
.mdpd-hub-cta {
	margin: 1.75rem 0 0;
	text-align: center;
}