/**
 * Party packages section (blocks/party-cards). Figma: Home 178:491, Pricing 171:805 and
 * Parties & Events 228:273, all the same: lavender heading centred, two white cards with
 * the bullet list, and the "Explore More →" pill centred under them.
 */

.kc-party-cards {
	--kc-party-gap: 1.5rem;
	--kc-party-cards-top: clamp( 3.5rem, 8.681vw, 7.8125rem );
	--kc-party-cards-bottom: clamp( 3.5rem, 7.153vw, 6.4375rem );

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

/* Home's grid (Figma 178:491) everywhere: 1280 wide on 80px gutters, cards 411 wide and
   24 apart. (Pricing's 390 / 36 grid is normalised to it.) */
.kc-party-cards.has-global-padding {
	padding-inline: min( var( --kc-gutter-wide ), var( --kc-gutter ) );
}

/* ---------------------------------------------------------- header ---- */

.kc-party-cards .kc-party-cards__header {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
	max-width: 80rem;
}

.kc-party-cards--centred .kc-party-cards__header {
	justify-content: center;
	text-align: center;
}

.kc-party-cards .kc-party-cards__intro-wrap {
	flex: 1 1 30rem;
	max-width: 56.25rem;
	margin: 0;
}

.kc-party-cards .kc-party-cards__intro-wrap > * {
	margin-block: 0;
}

.kc-party-cards .kc-party-cards__heading {
	font-size: clamp( 2rem, 3.334vw, 3rem );
	line-height: 1;
}

/* The lavender "Parties and Events" heading (178:491, 171:805, 228:273). */
.kc-party-cards--inclusions .kc-party-cards__heading {
	color: var( --kc-lavender );
}

.kc-party-cards .kc-party-cards__intro {
	margin-top: 0.75rem;
	font-size: clamp( 1rem, 1.25vw, 1.125rem );
	line-height: 1.56;
}

.kc-party-cards .kc-party-cards__more,
.kc-party-cards__bottom .is-style-lavender .wp-block-button__link {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 0.75rem;
	box-sizing: border-box;
	min-height: 3rem;
	margin: 0;
	padding: 0.75rem 1.5rem;
	border-radius: 2rem;
	background: var( --kc-lavender );
	color: var( --kc-white );
	font-family: var( --kc-font-display );
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.43;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.kc-party-cards__more svg {
	flex: none;
	width: 1.5rem;
	height: 1.5rem;
}

.kc-party-cards .kc-party-cards__more:is( :hover, :focus-visible ),
.kc-party-cards__bottom .is-style-lavender .wp-block-button__link:is( :hover, :focus-visible ) {
	background: var( --kc-dark-purple );
	color: var( --kc-white );
}

.kc-party-cards__more svg {
	transition: transform 0.2s ease;
}

.kc-party-cards .kc-party-cards__more:is( :hover, :focus-visible ) svg {
	transform: translateX( 0.1875rem );
}

@media ( prefers-reduced-motion: reduce ) {
	.kc-party-cards .kc-party-cards__more,
	.kc-party-cards__more svg {
		transition: none;
	}
}

/* ------------------------------------------------------------ grid ---- */

.kc-party-cards .kc-party-cards__grid {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var( --kc-party-gap );
	max-width: 80rem;
	margin-top: clamp( 2.5rem, 3.958vw, 3.5625rem );
}

.kc-party-cards--summary .kc-party-cards__grid {
	align-items: stretch;
}

/* Two packages: a centred pair of slightly wider cards, equal height so the buttons
   line up. */
.kc-party-cards .kc-party-cards__grid:not( :has( > :nth-child( 3 ) ) ) {
	align-items: stretch;
}

@media ( min-width: 641px ) {
	.kc-party-cards__grid:not( :has( > :nth-child( 3 ) ) ) > .kc-party-card {
		flex-basis: calc( ( 100% - var( --kc-party-gap ) ) / 2 );
		max-width: 25.6875rem;
	}
}

/* ------------------------------------------------------------ card ---- */

/* One card chrome for both displays (Home 171:902): 14 padding (the 1px border sits
   inside it, as Figma's inside stroke does), 12-radius photo, text 16 below it, and a
   50-tall full-width button in the site's standard pill type (14px Poppins 500). On a coloured band the white card needs no border. */

.kc-party-card {
	display: flex;
	flex: 0 1 calc( ( 100% - 2 * var( --kc-party-gap ) ) / 3 );
	flex-direction: column;
	min-width: 0;
	margin: 0 !important;
	padding: calc( 0.875rem - 1px );
	border: 1px solid color-mix( in srgb, var( --kc-black ) 18%, transparent );
	border-radius: var( --kc-radius-card );
	background: var( --kc-white );
	color: var( --kc-dark-purple );
}

.kc-party-cards.has-background:not( .has-kc-white-background-color ) .kc-party-card {
	border-color: transparent;
}

.kc-party-card.is-highlight {
	border-color: transparent;
	background: var( --kc-lavender );
	color: var( --kc-white );
}

.kc-party-card .kc-party-card__image {
	margin: 0;
}

.kc-party-card .kc-party-card__image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 383 / 387;
	object-fit: cover;
	border-radius: 0.75rem;
}

.kc-party-cards--summary .kc-party-card__image img {
	aspect-ratio: 358 / 255;
}

.kc-party-card .kc-party-card__body {
	margin: 1rem 0 0;
	padding-inline: 0.25rem;
}

.kc-party-card .kc-party-card__body > * {
	margin-block: 0;
}

.kc-party-card .kc-party-card__title {
	color: inherit;
	font-size: 1.5rem;
	line-height: 1.0834;	text-wrap: balance;
}

/* The price: a second line in the title's type (171:805: "$45pp" under the name), in
   dark purple on both card colours (white on the lavender card would be 2.3:1). */
.kc-party-card .kc-party-card__price {
	color: var( --kc-dark-purple );
	font-family: var( --kc-font-display );
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.0834;	text-wrap: balance;
}

.kc-party-card .kc-party-card__guests {
	margin-top: 0.9375rem;
	color: var( --kc-purple );
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.57;
}

/* Figma sets the highlighted card's text in white, which is 2.3:1 on lavender; the
   small print is dark purple instead (5:1). The title stays white. */
.kc-party-card.is-highlight .kc-party-card__body {
	color: var( --kc-dark-purple );
}

.kc-party-card.is-highlight .kc-party-card__title {
	color: var( --kc-white );
}

.kc-party-card.is-highlight .kc-party-card__guests {
	color: var( --kc-dark-purple );
}

.kc-party-card .kc-party-card__text {
	margin-top: 1.25rem;
	font-size: 1rem;
	line-height: 1.625;
}

.kc-party-card .kc-party-card__list {
	margin-top: 0.75rem;
	padding-left: 1.3125rem;
	font-size: 0.875rem;
	line-height: 1.43;
	list-style: disc;
}

.kc-party-card .kc-party-card__note {
	margin-top: 0.75rem;
	font-size: 0.875rem;
	font-style: italic;
	line-height: 1.43;
}

.kc-party-card .kc-party-card__buttons {
	margin: auto 0 0;
	padding-top: 1rem;
}

/* The highlighted card spaces its image, text and button 12 apart (Figma 171:910). */
.kc-party-cards--inclusions .kc-party-card.is-highlight .kc-party-card__body {
	margin-top: 0.75rem;
}

.kc-party-cards--inclusions .kc-party-card.is-highlight .kc-party-card__buttons {
	padding-top: 0.75rem;
}

/* The summary text is short, so keep the button clear of it (Pricing 162:210). */
.kc-party-cards--summary .kc-party-card__buttons {
	padding-top: 2.5rem;
}

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

.kc-party-card__buttons .wp-block-button__link {
	width: 100%;
	min-height: 3.125rem;
}

/* Under the cards, 40 below them (171:805): the Explore More pill, or on Parties &
   Events the Book Your Party (lavender) and Sign the Waiver pills, in the pill's
   display type so the row reads as one. */
.kc-party-cards .kc-party-cards__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	max-width: 80rem;
	margin-top: 2.5rem;
}

