/**
 * Hero Slider Section Styles
 * Contract-driven implementation matching mgmotor.pl measurements
 *
 * @package MG
 */

/* ========================================
   Section Container & Background
   Contract 2.1
   ======================================== */

/* L3.3: HERO layout safety — enforce full-width swiper viewport */
.homepage__thumb-slider {
	position: relative;
	width: 100%;
	max-width: none;
	flex: 1 1 auto;
	min-width: 0;
}

.homepage__thumb-slider .thumb-slider__container {
	background-color: #fff;
	padding-bottom: 10px;
	padding-left: 0;
	padding-right: 0;
	position: relative;
	width: 100%;
	max-width: none;
}

/* Edge-only gutters: 30px only on outer edges based on active slide */
.homepage__thumb-slider.is-first .thumb-slider__container {
	padding-left: 30px;
	padding-right: 0;
}

.homepage__thumb-slider.is-last .thumb-slider__container {
	padding-left: 0;
	padding-right: 30px;
}

.homepage__thumb-slider.is-single .thumb-slider__container {
	padding-left: 30px;
	padding-right: 30px;
}

.homepage__thumb-slider .swiper-container {
	overflow: hidden;
	width: 100%;
	max-width: none;
	display: block;
}

/* ========================================
   Wrapper Padding
   Contract 2.2
   ======================================== */

.homepage__thumb-slider .swiper-wrapper {
	display: flex;
	width: 100%;
	max-width: none;
}

@media (min-width: 768px) {
	.homepage__thumb-slider .swiper-wrapper {
		padding-top: 20px;
	}
}

/* ========================================
   Slide Base
   Contract 2.3
   Note: inline margin-right: 32px set by sliders.js
   ======================================== */

.homepage__thumb-slider .swiper-slide {
	flex-shrink: 0;
	/* L3.3.1: do NOT set width/flex-basis — Swiper computes slide width inline (contract 2.3) */
}

/* ========================================
   Card Base Styling (Content Container)
   Contract 2.4
   ======================================== */

.thumb-slider__content {
	border-radius: 10px;
	position: relative;
	display: flex;
	height: 100%;
	align-items: flex-start;
	flex-direction: column;
	justify-content: space-between;
	overflow: hidden;
	background-color: #000;
	padding: 20px;
}

@media (min-width: 768px) {
	.thumb-slider__content {
		padding: 32px;
	}
}

/* ========================================
   Fixed Variant Card - Heights & Shadow
   Contract 2.5
   CRITICAL: Cascade order must match contract exactly
   ======================================== */

/* 1. Base */
.thumb-slider__content.--content-fixed {
	min-height: 460px;
	box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.2);
}

/* 2. Tablet landscape override */
@media (min-width: 768px) {
	.thumb-slider__content.--content-fixed {
		align-items: center;
		height: 900px;
	}
}

/* 3. Landscape orientation override */
@media screen and (orientation: landscape) {
	.thumb-slider__content.--content-fixed {
		height: 620px;
	}
}

/* 4. Desktop override */
@media (min-width: 1440px) {
	.thumb-slider__content.--content-fixed {
		height: 750px;
	}
}

/* 5. Short desktop override */
@media (min-width: 1440px) and (max-height: 768px) {
	.thumb-slider__content.--content-fixed {
		height: 460px;
	}
}

/* 6. Large desktop override */
@media (min-width: 1600px) {
	.thumb-slider__content.--content-fixed {
		height: 825px;
	}
}

/* ========================================
   Image Layer (Background-Like Behavior)
   Contract 2.6
   ======================================== */

.thumbslider-picture {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
}

.thumbslider__image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

@media screen and (orientation: portrait) and (min-width: 480px) {
	.thumbslider__image {
		object-position: 0px 25%;
	}
}

@media screen and (orientation: landscape) {
	.thumbslider__image {
		object-position: 30%;
	}
}

@media screen and (orientation: landscape) and (min-width: 1280px) {
	.thumbslider__image {
		object-position: 60%;
	}
}

/* ========================================
   Slide Opacity States & Transitions
   Contract 2.7
   CRITICAL: transition-property is transform ONLY
   ======================================== */

.homepage__thumb-slider .swiper-slide {
	opacity: 0.6;
	transition-property: transform;
	transition-duration: 0.25s;
	transition-timing-function: ease;
	transform: matrix(1, 0, 0, 1, 0, 0);
}

.homepage__thumb-slider .swiper-slide-active {
	opacity: 1;
}

/* ========================================
   Typography - Title
   Contract 2.8.1
   ======================================== */

.thumb-slider__slide-title {
	font-size: 32px;
	line-height: 32px;
	font-weight: 300;
	letter-spacing: -0.04em;
	padding-bottom: 8px;
	color: #fcfcfd;
	margin: 0;
}

@media (min-width: 768px) {
	.thumb-slider__slide-title {
		font-size: 42px;
		line-height: 44px;
		color: #fcfcfd;
	}
}

/* ========================================
   Typography - Subtitle
   Contract 2.8.2
   ======================================== */

.thumb-slider__slide-subtitle {
	font-size: 28px;
	line-height: 28px;
	font-weight: 300;
	letter-spacing: -0.04em;
	opacity: 0.7;
	color: #fcfcfd;
	margin: 0;
}

@media (min-width: 768px) {
	.thumb-slider__slide-subtitle {
		line-height: 32px;
		opacity: 1;
		color: #fcfcfd;
	}
}

/* ========================================
   Text Wrapper Layout
   Contract 2.9
   ======================================== */

.thumb-slider__wrapper {
	position: relative;
	display: flex;
	justify-content: space-between;
	width: 100%;
	z-index: 1;
}

/* ========================================
   CTA Button Styling
   Contract 2.10
   No hero-specific overrides for MVP
   ======================================== */

/* CTA styling comes from global .btn .btn--primary */

/* CTA width constraint wrapper */
.thumb-slider__cta-wrap {
	width: 100%;
	max-width: 260px;
}

@media (min-width: 768px) {
	.thumb-slider__cta-wrap {
		width: auto;
		max-width: none;
		display: inline-block;
	}

	.homepage__thumb-slider .btn.btn--primary {
		width: unset;
		max-width: none;
	}
}

/* ========================================
   Hero Navigation Dots
   Preserved from existing implementation
   ======================================== */

.hero__nav {
	position: absolute;
	bottom: var(--mg-space-6);
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: var(--mg-space-3);
	z-index: 5;
	padding: var(--mg-space-2);
	margin-top: 12px;
}

.hero__nav-dot {
	width: 40px;
	height: 4px;
	padding: 0;
	background-color: rgba(255, 255, 255, 0.5);
	border: none;
	border-radius: var(--mg-radius-sm);
	cursor: pointer;
	transition: background-color 0.3s ease, transform 0.2s ease;
}

.hero__nav-dot:hover {
	background-color: rgba(255, 255, 255, 0.7);
	transform: scaleY(1.2);
}

.hero__nav-dot.is-active {
	background-color: var(--mg-color-white);
}

.hero__nav-dot:focus {
	outline: 2px solid var(--mg-color-white);
	outline-offset: 4px;
}

@media (min-width: 768px) {
	.hero__nav {
		bottom: var(--mg-space-7);
	}
}