/* ==========================================================================
   home-hero-booking — booking-first hero, MOBILE ONLY (<640).
   Variant A: white page background, gray surface card, white select pills
   inside. Mirrors the site's surface vocabulary (--color-surface card +
   --color-surface-card inner, same inversion as /cennik/).
   Visibility (show <640, hide ≥640) lives in the wiring CSS, not here.
   ========================================================================== */

/* Swap: booking-hero is mobile-only, the image slider (.home-hero) is
   desktop-only. Both partials render on every homepage load; CSS decides
   which shows. (Slider image BYTES are gated separately in its <picture>.) */
@media (min-width: 640px) {
	.home-hero-booking { display: none; }
}
@media (max-width: 639px) {
	.home-hero { display: none; }
}

.home-hero-booking {
	padding-block: var(--space-lg) var(--space-xl);
}

.home-hero-booking__header {
	margin-bottom: var(--space-lg);
}

.home-hero-booking__heading {
	font-size: var(--fs-h2);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-tight);
	color: var(--color-text);
	margin: 0 0 var(--space-xs);
}

.home-hero-booking__sub {
	font-size: var(--fs-base);
	color: var(--color-text-body);
	line-height: var(--lh-snug);
	margin: 0;
}

/* The card — gray surface on the white page. */
.home-hero-booking__card {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	padding: var(--space-lg); /* 24px (owner) */
	background-color: var(--color-surface);
	border-radius: var(--radius-lg);
}

/* Each select row — white pill with a left icon and a right chevron, the
   native <select> stretched between them (appearance reset). */
.home-hero-booking__field {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 52px;
	background-color: var(--color-surface-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-btn);
}

.home-hero-booking__field-icon {
	position: absolute;
	left: 14px;
	display: inline-flex;
	color: var(--color-brand);
	pointer-events: none;
}
.home-hero-booking__field-icon svg { width: 20px; height: 20px; }

.home-hero-booking__field-chevron {
	position: absolute;
	right: 14px;
	display: inline-flex;
	color: var(--color-text-muted);
	pointer-events: none;
}
.home-hero-booking__field-chevron svg { width: 18px; height: 18px; }

.home-hero-booking__select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 100%;
	min-height: 50px;
	padding: 0 42px;          /* room for icon (left) + chevron (right) */
	border: none;
	background: transparent;
	font-family: inherit;
	font-size: var(--fs-base);
	font-weight: var(--fw-medium);
	color: var(--color-text);
	line-height: 1.2;
	cursor: pointer;
	border-radius: var(--radius-btn);
}

/* Resting state reads muted; real picks go dark. For lekarz the resting
   value is "obojętny" (-1), not an empty placeholder — mute that too so it
   matches "Poradnia/Usługa: wybierz…". */
.home-hero-booking__select:has(option[value=""]:checked),
.home-hero-booking__select:has(option[value="-1"]:checked) {
	color: var(--color-text-muted);
}

.home-hero-booking__select:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 2px;
}

/* CTA — full-width filled button (sizing/colour from .btn .btn--primary). */
.home-hero-booking__cta {
	width: 100%;
	margin-top: var(--space-xs);
}
.home-hero-booking__cta-icon {
	display: inline-flex;
	align-items: center;
}
.home-hero-booking__cta-icon svg { width: 20px; height: 20px; }