/**
 * Opening Times & Prices page: jump links, overview, price cards, small print and the opening
 * times section.
 * Patterns: page-prices (jump links), prices-overview, prices-cards.
 */

/* Shared: eyebrow sits tight above its heading. */
:where(.fuze-prices-overview, .fuze-prices, .fuze-opening-times) .is-style-eyebrow {
	margin-block-end: 0;
}

:where(.fuze-prices-overview, .fuze-prices, .fuze-opening-times) .is-style-eyebrow + .wp-block-heading {
	margin-block-start: 0.35rem;
}

/* ---------------------------------------------------------------- *
 * Jump links: "Opening times · Prices · Cost calculator", straight under the title
 * ---------------------------------------------------------------- */
.fuze-prices-jump .wp-block-buttons {
	gap: 0.5rem;
}

.fuze-prices-jump .wp-block-button > .wp-block-button__link {
	min-height: 44px;
	padding: 0.4em 1.05em 0.4em 0.85em;
	font-size: var(--wp--preset--font-size--small);
	gap: 0.4em;
}

/* The arrow points down the page. */
.fuze-prices-jump .wp-block-button[class*="fuze-icon-"] > .wp-block-button__link::before {
	width: 1.1em;
	height: 1.1em;
	transform: rotate(90deg);
}

/* The overview follows closely: the links belong to it, not to a band of their own. */
.wp-block-post-content > .fuze-prices-jump + .fuze-prices-overview {
	padding-top: var(--wp--preset--spacing--50) !important;
}

/* ---------------------------------------------------------------- *
 * Overview
 * ---------------------------------------------------------------- */
.fuze-prices-overview__media .wp-block-image {
	margin: 0 auto;
	max-width: 560px;
	padding: 6px 10px 12px 6px; /* room for the sticker shadow and tilt */
}

/* Phones: the text (and its call and Facebook buttons) first, the photo after it. */
@media (max-width: 781.98px) {
	.fuze-prices-overview__media {
		order: 2;
	}

	.fuze-prices-overview__media .wp-block-image {
		max-width: 460px;
	}
}

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

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

.fuze-prices-overview__text > .wp-block-heading {
	margin-block-end: var(--wp--preset--spacing--10);
}

.fuze-prices-overview__actions {
	gap: 0.6rem;
	margin-block-start: var(--wp--preset--spacing--40) !important;
}

.fuze-prices-overview__actions .wp-block-button__link {
	font-size: var(--wp--preset--font-size--small);
	padding: 0.7em 1.2em;
}

.fuze-prices-overview__actions .wp-block-button__link::before {
	width: 1.1em;
	height: 1.1em;
}

.fuze-prices-rules {
	gap: var(--wp--preset--spacing--20) !important;
	margin-block-start: var(--wp--preset--spacing--40) !important;
}

.fuze-rule {
	display: flex;
	align-items: center;
	margin: 0;
	padding: var(--wp--preset--spacing--30);
}

.fuze-rule p {
	margin: 0;
	line-height: 1.4;
	align-items: center;
}

.fuze-rule p::before {
	width: 1.8em;
	height: 1.8em;
	margin-top: 0 !important;
}

.fuze-rule strong {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	letter-spacing: 0.01em;
}

.fuze-rule--climb {
	background: color-mix(in srgb, var(--wp--preset--color--lime) 12%, var(--wp--preset--color--white));
	border-left-color: var(--wp--preset--color--lime-ink);
	--fuze-icon-color: var(--wp--preset--color--lime-ink);
}

.fuze-rule--climb strong {
	font-size: 0.94em;
}

/* ---------------------------------------------------------------- *
 * Price cards
 * ---------------------------------------------------------------- */
.wp-block-group.fuze-price-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--20);
	margin-block-start: var(--wp--preset--spacing--50);
}

@media (min-width: 640px) {
	.wp-block-group.fuze-price-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--30);
	}
}

