/* =========================================================
   ARTÍCULOS — estilos compartidos
   Se encolan desde /inc/mmp-articulos.php, no desde block.json.
   ========================================================= */

/* ---------------------------------------------------------
   1. Hero / Top Articles
   --------------------------------------------------------- */

.articulos-hero {
	width: 100%;
	background-color: #0d0a07;
	color: #ffffff;
	padding: 30px 20px 50px;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	box-sizing: border-box;
	margin: 0 !important;
}

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

.articulos-hero__container {
	max-width: 1250px;
	margin: 0 auto;
}

.articulos-hero__header {
	margin-bottom: 20px;
}

.articulos-hero__badge {
	display: inline-block;
	background: #18130c;
	border: 1px solid #c89d47;
	color: #ffffff;
	padding: 6px 18px;
	border-radius: 20px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.articulos-hero__carousel-wrapper {
	position: relative;
	display: flex;
	align-items: center;
	gap: 15px;
}

/*.articulos-hero__grid {
	display: grid;
	gap: 20px;
	width: 100%;
	min-width: 0;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 40px) / 3);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
}*/
.articulos-hero__grid {
	display: grid;
	gap: 20px;
	width: 100%;
	min-width: 0;
	grid-auto-flow: column;
	/* Cambiamos a un ancho fijo relativo seguro para 3 columnas en escritorio */
	grid-auto-columns: calc(33.333% - 14px); 
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.articulos-hero__grid::-webkit-scrollbar { display: none; }
.articulos-hero__grid > * { scroll-snap-align: start; }

.articulos-hero__arrow {
	background: rgba(200, 157, 71, 0.2);
	border: 1px solid #c89d47;
	color: #c89d47;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	cursor: pointer;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	line-height: 1;
	transition: background 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}

.articulos-hero__arrow:hover:not([disabled]) {
	background: #c89d47;
	color: #000000;
}

.articulos-hero__arrow[disabled] {
	opacity: 0.3;
	cursor: default;
}

.top-card {
	background: #14100c;
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.08);
	transition: transform 0.3s ease, border-color 0.3s ease;
	min-width: 0;
}

.top-card:hover {
	transform: translateY(-4px);
	border-color: rgba(200, 157, 71, 0.5);
}

.top-card__link {
	text-decoration: none !important;
	color: inherit;
	display: block;
}

.top-card__image-wrapper {
	position: relative;
	width: 100%;
	height: 160px;
	overflow: hidden;
	background: #1a1512;
}

.top-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.top-card__category {
	position: absolute;
	top: 10px;
	left: 10px;
	background: #b30000;
	color: #ffffff;
	font-size: 10px;
	font-weight: 700;
	padding: 3px 10px;
	border-radius: 12px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.top-card__content { padding: 14px; }

.top-card__title {
	margin: 0;
	font-size: 14px;
	line-height: 1.4;
	color: #ffffff;
	font-weight: 600;
	text-decoration: none;
}

.articulos-hero__vacio {
	color: #8a8279;
	font-size: 14px;
	padding: 20px 0;
}

/* ---------------------------------------------------------
   2. Barra de filtros
   --------------------------------------------------------- */

.bar-filtros__btn {
	text-decoration: none !important;
	display: inline-block;
	line-height: 1.4;
}

.bar-filtros__btn.active,
.bar-filtros__btn[aria-current="true"] {
	background: #c89d47;
	color: #000000;
	border-color: #c89d47;
	box-shadow: 0 0 12px rgba(200, 157, 71, 0.4);
}

/* ---------------------------------------------------------
   3. Estado de carga
   --------------------------------------------------------- */

.mmp-cargando { position: relative; }

.mmp-cargando > *:not(.destacado-cat__header) {
	opacity: 0.35;
	transition: opacity 0.2s ease;
	pointer-events: none;
}

.destacado-cat__vacio {
	color: #8a8279;
	text-align: center;
	padding: 40px 0;
}

/* ---------------------------------------------------------
   4. Entrada individual: fondo continuo
   Quita el hueco claro que dejaba el tema entre bloques.
   --------------------------------------------------------- */

body.single-post {
	background-color: #0d0a07;
}

body.single-post .wp-site-blocks {
	background-color: #0d0a07;
}

/* El tema separa los bloques del sitio con un margen; aquí no lo
   queremos porque cada bloque ya trae su propio padding. */
body.single-post .wp-site-blocks > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

body.single-post .wp-site-blocks > main,
body.single-post main.wp-block-group {
	margin-block-start: 0;
	padding-block-start: 0;
	background-color: #0d0a07;
}

/* ---------------------------------------------------------
   5. Comentarios (bloque nativo de WordPress)
   --------------------------------------------------------- */

body.single-post .wp-block-comments,
body.single-post .comments-area,
body.single-post #comments {
	max-width: 780px;
	margin: 0 auto;
	padding: 8px 20px 72px;
	background-color: #0d0a07;
	color: #ddd8d0;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* --- Títulos --- */
body.single-post .wp-block-comments-title,
body.single-post .comment-reply-title,
body.single-post .comments-title {
	color: #c89d47;
	font-size: 1.25rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin: 0 0 22px;
}

/* --- Lista de comentarios --- */
body.single-post .wp-block-comment-template,
body.single-post .comment-list {
	list-style: none;
	margin: 0 0 40px;
	padding: 0;
}

body.single-post .wp-block-comment-template li,
body.single-post .comment-list li.comment {
	background: #14100c;
	border: 1px solid rgba(200, 157, 71, 0.25);
	border-radius: 12px;
	padding: 18px 20px;
	margin-bottom: 16px;
	list-style: none;
}

body.single-post .wp-block-comment-author-name,
body.single-post .comment-author {
	color: #c89d47;
	font-weight: 600;
	text-decoration: none;
}

body.single-post .wp-block-comment-author-name a { color: #c89d47; }

body.single-post .wp-block-comment-date,
body.single-post .comment-metadata,
body.single-post .comment-metadata a {
	color: #8a8279;
	font-size: 12px;
	text-decoration: none;
}

body.single-post .wp-block-comment-content p,
body.single-post .comment-content p {
	color: #ddd8d0;
	line-height: 1.65;
	margin: 10px 0 0;
}

body.single-post .wp-block-comment-reply-link a,
body.single-post .comment-reply-link {
	color: #c89d47;
	font-size: 13px;
	text-decoration: none;
}

body.single-post .wp-block-comment-reply-link a:hover,
body.single-post .comment-reply-link:hover {
	text-decoration: underline;
}

/* Respuestas anidadas */
body.single-post .wp-block-comment-template ol,
body.single-post .comment-list .children {
	list-style: none;
	margin: 16px 0 0;
	padding-left: 20px;
	border-left: 1px solid rgba(200, 157, 71, 0.2);
}

/* --- Formulario --- */
body.single-post .wp-block-post-comments-form,
body.single-post .comment-respond {
	background: #14100c;
	border: 1px solid rgba(200, 157, 71, 0.25);
	border-radius: 14px;
	padding: 26px 24px;
}

body.single-post .comment-form label,
body.single-post .comment-notes,
body.single-post .logged-in-as {
	color: #a9a29a;
	font-size: 13px;
}

body.single-post .logged-in-as a,
body.single-post .comment-notes a {
	color: #c89d47;
}

body.single-post .comment-form input[type="text"],
body.single-post .comment-form input[type="email"],
body.single-post .comment-form input[type="url"],
body.single-post .comment-form textarea {
	width: 100%;
	background: #0d0a07;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 8px;
	color: #f2efe9;
	padding: 12px 14px;
	font-size: 15px;
	font-family: inherit;
	margin-top: 6px;
	transition: border-color 0.25s ease;
}

body.single-post .comment-form input:focus,
body.single-post .comment-form textarea:focus {
	border-color: #c89d47;
	outline: none;
	box-shadow: 0 0 0 2px rgba(200, 157, 71, 0.18);
}

body.single-post .comment-form textarea { min-height: 130px; resize: vertical; }

body.single-post .comment-form .form-submit { margin-top: 18px; }

body.single-post .comment-form input[type="submit"],
body.single-post .wp-block-post-comments-form .wp-element-button,
body.single-post .wp-block-post-comments-form .wp-block-button__link {
	background: linear-gradient(135deg, #dfbd85 0%, #c89d47 52%, #947137 100%);
	color: #14100c;
	border: none;
	border-radius: 22px;
	padding: 11px 30px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.04em;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

body.single-post .comment-form input[type="submit"]:hover,
body.single-post .wp-block-post-comments-form .wp-element-button:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(200, 157, 71, 0.28);
}

/* Casilla de cookies y campos secundarios */
body.single-post .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-top: 14px;
}

body.single-post .comment-form-cookies-consent label { margin: 0; }

/* Paginación de comentarios */
body.single-post .wp-block-comments-pagination a,
body.single-post .comment-navigation a {
	color: #c89d47;
	text-decoration: none;
}

/* ---------------------------------------------------------
   6. Responsive
   --------------------------------------------------------- */

@media (max-width: 900px) {
	.articulos-hero__grid { grid-auto-columns: calc((100% - 20px) / 2); }
}

@media (max-width: 768px) {
	.articulos-hero { padding: 24px 16px 40px; }
	.articulos-hero__grid { grid-auto-columns: 85%; }
	.articulos-hero__carousel-wrapper { gap: 8px; }
	.articulos-hero__arrow { width: 32px; height: 32px; }

	body.single-post .wp-block-comments,
	body.single-post .comments-area,
	body.single-post #comments {
		padding: 8px 18px 56px;
	}

	body.single-post .wp-block-post-comments-form,
	body.single-post .comment-respond {
		padding: 20px 16px;
	}
}