/* ==========================================================================
   Cocktails Section
   ========================================================================== */

.section-cocktails {
	position: relative;
	height: clamp(900px, 81.42vw, 1350px);
	background: var(--color-bg-cocktails);
	overflow: hidden;
}

/* Background image — right half, top-aligned, flipped horizontally */
.section-cocktails__background {
	position: absolute;
	left: 49.94%;   /* 828 / 1658 */
	top: 0;
	width: 50.06%;  /* 830 / 1658 */
	height: 58.15%; /* 785 / 1350 */
	background-repeat: no-repeat;
	background-size: 253.17% 140.2%; /* fills the cropped box */
	background-position: 4.72% 74.47%;
	transform: scaleX(-1);
}

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

/* Stacked headline titles */
.section-cocktails__title {
	position: absolute;
	margin: 0;
	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-cocktails__title--blue {
	left: 13.39%;  /* 222 / 1658 */
	top: 13.11%;   /* 177 / 1350 */
	color: var(--color-blue-gray);
}

.section-cocktails__title--dark {
	left: 19.81%;  /* 328.41 / 1658 */
	top: 21.06%;   /* 284.36 / 1350 */
	color: var(--color-dark-gray);
}

.section-cocktails__intro {
	position: absolute;
	left: 20.57%;  /* 341 / 1658 */
	top: 31.19%;   /* 421 / 1350 */
	width: min(35.7%, 592px);
	margin: 0;
	font-size: clamp(1rem, 1.447vw, 1.5rem); /* 24px */
	line-height: 1.5;
	color: var(--color-dark-gray);
}

/* Cards container — full section overlay for absolute positioning */
.section-cocktails__cards {
	position: absolute;
	inset: 0;
}

/* Each card: title + image + text, all absolutely placed within the section */
.section-cocktails__card {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-align: center;
}

/* Card titles — at top:776/1350 = 57.48% */
.section-cocktails__card h3 {
	position: absolute;
	top: 57.48%; /* 776 / 1350 */
	margin: 0;
	font-family: var(--font-heading);
	font-size: clamp(1.5rem, 2.314vw, 2.39875rem); /* 38.38px */
	font-weight: var(--font-weight-semibold);
	line-height: 1;
	color: var(--color-blue-gray);
	text-transform: uppercase;
	white-space: nowrap;
	transform: translateX(-50%);
}

/* Card images — each positioned absolutely within the section */
.section-cocktails__card img {
	position: absolute;
	object-fit: cover;
}

/* Card body text — at top:1122/1350 = 83.11% */
.section-cocktails__card p {
	position: absolute;
	top: 83.11%; /* 1122 / 1350 */
	width: min(19.6%, 325px); /* 325 / 1658 */
	margin: 0;
	font-size: clamp(0.95rem, 1.205vw, 1.25rem); /* 20px */
	line-height: 1.5;
	color: var(--color-dark-gray);
	transform: translateX(-50%);
}

/* --- Card 1: Mimosa ---
   Title center: 387.5 / 1658 = 23.37%
   Image: left:272, top:814, w:307, h:325
*/
.section-cocktails__card:nth-child(1) h3 {
	left: 23.37%; /* center at 387.5 / 1658 */
}

.section-cocktails__card:nth-child(1) img {
	left: 16.4%;  /* 272 / 1658 */
	top: 60.3%;   /* 814 / 1350 */
	width: 18.52%; /* 307 / 1658 */
	height: auto;
}

.section-cocktails__card:nth-child(1) p {
	left: 23.37%;
}

/* --- Card 2: Peach Tea ---
   Title center: 815 / 1658 = 49.15%
   Image: left:648, top:801, w:354, h:354
*/
.section-cocktails__card:nth-child(2) h3 {
	left: 49.15%; /* center at 815 / 1658 */
}

.section-cocktails__card:nth-child(2) img {
	left: 39.08%; /* 648 / 1658 */
	top: 59.33%;  /* 801 / 1350 */
	width: 21.35%; /* 354 / 1658 */
	height: auto;
}

.section-cocktails__card:nth-child(2) p {
	left: 49.15%;
}

/* --- Card 3: Berry Lemonade ---
   Title center: 1249 / 1658 = 75.33%
   Image: left:1137, top:776, w:277, h:415
*/
.section-cocktails__card:nth-child(3) h3 {
	left: 75.33%; /* center at 1249 / 1658 */
}

.section-cocktails__card:nth-child(3) img {
	left: 68.58%; /* 1137 / 1658 */
	top: 57.48%;  /* 776 / 1350 */
	width: 16.71%; /* 277 / 1658 */
	height: auto;
}

.section-cocktails__card:nth-child(3) p {
	left: 75.33%;
}

/* Pagination dots — hidden on desktop */
.section-cocktails__pagination {
	display: none;
}

.section-cocktails__dot {
	border: 0;
	height: 3px;
	width: 58.2px;
	background: var(--color-mid-gray);
	padding: 0;
	cursor: pointer;
}

.section-cocktails__dot.is-active {
	background: var(--color-blue-gray);
}

/* ==========================================================================
   Mobile (≤ 768px)
   ========================================================================== */
@media (max-width: 768px) {
	.section-cocktails {
		height: 0;
		padding-bottom: 309.07%; /* 1159 / 375 */
		min-height: 0;
	}

	/* Background: top 633/1159 = 54.62% of section, bg-color #f4f4f4
	   Image: left:5.49%, top:27.01% of 633px container = 170.97px
	   background-size: 249.89% wide, 77.62% of 633px tall
	*/
	.section-cocktails__background {
		left: 0;
		top: 0;
		width: 100%;
		height: 54.62%; /* 633 / 1159 */
		background-color: #f4f4f4;
		background-size: 249.89% 77.62%;
		background-position: -3.66% 120.66%;
		transform: scaleX(-1);
	}

	.section-cocktails__container {
		position: absolute;
		inset: 0;
	}

	/* Titles */
	.section-cocktails__title {
		font-size: 16.53vw; /* 62 / 375 */
	}

	.section-cocktails__title--blue {
		left: 4.53%;  /* 17 / 375 */
		top: 3.62%;   /* 42 / 1159 */
	}

	.section-cocktails__title--dark {
		left: 17.74%; /* 66.51 / 375 */
		top: 7.89%;   /* 91.48 / 1159 */
	}

	.section-cocktails__intro {
		left: 13.07%; /* 49 / 375 */
		top: 13.46%;  /* 156 / 1159 */
		width: 73.87%; /* 277 / 375 */
		font-size: 3.73vw; /* 14 / 375 */
	}

	/* Cards area: below background, bg #f8f7f8
	   top: 633/1159 = 54.62%, height: 458/1159 = 39.52%
	*/
	.section-cocktails__cards {
		position: absolute;
		left: 0;
		top: 54.62%;
		width: 100%;
		height: 39.52%; /* 458 / 1159 */
		margin: 0;
		display: block;
		padding: 0;
		background: #f8f7f8;
	}

	/* Each card fills the cards area, only active one shown */
	.section-cocktails__card {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		display: none;
		padding-top: 0;
	}

	.section-cocktails__card.is-active {
		display: block;
	}

	/* Specificity: .section-cocktails prefix needed to override desktop
	   :nth-child(N) selectors which have specificity (0,2,1).
	   With the parent class, these also reach (0,2,1) and win by source order. */

	/* Card title: top:35/458 = 7.64% of cards area, centered */
	.section-cocktails .section-cocktails__card h3 {
		position: absolute;
		left: 50%;
		top: 7.64%; /* 35 / 458 */
		transform: translateX(-50%);
		font-size: 8.53vw; /* 32 / 375 */
		white-space: nowrap;
		width: auto;
	}

	/* Card image: centered on glass, not canvas.
	   Each PNG has the glass off-center in its canvas, so we use
	   translateX(-content_center%) per card to visually center the drink. */
	.section-cocktails .section-cocktails__card img {
		position: absolute;
		left: 50%;
		top: 17.03%;   /* 78 / 458 */
		width: 62.93%; /* 236 / 375 */
		height: auto;
		margin: 0;
	}

	/* Per-card glass centering — offsets account for shadow + garnish
	   extending beyond the glass body in each PNG */
	.section-cocktails .section-cocktails__card:nth-child(1) img {
		transform: translateX(-36%);
	}

	.section-cocktails .section-cocktails__card:nth-child(2) img {
		transform: translateX(-47%);
	}

	.section-cocktails .section-cocktails__card:nth-child(3) img {
		transform: translateX(-36%);
		width: 50%;
	}

	/* Card text: top:330/458 = 72.05%, w:277/375 = 73.87% */
	.section-cocktails .section-cocktails__card p {
		position: absolute;
		left: 50%;
		top: 72.05%; /* 330 / 458 */
		transform: translateX(-50%);
		width: 73.87%; /* 277 / 375 */
		font-size: 3.73vw; /* 14 / 375 */
		text-align: center;
		margin: 0;
	}

	/* Pagination dots: left:91/375=24.27%, top:1063/1159=91.72% */
	.section-cocktails__pagination {
		position: absolute;
		left: 24.27%; /* 91 / 375 */
		top: 91.72%;  /* 1063 / 1159 */
		display: flex;
		gap: 9px;
		z-index: 3;
	}

	.section-cocktails__dot {
		width: 15.52vw; /* 58.2 / 375 */
		height: 3px;
	}
}