/*
 * BlitzBooking - homepage.
 * Everything is scoped under .bbs-home so it cannot collide with the theme.
 * Indigo as the stage, warm paper as the field, amber as the signal.
 * Mint means one thing only: this slot is free.
 */

/* Tokens now live in bbs-tokens.css, which is loaded on every front-end view so
   the header, footer and shop can use them too. This file depends on that handle. */

.bbs-home {
	color: var(--bbs-text);
	background: var(--bbs-paper);
	font-family: var(--bbs-body);
}

.bbs-home *,
.bbs-home *::before,
.bbs-home *::after {
	box-sizing: border-box;
}

/*
 * Block themes wrap page content in vertical spacing meant for articles: a margin on
 * <main>, padding on the content group, a gap before the footer, plus the page title.
 * On a full-bleed homepage that adds up to a broad white band above the hero and a
 * second one below the closing section. Measured on Twenty Twenty-Five: 158px top,
 * 67px bottom. All of it is removed here - this file only loads on the page carrying
 * the shortcode, and the body class narrows it further.
 */
body.bbs-home-page .wp-block-post-title,
body.bbs-home-page .entry-title,
body.bbs-home-page .woocommerce-breadcrumb {
	display: none !important;
}

body.bbs-home-page main {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

body.bbs-home-page main > .wp-block-group {
	padding-block-start: 0 !important;
	padding-block-end: 0 !important;
}

body.bbs-home-page .wp-block-post-content {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

body.bbs-home-page .wp-site-blocks > footer {
	margin-block-start: 0 !important;
}

.bbs-home__wrap {
	width: 100%;
	max-width: var(--bbs-maxw);
	margin-inline: auto;
	padding-inline: 24px;
}

.bbs-home h1,
.bbs-home h2,
.bbs-home h3 {
	font-family: var(--bbs-display);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.02em;
	text-wrap: balance;
	margin: 0;
	color: inherit;
}

.bbs-home h1 { font-size: clamp(2.3rem, 5vw, 3.8rem); }
.bbs-home h2 { font-size: clamp(1.8rem, 3.3vw, 2.5rem); }
.bbs-home h3 { font-size: 1.16rem; font-weight: 700; letter-spacing: -0.01em; }

.bbs-home p { margin: 0; line-height: 1.65; }

.bbs-home__eyebrow {
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bbs-amber-deep);
}

/* ---------- buttons ---------- */

.bbs-home .bbs-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-size: 1rem;
	font-weight: 600;
	padding: 13px 24px;
	border-radius: 999px;
	border: 1px solid transparent;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.bbs-home .bbs-btn--primary {
	background: var(--bbs-amber);
	border-color: var(--bbs-amber);
	color: #201704;
}

.bbs-home .bbs-btn--primary:hover {
	background: #ffc154;
	border-color: #ffc154;
	color: #201704;
}

.bbs-home .bbs-btn--ghost {
	background: transparent;
	color: var(--bbs-on-ink);
	border-color: var(--bbs-ink-line);
}

.bbs-home .bbs-btn--ghost:hover { border-color: var(--bbs-on-ink-dim); }

.bbs-home .bbs-btn--quiet {
	background: transparent;
	color: var(--bbs-text);
	border-color: var(--bbs-rule);
}

.bbs-home .bbs-btn--quiet:hover { border-color: var(--bbs-ink); }

.bbs-home .bbs-btn--small { padding: 9px 18px; font-size: 0.92rem; }

/* Focus lives in bbs-tokens.css - one ring, per-ground colour, no radius override. */

/* ---------- hero ---------- */

.bbs-hero {
	background: var(--bbs-ink);
	color: var(--bbs-on-ink);
	padding-block: clamp(52px, 7vw, 88px);
}

.bbs-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: clamp(34px, 5vw, 60px);
	align-items: center;
}

@media (max-width: 900px) {
	.bbs-hero__grid { grid-template-columns: minmax(0, 1fr); }
}

.bbs-hero__copy {
	display: flex;
	flex-direction: column;
	gap: 20px;
	align-items: flex-start;
}

.bbs-hero h1 { color: #ffffff; }
.bbs-hero h1 em { font-style: normal; color: var(--bbs-amber); }

.bbs-hero__lead {
	font-size: 1.1rem;
	color: var(--bbs-on-ink-dim);
	max-width: 46ch;
}

.bbs-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }

.bbs-hero__note {
	font-size: 0.88rem;
	color: var(--bbs-on-ink-dim);
	display: flex;
	align-items: center;
	gap: 8px;
}

.bbs-home .bbs-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--bbs-mint);
	flex: none;
}

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

.bbs-booker {
	background: var(--bbs-surface);
	color: var(--bbs-text);
	border-radius: 20px;
	padding: 22px;
	box-shadow: 0 24px 60px rgba(8, 8, 30, 0.34);
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.bbs-booker__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	border-bottom: 1px solid var(--bbs-rule);
	padding-bottom: 14px;
}

.bbs-booker__title { font-family: var(--bbs-display); font-weight: 700; font-size: 1.05rem; }
.bbs-booker__meta { font-family: var(--bbs-mono); font-size: 0.82rem; color: var(--bbs-muted); }

