/* Home page sections — ported from nexen-home-html/index.html */
.icn path,
.icn circle,
.icn line,
.icn rect,
.icn polyline {
	stroke: #fff;
}

/* ---------- Hero slider (ACF hero_banner_slides) ---------- */
.hero-carousel {
	position: relative;
}

/* Same reasoning as .rec-grid: a scrollable box captures wheel gestures and
   freezes the page. Keep it out of the scroll chain on pointer devices and let
   the arrows move it; it stays programmatically scrollable.
   Both axes must be set. overflow-x alone leaves overflow-y at visible, which
   the spec forces to compute to auto — so the track stayed a *vertical* scroll
   container and went on trapping the page. */
.hero-slider {
	display: flex;
	overflow: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	align-items: flex-start;
}

.hero-slider::-webkit-scrollbar {
	display: none;
}

@media (hover: none) {
	.hero-slider {
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
	}
}

.hero-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(38px, 3.2vw, 54px);
	height: clamp(38px, 3.2vw, 54px);
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(23, 23, 23, .5);
	color: #fff;
	cursor: pointer;
	transition: background .15s, opacity .15s;
}

.hero-nav svg {
	width: 13px;
	height: 21px;
}

.hero-nav:hover:not(:disabled) {
	background: var(--purple);
	opacity: 1;
}

.hero-nav:disabled {
	opacity: .3;
	cursor: default;
}

.hero-nav[hidden] {
	display: none;
}

/* A scroll with behavior:'auto' consults this property, so the tracks have to
   drop their smoothness here — otherwise "reduce motion" still animates. */
@media (prefers-reduced-motion: reduce) {
	.hero-slider,
	.rec-grid {
		scroll-behavior: auto;
	}
}

/* ---------- Hero dots (opt-in per widget) ---------- */
.hero-dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: clamp(14px, 1.6vw, 26px);
	z-index: 4;
	display: flex;
	justify-content: center;
	gap: 10px;
	pointer-events: none;
}

.hero-dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, .45);
	cursor: pointer;
	pointer-events: auto;
	transition: background .18s, transform .18s;
}

.hero-dot:hover,
.hero-dot:focus-visible {
	background: rgba(255, 255, 255, .8);
	opacity: 1;
}

.hero-dot.is-active {
	background: var(--purple);
	transform: scale(1.3);
}

/* Dots below the slide: the wrapper grows by the strip's height, and the arrows
   give that height back so they stay centred on the slide rather than on the
   slide plus the dots. */
.hero-carousel--dots-below {
	padding-bottom: 38px;
}

.hero-carousel--dots-below .hero-dots {
	bottom: 8px;
}

.hero-carousel--dots-below .hero-nav {
	margin-top: -19px;
}

.hero-prev {
	left: clamp(12px, 1.6vw, 30px);
}

.hero-next {
	right: clamp(12px, 1.6vw, 30px);
}

/* Full 16:9 banner, matching the Figma hero (1920x1080). The widget can override
   the ratio, swap it for a fixed height, or hand the height to the image — a
   banner-shaped file (1920x500, say) is badly cropped at the design ratio. */
.hero-slide {
	position: relative;
	flex: 0 0 100%;
	scroll-snap-align: start;
	aspect-ratio: var(--hero-ratio, 1920/1080);
	overflow: hidden;
}

