/**
 * Swimming Lessons "Why Start Baby Swimming Lessons?" 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: "Why Start Baby Swimming Lessons?" - Margin-bottom 22px
 *   - Lead ("Build Water Confidence from an Early Age"): Color #606060, Size 16px, Line-height 160%, Letter-spacing -4%, Margin-bottom 24px
 *   - Descriptions: Color #606060, Size 16px, Line-height 160%, Letter-spacing -4%, Gap between descriptions 24px
 * - Cards:
 *   - Padding: All sides 30px (padding: 30px;)
 *   - Subtitle to feature list space: 28px (margin-bottom: 28px;)
 *   - Gap between each white feature pill: 8px (gap: 8px;)
 *   - White Feature Pill: Padding Top/Bottom 20px, Left/Right 24px (padding: 20px 24px;), Gap between icon & text: 20px
 *   - Space between last feature & bottom description: 28px (margin-top: 28px;)
 * - Responsive: All screen sizes
 */

.lessons-why-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-why-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-why-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-why-eyebrow {
	display: inline-block;
	color: #005BD1;
	margin-bottom: 10px; /* Exact 10px space above title */
}

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

.lessons-why-lead {
	margin: 0 0 24px 0 !important; /* Exact 24px space below lead text */
	color: #606060; /* Exact #606060 */ /* Exact 16px */ /* 160% */ /* -4% */
}

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

.lessons-why-desc p {
	margin: 0;
	color: #606060; /* Exact #606060 */
	font-family: var(--fd-font); /* Exact 16px */
	font-weight: 400; /* 160% */
	/* No letter-spacing: the tightening here read as a different typeface
	   next to the sections that leave it at normal (features, pillars,
	   objectives, checklist, FAQ, outline). */
}

/* ==========================================================================
   2 Cards Grid (Side-by-Side)
   ========================================================================== */

.lessons-why-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	align-items: stretch;
	width: 100%;
	box-sizing: border-box;
}

/* Card Container (All sides 30px padding) */
.lessons-why-card {
	background-color: #F1F8FF; /* Light icy blue tint matching Figma */
	border-radius: 24px; /* Exact 24px radius */
	padding: 30px; /* Exact all sides 30px padding */
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 100%;
	box-sizing: border-box;
	border: 1px solid #E2EFFC;
}

.lessons-why-card__head {
	margin-bottom: 28px; /* Exact 28px space above feature list */
	width: 100%;
	box-sizing: border-box;
}

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

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

/* White Pills List (8px gap between each feature) */
.lessons-why-card__list {
	display: flex;
	flex-direction: column;
	gap: 8px; /* Exact 8px space between features */
	width: 100%;
	box-sizing: border-box;
}

.lessons-why-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: 14px;
	padding: 20px 24px; /* Exact padding top/bottom 20px, left/right 24px */
	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-why-pill:hover {
	background-color: #FAFCFF;
	transform: translateX(3px);
	box-shadow: 0 4px 14px rgba(0, 43, 99, 0.06);
}

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

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

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

/* Card Bottom Note (28px space between last feature & bottom description) */
.lessons-why-card__footer {
	margin: 28px 0 0 0; /* Exact 28px space above footer description */
	color: #606060;
	font-family: var(--fd-font);
	font-weight: 400;
}

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

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

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

	.lessons-why-card {
		padding: 26px;
	}

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

	.lessons-why-pill {
		padding: 18px 22px;
		gap: 18px;
	}
}

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

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

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

	.lessons-why-card {
		border-radius: 20px;
	}
}

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

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

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

	.lessons-why-lead {
		margin-bottom: 16px !important;
	}

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

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

	.lessons-why-card {
		padding: 20px 16px;
		border-radius: 16px;
	}

	.lessons-why-card__head {
		margin-bottom: 20px;
	}

	.lessons-why-card__title {
		font-size: 20px;
	}

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

	.lessons-why-card__footer {
		margin-top: 20px;
	}
}