/**
 * Map & address (blocks/location).
 *   stacked (layout value `dark`) — Figma 178:509: lavender heading and address on
 *          white, the map full width in a 3px lavender frame (radius 24).
 *   card — Figma 174:1119: a pink card over the top of a full-width map, blush band above.
 */

.kc-location .kc-location__map iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Both Figma layouts are 1280 wide (80px margins), wider than the 1240 content column. */
.kc-location.has-global-padding {
	padding-inline: var( --kc-gutter-wide );
}

.kc-location.has-global-padding > .alignfull {
	margin-inline: calc( -1 * var( --kc-gutter-wide ) );
}

/* Static map screenshot (Site settings → Map image), linked to Google Maps directions. */
.kc-location__map-link {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
}

/* The map clips its overflow, so draw the focus ring inside the edge. */
.kc-location__map-link:focus-visible {
	outline-offset: -0.375rem;
}

.kc-location .kc-location__map-img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.kc-location__map-pill {
	position: absolute;
	right: 1.5rem;
	bottom: 1.5rem;
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding: 0.625rem 1.25rem;
	border-radius: var( --kc-radius-pill );
	background: var( --kc-white );
	box-shadow: 0 4px 12px rgba( 49, 51, 117, 0.18 );
	color: var( --kc-dark-purple );
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.43;
	transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

/* Not in the design: with a mouse the pill only appears on hover / keyboard focus;
   touch screens (no hover) always show it so the map reads as a link. */
@media ( hover: hover ) {
	.kc-location__map-pill {
		opacity: 0;
	}

	.kc-location__map-link:is( :hover, :focus-visible ) .kc-location__map-pill {
		opacity: 1;
	}
}

/* The card layout's map runs into the footer, whose wave rises over its bottom edge. */
.kc-location--card .kc-location__map-pill {
	bottom: calc( var( --kc-wave-h ) + 1.5rem );
}

.kc-location__map-link:hover .kc-location__map-pill,
.kc-location__map-link:focus-visible .kc-location__map-pill {
	background: var( --kc-dark-purple );
	color: var( --kc-white );
}

/* ----------------------------------------------------------- stacked ---- */

/* Figma 178:509: the heading 168 below the band's top, the map ending 148 above the
   gallery's wave. */
.kc-location--stacked {
	padding-block: clamp( 3.5rem, 11.67vw, 10.5rem ) clamp( 3.5rem, 10.28vw, 9.25rem );
	color: var( --kc-lavender );
}

/* Wave edges (theme.css): a top wave on the next section rises into this one, and a
   bottom wave on the previous one hangs into it, so make room for the wave. */
.kc-location--stacked:not( .kc-wave-bottom ):has( + .kc-wave-top ) {
	padding-bottom: calc( clamp( 3.5rem, 10.28vw, 9.25rem ) + var( --kc-wave-h ) );
}

.kc-wave-bottom + .kc-location--stacked {
	padding-top: calc( clamp( 3.5rem, 11.67vw, 10.5rem ) + var( --kc-wave-h ) );
}

.kc-location--stacked .kc-location__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 2.5rem;
}

.kc-location--stacked .kc-location__head > * {
	margin-block: 0;
}

.kc-location--stacked .kc-location__heading {
	color: var( --kc-lavender );
	font-size: clamp( 2rem, 3.334vw, 3rem );
	line-height: 1;
}

.kc-location--stacked .kc-location__address {
	font-family: var( --kc-font-display );
	font-size: clamp( 1.125rem, 1.67vw, 1.5rem );
	font-weight: 700;
	line-height: 1;
	text-align: right;
}

.kc-location--stacked .kc-location__map {
	aspect-ratio: 1283 / 631;
	margin-top: clamp( 2rem, 7.15vw, 6.4375rem );
	overflow: hidden;
	border: 3px solid var( --kc-lavender );
	border-radius: var( --kc-radius-card );
}

.kc-location--stacked .kc-location__buttons {
	margin-top: 2rem;
}

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

.kc-location--card {
	padding-top: clamp( 3rem, 10.2vw, 9.2rem );
	padding-bottom: 0;
}

.kc-location--card.kc-location--no-map {
	padding-bottom: var( --kc-section-space );
}

.kc-location .kc-location__card {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 24.875rem );
	align-items: start;
	gap: clamp( 2rem, 4.51vw, 4.0625rem ) 2.5rem;
	margin-bottom: calc( -1 * clamp( 5rem, 18.6vw, 16.75rem ) );
	padding: 3.5625rem 2.9375rem 3.8125rem 5.0625rem;
	border-radius: var( --kc-radius-card );
	background: var( --kc-pink );
	color: var( --kc-white );
}

.kc-location .kc-location__card > * {
	margin-block: 0;
}

.kc-location--no-map .kc-location__card {
	margin-bottom: 0;
}

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

/* Figma 174:1121 (1280 × 520): the heading centred on the whole card, the details
   170px below the card's top, and the logo (398 × 322) 44px below the card's top padding, level
   with the heading, in the right-hand column. */
