/* Sección de blog del home (issue #43), contra la p.1 de ABRASIVO_Complete.pdf
   y la p.2 del kit responsive.

   Medidas de la propuesta: banda #d5dce2 de 940 de alto con el disco de la
   marca de agua de 628 a la derecha, rótulo "BLOG" en Rubik Black 55px, y una
   tarjeta blanca de 1228x527 con borde #d8d8d8 partida en dos: la foto y el
   titular a la izquierda, el cuerpo de la nota -recortado y desvanecido- con
   el botón a la derecha. */

.abrasivomx-blog {
	--abrasivomx-blog-gris: #d5dce2;
	--abrasivomx-blog-tinta: #5a6066;
	/* De orilla a orilla, con el ancho real de la ventana: 100vw cuenta la
	   barra de scroll y dejaría la banda corrida. */
	--abrasivomx-banda: var(--abrasivomx-vw, 100vw);
	width: var(--abrasivomx-banda);
	margin-left: calc(50% - var(--abrasivomx-banda) / 2);
	background-color: var(--abrasivomx-blog-gris);
	/* El disco va a 32 del borde derecho de la página, no del contenido. */
	background-image: url(../images/blog-disco.png);
	background-repeat: no-repeat;
	background-position: right 1.7% center;
	background-size: auto 66.8%;
}

.abrasivomx-blog__interior {
	max-width: 1200px;
	margin: 0 auto;
	padding: 100px 15px 174px;
}

.abrasivomx-blog__rotulo {
	margin: 0 0 82px !important;
	color: var(--abrasivomx-blog-tinta) !important;
	font-family: 'Rubik', sans-serif;
	font-size: clamp(28px, 4.6vw, 55px) !important;
	font-weight: 900 !important;
	line-height: 1 !important;
	text-align: left !important;
	text-transform: uppercase !important;
}

/* -- La tarjeta ----------------------------------------------------------- */

.abrasivomx-blog__nota {
	display: grid;
	/* 529 y 505 de los 1228 de la tarjeta, con el resto de aire entre ambas. */
	grid-template-columns: 45% 1fr;
	gap: 8.5%;
	padding: 26px 28px;
	border: 1px solid #d8d8d8;
	border-radius: 20px;
	background: #ffffff;
	box-shadow: 0 12px 28px rgba(0, 0, 0, .08);
}

.abrasivomx-blog__foto {
	display: block;
	overflow: hidden;
	border: 1px solid #d8d8d8;
	border-radius: 14px;
}

.abrasivomx-blog__foto img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 529 / 317;
	object-fit: cover;
}

.abrasivomx-blog__titulo {
	margin: 34px 0 0 !important;
	font-family: 'Rubik', sans-serif;
	font-size: clamp(16px, 2.1vw, 25px) !important;
	font-weight: 700 !important;
	line-height: 1.32 !important;
	text-align: left !important;
	text-transform: uppercase !important;
}

.abrasivomx-blog__titulo a {
	color: #000000;
	text-decoration: none;
}

.abrasivomx-blog__titulo a:hover,
.abrasivomx-blog__titulo a:focus { text-decoration: underline; }

.abrasivomx-blog__resumen {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

/* En la propuesta el texto se corta a media frase y se desvanece: es un
   adelanto, no un resumen escrito aparte. Son once renglones. */
.abrasivomx-blog__extracto {
	position: relative;
	overflow: hidden;
	max-height: 14.7em;
	color: #000000;
	font-family: 'Inter', sans-serif;
	font-size: clamp(14px, 2vw, 24px);
	line-height: 1.333;
	/* El widget que lo contiene viene centrado desde la página. */
	text-align: left !important;
}

.abrasivomx-blog__extracto p {
	margin: 0 0 1.333em;
	color: inherit;
	font-size: inherit;
	line-height: inherit;
	text-align: left !important;
}

.abrasivomx-blog__extracto::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 5em;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0), #ffffff);
}

