/* ============================================================
   SERVICE PAGE — mama-louisa theme
   Loaded only when page template = templates/template-service.php
   ============================================================ */

/* ── Hero ──────────────────────────────────────────────────── */
.ml-svc-hero {
	position: relative;
	min-height: 440px;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
}

/* Category gradient backgrounds */
.ml-svc-hero--love     { background: linear-gradient(135deg, #2d0a20 0%, #1a0a2e 55%, #0d0820 100%); }
.ml-svc-hero--spiritual { background: linear-gradient(135deg, #0d0820 0%, #1a0a2e 55%, #1c1040 100%); }
.ml-svc-hero--health   { background: linear-gradient(135deg, #071a0d 0%, #0d1a1a 55%, #0d0820 100%); }
.ml-svc-hero--career   { background: linear-gradient(135deg, #1a1200 0%, #1a0a2e 55%, #0d0820 100%); }
.ml-svc-hero--family   { background: linear-gradient(135deg, #0a1a2e 0%, #1a0a2e 55%, #0d0820 100%); }

/* Radial glow overlay on gradient heroes */
.ml-svc-hero--gradient::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 60% 50% at 82% 25%, rgba(192,148,54,.13) 0%, transparent 70%),
		radial-gradient(ellipse 40% 55% at 18% 75%, rgba(124,58,237,.09) 0%, transparent 70%);
	pointer-events: none;
}

/* Image hero */
.ml-svc-hero--img .ml-svc-hero__img-bg {
	position: absolute;
	inset: 0;
}
.ml-svc-hero--img .ml-svc-hero__img-bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 25%;
}
.ml-svc-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(13,8,32,.45) 0%, rgba(13,8,32,.85) 100%);
}

/* Hero inner */
.ml-svc-hero__inner {
	position: relative;
	z-index: 2;
	padding-top: 80px;
	padding-bottom: 60px;
	width: 100%;
}

/* Breadcrumb */
.ml-breadcrumb {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: .8rem;
	color: rgba(232,223,200,.5);
	margin-bottom: 22px;
	flex-wrap: wrap;
}
.ml-breadcrumb a {
	color: rgba(232,223,200,.6);
	text-decoration: none;
	transition: color .2s;
}
.ml-breadcrumb a:hover { color: var(--ml-gold); }
.ml-breadcrumb [aria-current="page"] { color: var(--ml-gold-light, #e8c96a); }

/* Category badge */
.ml-svc-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: rgba(201,168,76,.1);
	border: 1px solid rgba(201,168,76,.28);
	border-radius: 100px;
	padding: 5px 14px;
	font-size: .76rem;
	color: var(--ml-gold);
	letter-spacing: .06em;
	text-transform: uppercase;
	margin-bottom: 18px;
}
.ml-svc-hero__icon { font-size: 1rem; }

/* H1 */
.ml-svc-hero__title {
	font-family: var(--ml-font-head);
	font-size: clamp(1.7rem, 3.8vw, 2.7rem);
	color: var(--ml-text);
	line-height: 1.2;
	margin: 0 0 30px;
	max-width: 720px;
}

/* Hero CTAs */
.ml-svc-hero__actions {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
}

/* ── Two-column layout ─────────────────────────────────────── */
.ml-svc-body {
	padding: 64px 0 88px;
}
.ml-svc-layout {
	display: grid;
	grid-template-columns: 1fr 360px;
	gap: 52px;
	align-items: start;
}

/* ── Main content ──────────────────────────────────────────── */
.ml-svc-main {
	color: var(--ml-text-muted);
	font-size: 1.04rem;
	line-height: 1.88;
}
.ml-svc-main h2 {
	font-family: var(--ml-font-head);
	font-size: 1.32rem;
	color: var(--ml-gold);
	margin: 38px 0 14px;
	letter-spacing: .025em;
}
.ml-svc-main h2:first-child { margin-top: 0; }
.ml-svc-main p { margin: 0 0 1.15em; }
.ml-svc-main ul {
	padding-left: 22px;
	margin: 0 0 1.15em;
}
.ml-svc-main li {
	margin-bottom: 7px;
}
.ml-svc-main li::marker { color: var(--ml-gold); }
.ml-svc-main a { color: var(--ml-gold); text-decoration: underline; text-underline-offset: 3px; }
.ml-svc-main a:hover { color: var(--ml-text); }
.ml-svc-main em { color: var(--ml-text); font-style: italic; }
.ml-svc-main strong { color: var(--ml-text); }

/* Service CTA box (from source HTML, class replaced in setup script) */
.ml-service-cta-box {
	background: linear-gradient(135deg, rgba(201,168,76,.07), rgba(124,58,237,.05));
	border: 1px solid rgba(201,168,76,.32);
	border-radius: 12px;
	padding: 28px 30px;
	margin: 44px 0 0;
	color: var(--ml-text);
	font-size: .98rem;
	line-height: 1.75;
}
.ml-service-cta-box strong { color: var(--ml-gold); }
.ml-service-cta-box a { color: var(--ml-gold); }

/* ── Sidebar ───────────────────────────────────────────────── */
.ml-svc-sidebar {
	display: flex;
	flex-direction: column;
	gap: 24px;
	position: sticky;
	top: 88px;
}

.ml-svc-widget {
	background: var(--ml-bg-card);
	border: 1px solid rgba(201,168,76,.11);
	border-radius: 14px;
	padding: 26px;
}
.ml-svc-widget__title {
	font-family: var(--ml-font-head);
	font-size: 1rem;
	color: var(--ml-gold);
	margin: 0 0 5px;
	letter-spacing: .03em;
}
.ml-svc-widget__sub {
	font-size: .8rem;
	color: var(--ml-text-muted);
	margin: 0 0 18px;
	line-height: 1.5;
}

/* ── Booking form ──────────────────────────────────────────── */
.ml-booking-form {
	display: flex;
	flex-direction: column;
	gap: 13px;
}
.ml-bf-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.ml-bf-field label {
	font-size: .75rem;
	color: rgba(232,223,200,.55);
	text-transform: uppercase;
	letter-spacing: .07em;
}
.ml-bf-optional {
	text-transform: none;
	font-weight: 400;
	opacity: .7;
}
.ml-bf-field input,
.ml-bf-field textarea {
	background: rgba(13,8,32,.65);
	border: 1px solid rgba(201,168,76,.18);
	border-radius: 8px;
	padding: 10px 13px;
	color: var(--ml-text);
	font-family: var(--ml-font-body);
	font-size: .9rem;
	line-height: 1.5;
	width: 100%;
	box-sizing: border-box;
	transition: border-color .2s;
	-webkit-appearance: none;
}
.ml-bf-field input[readonly] {
	background: rgba(201,168,76,.06);
	color: var(--ml-gold);
	cursor: default;
	border-color: rgba(201,168,76,.25);
}
.ml-bf-field input:focus,
.ml-bf-field textarea:focus {
	outline: none;
	border-color: rgba(201,168,76,.45);
	background: rgba(13,8,32,.8);
}
.ml-bf-field textarea {
	resize: vertical;
	min-height: 78px;
}
.ml-bf-submit {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: linear-gradient(135deg, #25a244, #1a8636);
	color: #fff;
	border: none;
	border-radius: 9px;
	padding: 13px 18px;
	font-size: .92rem;
	font-weight: 700;
	font-family: var(--ml-font-body);
	cursor: pointer;
	transition: opacity .2s, transform .12s;
	letter-spacing: .02em;
}
.ml-bf-submit:hover  { opacity: .9; transform: translateY(-1px); }
.ml-bf-submit:active { transform: translateY(0); }

/* ── Related services list ─────────────────────────────────── */
.ml-svc-related__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.ml-svc-related__link {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 9px 10px;
	border-radius: 8px;
	text-decoration: none;
	color: var(--ml-text-muted);
	font-size: .87rem;
	transition: background .18s, color .18s;
}
.ml-svc-related__link:hover {
	background: rgba(201,168,76,.08);
	color: var(--ml-gold);
}
.ml-svc-related__icon { font-size: .95rem; flex-shrink: 0; }
.ml-svc-related__name { flex: 1; }
.ml-svc-related__link svg { flex-shrink: 0; opacity: .45; }

/* ── Mama Louisa contact card ──────────────────────────────── */
.ml-svc-contact-card {
	text-align: center;
}
.ml-contact-card__photo {
	width: 84px;
	height: 84px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid rgba(201,168,76,.4);
	margin: 0 auto 14px;
	display: block;
}
.ml-contact-card__avatar {
	width: 84px;
	height: 84px;
	border-radius: 50%;
	background: rgba(13,8,32,.6);
	border: 2px solid rgba(201,168,76,.3);
	margin: 0 auto 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.6rem;
	color: var(--ml-gold);
	opacity: .75;
}
.ml-contact-card__name {
	font-family: var(--ml-font-head);
	font-size: 1rem;
	color: var(--ml-text);
	margin: 0 0 4px;
}
.ml-contact-card__role {
	font-size: .76rem;
	color: var(--ml-text-muted);
	margin: 0 0 12px;
	line-height: 1.45;
}
.ml-contact-card__phone {
	display: block;
	color: var(--ml-gold);
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: .02em;
	text-decoration: none;
	margin-bottom: 14px;
	transition: opacity .2s;
}
.ml-contact-card__phone:hover { opacity: .75; }

/* Full-width button variant */
.ml-btn--full {
	width: 100%;
	justify-content: center;
	text-align: center;
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 1100px) {
	.ml-svc-layout { grid-template-columns: 1fr 320px; gap: 36px; }
}

@media (max-width: 900px) {
	.ml-svc-layout { grid-template-columns: 1fr 280px; gap: 28px; }
	.ml-svc-hero__title { font-size: 2rem; }
}

@media (max-width: 768px) {
	.ml-svc-hero { min-height: 340px; }
	.ml-svc-hero__inner { padding-top: 60px; padding-bottom: 44px; }
	.ml-svc-hero__title { font-size: 1.75rem; }

	.ml-svc-layout {
		grid-template-columns: 1fr;
		gap: 0;
	}
	.ml-svc-sidebar {
		position: static;
		margin-top: 40px;
	}
	.ml-svc-body { padding: 44px 0 64px; }
}

@media (max-width: 480px) {
	.ml-svc-hero__actions { flex-direction: column; }
	.ml-svc-hero__actions .ml-btn { text-align: center; justify-content: center; }
	.ml-svc-hero__title { font-size: 1.55rem; }
}