/*
 * Hero Slider — full-width banner with text over the image (homepage proposal, 2026-10).
 * Loaded on the front end and in the editor.
 */

.mnn-hero-slider {
	position: relative;
	background-color: #20140f;
	overflow: hidden;
}

.mnn-hero-slider__track {
	display: flex;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
}

.mnn-hero-slider__track::-webkit-scrollbar {
	display: none;
}

.mnn-hero-slider__track:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: -2px;
}

/* ---------- Slide ---------- */

.mnn-hero-slide {
	position: relative;
	flex: 0 0 100%;
	min-width: 0;
	margin: 0;
	/* A fixed height keeps the page from shifting while images load. */
	height: clamp(440px, 38vw, 600px);
	scroll-snap-align: start;
	scroll-snap-stop: always;
	background-color: #20140f;
	overflow: hidden;
}

.mnn-hero-slide__media,
.mnn-hero-slide__media img {
	display: block;
	width: 100%;
	height: 100%;
}

.mnn-hero-slide__media img {
	object-fit: cover;
	object-position: center 60%;
}

/* Whole-slide link sits under the text so buttons inside the slide stay clickable. */
.mnn-hero-slide__link {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.mnn-hero-slide__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: -4px;
}

/* Text needs contrast; a plain image slide gets no overlay. */
.mnn-hero-slide.has-content::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(58, 7, 16, 0.94) 0%, rgba(110, 15, 36, 0.82) 30%, rgba(110, 15, 36, 0.35) 52%, rgba(0, 0, 0, 0) 68%);
	pointer-events: none;
}

/*
 * The text column starts where the page content starts (1184px column). On screens too narrow for
 * that, it keeps clear of the arrows (20px + 46px wide) instead of sliding under them.
 */
.mnn-hero-slide__content {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	padding: 0 max(84px, calc((100% - 1184px) / 2)) 56px;
	box-sizing: border-box;
	color: var(--wp--preset--color--white);
	pointer-events: none;
}

.mnn-hero-slide__content > * {
	max-width: 560px;
	margin: 0;
	pointer-events: auto;
}

/* Small label: the paragraph placed before the title. */
.mnn-hero-slide__content > .mnn-hero-slide__tag,
.mnn-hero-slide__content > p:has(+ .wp-block-heading) {
	display: inline-flex;
	align-items: center;
	padding: 6px 12px;
	border: 1px solid rgba(212, 175, 90, 0.45);
	border-radius: 99px;
	background-color: rgba(212, 175, 90, 0.16);
	color: var(--wp--preset--color--gold-light);
	font-size: 12px;
	font-weight: 600;
	line-height: 18px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.mnn-hero-slide__content > .wp-block-heading {
	margin-top: 16px;
	color: inherit;
	font-size: clamp(28px, 3.4vw, 48px);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -0.01em;
}

/* Italic in the editor = the part of the title shown in gold. */
.mnn-hero-slide__content > .wp-block-heading em {
	color: var(--wp--preset--color--gold);
	font-style: normal;
}

.mnn-hero-slide__content > .wp-block-heading + p {
	max-width: 460px;
	margin-top: 14px;
	color: rgba(255, 255, 255, 0.85);
	font-size: clamp(15px, 1.2vw, 17px);
	line-height: 1.55;
}

.mnn-hero-slide__content > .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 26px;
}

.mnn-hero-slide__content .wp-block-button {
	margin: 0;
}

.mnn-hero-slide__content .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 13px 22px;
	border: 1px solid transparent;
	border-radius: 10px;
	background-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--maroon-deep);
	font-size: 15px;
	font-weight: 600;
	line-height: 22px;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.mnn-hero-slide__content .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--gold-light);
	color: var(--wp--preset--color--maroon-deep);
}

/* Second button (or any button with the "outline" style): glass. */
.mnn-hero-slide__content .wp-block-button + .wp-block-button .wp-block-button__link,
.mnn-hero-slide__content .wp-block-button.is-style-outline .wp-block-button__link {
	border-color: rgba(255, 255, 255, 0.35);
	background-color: rgba(255, 255, 255, 0.1);
	color: var(--wp--preset--color--white);
}

.mnn-hero-slide__content .wp-block-button + .wp-block-button .wp-block-button__link:hover,
.mnn-hero-slide__content .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: rgba(255, 255, 255, 0.18);
	color: var(--wp--preset--color--white);
}

.mnn-hero-slide__content .wp-block-button__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--white);
	outline-offset: 2px;
}

/* ---------- Arrows ---------- */

.mnn-hero-slider__nav {
	position: absolute;
	top: 50%;
	z-index: 3;
	width: 46px;
	height: 46px;
	margin: -23px 0 0;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.14);
	color: var(--wp--preset--color--white);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.mnn-hero-slider__nav::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 9px;
	height: 9px;
	border: solid currentColor;
	border-width: 0 0 2px 2px;
	transform: translate(-30%, -50%) rotate(45deg);
}

