/* ==========================================================================
   Story Section
   ========================================================================== */

.section-story {
	position: relative;
	height: clamp(560px, 45.3vw, 751px); /* responsive height */
	background: var(--color-bg-story);
	overflow: hidden;
}

.section-story__background {
	position: absolute;
	left: 0;
	top: -21.04%; /* -158 / 751 */
	width: 127.1%; /* 2107.336 / 1658 */
	height: 147.27%; /* 1106 / 751 */
	background-size: cover;
	background-position: center;
}

.section-story__container {
	position: relative;
	height: 100%;
}

.section-story__cooler {
	position: absolute;
	left: 0;
	top: -0.4%; /* -3 / 751 */
	width: 100%;
	height: 100.8%; /* 757 / 751 */
	background-image: var(--story-cooler-image);
	background-size: cover;
	background-position: center;
	z-index: 1;
}

.section-story__cooler-rotator,
.section-story__cooler-image {
	display: none;
}

.section-story__content {
	position: relative;
	height: 100%;
	z-index: 2;
}

.section-story__title {
	position: absolute;
	font-family: var(--font-heading);
	font-weight: var(--font-weight-bold);
	font-size: clamp(3rem, 8.26vw, 8.5625rem); /* 137px at 1658 */
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
}

.section-story__title--blue {
	left: 13.45%; /* 223 / 1658 */
	top: 24.1%; /* 181 / 751 */
	color: var(--color-blue-gray);
}

.section-story__title--dark {
	left: 19.93%; /* 330.41 / 1658 */
	top: 38.39%; /* 288.36 / 751 */
	color: var(--color-dark-gray);
}

.section-story__text {
	position: absolute;
	left: 20.75%; /* 344 / 1658 */
	top: 56.59%; /* 425 / 751 */
	width: min(39.14%, 649px); /* 649 / 1658 */
	font-size: clamp(1rem, 1.447vw, 1.5rem); /* 24px at 1658 */
	line-height: 1.5;
	color: var(--color-dark-gray);
	margin: 0;
}

/* --- Tablet + small desktop (769px–1238px) --- */
@media (min-width: 769px) and (max-width: 1238px) {
	.section-story__cooler {
		-webkit-mask-image: linear-gradient(to right, transparent 5%, black 50%);
		mask-image: linear-gradient(to right, transparent 5%, black 50%);
	}

	.section-story__text {
		width: min(38%, 460px);
	}
}

/* --- Mobile (≤ 768px) --- */
@media (max-width: 768px) {
	.section-story {
		height: 0;
		padding-bottom: 175.47%; /* 658 / 375 */
	}

	.section-story__container {
		position: absolute;
		inset: 0;
		height: auto;
	}

	.section-story__background {
		display: none;
	}

	.section-story__cooler {
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-image: var(--story-cooler-mobile-image, var(--story-cooler-image));
		background-size: cover;
		background-position: center 100%;
		background-repeat: no-repeat;
		display: block;
		z-index: 1;
	}

	.section-story__cooler-rotator {
		display: none;
	}

	.section-story__cooler-image {
		display: none;
	}

	.section-story__title {
		font-size: 16.54vw; /* 62 / 375 */
	}

	.section-story__title--blue {
		left: 5.33%; /* 20 / 375 */
		top: 5.47%; /* 36 / 658 */
	}

	.section-story__title--dark {
		left: 18.54%; /* 69.51 / 375 */
		top: 12.99%; /* 85.48 / 658 */
	}

	.section-story__text {
		left: 13.07%; /* 49 / 375 */
		top: 24.16%; /* 159 / 658 */
		width: 73.87%; /* 277 / 375 */
		font-size: 3.73vw; /* 14 / 375 */
	}
}

/* --- Narrow mobile tuning (≤ 360px) --- */
@media (max-width: 360px) {
	.section-story__title {
		font-size: calc(62.035px * 100vw / 375);
	}

	.section-story__title--blue {
		left: calc(20px * 100vw / 375);
		top: calc(36px * 100vw / 375);
	}

	.section-story__title--dark {
		left: calc(44px * 100vw / 375);
		top: calc(85.48px * 100vw / 375);
	}

	.section-story__text {
		left: calc(49px * 100vw / 375);
		top: calc(159px * 100vw / 375);
		width: calc(277px * 100vw / 375);
		font-size: calc(14px * 100vw / 375);
	}
}