/* =====================================================================
   Single Service — page CSS (single-dk_service.php)
   Hero reuses global/page-banner untouched. Intro reuses .dk-split +
   section-heading + framed-photo (About's pattern). CTA reuses
   global/cta-banner untouched. The booking widget is new here.
   Section boundaries: projects/detail-king/figma-data/service-single-spec.md.
   ===================================================================== */

/* ---------------------------------------------------------------
   Intro ("Why X?") — same shape as About's Who We Are / Our Approach.
   --------------------------------------------------------------- */
.service-intro { position: relative; overflow: hidden; padding-block: calc(110 * var(--sp)); }
.service-intro__watermark {
	position: absolute;
	z-index: 0;
	inset-inline-end: -50px;
	inset-block-start: 30px;
	font-size: calc(300 * var(--fs));
}
.service-intro__grid { position: relative; z-index: 1; }
.service-intro__lead { color: var(--text-dark); font: 400 21px/1.65 var(--font-body); }
.service-intro__lead + p { margin-block-start: 4px; }

/* ---------------------------------------------------------------
   Booking widget.
   --------------------------------------------------------------- */
.service-booking { padding-block: calc(120 * var(--sp)); }
.service-booking__head { margin-block-end: calc(46 * var(--sp)); }

/* Same shape as About's .dk-split, but this frame's own gap is 70px, not
   About's 80px — override rather than touching the shared component. */
.service-intro__grid { gap: calc(70 * var(--sp)); }

.service-booking__steps {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 18px;
	margin: 0 0 calc(46 * var(--sp));
	padding: 0;
	list-style: none;
}
.service-booking__step {
	display: flex;
	align-items: center;
	gap: 14px;
	color: var(--text-white-45);
}
.service-booking__stepnum {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 1px solid var(--glass-white-25);
	font: 400 20px/1 var(--font-display);
}
.service-booking__step.is-active .service-booking__stepnum {
	background: var(--gold-gradient-btn);
	border-color: transparent;
	color: var(--text-dark);
}
.service-booking__step.is-active .service-booking__steplabel { color: var(--text-white); }
/* Step 3 ("Recommended Add-Ons") has no content until step 8 (dk_addon + the
   popup) — kept visible so the widget still reads as a 3-step process, but
   dimmed and non-interactive rather than pretending it currently does
   anything. */
.service-booking__step.is-inert { opacity: .45; }

/* Package cards — survives 1..N (auto-fit, not a fixed 2/3-col grid). */
.service-packages {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 26px;
	margin-block-end: calc(46 * var(--sp));
}
/* Resilience: the 1-package edge case (flagged unconfirmed in the QA brief).
   With a single grid item, auto-fit's lone 1fr track — and the item's
   default justify-items:stretch — filled the whole 1470px container:
   a 200px-tall media strip stretched into a letterboxed banner instead of
   a card. 2+ packages are unaffected (:only-child never matches). */
.service-package:only-child {
	max-width: 400px;
	justify-self: center;
}
.service-package {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 0;
	border: 1px solid var(--line-white-08);
	border-radius: var(--radius-lg);
	background: var(--bg-dark-card);
	overflow: hidden;
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.service-package:focus-visible {
	outline: 2px solid var(--gold-mid);
	outline-offset: 3px;
}
.service-package.is-selected {
	border-color: var(--gold-mid);
	box-shadow: 0 30px 80px rgba(201, 161, 74, .22);
}
.service-package__media {
	position: relative;
	height: calc(200 * var(--sp));
	background: linear-gradient(150deg, #1C1C20 0%, #0C0C0E 100%);
}
.service-package__media img { width: 100%; height: 100%; object-fit: cover; }
.service-package__badge {
	position: absolute;
	inset-block-start: 16px;
	inset-inline-end: 16px;
	padding: 6px 18px;
	border-radius: var(--radius-pill);
	background: var(--gold-gradient-btn);
	color: var(--text-dark);
	font: 600 16px/1.65 var(--font-body);
}
.service-package__check {
	position: absolute;
	inset-block-start: 16px;
	inset-inline-start: 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 2px solid var(--glass-white-25);
	background: rgba(11, 11, 12, .4);
	color: transparent;
	font-size: 16px;
}
.service-package.is-selected .service-package__check {
	background: var(--gold-gradient-btn);
	border-color: transparent;
	color: var(--text-dark);
}
.service-package__body { display: block; padding: 28px 30px; }
.service-package__title { display: block; margin-block-end: 8px; color: var(--text-white); font: 400 34px/1 var(--font-display); letter-spacing: .03em; }
.service-package__desc { display: block; color: var(--text-white-65); }
.service-package__price { margin-block-start: 8px; display: flex; align-items: baseline; gap: 8px; }
.service-package__pricelabel { color: var(--text-white-55); }
.service-package__price .text-gold-gradient { font: 400 calc(48 * var(--fs))/1 var(--font-display); }

/* Step-2 details card. */
.service-details {
	max-width: 900px;
	margin-inline: auto;
	padding: calc(46 * var(--sp));
	border: 1px solid var(--gold-25);
	border-radius: var(--radius-xl);
	background: var(--glass-white-04);
}
.service-details__title { margin-block-end: 8px; color: var(--text-white); font: 400 34px/1 var(--font-display); letter-spacing: .03em; }
.service-details__subtitle { margin-block-end: 24px; color: var(--text-white-55); }
.service-details__location { grid-column: 1 / -1; }

.service-details__pricerow {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-block-start: 24px;
	padding-block-start: 27px;
	border-top: 1px solid var(--gold-30);
}
.service-details__pricelabel {
	color: var(--text-white-55);
	letter-spacing: .16em;
	text-transform: uppercase;
}
.service-details__priceval { font: 400 calc(54 * var(--fs))/1 var(--font-display); }

.service-details__disclaimer {
	margin-block-start: 14px;
	text-align: center;
	color: var(--text-white-45);
}

/* ---------------------------------------------------------------
   CTA — global/cta-banner.php handles everything; page-level spacing only.
   --------------------------------------------------------------- */
.service-cta { padding-block: calc(110 * var(--sp)); }

/* ---------------------------------------------------------------
   Responsive.
   --------------------------------------------------------------- */
@media (max-width: 767.98px) {
	.service-intro__watermark { font-size: calc(160 * var(--fs)); }
	.service-details { padding: 32px 24px; }
	.service-booking__steps { gap: 12px 24px; }
	.service-booking__steplabel { font-size: 15px; }
}

@media (max-width: 575.98px) {
	.service-details__pricerow { flex-direction: column; align-items: flex-start; gap: 8px; }
}