/* =============================================================
   CCLatam — components.css
   Piezas reutilizables: tarjetas de noticia, ranking, tags, spec
   box, byline, anuncios AdSense, modal de búsqueda, menú móvil,
   footer, formularios y comentarios.
   ============================================================= */

/* -------------------------------------------------------------
   IMAGEN CON FALLBACK (cclatam_thumb() en inc/template-tags.php)
   ------------------------------------------------------------- */

.cclatam-thumb-fallback {
	background: linear-gradient(135deg, var(--c1, #3a3a3a), var(--c2, #101010));
}

.hero-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* -------------------------------------------------------------
   TARJETA DE NOTICIA (template-parts/post-card.php)
   ------------------------------------------------------------- */

.news-item {
	display: flex;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--grey-100);
}

.news-thumb-link {
	flex: 0 0 78px;
	width: 78px;
	height: 78px;
	border-radius: 10px;
	overflow: hidden;
	display: block;
	position: relative;
}

.news-thumb {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.news-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0; /* evita que un título largo empuje el ancho del flex item */
}

.news-body .cat-label {
	font-size: 10px;
	font-weight: 700;
	color: var(--red);
	text-transform: uppercase;
	letter-spacing: .03em;
	margin-bottom: 3px;
}

.news-body h4 {
	font-size: 13.5px;
	line-height: 1.32;
	font-weight: 700;
	color: var(--black);
}

.news-body .date {
	font-size: 11px;
	color: var(--grey-400);
	margin-top: 6px;
}

.load-more {
	display: block;
	text-align: center;
	margin: 14px 0 4px 0;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--black);
	padding: 11px;
	border: 1.4px solid var(--grey-200);
	border-radius: 10px;
}

/* -------------------------------------------------------------
   LO MÁS VISTO (ranking numerado)
   ------------------------------------------------------------- */

.ranked {
	padding: 2px 0 4px 0;
}

.ranked-item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 0;
	border-bottom: 1px solid var(--grey-100);
}

.ranked-num {
	font-size: 23px;
	font-weight: 800;
	font-style: italic;
	color: var(--grey-200);
	width: 28px;
	flex-shrink: 0;
}

.ranked-item.top .ranked-num {
	color: var(--red);
}

.ranked-body h4 {
	font-size: 13px;
	line-height: 1.35;
	font-weight: 700;
}

.ranked-body .sub {
	font-size: 10.5px;
	color: var(--grey-400);
	margin-top: 4px;
}

/* -------------------------------------------------------------
   TAGS (pills)
   ------------------------------------------------------------- */

.tags-wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 2px 0 6px 0;
}

.tag-pill {
	font-size: 11.5px;
	font-weight: 600;
	color: var(--grey-600);
	background: var(--grey-100);
	padding: 7px 13px;
	border-radius: 20px;
}

/* -------------------------------------------------------------
   ARTÍCULO — categoría, byline, cita, ficha técnica
   ------------------------------------------------------------- */

.cat-pill-solo {
	display: inline-block;
	background: var(--red);
	color: #fff;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .02em;
	padding: 4px 10px;
	border-radius: 20px;
	margin-bottom: 10px;
}

.byline {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 16px 0 14px 0;
}

.avatar {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--black);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 700;
	flex-shrink: 0;
}

.byline .who {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--black);
}

.byline .when {
	font-size: 11px;
	color: var(--grey-400);
	margin-top: 1px;
}

.byline .share-ico {
	margin-left: auto;
	display: flex;
	gap: 8px;
}

.byline .share-ico svg {
	width: 18px;
	height: 18px;
}

.byline .share-ico [aria-pressed="true"] {
	color: var(--red);
}

.byline .share-ico [data-copied="true"]::after {
	content: "✓";
	margin-left: 4px;
	color: var(--red);
	font-weight: 700;
}

.spec-box {
	margin: 6px 14px 20px 14px;
	border: 1px solid var(--grey-200);
	border-radius: 12px;
	overflow: hidden;
}

@media (min-width: 1024px) {
	.spec-box {
		margin: 6px 0 20px 0;
		max-width: 680px;
	}
}

.spec-box h3 {
	background: var(--grey-100);
	font-size: 12.5px;
	font-weight: 800;
	padding: 10px 14px;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: var(--black);
}

.spec-row {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 14px;
	font-size: 12.8px;
	border-top: 1px solid var(--grey-100);
}

.spec-row .k {
	color: var(--grey-600);
	font-weight: 600;
}

.spec-row .v {
	color: var(--black);
	font-weight: 700;
	text-align: right;
}

.tags-wrap {
	padding: 4px 14px 4px 14px;
}

