/**
 * Swimming Lessons "Singapore Locations & Why Choose Us" section styles.
 *
 * Exact user specified properties:
 * - Section Background: #FFFFFF
 * - Section Padding: Top 110px, Bottom 110px, Left/Right 160px (padding: 110px 160px;)
 * - Header Area:
 *   - Eyebrow: Color #005BD1, 14px, Semibold 600, Margin-bottom 10px
 *   - Title: Color #002B63, 46px, Semibold 600, Margin-bottom 22px
 *   - Descriptions: Color #606060, 16px, Line-height 160%, Letter-spacing -4%, Gap 24px
 * - Left Column:
 *   - Image: Height 320px, Radius 24px
 *   - Safety Card: Background #EDFF72 (Lime/Yellow), Radius 24px, Padding 30px
 * - Right Column (Why Choose Us Card):
 *   - Background: #F1F8FF, Radius 24px, Padding 30px
 *   - 6 White Feature Pills: Background #FFFFFF, Radius 14px, Padding 16px 24px, Gap 8px
 *   - Footer Note: Color #606060, Margin-top 24px
 * - Responsive: All screen sizes
 */

.lessons-locations-section {
	position: relative;
	width: 100%;
	background-color: #FFFFFF;
	padding: 110px var(--fd-gutter); /* Exact Top/Bottom 110px, Left/Right 160px */
	box-sizing: border-box;
	overflow: hidden;
}

.lessons-locations-section__inner {
	width: 100%;
	max-width: var(--fd-container); /* Exact Figma 1120px content grid */
	margin: 0 auto;
	box-sizing: border-box;
}

/* ==========================================================================
   Centered Header Area
   ========================================================================== */

.lessons-locations-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	max-width: 940px;
	margin: 0 auto 60px auto;
	width: 100%;
	box-sizing: border-box;
}

.lessons-locations-title {
	margin: 0 0 22px 0 !important;
	color: #002B63;
	line-height: 1.4; /* 140% on desktop */
}

.lessons-locations-desc {
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 100%;
}

.lessons-locations-desc p {
	margin: 0;
	color: #606060;
	font-family: var(--fd-font);
	font-weight: 400;
}

/* ==========================================================================
   2 Columns Grid
   ========================================================================== */

.lessons-locations-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px; /* Exact 24px space between left and right sections */
	align-items: start; /* Natural alignment */
	width: 100%;
	box-sizing: border-box;
}

/* Left Column (Stack: Image + Safety Card) */
.lessons-locations-left {
	display: flex;
	flex-direction: column;
	gap: 24px; /* Exact 24px space below photo */
	width: 100%;
	box-sizing: border-box;
}

.lessons-locations-image-wrap {
	width: 100%;
	aspect-ratio: 545 / 451; /* Exact uncropped Figma 545x451 image ratio */
	border-radius: 24px; /* Exact 24px radius */
	overflow: hidden;
	background-color: #E2EFFC;
	box-shadow: 0 16px 40px rgba(0, 43, 99, 0.08);
	box-sizing: border-box;
}

.lessons-locations-img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	border-radius: 24px;
}

/* Safety Card: Background #EDFF72 */
.lessons-safety-card {
	background-color: #EDFF72; /* Exact #EDFF72 Bright Lime/Yellow */
	border-radius: 24px; /* Exact 24px radius */
	padding: 30px; /* Exact 30px padding */
	display: flex;
	flex-direction: column;
	width: 100%;
	box-sizing: border-box;
}

.lessons-safety-card__title {
	margin: 0 0 22px 0 !important; /* Exact 22px space below Safety Is Our Priority */
	color: #0D0E1C;
	font-family: var(--fd-font);
	font-size: 24px;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.03em;
}

.lessons-safety-card__body {
	display: flex;
	flex-direction: column;
	gap: 24px; /* Exact 24px space between description paragraphs */
	width: 100%;
}

.lessons-safety-card__body p {
	margin: 0;
	color: #0D0E1C;
	font-family: var(--fd-font);
	font-weight: 400;
	letter-spacing: -0.01em;
}

/* ==========================================================================
   Right Column: Why Choose Us Card
   ========================================================================== */

