/* ============================================================
   Parkwellness — Classes Section
   Mobile-first: header stacks (heading, then description), cards are
   a single column. From 900px up the header becomes a 2-column row
   (heading left, description right, vertically centered) and the
   cards become a 4-column grid.
   ============================================================ */

/* padding-block comes from the global `section` default in main.css
   now (64px desktop / 40px mobile) — not repeated here. */
.pw-classes {
	background-color: var(--color-dark-600);
}

/* -------------------------------------------------------
   Header — heading + description
   ------------------------------------------------------- */
.pw-classes-header {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-bottom: 40px;
}

@media (min-width: 900px) {
	.pw-classes-header {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 40px;
		margin-bottom: 56px;
	}
}

.pw-classes-heading {
	font-family: var(--font-heading);
	font-weight: 400;
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	line-height: 1.25;
}

.pw-classes-heading-line1,
.pw-classes-heading-line2 {
	display: block;
}

.pw-classes-heading-line1 {
	color: var(--color-cream-50);
}

.pw-classes-heading-line2 {
	color: var(--color-gold-300);
}

.pw-classes-description {
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.7;
	color: var(--color-cream-300);
	text-align: left;
	max-width: 500px;
}

@media (min-width: 900px) {
	.pw-classes-description {
		font-size: 16px;
	}
}

@media (min-width: 900px) {
	.pw-classes-description {
		text-align: right;
		flex-shrink: 0;
	}
}

/* -------------------------------------------------------
   Cards grid
   ------------------------------------------------------- */
/* Flexbox, not grid — flex-wrap + justify-content:center means a
   trailing partial row (e.g. 5 cards wrapping to 4+1, once the count
   isn't a clean multiple of however many fit per row) centers itself
   instead of sitting flush left the way an unfilled grid row would.
   Card width is fluid (flex-basis + max-width) rather than pinned to
   an exact per-breakpoint column count, so it keeps wrapping sensibly
   at any viewport width and any card count. */
.pw-classes-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 24px;
}

@media (min-width: 900px) {
	.pw-classes-grid {
		gap: 20px;
	}
}

.pw-class-card {
	flex: 1 1 260px;
	max-width: 320px;
	background-color: var(--color-dark-400);
}

/* Below the width where a second 260px+gap card could ever fit next
   to the first, the 320px cap above just leaves it looking thin and
   centered instead of using the row — let it go full width instead. */
@media (max-width: 599px) {
	.pw-class-card {
		max-width: 100%;
	}
}

.pw-class-card-image {
	aspect-ratio: 4 / 3;
}

.pw-class-card-image img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: auto; /* cancels the WP width/height attrs' implicit ratio so height:100% actually fills the aspect-ratio box above */
	object-fit: cover;
}

.pw-class-card-body {
	padding: 24px;
}

/* h3 qualifier (not just the class) — reset.css's ".pw-landing h3"
   sets margin:0 with equal-or-higher specificity (class + element vs.
   just a class); tying it here and winning on later source order is
   simpler than !important for a plain margin override. */
h3.pw-class-card-title {
	font-family: var(--font-heading);
	font-weight: 400;
	font-size: 1.375rem;
	color: var(--color-cream-50);
	margin-bottom: 7px;
}

.pw-class-card-description {
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.6;
	color: var(--color-taupe-100);
}