/* Los tags dentro de .article-body (párrafo/lista) no llevan el padding
   lateral extra, ya que article-body ya trae su propio padding. */
.article-body .tags-wrap {
	padding: 4px 0;
}

/* -------------------------------------------------------------
   BOTÓN CTA "Suscríbete" (visible solo en desktop, ver layout.css)
   ------------------------------------------------------------- */

/* Estilos base ya definidos en layout.css junto al header */

/* -------------------------------------------------------------
   CAJA DE AUTOR (template-parts/author-box.php)
   ------------------------------------------------------------- */

.author-box {
	display: flex;
	gap: 14px;
	margin: 22px 14px 4px 14px;
	padding: 18px;
	background: var(--grey-100);
	border-radius: 14px;
}

.author-box-avatar img {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	display: block;
}

.author-box-body {
	flex: 1;
	min-width: 0;
}

.author-box-label {
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--grey-400);
	margin-bottom: 2px;
}

.author-box-name {
	font-size: 15px;
	font-weight: 800;
	color: var(--black);
}

.author-box-bio {
	font-size: 12.8px;
	line-height: 1.55;
	color: var(--grey-600);
	margin-top: 6px;
}

.author-box-social {
	display: flex;
	gap: 10px;
	margin-top: 12px;
}

.author-box-social a {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid var(--grey-200);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--grey-600);
}

.author-box-social a:hover {
	color: var(--red);
	border-color: var(--red);
}

.author-box-social svg {
	width: 15px;
	height: 15px;
}

@media (min-width: 1024px) {
	.author-box {
		margin: 26px 0 4px 0;
		max-width: 680px;
		padding: 22px;
	}

	.author-box-avatar img {
		width: 76px;
		height: 76px;
	}

	.author-box-name {
		font-size: 16px;
	}

	.author-box-bio {
		font-size: 13.5px;
	}
}

/* -------------------------------------------------------------
   ANUNCIOS (Google AdSense) — placeholders y contenedores reales
   ------------------------------------------------------------- */

.ad-slot {
	margin: 18px 14px;
	border: 1.5px dashed #cfcfcf;
	background: #fafafa;
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 14px;
	min-height: 100px;
}

.ad-slot .eyebrow {
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: #9a9a9a;
	margin-bottom: 5px;
}

.ad-slot .unit-name {
	font-size: 12px;
	font-weight: 700;
	color: #6b6b6b;
}

.ad-slot .dims {
	font-size: 10.5px;
	color: #9a9a9a;
	margin-top: 3px;
}

.ad-slot--leaderboard {
	min-height: 100px;
}

.ad-slot--top {
	min-height: 64px;
	margin-top: 0;
}

.ad-slot--square {
	max-width: 300px;
	margin-left: auto;
	margin-right: auto;
	min-height: 250px;
}

.ad-slot--skyscraper {
	max-width: 300px;
	margin-left: auto;
	margin-right: auto;
	min-height: 600px;
	display: none;
}

.ad-slot--infeed {
	margin: 12px 0;
	min-height: 78px;
}

.ad-slot--inarticle {
	min-height: 250px;
	max-width: 336px;
	margin-left: auto;
	margin-right: auto;
}

/* Anuncio nativo in-feed (misma forma que .news-item, ver cclatam_ad_infeed()) */
.news-item.ad-infeed {
	align-items: center;
}

.news-item.ad-infeed .news-thumb-link {
	background: #eeeeee;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 800;
	color: #b5b5b5;
	letter-spacing: .04em;
}

.news-item.ad-infeed .cat-label {
	color: #9a9a9a;
}

/* Contenedores del código REAL de AdSense (una vez configurado en el
   Customizer) — mismo espaciado que los placeholders para que el salto
   de "placeholder" a "anuncio real" no mueva el layout. */
.ad-slot-live {
	margin: 18px 14px;
	text-align: center;
	overflow: hidden;
}

.ad-slot-live--home_sidebar_square,
.ad-slot-live--article_sidebar_square,
.ad-slot-live--home_sidebar_sky,
.ad-slot-live--article_sidebar_sky {
	max-width: 300px;
	margin-left: auto;
	margin-right: auto;
}

.ad-infeed-live {
	margin: 12px 14px;
}

@media (min-width: 1024px) {
	.ad-slot {
		margin: 24px 0;
	}

	.ad-slot-live {
		margin: 24px 0;
	}

	.ad-slot--leaderboard {
		min-height: 130px;
	}

	.ad-slot--top {
		min-height: 90px;
		margin-top: 0;
	}

	.ad-slot--skyscraper {
		display: flex;
	}

	.layout-grid .ad-slot--square,
	.layout-grid .ad-slot--skyscraper,
	.article-side .ad-slot--square,
	.article-side .ad-slot--skyscraper {
		margin-left: 0;
		margin-right: 0;
	}

	.ad-slot--inarticle {
		max-width: 100%;
	}
}