.abrasivomx-blog__boton {
	margin-top: 28px;
	/* 137x55 en la propuesta, con el texto en 24px. */
	padding: 12px 23px;
	border: 1px solid #000000;
	border-radius: 999px;
	color: #000000;
	font-family: 'Inter', sans-serif;
	font-size: clamp(14px, 2vw, 24px);
	line-height: 1.3;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease;
}

.abrasivomx-blog__boton:hover,
.abrasivomx-blog__boton:focus {
	background: #000000;
	color: #ffffff;
}

/* -- Lo que ocupaba este lugar -------------------------------------------- */

/* El bloque de videos se dibujaba en tres widgets: el rótulo -que ahora trae
   esta sección-, el video y su pie. Se ocultan los dos que sobran, no su
   columna: los tres comparten una sola a todo el ancho, así que ocultarla se
   llevaría también esta sección. */
.elementor-element:has(> .elementor-widget-container > .abrasivomx-blog-vacio) {
	display: none !important;
}

/* Sin ninguna entrada publicada no queda nada que enseñar: la fila entera se
   va, en vez de dejar una banda vacía antes del footer. */
.elementor-section:has(.abrasivomx-blog-vacio):not(:has(.abrasivomx-blog)) {
	display: none !important;
}

/* La sección que la contiene traía su propio relleno y su fondo, pensados para
   el video. La banda los sustituye. */
.elementor-section:has(.abrasivomx-blog),
.elementor-element:has(> .e-con-inner > .elementor-widget .abrasivomx-blog) {
	padding: 0 !important;
	background-color: transparent !important;
	background-image: none !important;
}

.elementor-section:has(.abrasivomx-blog) > .elementor-container {
	max-width: none !important;
	padding: 0 !important;
}

/* El envoltorio del widget trae 30px de relleno por los cuatro lados y, de
   costado, un margen de 15px solo a la izquierda. El relleno de arriba y abajo
   se vuelve una franja blanca contra la banda de envíos y contra el footer; el
   margen asimétrico descentra el envoltorio 15px, y con él la banda, que queda
   corrida 7.5px a la derecha en vez de arrancar en el borde. El respiro lo pone
   la banda. */
.elementor-section:has(.abrasivomx-blog) .elementor-widget-wrap {
	margin: 0 !important;
	padding: 0 !important;
}

.elementor-section:has(.abrasivomx-blog) {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* El widget deja 20px por debajo y el contenedor de página del tema otros 79:
   juntos abren una franja blanca entre la banda y el footer. Se anulan solo
   donde está esta sección -o sea, en el home-, no en el resto del sitio. */
.elementor-element:has(> .elementor-widget-container > .abrasivomx-blog) {
	margin-bottom: 0 !important;
}

body:has(.abrasivomx-blog) .container.content-page {
	padding-bottom: 0 !important;
}

.elementor-section:has(.abrasivomx-blog) .elementor-column:has(.abrasivomx-blog) {
	width: 100% !important;
}

@media (max-width: 860px) {
	/* Apilada: el rótulo y el botón centrados, la tarjeta en una columna con
	   la foto arriba, como en el kit responsive. */
	.abrasivomx-blog {
		/* El disco es marca de agua: en una columna angosta le quita lugar al
		   contenido sin aportar. */
		background-image: none;
	}

	.abrasivomx-blog__interior { padding: 46px 15px 60px; }

	.abrasivomx-blog__rotulo {
		margin-bottom: 34px !important;
		font-size: clamp(30px, 9.26vw, 60px) !important;
		text-align: center !important;
	}

	.abrasivomx-blog__nota {
		grid-template-columns: 1fr;
		gap: 26px;
		padding: 20px 22px;
	}

	.abrasivomx-blog__titulo { font-size: clamp(15px, 3.03vw, 25px) !important; }

	.abrasivomx-blog__extracto { font-size: clamp(15px, 3.22vw, 24px); }

	.abrasivomx-blog__resumen { align-items: center; }

	.abrasivomx-blog__boton {
		font-size: clamp(16px, 4.69vw, 24px);
		text-align: center;
	}
}