.bbs-home .bbs-days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }

.bbs-home .bbs-day {
	border: 1px solid var(--bbs-rule);
	border-radius: 11px;
	padding: 9px 4px;
	text-align: center;
	font-family: var(--bbs-mono);
	font-size: 0.76rem;
	color: var(--bbs-muted);
	text-decoration: none;
	display: block;
}

.bbs-home .bbs-day strong {
	display: block;
	font-family: var(--bbs-display);
	font-size: 1.14rem;
	font-weight: 700;
	color: var(--bbs-text);
	letter-spacing: -0.01em;
}

.bbs-home .bbs-day--active { background: var(--bbs-ink); border-color: var(--bbs-ink); color: var(--bbs-on-ink-dim); }
.bbs-home .bbs-day--active strong { color: #ffffff; }

.bbs-home .bbs-slots { display: flex; flex-wrap: wrap; gap: 8px; }

.bbs-home .bbs-slot {
	font-family: var(--bbs-mono);
	font-size: 0.86rem;
	padding: 9px 13px;
	border-radius: 9px;
	border: 1px solid var(--bbs-rule);
	background: var(--bbs-surface);
	color: var(--bbs-text);
	text-decoration: none;
	display: inline-block;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.bbs-home .bbs-slot:hover { border-color: var(--bbs-mint); background: var(--bbs-mint-soft); color: var(--bbs-text); }

.bbs-home .bbs-slot--taken {
	color: var(--bbs-muted);
	text-decoration: line-through;
	background: var(--bbs-surface-2);
	border-color: transparent;
}

.bbs-home .bbs-slot--taken:hover { background: var(--bbs-surface-2); border-color: transparent; }

.bbs-home .bbs-slot--first { background: var(--bbs-mint); border-color: var(--bbs-mint); color: #04241a; font-weight: 600; }
.bbs-home .bbs-slot--first:hover { background: var(--bbs-mint); border-color: var(--bbs-mint); color: #04241a; }

.bbs-booker__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	border-top: 1px solid var(--bbs-rule);
	padding-top: 16px;
	flex-wrap: wrap;
}

/* The fine print is its own class. It used to be a descendant selector on span,
   which also caught WooCommerce's own price wrappers - get_price_html() returns
   nested spans, so the designed 1.45rem/800 treatment never rendered and the
   euro symbol dropped onto its own line. */
.bbs-home .bbs-price {
	font-family: var(--bbs-display);
	font-weight: 800;
	font-size: 1.45rem;
	line-height: 1.15;
	letter-spacing: -0.02em;
}

.bbs-home .bbs-price .woocommerce-Price-amount,
.bbs-home .bbs-price bdi,
.bbs-home .bbs-price ins {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
	text-decoration: none;
}

.bbs-home .bbs-price del { opacity: 0.55; font-weight: 500; }

.bbs-price__note {
	display: block;
	font-size: 0.76rem;
	font-weight: 400;
	color: var(--bbs-muted);
	letter-spacing: 0;
	font-family: var(--bbs-body);
	line-height: 1.4;
}

.bbs-booker__empty { font-size: 0.95rem; color: var(--bbs-muted); }
.bbs-booker__lead { font-family: var(--bbs-display); font-weight: 700; font-size: 1.05rem; }

.bbs-booker__figure {
	display: block;
	border-radius: 12px;
	overflow: hidden;
	background: var(--bbs-surface-2);
}

.bbs-booker__figure img { display: block; width: 100%; height: auto; }

/* ---------- facts ---------- */

.bbs-facts { background: var(--bbs-ink-soft); color: var(--bbs-on-ink); border-top: 1px solid var(--bbs-ink-line); }

.bbs-facts__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	background: var(--bbs-ink-line);
	margin: 0;
}

@media (max-width: 720px) {
	.bbs-facts__grid { grid-template-columns: minmax(0, 1fr); }
}

.bbs-fact { background: var(--bbs-ink-soft); padding: 22px 26px; display: flex; flex-direction: column; gap: 4px; }
.bbs-fact dt { font-family: var(--bbs-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bbs-amber); }
.bbs-fact dd { margin: 0; font-size: 0.96rem; color: var(--bbs-on-ink-dim); }

/* ---------- sections ---------- */

.bbs-section { padding-block: clamp(52px, 6.5vw, 84px); }
.bbs-section--tinted { background: var(--bbs-surface-2); }

.bbs-section__head { display: flex; flex-direction: column; gap: 12px; max-width: 58ch; margin-bottom: 38px; }
.bbs-section__head p { color: var(--bbs-muted); font-size: 1.04rem; }

.bbs-section__head--row {
	max-width: none;
	flex-direction: row;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}

.bbs-section__head--row > div { display: flex; flex-direction: column; gap: 12px; max-width: 52ch; }

.bbs-empty { color: var(--bbs-muted); }

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

/* min() on every track minimum: a bare 248px/280px minimum is wider than the
   container at 320px and pushes the whole document into horizontal scroll.
   auto-fit rather than auto-fill so three products fill the row instead of
   leaving a hole the eye reads as a failed load. */
.bbs-products {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 248px), 1fr));
	gap: 22px;
}

