/*
 * iw-banner-slider — Global Banner Slider component (Swiper 11).
 * Source: Figma 407:44120 (desktop), 407:44679 (mobile).
 *
 * File structure:
 *   1. Container + breakout
 *   2. Swiper wrapper/slide base + JS-not-ready fallback
 *   3. UX Builder iframe overrides
 *   4. Slide base (img/media)
 *   5. Caption + typography + highlight pill
 *   6. Placeholder
 *   7. Pagination
 *   8. Nav arrows
 *   9. Single-slide hide
 *  10. Responsive overrides (@media — desc theo độ rộng)
 */

/* ─── 1. Container + breakout ─────────────────────────────────────────── */

.iw-banner-slider {
	position: relative;
	/* Break out khỏi .entry-content / page container để chiếm full viewport,
	   match Figma 407:43680 (hero 1920px tràn cạnh trái–phải). Dùng vw thay
	   vì calc() để tránh đo sai khi container có padding ngang. */
	width: 100vw;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	overflow: hidden;
}

/* Modifier để dùng inside container khi cần (vd: section nhỏ). */
.iw-banner-slider.iw-banner-slider--contained {
	width: 100%;
	left: auto;
	right: auto;
	margin-left: 0;
	margin-right: 0;
}

.iw-banner-slider__inner {
	width: 100%;
	aspect-ratio: var(--iw-bs-aspect-d, 1920/560);
	max-height: var(--iw-bs-maxh-d, none);
}

/* ─── 2. Swiper wrapper/slide base + JS-not-ready fallback ────────────── */

.iw-banner-slider .swiper-wrapper,
.iw-banner-slider .swiper-slide {
	height: 100%;
}

/* Fallback khi Swiper JS chưa init (FOUC trên FE trước khi JS chạy).
   Hiện slide đầu full size, ẩn slide còn lại. Swiper init xong → có
   class .swiper-initialized → fallback bị skip, Swiper inline thắng. */
.iw-banner-slider:not(.swiper-initialized) .swiper-wrapper {
	display: block;
}
.iw-banner-slider:not(.swiper-initialized) .swiper-slide {
	width: 100%;
}
.iw-banner-slider:not(.swiper-initialized) .swiper-slide ~ .swiper-slide {
	display: none;
}

/* ─── 3. UX Builder iframe overrides ──────────────────────────────────── */

/* UX Builder iframe — Swiper không init đáng tin, stack toàn bộ slide
   dọc làm preview tĩnh để editor thấy ALL slides để edit từng cái.
   FE thật KHÔNG bị ảnh hưởng (selector scope vào body.ux-builder-iframe).
   KEY: reset height:100% ở slide/wrapper để aspect-ratio mới có hiệu lực. */
body.ux-builder-iframe .iw-banner-slider {
	width: 100%;
	left: auto;
	right: auto;
	margin-left: 0;
	margin-right: 0;
	overflow: visible;
}
body.ux-builder-iframe .iw-banner-slider__inner {
	aspect-ratio: auto;
	height: auto;
}
body.ux-builder-iframe .iw-banner-slider .swiper-wrapper {
	display: block;
	height: auto;
	transform: none !important;
}
body.ux-builder-iframe .iw-banner-slider .swiper-slide {
	display: block !important;
	width: 100% !important;
	height: auto;
	aspect-ratio: var(--iw-bs-aspect-d, 1920/560);
	margin-bottom: 8px;
	transform: none !important;
}
body.ux-builder-iframe .iw-banner-slider .iw-banner-slide {
	height: 100%;
}
body.ux-builder-iframe .iw-banner-slider__pagination,
body.ux-builder-iframe .iw-banner-slider__nav {
	display: none !important;
}

/* ─── 4. Slide base (img/media) ───────────────────────────────────────── */

.iw-banner-slide {
	position: relative;
	width: 100%;
	height: 100%;
	background: #f1f1f1;
}

.iw-banner-slide__link,
.iw-banner-slide__media {
	display: block;
	width: 100%;
	height: 100%;
}

.iw-banner-slide__media {
	margin: 0;
}

.iw-banner-slide__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ─── 5. Caption + typography + highlight pill ────────────────────────── */

/* Caption overlay — full bleed absolute, KHÔNG có padding ngang để
   inner wrapper tự áp container constraints (match header + các section
   khác trong UX Builder). Styles match Figma 1642:47679. */
.iw-banner-slide__caption {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	pointer-events: none;
}

.iw-banner-slide__caption-inner {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 24px;
	color: #252525;
	width: 100%;
	max-width: var(--iw-container-max);
	margin: 0 auto;
	padding: 24px var(--iw-container-pad-x);
}

.iw-banner-slide__caption-inner > * {
	pointer-events: auto;
	margin: 0;
	max-width: 55%;
}

/* Tiêu đề: scale theo viewport width. 24px (mobile) → 64px (desktop ≥1420).
   4.5vw cross point: 533px (=24px) ↔ 1422px (=64px). */
.iw-banner-slide__caption :is(h1, h2, h3, h4) {
	font-weight: 700;
	font-size: clamp(24px, 4.5vw, 64px);
	line-height: 1.25;
	text-transform: capitalize;
	color: inherit;
}