.hero-slide .bg {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* "Follow the image": no box to fit into, so nothing is cropped. Slides keep
   their own heights, so mixing shapes leaves the shorter ones short. */
.hero-carousel--auto .hero-slide {
	aspect-ratio: auto;
}

.hero-carousel--auto .hero-slide .bg {
	height: auto;
	object-fit: fill;
}

.hero-slide__inner {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 0 20px;
	background: rgba(0, 0, 0, .35);
}

.hero-slide__inner h1 {
	font-size: clamp(28px, 2.3vw, 44px);
	font-weight: 700;
	letter-spacing: 1px;
}

.hero-slide__inner p {
	font-size: clamp(13px, 1vw, 15px);
	font-weight: 300;
	color: rgba(255, 255, 255, .85);
	max-width: 680px;
	margin: 14px auto 0;
}

/* ---------- Vehicle picker ---------- */
.vehicles-sec {
	padding-top: 56px;
	padding-bottom: 48px;
}

.vehicles {
	display: flex;
	gap: 42px;
	align-items: stretch;
}

.veh-left {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	gap: 52px;
}

.veh-right {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
}

/* Heading block — right-aligned with a magenta accent bar (Figma). */
.veh-headings {
	text-align: right;
	border-right: 25px solid var(--purple);
	padding-right: clamp(20px, 2vw, 34px);
	margin: 0 0 clamp(24px, 3vw, 52px);
}

.veh-heading {
	font-size: clamp(26px, 2.1vw, 40px);
	font-weight: 700;
	line-height: 1.32;
	margin: 0;
}

.veh-subheading {
	font-size: clamp(15px, 1.1vw, 20px);
	font-weight: 300;
	line-height: 1.5;
	color: var(--muted);
	margin: 14px 0 0;
}

.veh-card {
	position: relative;
	border-radius: 4px;
	overflow: hidden;
	box-shadow: 6px 6px 12px rgba(23, 23, 23, .75);
	display: block;
	aspect-ratio: 890/430;
}

/* Passenger card sits low in the right column but not flush to the bottom (design leaves ~9% of the column width below it). */
.veh-right .veh-card {
	margin-top: auto;
	margin-bottom: 9%;
}

.veh-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.veh-card .label {
	position: absolute;
	bottom: 22px;
	color: #fff;
	font-weight: 500;
	font-size: clamp(22px, 2vw, 40px);
	text-shadow: 0 2px 8px rgba(0, 0, 0, .5);
}

.veh-card .label.r {
	right: 34px;
}

.veh-card .label.l {
	left: 32px;
}

/* ---------- Feature icons ---------- */
.home-intro {
	text-align: center;
	padding: 28px 0 8px;
}

.features {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: clamp(24px, 4.5vw, 90px);
	/* Stay on one row down to the tablet breakpoint. At 290px apiece the four
	   columns no longer fit below ~1300px, and wrapping left a lone icon
	   stranded on a second row on laptops. */
	flex-wrap: nowrap;
	padding: 26px 0 56px;
}

/* Top-align, don't centre: centring made the icon of a 3-line column drop ~19px
   below its 2-line neighbours, so the row of circles looked uneven. */
.feature {
	/* Share the row evenly and shrink (rather than wrap) on narrow laptops;
	   max-width keeps the wide-screen layout unchanged. */
	flex: 1 1 0;
	min-width: 0;
	max-width: 290px;
	display: flex;
	gap: 20px;
	align-items: flex-start;
}

.feature .ficn {
	width: 72px;
	height: 72px;
	flex: 0 0 72px;
	object-fit: contain;
}

.feature h4 {
	font-size: 16px;
	font-weight: 700;
	margin-bottom: 2px;
}

.feature p {
	font-size: 14px;
	font-weight: 300;
	line-height: 1.35;
}

/* ---------- Recommend product ---------- */
.recommend {
	position: relative;
	padding-bottom: 56px;
}

.recommend .section-title {
	margin-bottom: 36px;
}

.rec-band {
	position: relative;
	padding: 40px 0 46px;
}

.rec-band::before {
	content: "";
	position: absolute;
	inset: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100vw;
	background: #171717;
	z-index: 0;
}

/* Carousel: 4 cards per page on desktop, scroll-snapped so swipe works without
   JS. --rec-per sets how many fit; the arrows page by one track width. */
.rec-carousel {
	--rec-per: 4;
	--rec-gap: 24px;
	position: relative;
	z-index: 1;
}

/* Overflow is hidden on pointer devices and the arrows do the scrolling. A
   scrollable track latches the wheel gesture and swallows the vertical delta,
   so the page scroll got stuck on this section. The box is still
   programmatically scrollable, so the arrows and scroll-snap keep working.
   Touch gets native swipe back below.
   Set both axes: overflow-x on its own leaves overflow-y at visible, which the
   spec forces to compute to auto, so the track remained a *vertical* scroll
   container and kept trapping the page wherever its content overflowed. */
.rec-grid {
	display: flex;
	gap: var(--rec-gap);
	overflow: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
}

.rec-grid::-webkit-scrollbar {
	display: none;
}

/* Touch has no hover and no arrows worth aiming at: give it real swipe.
   Touch scrolling direction-locks, so it does not trap the page. */
@media (hover: none) {
	.rec-grid {
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
	}
}

.rec-card {
	flex: 0 0 calc((100% - (var(--rec-per) - 1) * var(--rec-gap)) / var(--rec-per));
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 0 8px;
}

/* Arrows sit outside the track, vertically centred on the tire image. */
.rec-nav {
	position: absolute;
	top: 150px;
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, .12);
	color: #fff;
	cursor: pointer;
	transition: background .15s, opacity .15s;
}

.rec-nav svg {
	width: 12px;
	height: 20px;
}

.rec-nav:hover:not(:disabled) {
	background: var(--purple);
	opacity: 1;
}

.rec-nav:disabled {
	opacity: .25;
	cursor: default;
}

.rec-nav[hidden] {
	display: none;
}

.rec-prev {
	left: calc(var(--pad) * -1 + 6px);
}

.rec-next {
	right: calc(var(--pad) * -1 + 6px);
}