/* -------------------------------------------------------------
   MODAL DE BÚSQUEDA (off-canvas fullscreen)
   ------------------------------------------------------------- */

.search-modal {
	position: fixed;
	inset: 0;
	z-index: 200;
	background: rgba(17, 17, 17, .5);
	display: flex;
	align-items: flex-start;
	justify-content: center;
}

.search-modal[hidden] {
	display: none;
}

.search-modal-inner {
	background: #fff;
	width: 100%;
	max-width: 640px;
	margin-top: 0;
	padding: 20px 14px;
	position: relative;
	border-radius: 0 0 var(--radius) var(--radius);
}

@media (min-width: 1024px) {
	.search-modal {
		align-items: flex-start;
		padding-top: 90px;
	}

	.search-modal-inner {
		border-radius: var(--radius);
		padding: 28px;
	}
}

.search-modal .js-close-search {
	position: absolute;
	top: 14px;
	right: 14px;
}

.search-form {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 30px;
	border-bottom: 2px solid var(--black);
	padding-bottom: 8px;
}

.search-field {
	flex: 1;
	border: none;
	outline: none;
	font-size: 16px;
	color: var(--black);
}

.search-field::placeholder {
	color: var(--grey-400);
}

.search-submit {
	display: flex;
	align-items: center;
	justify-content: center;
}

.search-submit svg {
	width: 20px;
	height: 20px;
}

/* -------------------------------------------------------------
   MENÚ MÓVIL (off-canvas)
   ------------------------------------------------------------- */

.mobile-menu {
	position: fixed;
	inset: 0;
	z-index: 200;
	background: rgba(17, 17, 17, .5);
	display: flex;
	justify-content: flex-end;
}

.mobile-menu[hidden] {
	display: none;
}

.mobile-menu-inner {
	background: #fff;
	width: 80%;
	max-width: 320px;
	height: 100%;
	padding: 20px 18px;
	position: relative;
	overflow-y: auto;
}

.mobile-menu .js-close-menu {
	margin-bottom: 20px;
}

.mobile-menu nav {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.mobile-menu nav a {
	font-size: 15px;
	font-weight: 700;
	padding: 12px 4px;
	border-bottom: 1px solid var(--grey-100);
	color: var(--black);
}

/* -------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------- */

.site-footer {
	margin-top: 26px;
	padding: 22px 14px 30px 14px;
	background: var(--grey-900);
	color: rgba(255, 255, 255, .6);
	text-align: center;
	font-size: 10.5px;
	line-height: 1.6;
}

.footer-logo {
	display: flex;
	justify-content: center;
	margin-bottom: 12px;
}

.footer-logo img,
.footer-logo .custom-logo {
	height: 20px;
	width: auto;
	filter: brightness(0) invert(1); /* fuerza blanco, sin necesitar un segundo archivo de logo */
}

.footer-logo-text {
	font-weight: 800;
	font-size: 15px;
	color: #fff;
}

.footer-tagline {
	margin-bottom: 4px;
}

.footer-nav {
	margin-top: 14px;
	display: flex;
	justify-content: center;
	gap: 16px;
	flex-wrap: wrap;
}

.footer-nav a {
	color: rgba(255, 255, 255, .75);
	font-size: 11px;
	font-weight: 600;
}

/* -------------------------------------------------------------
   COMENTARIOS (wp_list_comments / comment_form nativos de WP)
   ------------------------------------------------------------- */

.article-comments {
	padding: 20px 14px 0 14px;
	max-width: 680px;
}

@media (min-width: 1024px) {
	.article-comments {
		padding: 20px 40px 0 40px;
		margin: 0 auto;
	}
}

.article-comments .comment-list {
	margin: 16px 0;
}

.article-comments .comment-list li {
	padding: 12px 0;
	border-bottom: 1px solid var(--grey-100);
	font-size: 13.5px;
}

.article-comments .comment-form input[type="text"],
.article-comments .comment-form input[type="email"],
.article-comments .comment-form input[type="url"],
.article-comments .comment-form textarea {
	width: 100%;
	border: 1.4px solid var(--grey-200);
	border-radius: 8px;
	padding: 10px 12px;
	margin-bottom: 10px;
	font-size: 14px;
}

.article-comments .comment-form textarea {
	min-height: 110px;
	resize: vertical;
}

.article-comments .form-submit input {
	background: var(--black);
	color: #fff;
	font-weight: 700;
	padding: 10px 20px;
	border-radius: 8px;
}