/* SASA Packaging - home page "News & Events" section: background video + heading + "Explore more".
   Only used by resources/views/landing/news.blade.php. Colours come from the site palette (sasa-premium.css). */

.nwv {
	position: relative;
	isolation: isolate;
	display: grid;
	align-items: center;
	min-height: clamp(420px, 64vh, 660px);
	padding: clamp(64px, 9vw, 120px) 0;
	overflow: hidden;
	color: #fff;
	text-align: center;
	background:
		radial-gradient(rgba(255, 255, 255, .16) 1.5px, transparent 2px) 0 0 / 24px 24px,
		radial-gradient(120% 90% at 20% 0%, rgba(255, 255, 255, .22), transparent 55%),
		linear-gradient(160deg, #84a282, #4f6f52 60%, #2b3f2f);   /* shown when there is no video, and until the video starts */
}

/* ---- the video (or its cover picture) fills the section ---- */
.nwv__bg { position: absolute; inset: 0; z-index: -1; }
.nwv__video {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity .9s ease;
}
.nwv__video[poster] { opacity: 1; }                 /* the cover picture is visible straight away */
.nwv.is-playing .nwv__video { opacity: 1; }
/* dark veil: keeps the white text readable on ANY video (contrast), a little darker at the bottom */
.nwv__shade {
	position: absolute; inset: 0;
	background:
		linear-gradient(180deg, rgba(15, 24, 17, .55) 0%, rgba(15, 24, 17, .38) 45%, rgba(15, 24, 17, .66) 100%);
}
.nwv:not(.has-video) .nwv__shade { background: linear-gradient(180deg, rgba(15, 24, 17, .1), rgba(15, 24, 17, .3)); }

/* ---- text ---- */
.nwv__inner { position: relative; max-width: 760px; margin: 0 auto; padding-left: 20px; padding-right: 20px; }
.nwv__eyebrow {
	display: block; margin-bottom: 16px;
	font: 700 .8rem/1 Inter, system-ui, sans-serif; letter-spacing: .22em; text-transform: uppercase;
	color: rgba(255, 255, 255, .85);
}
.nwv__title {
	margin: 0 0 16px;
	font: 700 clamp(2.2rem, 5vw, 3.8rem)/1.08 Outfit, Inter, system-ui, sans-serif; letter-spacing: -.02em;
	color: #fff; text-shadow: 0 2px 24px rgba(0, 0, 0, .35);
}
.nwv__lead {
	margin: 0 auto clamp(26px, 4vw, 38px); max-width: 560px;
	font: 400 clamp(1rem, 1.6vw, 1.15rem)/1.7 Inter, system-ui, sans-serif;
	color: rgba(255, 255, 255, .92); text-shadow: 0 1px 14px rgba(0, 0, 0, .35);
}

/* ---- "Explore more" button ---- */
.nwv__btn {
	display: inline-flex; align-items: center; gap: 12px;
	padding: 16px 30px; border-radius: 999px;
	background: #fff; color: var(--sx-forest, #2b3f2f);
	font: 600 1rem/1 Outfit, Inter, system-ui, sans-serif; letter-spacing: .01em; text-decoration: none;
	box-shadow: 0 14px 34px rgba(0, 0, 0, .28);
	transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s, background .3s, color .3s;
}
.nwv__btn svg { width: 18px; height: 18px; transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.nwv__btn:hover, .nwv__btn:focus-visible { transform: translateY(-3px); background: var(--sx-forest, #2b3f2f); color: #fff; box-shadow: 0 20px 44px rgba(0, 0, 0, .34); }
.nwv__btn:hover svg, .nwv__btn:focus-visible svg { transform: translateX(5px); }
.nwv__btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* ---- gentle entrance ---- */
@media (prefers-reduced-motion: no-preference) {
	.nwv__inner > * { animation: nwvUp .9s cubic-bezier(.2, .8, .2, 1) backwards; }
	.nwv__inner > :nth-child(2) { animation-delay: .08s; }
	.nwv__inner > :nth-child(3) { animation-delay: .16s; }
	.nwv__inner > :nth-child(4) { animation-delay: .24s; }
}
@keyframes nwvUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

@media (max-width: 640px) {
	.nwv { min-height: 460px; }
	.nwv__btn { padding: 15px 26px; }
}
@media (prefers-reduced-motion: reduce) {
	.nwv__video { transition: none; }
	.nwv__btn, .nwv__btn svg { transition: none; }
}