.rec-card .tire {
	height: 300px;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.rec-card .tire img {
	max-height: 300px;
	width: auto;
	filter: drop-shadow(0 26px 14px rgba(0, 0, 0, .55));
}

.rec-card h3 {
	font-size: clamp(22px, 1.7vw, 30px);
	font-weight: 400;
	margin: 26px 0 14px;
}

.rec-card p {
	font-size: 14px;
	font-weight: 300;
	line-height: 1.4;
	color: #fff;
	max-width: 368px;
}

/* ---------- Search panel styles live in search.css (shared with /search-result/) ---------- */

/* ---------- Tire grid ---------- */
.grid-sec {
	padding-bottom: 70px;
}

.grid-sec .section-title {
	margin-bottom: 44px;
}

.tire-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px 20px;
}

.tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 24px 10px 30px;
	border-radius: 8px;
}

.tile-logo {
	width: 100%;
	min-height: 120px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-bottom: 18px;
}

.tile-logo img {
	width: auto;
	max-width: 62%;
	max-height: 120px;
	object-fit: contain;
}

.tile-logo .badge {
	max-height: 52px;
}

.tile-tire {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}

.tile-tire img {
	max-height: 400px;
	width: auto;
	filter: drop-shadow(0 24px 14px rgba(0, 0, 0, .55));
}

/* ---------- News & Articles ---------- */
.news-sec {
	padding-bottom: 60px;
}

.news-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-top: 1px solid rgba(255, 255, 255, .28);
	border-bottom: 1px solid rgba(255, 255, 255, .28);
	padding: 18px 8px;
	margin-bottom: 36px;
}

.news-head .view-all {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: clamp(16px, 1.2vw, 22px);
	font-weight: 500;
}

.news-head .view-all .icn {
	width: 16px;
	height: 16px;
}

.news-cols {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
	align-items: start;
}

.news-col {
	display: flex;
	flex-direction: column;
	gap: 36px;
}

.news-card {
	position: relative;
	border-radius: 2px;
	overflow: hidden;
	cursor: pointer;
}

.news-card.r420 {
	aspect-ratio: 580/420;
}

.news-card.r405 {
	aspect-ratio: 579/405;
}

.news-card.r601 {
	aspect-ratio: 580/601;
}

.news-card.r617 {
	aspect-ratio: 579/617;
}

.news-card .cover {
	position: absolute;
	inset: 0;
	z-index: 5;
}

.news-card>img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	inset: 0;
}

.news-overlay {
	position: absolute;
	left: 0;
	right: 0;
	background: rgba(51, 51, 51, .65);
	padding: 18px 33px 16px;
	z-index: 2;
}

.news-overlay.bottom {
	bottom: 0;
}

.news-overlay.top {
	top: 0;
}

.news-overlay h3 {
	font-size: clamp(18px, 1.25vw, 24px);
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1.15;
}

.news-overlay p {
	font-size: 14px;
	font-weight: 400;
	line-height: 1.35;
	margin-top: 10px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ---------- Responsive ---------- */
@media (max-width:1200px) {
	/* Below laptop widths four columns get too cramped to read — go 2x2. */
	.features {
		flex-wrap: wrap;
	}

	.feature {
		flex: 0 1 290px;
	}

	.rec-carousel {
		--rec-per: 2;
	}

	/* Arrows move inside the track — there is no gutter left to sit in. */
	.rec-prev {
		left: -6px;
	}

	.rec-next {
		right: -6px;
	}

	.tire-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* News: drop the desktop masonry — flatten the column wrappers so all cards become
     one grid in reading order, with uniform height and every title pinned to the bottom. */
	.news-col {
		display: contents;
	}

	.news-cols {
		grid-template-columns: repeat(2, 1fr);
		gap: 40px;
	}

	/* Cards get real height from an in-flow image. Relying on aspect-ratio on a
	   box whose children are all absolutely positioned collapses inside
	   display:contents + grid (Chrome under-computes the track height), so the
	   last card overflowed down onto the footer. An in-flow image fixes it. */
	.news-cols .news-card {
		aspect-ratio: auto;
	}

	.news-cols .news-card>img {
		position: relative;
		inset: auto;
		width: 100%;
		height: auto;
		aspect-ratio: 580/420;
		display: block;
	}

	.news-overlay.top {
		top: auto;
		bottom: 0;
	}
}

@media (max-width:820px) {
	.vehicles {
		flex-direction: column;
	}

	.veh-right {
		gap: 52px;
	}

	.veh-right .veh-card {
		margin: 0;
	}

	.news-cols {
		grid-template-columns: 1fr;
	}
}

@media (max-width:560px) {
	.rec-carousel {
		--rec-per: 1;
	}

	.tire-grid {
		grid-template-columns: 1fr;
	}
}