/**
 * Mango Builder · estructura del frontend.
 */

.mango {
	--mango-content-width: 1140px;
	--mango-gap: 20px;
	width: 100%;
}

/**
 * Los temas (sobre todo los de bloques) limitan la anchura de los hijos del
 * contenido. Sin esto, un contenedor "a ancho completo" seguiría viéndose en
 * caja porque el envoltorio del tema ya lo había recortado.
 */
.entry-content > .mango,
.wp-block-post-content > .mango,
.is-layout-constrained > .mango,
.is-layout-flow > .mango,
.site-main > .mango,
main > .mango,
article > .mango {
	max-width: none !important;
	width: 100%;
}

.mango *,
.mango *::before,
.mango *::after {
	box-sizing: border-box;
}

.mango img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* --------------------------------------------------------------------
 * Sección y columnas
 * ----------------------------------------------------------------- */

.mango-section {
	position: relative;
	width: 100%;
}

.mango-section > .mango-section-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	width: 100%;
	margin-inline: auto;
	position: relative;
	z-index: 1;
}

.mango-section-boxed > .mango-section-inner {
	max-width: var(--mango-content-width);
	padding-inline: 16px;
}

.mango-section-full_width > .mango-section-inner {
	max-width: none;
}

/* Ancho de la ventana: rompe cualquier contenedor del tema. */
.mango-section-viewport,
.mango-container--viewport {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.mango-section-viewport > .mango-section-inner,
.mango-container--viewport > .mango-container-inner {
	max-width: none;
}

.mango-section-height-full {
	min-height: 100vh;
	display: flex;
	align-items: center;
}

.mango-section-height-full > .mango-section-inner {
	align-items: center;
}

/**
 * La separación entre columnas se aplica como relleno de la propia columna
 * (box-sizing: border-box), no con gap: así los anchos en % siguen sumando
 * 100 % y las columnas no saltan de línea.
 */
.mango-column {
	display: flex;
	flex: 1 1 0;
	min-width: 0;
	position: relative;
	padding-inline: 10px;
}

.mango-column > .mango-column-wrap {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	width: 100%;
	position: relative;
}

.mango-widgets-wrap {
	display: flex;
	flex-direction: column;
	width: 100%;
}

/* --------------------------------------------------------------------
 * Contenedor flexbox
 * ----------------------------------------------------------------- */

.mango-container {
	position: relative;
	display: flex;
	width: 100%;
}

.mango-container > .mango-container-inner {
	display: flex;
	flex-direction: column;
	width: 100%;
	margin-inline: auto;
	gap: var(--mango-gap);
	position: relative;
	z-index: 1;
}

.mango-container--boxed > .mango-container-inner {
	max-width: var(--mango-content-width);
	padding-inline: 16px;
}

.mango-container--full > .mango-container-inner {
	max-width: none;
	padding-inline: 0;
}

.mango-background-overlay {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-size: cover;
	background-position: center;
}

/* --------------------------------------------------------------------
 * Widgets
 * ----------------------------------------------------------------- */

.mango-widget {
	position: relative;
	max-width: 100%;
}

.mango-widget-container > *:first-child {
	margin-top: 0;
}

.mango-widget-container > *:last-child {
	margin-bottom: 0;
}

/* --------------------------------------------------------------------
 * Visibilidad responsive
 * ----------------------------------------------------------------- */

@media (min-width: 1025px) {
	.mango-hidden-desktop {
		display: none !important;
	}
}

@media (max-width: 1024px) and (min-width: 768px) {
	.mango-hidden-tablet {
		display: none !important;
	}
}

@media (max-width: 767px) {
	.mango-hidden-mobile {
		display: none !important;
	}

	.mango-section > .mango-section-inner {
		flex-direction: column;
	}

	/* En columna, flex-basis pasa a ser altura: hay que neutralizarlo. */
	.mango-column {
		width: 100% !important;
		max-width: 100% !important;
		flex: 1 1 auto !important;
	}
}

/* --------------------------------------------------------------------
 * Plantillas de página
 * ----------------------------------------------------------------- */

body.mango-template-canvas .mango-canvas,
body.mango-template-full-width .mango-site-main {
	width: 100%;
}

.mango-site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.mango-site-main {
	flex: 1 1 auto;
}

/* --------------------------------------------------------------------
 * Contenido por defecto del Theme Builder
 * ----------------------------------------------------------------- */

.mango-default-content {
	max-width: var(--mango-content-width, 1140px);
	margin-inline: auto;
	padding: 48px 16px;
}

.mango-default-posts {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 32px;
	margin-top: 32px;
}

.mango-default-post-title {
	font-size: 1.25rem;
	margin: 12px 0 8px;
}

.mango-default-post-title a {
	text-decoration: none;
	color: inherit;
}

.mango-default-post-thumb img {
	border-radius: 10px;
}