.kc-party-cards .kc-party-cards__actions > * {
	margin: 0;
}

.kc-party-cards .kc-party-cards__bottom {
	justify-content: center;
	gap: 1rem;
}

.kc-party-cards__bottom .wp-block-button__link {
	font-family: var( --kc-font-display );
	font-weight: 700;
}

/* A white pill on the white band (Sign the Waiver) is drawn as an outline pill. */
.kc-party-cards:is( :not( .has-background ), .has-kc-white-background-color ) .kc-party-cards__bottom .is-style-white .wp-block-button__link {
	box-shadow: inset 0 0 0 2px var( --kc-dark-purple );
	color: var( --kc-dark-purple );
}

/* -------------------------------------------------------- responsive ---- */

@media ( max-width: 960px ) {
	.kc-party-card {
		flex-basis: calc( ( 100% - var( --kc-party-gap ) ) / 2 );
	}

	.kc-party-cards .kc-party-cards__grid {
		align-items: stretch;
	}
}

@media ( max-width: 640px ) {
	.kc-party-cards {
		--kc-party-gap: 1.5rem;
	}

	.kc-party-card {
		flex-basis: 100%;
		max-width: 28.75rem;
	}

	.kc-party-card .kc-party-card__image img {
		aspect-ratio: 4 / 3;
	}
}

/* Spacing (Figma 1440, Home's values on every page): 125 above the content, 103
   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-party-cards:not( .kc-wave-bottom ):is( :has( + .kc-wave-top ), :last-child ) {
	padding-bottom: calc( var( --kc-party-cards-bottom ) + var( --kc-wave-h ) );
}

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