/*
 * Booking. Figma section/picker 2865:95855 (desktop 1440x825, background-grey
 * band, 84 top and bottom; centred text/header; 44 below it a 1100 row:
 * photo 556x531 radius 16, 64 gap, 480 picker: header/M + subtitle/L range,
 * 24, calendar 480x393, 24, button/M full width).
 * Calendar (2690:54643): white, border/light, radius 16, 18 inside the
 * border; month header/S primary + divider, 16, day names subtitle/XL, 16,
 * rows of 56x56 days 8 apart, 16 between rows.
 * Day states (2744:58071): default white + border/light; today adds a 6px
 * primary dot; selected background-purple + border primary + primary text;
 * fullday background-grey, grey struck-through text.
 * Mobile 1127:18064: 84/20 padding, photo 350x233 first, left header/L,
 * header/S step title, calendar 350x367 (14 inside, 42-wide days 4 apart,
 * 10 between rows).
 */

.booking {
	padding-block: 84px;
	background: var(--c-bg-grey);
}

.booking__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 44px;
}

.booking__body {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 64px;
	width: 100%;
	max-width: 1100px;
}

.booking__image {
	flex: 0 1 556px;
	min-width: 0;
	height: 531px;
	overflow: hidden;
	border-radius: var(--r-m);
}

.booking__picker { flex: 0 1 480px; min-width: 0; }

.booking__step {
	display: flex;
	flex-direction: column;
	gap: 24px;
	min-width: 0;
}

.booking__step-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	color: var(--c-text-dark);
}

.booking__step-title { font: var(--f-header-m); white-space: nowrap; }
.booking__range { font: var(--f-subtitle-l); text-align: right; white-space: nowrap; }

/* ---------- calendar ---------- */
.booking__calendar {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 18px;
	border: 1px solid var(--c-border-light);
	border-radius: var(--r-m);
	background: var(--c-bg-white);
}

.booking__month {
	display: flex;
	align-items: center;
	gap: 16px;
	font: var(--f-header-s);
	color: var(--c-primary);
	white-space: nowrap;
}

.booking__month::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--c-border-light);
}

.booking__grid {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 56px));
	justify-content: space-between;
	gap: 16px 8px;
}

.booking__dow {
	margin-bottom: 0;
	font: var(--f-subtitle-xl);
	color: var(--c-text-dark);
	text-align: center;
}

.booking__day {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 56px;
	border: 1px solid var(--c-border-light);
	border-radius: var(--r-m);
	background: var(--c-bg-white);
	color: var(--c-text-dark);
	font: var(--f-header-xs);
	transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}


.booking__day.is-today::after {
	content: "";
	position: absolute;
	bottom: 9px;
	left: 50%;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--c-primary);
	transform: translateX(-50%);
}

.booking__day.is-today { padding-bottom: 8px; }

.booking__day[aria-pressed="true"] {
	border-color: var(--c-primary);
	background: var(--c-bg-purple);
	color: var(--c-primary);
}

.booking__day.is-off {
	border-color: transparent;
	background: var(--c-bg-grey);
	color: var(--c-text-grey);
	text-decoration: line-through;
	cursor: default;
}

@media (max-width: 960px) {
	.booking__body { gap: 32px; }
}

@media (max-width: 767px) {
	.booking__inner { align-items: stretch; gap: 24px; }

	.booking__body {
		flex-direction: column;
		align-items: stretch;
		gap: 24px;
	}

	/* Photo first, then the header (Figma order). */
	.booking__inner { display: grid; }
	.booking__body { display: contents; }
	.booking__image { order: -1; flex: none; height: auto; aspect-ratio: 350 / 233; }

	.booking__step { gap: 16px; }
	.booking__step-title { font: var(--f-header-s); }

	.booking__calendar { padding: 14px; }
	.booking__grid { gap: 10px 4px; grid-template-columns: repeat(7, minmax(0, 1fr)); }
	.booking__dow { margin-bottom: 6px; }
	.booking__day { height: 56px; }
}