/**
 * Session passes section (blocks/passes). Figma: Home 178:486, Pricing 228:379 (both cyan).
 */

.kc-passes {
	--kc-passes-top: clamp( 3rem, 4.306vw, 3.875rem );
	--kc-passes-bottom: clamp( 3.5rem, 4.931vw, 4.4375rem );

	padding-block: var( --kc-passes-top ) var( --kc-passes-bottom );
}

.kc-passes .kc-passes__header {
	max-width: 40rem;
	text-align: center;
}

.kc-passes .kc-passes__heading {
	margin: 0;
	font-size: clamp( 2rem, 3.334vw, 3rem );
	line-height: 1;
}

.kc-passes .kc-passes__intro {
	margin: 0.75rem 0 0;
	font-size: clamp( 1.0625rem, 1.67vw, 1.5rem );
	line-height: 1.33;
	letter-spacing: -0.02em;
}

/* The cards and the Adult Entry card share one column: as wide as two cards and their
   gap (864 at 1440), or three when there are three passes. It is a size container so
   the cards stack, full width, when two no longer fit side by side. */
.kc-passes .kc-passes__body {
	--kc-passes-gap: 2.5rem;

	container-type: inline-size;
	max-width: calc( 2 * 25.75rem + var( --kc-passes-gap ) );
	margin-top: 2rem;
}

.kc-passes .kc-passes__body:has( .kc-passes__card:nth-child( 3 ) ) {
	max-width: calc( 3 * 25.75rem + 2 * var( --kc-passes-gap ) );
}

.kc-passes .kc-passes__cards {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var( --kc-passes-gap );
	margin: 0;
}

/* Lavender shell (Figma 228:342): 24 padding, panels and the Book Now pill 20 apart. */
.kc-passes .kc-passes__card {
	display: flex;
	flex: 1 1 18rem;
	flex-direction: column;
	max-width: 25.75rem;
	gap: 1.25rem;
	min-width: 0;
	margin: 0;
	padding: 1.5rem;
	border-radius: var( --kc-radius-card );
	background: var( --kc-lavender );
	box-shadow: var( --kc-shadow-card );
}

/* White panels. The last one grows so the Book Now pills line up when a pass name
   wraps or one pass has more age groups. */
.kc-passes .kc-passes__inner {
	margin: 0;
	padding: 1.5rem;
	border-radius: var( --kc-radius-inner );
	background: var( --kc-white );
	color: var( --kc-black );
}

.kc-passes .kc-passes__inner:nth-last-child( 1 of .kc-passes__inner ) {
	flex: 1 1 auto;
}

.kc-passes .kc-passes__inner > * {
	margin-block: 0;
}

.kc-passes .kc-passes__name {
	color: var( --kc-black );
	font-size: 1.5rem;
	line-height: 1.33;
}

.kc-passes .kc-passes__prefix,
.kc-passes .kc-passes__price {
	font-family: var( --kc-font-display );
	font-weight: 700;
}

.kc-passes .kc-passes__prefix {
	margin-top: 1.25rem;
	font-size: 1.25rem;
	line-height: 1.2;
}

.kc-passes .kc-passes__price {
	margin-top: 0.25rem;
	font-size: clamp( 3rem, 4.45vw, 4rem );
	line-height: 1;
	overflow-wrap: anywhere;
}

/* Rates by age (show_rates, Figma 228:349): plain lines in the display type, 24/32,
   with a blank line between age groups. */
.kc-passes .kc-passes__rate-list {
	margin: 0;
	font-family: var( --kc-font-display );
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.33;
}

.kc-passes__rate + .kc-passes__rate {
	margin-top: 2rem;
}

.kc-passes__rate dt,
.kc-passes__rate dd {
	margin: 0;
	font-weight: inherit;
}

/* A price never breaks across lines; "Weekdays" / "$22.50" may on a narrow card. */
.kc-passes__amount {
	white-space: nowrap;
}

/* Adult Entry (show_adult, Figma 228:312): the same shell at the full column width,
   35 below the pass cards. */
.kc-passes .kc-passes__adult {
	max-width: none;
	margin-top: 2.1875rem;
}

.kc-passes .kc-passes__adult-text {
	margin-top: 0.5rem;
	font-family: var( --kc-font-display );
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.25;
}

.kc-passes .kc-passes__adult-text + .kc-passes__adult-text {
	margin-top: 0;
}

/* Figma sets the small print at 13px; 14 is the site's minimum. */
.kc-passes .kc-passes__adult-note {
	margin-top: 1rem;
	font-family: var( --kc-font-display );
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.3;
	text-wrap: pretty;
}

.kc-passes .kc-passes__adult-text a,
.kc-passes .kc-passes__adult-note a {
	color: inherit;
}

.kc-passes .kc-passes__buttons {
	margin: 0;
}

.kc-passes__buttons .wp-block-button {
	width: 100%;
}

.kc-passes__buttons .wp-block-button__link {
	width: 100%;
	min-height: 3.125rem;
	padding-block: 0.75rem;
	font-family: var( --kc-font-display );
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.44;
}

/* Two cards no longer fit side by side (18rem each + the gap): one column, every card
   the full width, so the pass cards and the Adult Entry card line up. */
@container ( max-width: 38.49rem ) {
	.kc-passes .kc-passes__card {
		flex-basis: 100%;
		max-width: none;
	}
}

@media ( max-width: 781px ) {
	.kc-passes .kc-passes__body {
		--kc-passes-gap: 1.5rem;
	}

	.kc-passes .kc-passes__adult {
		margin-top: var( --kc-passes-gap );
	}
}

@media ( max-width: 640px ) {
	.kc-passes .kc-passes__card {
		padding: 1rem;
	}

	.kc-passes .kc-passes__inner {
		padding: 1.25rem 1rem;
	}

	.kc-passes .kc-passes__rate-list {
		font-size: 1.375rem;
	}

	.kc-passes .kc-passes__adult-text {
		font-size: 1.125rem;
	}
}


/* Spacing (Figma 1440, Home's values on every page): 62 above the content, 71
   below it to the next wave's crest. A wave rising into the bottom of this band (the
   next section's top wave, or the footer's after the last section) or hanging into its
   top (the previous section's bottom wave) adds its own height. */
.kc-passes:not( .kc-wave-bottom ):is( :has( + .kc-wave-top ), :last-child ) {
	padding-bottom: calc( var( --kc-passes-bottom ) + var( --kc-wave-h ) );
}

.kc-wave-bottom + .kc-passes {
	padding-top: calc( var( --kc-passes-top ) + var( --kc-wave-h ) );
}