/**
 * Featured News Section ("Tin tức nổi bật", trang chủ). Toàn bộ giá trị --news-* là
 * CSS custom property do tmnhanphat_render_news_css_vars() sinh ra, gắn bằng
 * wp_add_inline_style() trong inc/enqueue.php (PROJECT_RULES.md mục 22) — file này
 * KHÔNG hardcode giá trị người dùng đổi được trong Customizer.
 *
 * Slider dùng lại base .tmnp-slider (viewport/track/slide/dots/arrows/is-enhanced)
 * định nghĩa trong services.css — enqueue khai báo dependency 'tmnhanphat-services'.
 * File này chỉ override theo scope .news-home: 3/2/1 card, màu/kích thước dots +
 * arrows riêng. Header TÁI SỬ DỤNG .review-home__heading (gạch đôi đỏ/xanh) khi
 * "Reuse Heading Style" bật — chỉ override màu span + căn lề, không dựng lại divider.
 */

.news-home {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	/* decoration góc phải không tạo scroll ngang */
	margin-block: var(--news-margin, 0);
	padding-block: var(--news-padding, 50px);
	background-color: var(--news-bg, #ffffff);
}

/* Background Image trang trí — layer dưới cùng, opacity riêng, không ảnh hưởng layout. */
.news-home::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: var(--news-bg-image, none);
	background-position: var(--news-bg-position, center);
	background-size: var(--news-bg-size, cover);
	background-repeat: no-repeat;
	opacity: var(--news-bg-opacity, 1);
	pointer-events: none;
}

.news-home__container {
	position: relative;
	z-index: 2;
	max-width: var(--news-container-width, var(--container-max-width));
}

/* ==================== HEADER ==================== */
.news-home__header {
	margin-bottom: var(--news-header-margin, 151px);
	text-align: var(--news-header-align, center);
}