.lessons-choose-card {
	background-color: #F1F8FF; /* Light icy blue tint matching Figma */
	border-radius: 24px; /* Exact 24px radius */
	padding: 30px; /* Exact 30px padding */
	display: flex;
	flex-direction: column;
	justify-content: flex-start; /* Compact layout without auto stretching */
	width: 100%;
	box-sizing: border-box;
	border: 1px solid #E2EFFC;
}

.lessons-choose-card__head {
	margin-bottom: 20px;
	width: 100%;
	box-sizing: border-box;
}

.lessons-choose-card__title {
	margin: 0 0 8px 0 !important;
	color: #002B63;
	font-family: var(--fd-font);
	font-size: 24px;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.03em;
}

.lessons-choose-card__sub {
	margin: 0 0 8px 0;
	color: #606060;
	font-family: var(--fd-font);
	font-weight: 400;
}

.lessons-choose-card__focus-label {
	margin: 0;
	color: #2F3946;
	font-family: var(--fd-font);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
}

/* 6 White Feature Pills */
.lessons-choose-card__list {
	display: flex;
	flex-direction: column;
	gap: 8px; /* Exact 8px gap between pills */
	width: 100%;
	box-sizing: border-box;
}

.lessons-choose-pill {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 20px; /* Exact 20px space between icon and text */
	background-color: #FFFFFF;
	border: 1px solid #E5EFFB;
	border-radius: 18px; /* Exact 18px radius */
	padding: 20px 20px 20px 24px; /* Exact padding top/bottom 20px, left 24px, right 20px */
	box-sizing: border-box;
	box-shadow: 0 2px 8px rgba(0, 43, 99, 0.02);
	transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.lessons-choose-pill:hover {
	background-color: #FAFCFF;
	transform: translateX(3px);
	box-shadow: 0 4px 14px rgba(0, 43, 99, 0.06);
}

.lessons-choose-pill__icon {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
}

.lessons-choose-pill__icon svg {
	display: block;
	width: 20px;
	height: 20px;
}

.lessons-choose-pill__text {
	margin: 0;
	color: #0D0E1C;
	font-family: var(--fd-font);
	font-weight: 500;
	letter-spacing: -0.01em;
}

/* Card Bottom Note */
.lessons-choose-card__footer {
	margin: 24px 0 0 0;
	color: #606060;
	font-family: var(--fd-font);
	font-weight: 400;
}

/* ==========================================================================
   Responsive Breakpoints
   ========================================================================== */

@media (max-width: 1399px) {
	.lessons-locations-section {
		padding: 90px var(--fd-gutter);
	}

	.lessons-locations-header {
		margin-bottom: 48px;
	}

	.lessons-safety-card,
	.lessons-choose-card {
		padding: 26px;
	}

	.lessons-choose-card__title {
		font-size: 24px;
	}
}

@media (max-width: 1024px) {
	.lessons-locations-section {
		padding: 80px var(--fd-gutter);
	}

	.lessons-locations-grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.lessons-locations-image-wrap {
		max-width: 580px;
		margin: 0 auto;
	}

	.lessons-safety-card,
	.lessons-choose-card {
		max-width: 580px;
		margin: 0 auto;
		border-radius: 20px;
	}

	.lessons-locations-header {
		margin-bottom: 40px;
	}
}

@media (max-width: 640px) {
	.lessons-locations-section {
		padding: 60px var(--fd-gutter);
	}

	.lessons-locations-eyebrow {
		margin-bottom: 8px;
	}

	.lessons-locations-title {
		margin-bottom: 16px !important;
		line-height: 1.25; /* Slightly under the desktop 140% */
	}

	.lessons-locations-desc {
		gap: 16px;
	}

	.lessons-locations-header {
		margin-bottom: 32px;
	}

	.lessons-locations-image-wrap {
		border-radius: 16px;
	}

	.lessons-safety-card,
	.lessons-choose-card {
		padding: 20px 16px;
		border-radius: 16px;
	}

	.lessons-safety-card__title,
	.lessons-choose-card__title {
		font-size: 20px;
	}

	.lessons-choose-pill {
		padding: 14px 16px;
		border-radius: 12px;
		gap: 12px;
	}

	.lessons-choose-card__footer {
		margin-top: 18px;
	}
}