/* Six across only once every label fits on one line ("Climbing session"), so the prices line up. */
@media (min-width: 1200px) {
	.wp-block-group.fuze-price-grid {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

.fuze-price-card {
	--fuze-accent: var(--wp--preset--color--purple);
	align-items: center;
	justify-content: flex-start;
	gap: 0.55rem;
	min-width: 0;
	padding: 1.4rem 0.75rem 1.3rem;
	text-align: center;
	border: 0 solid transparent;
	border-top: 8px solid var(--fuze-accent);
	border-radius: var(--fuze-radius-md, 14px);
	box-shadow: 0 0 0 1px rgb(15 27 61 / 0.05), var(--wp--preset--shadow--soft);
}

/* Price cards are not links, so they keep their resting border and shadow when hovered (the
 * pink border and deeper shadow of the fuze card style mean "you can click this"). Only the
 * corner blob grows, as a small playful touch. */
.fuze-price-card.is-style-fuze-card:is(:hover, :focus-within) {
	border-color: transparent;
	border-top-color: var(--fuze-accent);
	box-shadow: 0 0 0 1px rgb(15 27 61 / 0.05), var(--wp--preset--shadow--soft);
}

/* Playful accent blob tucked into the corner, clear of the label. */
.fuze-price-card::before {
	content: "";
	position: absolute;
	top: -2.1rem;
	right: -2.1rem;
	width: 4.2rem;
	height: 4.2rem;
	border-radius: 50%;
	background: var(--fuze-accent);
	opacity: 0.16;
	pointer-events: none;
	transition: transform 0.4s var(--fuze-ease-spring, ease);
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	.fuze-price-card:hover::before {
		transform: scale(1.35);
	}
}

.fuze-price-card--indigo { --fuze-accent: var(--wp--preset--color--indigo); }
.fuze-price-card--yellow { --fuze-accent: var(--wp--preset--color--yellow); }
.fuze-price-card--orange { --fuze-accent: var(--wp--preset--color--orange); }
.fuze-price-card--lime { --fuze-accent: var(--wp--preset--color--lime); }
.fuze-price-card--pink { --fuze-accent: var(--wp--preset--color--pink); }
.fuze-price-card--purple { --fuze-accent: var(--wp--preset--color--purple); }

.fuze-price-card > * {
	position: relative;
	margin: 0 !important;
}

/*
 * Cards share their row's tracks (label | price | note) through subgrid, so every price in a row
 * lines up even when one label wraps onto two lines (e.g. "Climbing session" at 1200px).
 */
@supports (grid-template-rows: subgrid) {
	.wp-block-group.fuze-price-grid > .fuze-price-card {
		display: grid;
		grid-row: span 3;
		grid-template-rows: subgrid;
		grid-template-columns: minmax(0, 1fr);
		justify-items: center;
		row-gap: 0.55rem;
	}

	.fuze-price-card > .fuze-price-card__label {
		align-self: end;
	}
}

.fuze-price-card .fuze-price-card__label {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--heading);
	text-wrap: balance;
}

.fuze-price-card .fuze-price-card__price {
	font-size: clamp(2rem, 1.5rem + 1.6vw, 2.6rem);
	color: var(--wp--preset--color--purple);
	font-variant-numeric: tabular-nums;
}

.fuze-price-card__note {
	margin-top: auto !important;
	padding: 0.3em 0.75em;
	border-radius: var(--fuze-radius-sm, 8px);
	background: color-mix(in srgb, var(--fuze-accent) 14%, var(--wp--preset--color--white));
	color: var(--wp--preset--color--heading);
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1.3;
	text-wrap: balance;
}

/* Small print */
.fuze-price-note {
	position: relative;
	margin-block-start: var(--wp--preset--spacing--50) !important;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40) var(--wp--preset--spacing--30) calc(var(--wp--preset--spacing--40) + 2.1rem);
	border-radius: var(--fuze-radius-md, 14px);
	background: color-mix(in srgb, var(--wp--preset--color--yellow) 32%, var(--wp--preset--color--white));
	border: 2px dashed color-mix(in srgb, var(--wp--preset--color--yellow) 80%, var(--wp--preset--color--orange));
	color: var(--wp--preset--color--heading);
	font-size: var(--wp--preset--font-size--small);
}

.fuze-price-note::before {
	content: "";
	position: absolute;
	top: calc(var(--wp--preset--spacing--30) + 0.1rem);
	left: var(--wp--preset--spacing--30);
	width: 1.6rem;
	height: 1.6rem;
	background: var(--wp--preset--color--pink-ink);
	-webkit-mask: url(../../images/icons/ticket.svg) center / contain no-repeat;
	mask: url(../../images/icons/ticket.svg) center / contain no-repeat;
}

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

.fuze-price-note > * + * {
	margin-block-start: 0.6rem;
}

.fuze-price-note strong {
	display: inline-block;
	padding: 0 0.35em;
	border-radius: 4px;
	background: var(--wp--preset--color--pink-strong);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	letter-spacing: 0.04em;
}

.fuze-prices__actions {
	margin-block-start: var(--wp--preset--spacing--40) !important;
}

/* ---------------------------------------------------------------- *
 * Opening times (#opening-times: the jump lands below the header through html scroll-padding)
 * ---------------------------------------------------------------- */

/* Section intro: same size and distance from its heading as the other section intros. */
.fuze-opening-times .fuze-opening-times__sub {
	margin-block-start: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.5;
	color: var(--wp--preset--color--body);
}

.fuze-opening-times > .wp-block-fuze-play-open-today {
	margin-block: var(--wp--preset--spacing--30) 0;
}

.fuze-opening-times > .fuze-hours-wrap.alignwide {
	max-width: 1040px;
	margin-block-start: var(--wp--preset--spacing--50);
}

.fuze-hours-wrap > .wp-block-template-part {
	margin: 0;
}

.fuze-opening-times .fuze-opening-times__evening {
	margin-block-start: var(--wp--preset--spacing--40);
	font-weight: 700;
	color: var(--wp--preset--color--heading);
}