/* With only a couple of products, wide tracks look better than lonely narrow ones. */
.bbs-products--few {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 360px));
}

.bbs-home .bbs-card {
	display: flex;
	flex-direction: column;
	background: var(--bbs-surface);
	border: 1px solid var(--bbs-rule);
	border-radius: 14px;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: border-color 0.15s ease, transform 0.15s ease;
}

.bbs-home .bbs-card:hover { border-color: var(--bbs-ink); transform: translateY(-2px); }

.bbs-card__thumb {
	display: block;
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--bbs-surface-2);
}

.bbs-card__thumb img,
.bbs-card__thumb .bbs-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.bbs-card__thumb--blank {
	background: linear-gradient(140deg, var(--bbs-ink-soft), var(--bbs-ink));
	display: grid;
	place-items: center;
}

/* Stands in for a missing product image so the tile reads as designed, not broken. */
.bbs-card__initial {
	font-family: var(--bbs-display);
	font-weight: 800;
	font-size: 3.2rem;
	line-height: 1;
	color: rgba(255, 255, 255, 0.22);
	letter-spacing: -0.03em;
	user-select: none;
}

.bbs-card__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	font-family: var(--bbs-mono);
	font-size: 0.66rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	padding: 5px 9px;
	border-radius: 999px;
	background: var(--bbs-mint);
	color: #04241a;
	font-weight: 600;
}

.bbs-card__badge--file { background: rgba(255, 255, 255, 0.94); color: var(--bbs-ink); }

.bbs-card__body {
	padding: 16px 18px 18px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1;
}

.bbs-card__name {
	font-family: var(--bbs-display);
	font-weight: 700;
	font-size: 1.02rem;
	letter-spacing: -0.01em;
}

.bbs-card__desc { font-size: 0.9rem; color: var(--bbs-muted); line-height: 1.55; }

.bbs-card__foot {
	margin-top: auto;
	padding-top: 12px;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
}

.bbs-card__price {
	font-family: var(--bbs-display);
	font-weight: 800;
	font-size: 1.18rem;
	letter-spacing: -0.02em;
}

.bbs-card__price del { opacity: 0.5; font-weight: 500; }
.bbs-card__price ins { text-decoration: none; }
.bbs-card__cta { font-size: 0.86rem; font-weight: 600; color: var(--bbs-amber-deep); white-space: nowrap; }

.bbs-benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }

@media (max-width: 820px) {
	.bbs-benefits { grid-template-columns: minmax(0, 1fr); gap: 26px; }
}

.bbs-benefit { display: flex; flex-direction: column; gap: 10px; padding-top: 20px; border-top: 2px solid var(--bbs-ink); }
.bbs-benefit p { color: var(--bbs-muted); }

.bbs-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; counter-reset: bbsstep; }

@media (max-width: 820px) {
	.bbs-steps { grid-template-columns: minmax(0, 1fr); }
}

.bbs-step { display: flex; flex-direction: column; gap: 10px; position: relative; padding-left: 56px; }

.bbs-step::before {
	counter-increment: bbsstep;
	content: counter(bbsstep);
	position: absolute;
	left: 0;
	top: -4px;
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--bbs-amber);
	color: #201704;
	font-family: var(--bbs-display);
	font-weight: 800;
	font-size: 1.1rem;
}

.bbs-step p { color: var(--bbs-muted); }

/* ---------- faq ---------- */

.bbs-faq { display: flex; flex-direction: column; }
.bbs-faq details { border-top: 1px solid var(--bbs-rule); padding-block: 6px; }
.bbs-faq details:last-of-type { border-bottom: 1px solid var(--bbs-rule); }

.bbs-faq summary {
	cursor: pointer;
	/* list-item, not none + flex: WebKit drops the disclosure semantics otherwise. */
	display: list-item;
	list-style: none;
	padding-block: 16px;
	font-family: var(--bbs-display);
	font-weight: 700;
	font-size: 1.06rem;
	letter-spacing: -0.01em;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.bbs-faq summary::-webkit-details-marker { display: none; }

.bbs-faq summary::after {
	content: "+";
	font-family: var(--bbs-mono);
	font-size: 1.3rem;
	color: var(--bbs-amber-deep);
	flex: none;
	transition: transform 0.18s ease;
}

.bbs-faq details[open] summary::after { transform: rotate(45deg); }
.bbs-faq p { color: var(--bbs-muted); padding-bottom: 18px; max-width: 68ch; }

/* ---------- closing ---------- */

.bbs-closing { background: var(--bbs-ink); color: var(--bbs-on-ink); }

.bbs-closing__inner {
	padding-block: clamp(48px, 6.5vw, 78px);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 18px;
}

.bbs-closing h2 { color: #ffffff; max-width: 20ch; }
.bbs-closing p { color: var(--bbs-on-ink-dim); max-width: 52ch; }
.bbs-closing .bbs-home__eyebrow { color: var(--bbs-amber); }

@media (prefers-reduced-motion: reduce) {
	.bbs-home * { transition: none !important; animation: none !important; }
}