/* Body: scale từ 14px (mobile) → 18px (desktop). */
.iw-banner-slide__caption p {
	font-size: clamp(14px, 1.4vw, 18px);
	line-height: 1.5;
	color: inherit;
}

/* Đoạn trống thật sự (no child) — bỏ ăn gap. `<p>&nbsp;</p>` vẫn hiện
   theo ý editor (là spacer chủ động). Không dùng `:has(> br:only-child)`
   vì wpautop/TinyMCE sinh `<p>text<br></p>` ở dòng cuối → match nhầm. */
.iw-banner-slide__caption p:empty {
	display: none;
}

/* Highlight pill cam: dùng <mark> hoặc class `.iw-mark` wrap quanh chữ
   trong tiêu đề (vd "mạng FPT" trong design). Hỗ trợ wrap nhiều dòng
   nhờ box-decoration-break: clone. */
.iw-banner-slide__caption mark,
.iw-banner-slide__caption .iw-mark {
	background: linear-gradient(180deg, #ff8f4b 0%, #ff5c00 100%);
	color: #fff;
	padding: 0 .18em;
	border-radius: 8px;
	-webkit-box-decoration-break: clone;
	        box-decoration-break: clone;
}

/* CTA pill = component `.iw-btn` (xem assets/css/global/btn.css).
   Editor insert qua shortcode `[iw_btn variant="primary" url="..."]`. */

/* ─── 6. Placeholder ──────────────────────────────────────────────────── */

.iw-banner-slide--placeholder {
	background:
		linear-gradient(135deg, #f5f5f5 0%, #ececec 50%, #f5f5f5 100%);
}

/* ─── 7. Pagination ───────────────────────────────────────────────────── */

.iw-banner-slider__pagination {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 16px;
	z-index: 2;
	display: flex;
	gap: 8px;
	justify-content: center;
}

.iw-banner-slider__pagination .swiper-pagination-bullet {
	width: 8px;
	height: 8px;
	background: #fff;
	opacity: 0.6;
}

.iw-banner-slider__pagination .swiper-pagination-bullet-active {
	width: 24px;
	border-radius: 999px;
	opacity: 1;
}

/* ─── 8. Nav arrows ───────────────────────────────────────────────────── */

.iw-banner-slider__nav {
	width: 44px;
	height: 44px;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.35);
	color: #ffffff;
	transition: background-color 0.2s ease;
	margin: 0;
}

.iw-banner-slider__nav:hover,
.iw-banner-slider__nav:focus-visible {
	background: rgba(0, 0, 0, 0.55);
}

.iw-banner-slider__nav::after {
	font-size: 16px;
	font-weight: 700;
}

/* ─── 9. Single-slide hide controls ───────────────────────────────────── */

.iw-banner-slider--single .swiper-pagination,
.iw-banner-slider--single .swiper-button-prev,
.iw-banner-slider--single .swiper-button-next {
	display: none;
}

/* ─── 10. Responsive overrides ────────────────────────────────────────── */
/* Cascade order: rộng → hẹp. Cùng selector ở breakpoint sau sẽ thắng. */

/* Tablet only 768-991: aspect_tablet + max-height. */
@media (min-width: 768px) and (max-width: 991px) {
	.iw-banner-slider__inner {
		aspect-ratio: var(--iw-bs-aspect-t, var(--iw-bs-aspect-d, 1024/600));
		max-height: var(--iw-bs-maxh-t, none);
	}
}

/* Tablet down ≤991: caption layout + nav arrows nhỏ (cảm quan touch). */
@media (max-width: 991px) {
	.iw-banner-slide__caption-inner {
		gap: 20px;
	}
	.iw-banner-slide__caption-inner > * {
		max-width: 70%;
	}
	.iw-banner-slider__nav {
		width: 32px;
		height: 32px;
	}
	.iw-banner-slider__nav::after {
		font-size: 13px;
	}
}

/* Mobile <768: aspect_mobile + max-height (align `<source media="767px">`). */
@media (max-width: 767px) {
	.iw-banner-slider__inner {
		aspect-ratio: var(--iw-bs-aspect-m, 390/439);
		max-height: var(--iw-bs-maxh-m, none);
	}
}

/* Small mobile ≤540 — Figma 1642:48050: center align, padding 16, gap 16. */
@media (max-width: 540px) {
	.iw-banner-slide__caption-inner {
		gap: 16px;
		align-items: center;
		padding: 16px;
		text-align: center;
		justify-content: flex-start;
	}
	/* mobile_align="left_center": bỏ căn giữa, giữ canh trái + dồn giữa trục dọc
	   như desktop. Đặt sau base nên thắng (cùng specificity). */
	.iw-banner-slide__caption-inner--m-left {
		align-items: flex-start;
		text-align: left;
		justify-content: center;
	}
	.iw-banner-slide__caption-inner > * {
		max-width: 100%;
	}
	/* Mark pill nhỏ lại cho mobile. */
	.iw-banner-slide__caption mark,
	.iw-banner-slide__caption .iw-mark {
		border-radius: 6px;
	}
}