.kc-location .kc-location__card .kc-location__heading {
	grid-row: 1;
	grid-column: 1 / -1;
	/* Centred on the card, not on its uneven (81 / 47) padding box. */
	margin-left: -2.125rem;
	color: var( --kc-dark-purple );
	text-align: center;
	/* The site's section heading size (Figma draws this one 46/54). */
	font-size: clamp( 2rem, 3.334vw, 3rem );
	line-height: 1;
}

.kc-location .kc-location__card .kc-location__body {
	grid-row: 2;
	grid-column: 1;
}

/* Figma 174:1121: a 374px address column, the hours 119px to its right. */
.kc-location .kc-location__details {
	display: grid;
	grid-template-columns: minmax( 0, 23.375rem ) minmax( 0, 1fr );
	gap: 1.5rem clamp( 1.5rem, 8.27vw, 7.4375rem );
	font-size: clamp( 1rem, 1.39vw, 1.25rem );
	line-height: 1.5;
}

.kc-location__details p {
	margin: 0;
}

.kc-location__details .kc-location__line + .kc-location__line {
	margin-top: 1.5em;
}

.kc-location__details .kc-location__label + .kc-location__line,
.kc-location__details .kc-location__line--contact + .kc-location__line--contact {
	margin-top: 0;
}

.kc-location__details a {
	/* A 44px tall hit area without changing the line height. */
	display: inline-block;
	margin-block: -0.625rem;
	padding-block: 0.625rem;
	color: inherit;
	text-decoration: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.2em;
	transition: text-decoration-color 0.2s ease;
}

.kc-location__details a:is( :hover, :focus-visible ) {
	text-decoration-color: currentColor;
}

/* The theme's pink focus ring would vanish on the pink card. */
.kc-location__details a:focus-visible {
	outline-color: var( --kc-dark-purple );
}

.kc-location .kc-location__body .kc-location__note {
	margin: 1.875rem 0 0;
	font-size: 0.875rem;
	line-height: 2;
}

/* Figma "Button Book a Party": 190 × 50. */
.kc-location .kc-location__card .kc-location__buttons {
	margin-top: 1.9375rem;
}

.kc-location .kc-location__card .wp-block-button__link {
	min-width: 11.875rem;
	min-height: 3.125rem;
}

.kc-location .kc-location__card .kc-location__brand {
	grid-row: 1 / span 2;
	grid-column: 2;
	margin-top: 2.75rem;
	aspect-ratio: 398 / 322;
	overflow: hidden;
}

.kc-location__logo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Figma crops the square logo 18px from its top (and more from the bottom). */
	object-position: 50% 23.7%;
}

.kc-location .kc-location__map-band {
	position: relative;
	margin-top: 0;
	border-top: 3px solid var( --kc-pink );
}

/* The map runs down to the footer, whose wave rises over its bottom 100px (Figma: the
   map's visible height is 1012 at 1440, including the 3px pink top edge). */
.kc-location__map-band .kc-location__map {
	height: clamp( 26.25rem, 70.07vw, 63.0625rem );
	overflow: hidden;
}

/* Figma fills a 1952 × 1099 frame centred on the page with the map (cover), so at 1440
   the middle of it shows. Same framing here, scaled with the viewport. */
@media ( min-width: 782px ) {
	.kc-location__map-band .kc-location__map-img {
		width: 135.56%;
		height: auto;
		margin: -4.375% 0 0 -17.78%;
		object-fit: fill;
	}
}

@media ( max-width: 1100px ) {
	.kc-location .kc-location__details {
		grid-template-columns: repeat( 2, auto );
		justify-content: start;
		column-gap: 2.5rem;
	}
}

@media ( max-width: 1024px ) {
	.kc-location .kc-location__card {
		grid-template-columns: minmax( 0, 1fr ) minmax( 0, 15rem );
		padding: 3rem 2.5rem;
	}

	.kc-location .kc-location__card .kc-location__heading {
		margin-left: 0;
	}
}

@media ( max-width: 781px ) {
	.kc-location__map-pill {
		right: 1rem;
		bottom: 1rem;
	}

	.kc-location--card .kc-location__map-pill {
		bottom: calc( var( --kc-wave-h ) + 1rem );
	}

	.kc-location--stacked .kc-location__head {
		flex-direction: column;
		align-items: flex-start;
	}

	.kc-location--stacked .kc-location__address {
		text-align: left;
	}

	.kc-location--stacked .kc-location__map {
		aspect-ratio: 4 / 5;
	}

	.kc-location .kc-location__card {
		grid-template-columns: minmax( 0, 1fr );
		margin-bottom: -5rem;
		padding: 2.25rem 1.5rem;
	}

	.kc-location .kc-location__details {
		grid-template-columns: minmax( 0, 1fr );
	}

	.kc-location .kc-location__card .kc-location__brand {
		grid-row: 2;
		grid-column: 1;
		width: min( 15rem, 70% );
		margin: 0 auto;
	}

	.kc-location .kc-location__card .kc-location__body {
		grid-row: 3;
	}

	.kc-location__map-band .kc-location__map {
		height: 32.5rem;
	}
}