<?php
/**
 * WebEngine CMS
 * https://webenginecms.org/
 * 
 * @version 1.2.6
 * @author Lautaro Angelico <http://lautaroangelico.com/>
 * @copyright (c) 2013-2025 Lautaro Angelico, All Rights Reserved
 * 
 * Licensed under the MIT license
 * http://opensource.org/licenses/MIT
 */
?>

<style>
	/* =========================
	   HOME NEWS (Modern Light)
	   Fix: Fecha SIEMPRE alineada
	   ========================= */
	.home-news-wrap{
		--bg: #ffffff;
		--card: #ffffff;
		--text: #0f172a;
		--muted: #64748b;
		--line: rgba(2, 132, 199, .18);
		--shadow: 0 10px 30px rgba(2, 8, 23, .08);
		--shadow2: 0 14px 40px rgba(2, 8, 23, .12);
		--radius: 16px;
		--brand1:#06b6d4; /* cyan */
		--brand2:#3b82f6; /* blue */
		--badgeBg: rgba(59,130,246,.10);
		--badgeText:#2563eb;
		--hoverBg: rgba(59,130,246,.06);
		--glow: 0 0 0 4px rgba(59,130,246,.10);
		--dateW: 110px; /* <<< ancho fijo para la fecha (no se mueve) */
	}

	.home-news-block{
		background: var(--bg);
		border: 1px solid var(--line);
		border-radius: var(--radius);
		box-shadow: var(--shadow);
		overflow: hidden;
		position: relative;
	}

	.home-news-block:before{
		content:"";
		position:absolute;
		top:0;left:0;right:0;
		height:3px;
		background: linear-gradient(90deg, var(--brand1), var(--brand2));
		opacity: .95;
	}

	.home-news-block-header{
		padding: 18px 18px 12px 18px;
		margin: 0;
		background:
			radial-gradient(900px 220px at 20% 0%, rgba(6,182,212,.16), transparent 60%),
			radial-gradient(900px 220px at 85% 10%, rgba(59,130,246,.14), transparent 60%),
			linear-gradient(180deg, rgba(2,132,199,.06), rgba(255,255,255,0));
		border-bottom: 1px solid var(--line);
	}

	.home-news-block-header h2{
		margin: 0;
		font-weight: 800;
		letter-spacing: .2px;
		color: var(--text);
		font-size: 18px;
		display: inline-flex;
		align-items: center;
		gap: 10px;
	}

	.home-news-block-header h2:before{
		content:"📰";
		display:inline-flex;
		align-items:center;
		justify-content:center;
		width: 30px;
		height: 30px;
		border-radius: 999px;
		background: rgba(6,182,212,.10);
		border: 1px solid rgba(6,182,212,.22);
	}

	.home-news-block-header a{
		display:inline-flex;
		align-items:center;
		gap:8px;
		padding: 8px 12px;
		border-radius: 999px;
		border: 1px solid rgba(59,130,246,.22);
		background: rgba(59,130,246,.06);
		color: #1d4ed8;
		font-weight: 700;
		text-decoration: none;
		transition: .18s ease;
	}

	.home-news-block-header a:after{
		content:"→";
		font-weight: 900;
		transform: translateX(0);
		transition: transform .18s ease;
	}

	.home-news-block-header a:hover{
		background: rgba(59,130,246,.10);
		box-shadow: var(--glow);
	}

	.home-news-block-header a:hover:after{
		transform: translateX(3px);
	}

	.home-news-block-body{
		padding: 10px 12px 14px 12px;
		margin: 0;
	}

	/* ====== FILA (Grid fijo) ====== */
	.home-news-block-article{
		margin: 10px 6px;
		padding: 12px 14px;
		border-radius: 14px;
		border: 1px solid rgba(2, 132, 199, .14);
		background: var(--card);
		transition: .18s ease;
		position: relative;
		overflow: hidden;

		/* Esto es lo importante: 3 columnas fijas */
		display: grid;
		grid-template-columns: auto 1fr var(--dateW);
		align-items: center;
		column-gap: 12px;
	}

	.home-news-block-article:before{
		content:"";
		position:absolute;
		top:-60px; left:-120px;
		width: 240px; height: 240px;
		background: radial-gradient(circle, rgba(59,130,246,.14), transparent 60%);
		transform: translateX(-60px);
		opacity: .0;
		transition: .25s ease;
		pointer-events: none;
	}

	.home-news-block-article:hover{
		transform: translateY(-2px);
		box-shadow: var(--shadow2);
		border-color: rgba(59,130,246,.26);
		background: linear-gradient(180deg, var(--hoverBg), #fff);
	}

	.home-news-block-article:hover:before{
		opacity: 1;
		transform: translateX(0);
	}

	/* Badge */
	.home-news-block-article-type{
		display:inline-flex;
		align-items:center;
		justify-content:center;
		padding: 6px 10px;
		border-radius: 999px;
		font-weight: 800;
		font-size: 12px;
		color: var(--badgeText);
		background: var(--badgeBg);
		border: 1px solid rgba(59,130,246,.22);
		white-space: nowrap;
	}

	/* Title ellipsis (para que NO empuje la fecha) */
	.home-news-block-article-title-container{
		min-width: 0; /* clave para ellipsis dentro de grid */
	}

	.home-news-block-article-title{
		display: block;
	}

	.home-news-block-article-title a{
		color: var(--text);
		font-weight: 800;
		text-decoration: none;
		line-height: 1.2;
		display: block;

		/* Ellipsis */
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.home-news-block-article-title a:hover{
		color: #1d4ed8;
		text-decoration: none;
	}

	/* Date fixed box */
	.home-news-block-article-date{
		display: inline-flex;
		align-items: center;
		justify-content: flex-end; /* siempre a la derecha */
		width: 100%;
		color: var(--muted);
		font-weight: 800;
		font-size: 12px;
		letter-spacing: .2px;
		white-space: nowrap;
		font-variant-numeric: tabular-nums; /* números alineados bonito */
		padding-left: 8px;
		border-left: 1px solid rgba(2, 132, 199, .14);
	}

	/* Responsive */
	@media (max-width: 767px){
		.home-news-block-header .col-xs-8,
		.home-news-block-header .col-xs-4{
			width: 100%;
			text-align: left;
		}
		.home-news-block-header .col-xs-4{
			margin-top: 10px;
		}

		.home-news-block-article{
			grid-template-columns: auto 1fr; /* fecha baja a otra línea */
			row-gap: 10px;
		}
		.home-news-block-article-date{
			justify-content: flex-start;
			border-left: none;
			padding-left: 0;
			border-top: 1px solid rgba(2, 132, 199, .14);
			padding-top: 10px;
			grid-column: 1 / -1; /* ocupa toda la fila */
		}
	}
</style>

<div class="row home-news-wrap">
	<div class="col-xs-12 home-news-block">
		<div class="row home-news-block-header">
			<div class="col-xs-8">
				<h2><?php echo lang('news_txt_4'); ?></h2>
			</div>
			<div class="col-xs-4 text-right">
				<a href="<?php echo __BASE_URL__ . 'news/'; ?>"><?php echo lang('news_txt_5'); ?></a>
			</div>
		</div>

		<div class="row home-news-block-body">
			<div class="col-xs-12">
				<?php
					$News = new News();
					$newsList = loadCache('news.cache');
					if(is_array($newsList)) {
						foreach($newsList as $key => $newsArticle) {

							if($key >= 7) break;

							$News->setId($newsArticle['news_id']);
							$news_title = base64_decode($newsArticle['news_title']);

							if(config('language_switch_active',true)) {
								if(isset($_SESSION['language_display']) && isset($newsArticle['translations']) && is_array($newsArticle['translations']) && array_key_exists($_SESSION['language_display'], $newsArticle['translations'])) {
									$news_title = base64_decode($newsArticle['translations'][$_SESSION['language_display']]);
								}
							}

							$news_url = __BASE_URL__.'news/'.$newsArticle['news_id'].'/';

							echo '<div class="home-news-block-article">';
								echo '<div class="home-news-block-article-type">'.lang('news_txt_6').'</div>';
								echo '<div class="home-news-block-article-title-container">';
									echo '<span class="home-news-block-article-title"><a href="'.$news_url.'" title="'.htmlspecialchars($news_title, ENT_QUOTES, 'UTF-8').'">'.$news_title.'</a></span>';
								echo '</div>';
								echo '<div class="home-news-block-article-date">'.date("Y/m/d", $newsArticle['news_date']).'</div>';
							echo '</div>';

						}
					}
				?>
			</div>
		</div>
	</div>
</div>