.news-home__small {
	display: block;
	margin-bottom: 10px;
	color: var(--news-heading-blue, #046AB5);
	font-size: var(--news-small-size, 12px);
	font-weight: 700;
	letter-spacing: 0.14em;
	/* Figma: ls 1.68/12 = 14%. */
	text-transform: uppercase;
}

.news-home__heading {
	margin: 0 0 20px;
	/* Chuẩn hoá: heading → nội dung 20px (trước 12px tới gạch đã bỏ). */
	/* Chuẩn hoá heading system: size 85·fig, weight 900, lh 1.21, ls -0.02em (= products). */
	font-size: clamp(30px, calc(85 * var(--fig1px)), 85px);
	font-weight: 900;
	line-height: 1.21;
	letter-spacing: -0.02em;
}

.news-home__heading-blue {
	color: var(--news-heading-blue, #046AB5);
}

.news-home__heading-red {
	color: var(--news-heading-red, #E31F2B);
	/* Chủ dự án chốt: "nổi bật" màu đỏ. */
}

/* Gạch đôi ĐÃ BỎ — heading dùng TYPOGRAPHY làm điểm nhấn (chuẩn hoá Design System). */

.news-home__description {
	margin: 0 var(--news-header-margin-x, auto) 0;
	max-width: var(--news-desc-max-width, 820px);
	color: var(--news-desc-color, #464646);
	/* Đồng bộ với hệ description của toàn site (clamp 16→20px fluid). */
	font-size: clamp(16px, calc(20 * var(--fig1px)), var(--news-desc-size, 20px));
	line-height: 1.5;
}

/* ==================== SLIDER (override base .tmnp-slider theo scope) ==================== */
.news-home .tmnp-slider__track {
	gap: var(--news-gap, 15px);
	/* Card có hover translate/shadow — chừa chỗ để overflow:hidden không cắt. */
	padding-block: 6px 16px;
}

/* 3/2/1 card mỗi khung nhìn (trần bề rộng = Card Width Figma 513px). */
.news-home .tmnp-slider__slide {
	flex: 0 0 calc((100% - 2 * var(--news-gap, 15px)) / 3);
	max-width: min(var(--news-card-width, 513px), calc((100% - 2 * var(--news-gap, 15px)) / 3));
}

.news-home .tmnp-slider.is-enhanced .tmnp-slider__track {
	transition: transform var(--news-transition, 600ms) ease;
}

.news-home .tmnp-slider__viewport:focus-visible {
	outline: 2px solid var(--news-dot-active, #046AB5);
	outline-offset: 4px;
}

/* Dots — đè màu/kích thước theo Customizer News. */
.news-home .tmnp-slider__dots {
	gap: 8px;
	/* Figma: đáy card → dots 56px (40 + 16 padding-bottom của track). */
	margin-top: calc(40 * var(--fig1px));
}

.news-home .tmnp-slider__dot {
	width: 8px;
	height: 8px;
	background-color: var(--news-dot-inactive, #D9D9D9);
}

.news-home .tmnp-slider__dot.is-active {
	width: 24px;
	border-radius: 999px;
	background-color: var(--news-dot-active, #0D5EA3);
}

/* Arrows — tròn nền xanh giống design. */
.news-home .tmnp-slider__arrow {
	width: 40px;
	height: 40px;
	border-radius: var(--news-arrow-radius, 100%);
	background-color: var(--news-arrow-bg, #046AB5);
	color: var(--news-arrow-color, #ffffff);
}

.news-home .tmnp-slider__arrow:hover,
.news-home .tmnp-slider__arrow:focus-visible {
	background-color: var(--news-arrow-bg, #046AB5);
	filter: brightness(1.1);
}

/* Figma: arrows nằm NGOÀI hàng card (cách container ~110px) — max() kẹp lại để không
   thò ra ngoài viewport (bị overflow:hidden của section cắt) trên màn hẹp. */
.news-home .tmnp-slider__arrow--prev {
	left: max(calc(-110 * var(--fig1px)), calc((100% - 100vw) / 2 + 8px));
}

.news-home .tmnp-slider__arrow--next {
	right: max(calc(-110 * var(--fig1px)), calc((100% - 100vw) / 2 + 8px));
}

/* ==================== NEWS CARD (Figma 513×561) ==================== */
/* Card: CHỈ 1 lớp border (design) + shadow nhẹ cấu hình được. overflow:hidden để ảnh
   thumb bo góc trên khớp Card Radius, không có khoảng thừa quanh ảnh. */
.news-card {
	display: flex;
	flex-direction: column;
	min-height: var(--news-card-height, auto);
	border: 1px solid var(--news-card-border-color, #E8E6E1);
	/* Figma: viền #E8E6E1. */
	border-radius: var(--news-card-radius, 10px);
	background-color: #ffffff;
	box-shadow: var(--news-card-shadow, none);
	overflow: hidden;
	transition:
		border-color 0.35s ease,
		box-shadow 0.35s ease,
		transform 0.35s ease;
}

/* Ảnh KHỚP SÁT viền card (không margin) — card overflow:hidden tự bo góc trên. */
.news-card__media {
	position: relative;
	overflow: hidden;
}

.news-card__media-link {
	display: block;
}

.news-card__image {
	display: block;
	width: 100%;
	height: min(var(--news-thumb-height, 286px), calc(286 * var(--fig1px)));
	object-fit: var(--news-thumb-fit, cover);
	object-position: center;
	transition: transform 0.4s ease;
}

.news-card__image--placeholder {
	background: linear-gradient(135deg, #e8eef4 0%, #d5dfe9 100%);
}

/* Body chứa toàn bộ text bên dưới thumbnail */
.news-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 16px 22px 20px;
}

/* Meta trên đầu: Ngày đăng (trái) + Thời gian đọc (kế bên) */
.news-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin-bottom: 12px;
	color: #64748B;
	font-size: 13.5px;
}

.news-card__meta-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.news-card__meta-icon {
	color: #94A3B8;
	flex-shrink: 0;
}

.news-card__title {
	margin: 0 0 10px;
	color: #046AB5;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	transition: color 0.25s ease;
}

.news-card__title a {
	color: #046AB5;
	text-decoration: none;
	transition: color 0.25s ease;
}

.news-card__title a:hover,
.news-card__title a:focus-visible {
	color: #E31F2B;
}

.news-card__excerpt {
	margin: 0 0 16px;
	color: #64748B;
	font-size: 14px;
	line-height: 1.55;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

/* Footer card: Tác giả bên trái — Nút Đọc tiếp bên phải */
.news-card__footer {
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid #F1F5F9;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.news-card__author {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #475569;
	font-size: 13.5px;
	font-weight: 500;
}

.news-card__author-icon {
	color: #94A3B8;
	flex-shrink: 0;
}

/* Nút Đọc tiếp kèm icon mũi tên dịch chuyển khi hover */
.news-card__readmore {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #046AB5;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	transition: color 0.25s ease;
}

.news-card__arrow {
	transition: transform 0.25s ease;
}

.news-card__readmore:hover,
.news-card__readmore:focus-visible {
	color: #E31F2B;
}

.news-card__readmore:hover .news-card__arrow,
.news-card__readmore:focus-visible .news-card__arrow {
	transform: translateX(4px);
}

/* Card interaction is scoped to News and only runs on accurate hover devices. */
@media (hover: hover) and (pointer: fine) {

	.news-home .news-card:hover,
	.news-home .news-card:focus-within {
		border-color: rgb(4 106 181 / 0.55);
		box-shadow: 5px 5px 5px rgb(22 138 251 / 0.12);
		transform: translateY(-6px);
	}

	.news-home .news-card:hover .news-card__image,
	.news-home .news-card:focus-within .news-card__image {
		transform: scale(1.05);
	}

	.news-home .news-card:hover .news-card__title,
	.news-home .news-card:focus-within .news-card__title {
		color: #046AB5;
	}

	.news-home .news-card:hover .news-card__readmore,
	.news-home .news-card:focus-within .news-card__readmore {
		transform: translateX(4px);
	}

	.news-home .news-card:hover .news-card__readmore::after,
	.news-home .news-card:focus-within .news-card__readmore::after {
		transform: translateX(3px) scale(1.05);
	}
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 991px) {

	/* Tablet: 2 card/khung nhìn — card tự scale theo container, không giữ width cố định. */
	.news-home .tmnp-slider__slide {
		flex: 0 0 calc((100% - var(--news-gap, 24px)) / 2);
		max-width: calc((100% - var(--news-gap, 24px)) / 2);
	}
}

@media (max-width: 599px) {

	/* Mobile: 1 card full width, ẩn arrow (slider.js vẫn cho swipe + dot). */
	.news-home .tmnp-slider__slide {
		flex: 0 0 100%;
		max-width: 100%;
	}

	.news-home .tmnp-slider__arrow {
		display: none;
	}

	.news-card {
		min-height: 0;
		/* mobile để card cao tự nhiên, tránh khoảng trắng thừa. */
	}
}

/* ==================== REDUCED MOTION ==================== */
@media (prefers-reduced-motion: reduce) {

	.news-home .tmnp-slider.is-enhanced .tmnp-slider__track,
	.news-card,
	.news-card__image,
	.news-card__title,
	.news-card__title a,
	.news-card__readmore,
	.news-card__readmore::after {
		transition: none;
	}

	.news-card:hover,
	.news-card:focus-within {
		transform: none;
	}

	.news-card:hover .news-card__image,
	.news-card:focus-within .news-card__image,
	.news-card:hover .news-card__readmore,
	.news-card:focus-within .news-card__readmore,
	.news-card:hover .news-card__readmore::after,
	.news-card:focus-within .news-card__readmore::after {
		transform: none;
	}
}