.mnn-hero-slider__nav--prev {
	left: 20px;
}

.mnn-hero-slider__nav--next {
	right: 20px;
}

.mnn-hero-slider__nav--next::before {
	transform: translate(-70%, -50%) rotate(-135deg);
}

.mnn-hero-slider__nav:hover {
	background-color: rgba(255, 255, 255, 0.3);
}

.mnn-hero-slider__nav:focus-visible,
.mnn-hero-slider__dot:focus-visible,
.mnn-hero-slider__pause:focus-visible {
	outline: 2px solid var(--wp--preset--color--white);
	outline-offset: 2px;
}

/* ---------- Dots (kept above the policy cards that overlap the banner's bottom edge) ---------- */

.mnn-hero-slider__dots {
	position: absolute;
	left: 50%;
	bottom: 64px;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 8px;
	transform: translateX(-50%);
}

.mnn-hero-slider__dot {
	position: relative;
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 99px;
	background-color: rgba(255, 255, 255, 0.55);
	cursor: pointer;
	transition: width 0.3s ease, background-color 0.3s ease;
}

/* Larger hit area than the 8px dot. */
.mnn-hero-slider__dot::after {
	content: "";
	position: absolute;
	inset: -8px -4px;
}

.mnn-hero-slider__dot.is-active {
	width: 28px;
	background-color: var(--wp--preset--color--gold);
}

.mnn-hero-slider__pause {
	width: 12px;
	height: 12px;
	margin-right: 4px;
	padding: 0;
	border: 0;
	border-left: 3px solid rgba(255, 255, 255, 0.9);
	border-right: 3px solid rgba(255, 255, 255, 0.9);
	background: transparent;
	box-sizing: border-box;
	cursor: pointer;
}

.mnn-hero-slider__pause.is-paused {
	width: 0;
	height: 0;
	border: 6px solid transparent;
	border-left: 10px solid rgba(255, 255, 255, 0.9);
	border-right: 0;
}

/* ---------- Responsive ---------- */

@media (max-width: 768px) {
	.mnn-hero-slide {
		height: 560px;
	}

	.mnn-hero-slide.has-content::after {
		background: linear-gradient(180deg, rgba(58, 7, 16, 0.1) 0%, rgba(58, 7, 16, 0.55) 35%, rgba(58, 7, 16, 0.95) 72%);
	}

	.mnn-hero-slide__content {
		justify-content: flex-end;
		padding: 0 clamp(16px, 3.75vw, 48px) 56px;
	}

	/* Swipe replaces the arrows on phones. */
	.mnn-hero-slider__nav {
		display: none;
	}

	/* The policy cards no longer overlap the banner here. */
	.mnn-hero-slider__dots {
		bottom: 24px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mnn-hero-slider__track {
		scroll-behavior: auto;
	}

	.mnn-hero-slider__dot,
	.mnn-hero-slider__nav,
	.mnn-hero-slide__content .wp-block-button__link {
		transition: none;
	}
}

/* ---------- Editor: slides stacked so each one can be selected and edited ---------- */

.mnn-hero-slider.is-editor {
	overflow: visible;
	background: transparent;
}

.mnn-hero-slider__editor-hint {
	margin: 0 0 12px;
	color: var(--wp--preset--color--muted);
	font-size: 12px;
	line-height: 16px;
}

.mnn-hero-slider__editor-slides {
	display: grid;
	gap: 16px;
	counter-reset: mnn-slide;
}

.mnn-hero-slider.is-editor .mnn-hero-slide {
	border-radius: var(--wp--custom--radius--lg);
	counter-increment: mnn-slide;
}

.mnn-hero-slider.is-editor .mnn-hero-slide::before {
	content: "Slide " counter(mnn-slide);
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 4;
	padding: 4px 10px;
	border-radius: var(--wp--custom--radius--md);
	background-color: rgba(45, 49, 53, 0.7);
	color: var(--wp--preset--color--white);
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	pointer-events: none;
}

.mnn-hero-slider.is-editor .mnn-hero-slide.is-disabled {
	opacity: 0.45;
}

.mnn-hero-slider.is-editor .mnn-hero-slide.is-disabled::before {
	content: "Slide " counter(mnn-slide) " — đang ẩn";
}

.mnn-hero-slider.is-editor .mnn-hero-slide.is-empty {
	height: auto;
	background: transparent;
	overflow: visible;
}

.mnn-hero-slider.is-editor .mnn-hero-slide.is-empty::before,
.mnn-hero-slider.is-editor .mnn-hero-slide.is-empty::after {
	display: none;
}

.mnn-hero-slider.is-editor .mnn-hero-slide__content {
	pointer-events: auto;
}