/**
 * Fuze Play – home page sections.
 *
 * Patterns: quick-info (tiles), feature-cards, cta-book (also on Prices),
 * gallery-inside (heading row), visit-map (also on Contact).
 */

/* ------------------------------------------------------------------ *
 * Quick info tiles
 * ------------------------------------------------------------------ */
.fuze-tiles.wp-block-group {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
}

@media (min-width: 600px) {
	.fuze-tiles.wp-block-group {
		gap: var(--wp--preset--spacing--30);
	}
}

@media (min-width: 1024px) {
	.fuze-tiles.wp-block-group {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.fuze-tile {
	--fuze-tile-bg: var(--wp--preset--color--purple);
	--fuze-tile-ink: var(--wp--preset--color--white);
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.3rem;
	min-width: 0;
	padding: 1rem 1rem 1.1rem;
	background: var(--wp--preset--color--white);
	border-radius: var(--fuze-radius-lg);
	box-shadow: var(--wp--preset--shadow--soft);
	color: var(--wp--preset--color--body);
	overflow-wrap: anywhere;
}

.fuze-tile > * {
	margin: 0 !important;
}

/* Icon: coloured circle (::before) with the icon masked on top (::after). */
.fuze-tile::before {
	content: "";
	flex: none;
	width: 3rem;
	height: 3rem;
	margin-bottom: 0.45rem;
	border-radius: 50%;
	background: var(--fuze-tile-bg);
	transform: rotate(-6deg);
}

.fuze-tile::after {
	content: "";
	position: absolute;
	top: calc(1rem + 0.75rem);
	left: calc(1rem + 0.75rem);
	width: 1.5rem;
	height: 1.5rem;
	background: var(--fuze-tile-ink);
	-webkit-mask: var(--fuze-tile-icon) center / contain no-repeat;
	mask: var(--fuze-tile-icon) center / contain no-repeat;
}

/* Icon URLs are set here (relative to this file) rather than reusing fuze.css's --fuze-icon. */
.fuze-tile.fuze-icon-calendar { --fuze-tile-icon: url(../../images/icons/calendar.svg); }
.fuze-tile.fuze-icon-baby { --fuze-tile-icon: url(../../images/icons/baby.svg); }
.fuze-tile.fuze-icon-clock { --fuze-tile-icon: url(../../images/icons/clock.svg); }
.fuze-tile.fuze-icon-cup { --fuze-tile-icon: url(../../images/icons/cup.svg); }

.fuze-tile--pink {
	--fuze-tile-bg: var(--wp--preset--color--pink-strong);
}

.fuze-tile--lime {
	--fuze-tile-bg: var(--wp--preset--color--lime);
	--fuze-tile-ink: var(--wp--preset--color--navy);
}

.fuze-tile--yellow {
	--fuze-tile-bg: var(--wp--preset--color--yellow);
	--fuze-tile-ink: var(--wp--preset--color--navy);
}

/* Today's opening status: shown as the tile's bold label, not as a pill. */
.fuze-tile--today .fuze-open-today {
	gap: 0.5em;
	width: auto;
	padding: 0;
	background: transparent;
	box-shadow: none;
	align-items: baseline;
}

.fuze-tile--today .fuze-open-today__text {
	text-wrap: balance;
}

/* Status first ("Closed now", "Open now", "Opens today at 11am"), then the next change on a smaller
 * line of its own ("opens tomorrow 11am", "until 6pm"). Both may wrap inside the tile: a two-up
 * phone tile is narrower than "Opens today at 11am" on one line. */
.fuze-tile--today .fuze-open-today__sep {
	display: none;
}

.fuze-tile--today .fuze-open-today__state {
	white-space: normal;
}

.fuze-tile--today .fuze-open-today__next {
	display: block;
	margin-block-start: 0.15em;
	font-size: 0.85em;
	font-weight: 500;
	text-wrap: balance;
}

/* Two-up phone tiles are too narrow for "opens tomorrow 11am" on one line; wider tiles keep it whole. */
@media (min-width: 600px) {
	.fuze-tile--today .fuze-open-today__next {
		white-space: nowrap;
	}
}

.fuze-tile--today .fuze-open-today__dot {
	transform: translateY(-0.05em);
}

.fuze-tile__label,
.fuze-tile--today .fuze-open-today {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: clamp(1.0625rem, 0.98rem + 0.35vw, 1.25rem);
	line-height: 1.2;
	color: var(--wp--preset--color--heading);
}

.fuze-tile__sub {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
	text-wrap: pretty;
}

.fuze-tile__sub a {
	position: relative;
	color: var(--wp--preset--color--purple);
	font-weight: 700;
}

/* A 44px-tall tap area for the stand-alone tile link, without changing the tile's layout. */
.fuze-tile__sub a:only-child::after {
	content: "";
	position: absolute;
	inset: -13px -8px;
}

/* Today tile: the status dot hangs to the left, so every line of text shares one left edge
 * (from 380px; narrower two-up tiles keep the full width for the link). */
@media (min-width: 380px) {
	.fuze-tile--today > .fuze-tile__sub {
		padding-inline-start: calc(1.2 * clamp(1.0625rem, 0.98rem + 0.35vw, 1.25rem));
	}

	.fuze-tile--today:has(.is-unknown) > .fuze-tile__sub {
		padding-inline-start: 0;
	}
}

@media (min-width: 1024px) {
	.fuze-tile {
		padding: 1.25rem 1.35rem 1.35rem;
	}

	.fuze-tile::after {
		top: calc(1.25rem + 0.75rem);
		left: calc(1.35rem + 0.75rem);
	}
}

/* ------------------------------------------------------------------ *
 * Feature cards
 * ------------------------------------------------------------------ */
.fuze-features > .is-style-eyebrow {
	margin-block-end: 0;
}

.fuze-features > .is-style-brush-heading {
	margin-block-start: 0.35rem;
}

/* Section intro: the same size and distance from its heading as on Facebook news and Opening times. */
.fuze-features > .fuze-features__intro {
	max-width: 36em;
	margin-block-start: var(--wp--preset--spacing--30);
	margin-inline: auto !important;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.5;
	text-wrap: balance;
}

.fuze-feature-grid.wp-block-group {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--40);
	margin-block-start: var(--wp--preset--spacing--50);
}

@media (min-width: 600px) {
	.fuze-feature-grid.wp-block-group {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Odd card out on tablets: centre it under the first two. */
	.fuze-feature-grid.wp-block-group > :last-child:nth-child(odd) {
		grid-column: 1 / -1;
		justify-self: center;
		width: calc(50% - var(--wp--preset--spacing--40) / 2);
	}
}

@media (min-width: 1024px) {
	.fuze-feature-grid.wp-block-group {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.fuze-feature-grid.wp-block-group > :last-child:nth-child(odd) {
		grid-column: auto;
		width: auto;
		justify-self: stretch;
	}
}

.fuze-feature-grid .is-style-fuze-card {
	border-radius: var(--fuze-radius-lg);
}

.fuze-feature-grid .is-style-fuze-card .wp-block-image {
	overflow: hidden;
}

.fuze-feature-grid .is-style-fuze-card .wp-block-image img {
	transition: transform 0.6s var(--fuze-ease);
}

@media (prefers-reduced-motion: no-preference) {
	.fuze-feature-grid .is-style-fuze-card:is(:hover, :focus-within) .wp-block-image img {
		transform: scale(1.05);
	}
}

.fuze-feature-grid .fuze-card__body h3 {
	font-size: var(--wp--preset--font-size--x-large);
}

.fuze-card__more {
	flex-direction: row-reverse;
	justify-content: flex-end;
	align-items: center !important;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	color: var(--wp--preset--color--pink-ink);
}

.fuze-card__more::before {
	margin-top: 0 !important;
	transition: transform 0.25s var(--fuze-ease-spring, ease);
}

@media (prefers-reduced-motion: no-preference) {
	.fuze-card--link:is(:hover, :focus-within) .fuze-card__more::before {
		transform: translateX(5px);
	}
}

/* ------------------------------------------------------------------ *
 * Book now band (also used on the Prices page)
 * ------------------------------------------------------------------ */
.fuze-cta-book {
	text-align: center;
}

.fuze-cta-book > * {
	margin-block: 0;
}

.fuze-cta-book > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

.fuze-cta-book .is-style-burst-heading {
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 700;
}

.fuze-cta-book__line {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 500;
	text-wrap: balance;
}

.fuze-cta-book__buttons.wp-block-buttons {
	margin-block-start: var(--wp--preset--spacing--40);
	gap: 0.75rem;
}

.fuze-cta-book__phone {
	opacity: 0.95;
}

.fuze-cta-book__phone a {
	font-weight: 800;
}

/* Phones: smaller corner strokes so they stay out of the heading. */
@media (max-width: 599.98px) {
	.fuze-cta-book.fuze-brushes::before {
		width: 120px;
	}
}

@media (max-width: 479.98px) {
	.fuze-cta-book__buttons.wp-block-buttons {
		flex-direction: column;
		align-items: stretch;
	}

	.fuze-cta-book__buttons .wp-block-button,
	.fuze-cta-book__buttons .wp-block-button__link {
		width: 100%;
	}
}

/* ------------------------------------------------------------------ *
 * Inside FuZe – heading row above the photo strip
 * ------------------------------------------------------------------ */
.fuze-inside__head.wp-block-group {
	gap: var(--wp--preset--spacing--20);
	margin-block-end: var(--wp--preset--spacing--40);
}

.fuze-inside__titles > * {
	margin-block: 0;
}

.fuze-inside__titles > * + * {
	margin-block-start: 0.35rem;
}

.fuze-inside__hint {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	color: var(--wp--preset--color--purple);
}

.fuze-inside__hint::after {
	content: "";
	width: 1.2em;
	height: 1.2em;
	background: currentColor;
	-webkit-mask: url(../../images/icons/arrow.svg) center / contain no-repeat;
	mask: url(../../images/icons/arrow.svg) center / contain no-repeat;
}

@media (min-width: 1024px) {
	.fuze-inside__hint {
		display: none;
	}
}

/* ------------------------------------------------------------------ *
 * Visit us + map (also used on the Contact page)
 * ------------------------------------------------------------------ */
.fuze-visit__cols.wp-block-columns {
	gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
}

.fuze-visit__info > * {
	margin-block: 0;
}

.fuze-visit__info > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

.fuze-visit__info > .is-style-brush-heading {
	margin-block-start: 0.35rem;
	margin-block-end: var(--wp--preset--spacing--40);
}

.fuze-visit__line {
	font-weight: 700;
	color: var(--wp--preset--color--heading);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.45;
}

.fuze-visit__line + .fuze-visit__line {
	margin-block-start: 0.6rem;
}

.fuze-visit__line a {
	position: relative;
	color: var(--wp--preset--color--purple);
}

/* The phone number is the line's only link: give it a 44px-tall tap area (layout unchanged). */
.fuze-visit__line a:only-child::after {
	content: "";
	position: absolute;
	inset: -10px -8px;
}

.fuze-visit__hours {
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--30);
	border-radius: var(--fuze-radius-md);
	background: var(--wp--preset--color--cream);
}

.fuze-visit__hours:empty {
	display: none;
}

.fuze-visit__hours > * {
	margin-block: 0;
}

.fuze-visit__buttons.wp-block-buttons {
	margin-block-start: var(--wp--preset--spacing--40);
	gap: 0.75rem;
}

/* Small phones: full-width stacked buttons, matching the tagline and booking bands. */
@media (max-width: 479.98px) {
	.fuze-visit__buttons.wp-block-buttons {
		flex-direction: column;
		align-items: stretch;
	}

	.fuze-visit__buttons .wp-block-button,
	.fuze-visit__buttons .wp-block-button__link {
		width: 100%;
	}
}

.fuze-map {
	position: relative;
	margin: 0;
	line-height: 0;
	border: 6px solid var(--wp--preset--color--white);
	border-radius: var(--fuze-radius-lg);
	overflow: hidden;
	background: var(--wp--preset--color--purple-tint);
	box-shadow: 8px 8px 0 var(--wp--preset--color--lime), var(--wp--preset--shadow--soft);
}

.fuze-map iframe {
	display: block;
	width: 100%;
	height: clamp(300px, 42vw, 460px);
	border: 0;
}

/* If the map iframe is removed (e.g. content saved by a user without the
 * "unfiltered HTML" permission) keep a tidy placeholder instead of a thin line. */
.fuze-map:empty {
	min-height: clamp(260px, 36vw, 420px);
	background:
		radial-gradient(circle at 50% 46%, var(--wp--preset--color--white) 0 2.6rem, transparent 2.65rem),
		repeating-linear-gradient(45deg, transparent 0 22px, rgb(112 48 160 / 0.06) 22px 44px),
		var(--wp--preset--color--purple-tint);
}

.fuze-map:empty::before {
	content: "";
	position: absolute;
	top: 46%;
	left: 50%;
	width: 2.4rem;
	height: 2.4rem;
	transform: translate(-50%, -50%);
	background: var(--wp--preset--color--pink-strong);
	-webkit-mask: url(../../images/icons/pin.svg) center / contain no-repeat;
	mask: url(../../images/icons/pin.svg) center / contain no-repeat;
}