/* =========================================================
   SmartBee — "Services" page family (Personalised Counselling,
   Accommodation, Visa Application Support, Pre-arrival Guide,
   Airport Pickup). All 5 pages share this one stylesheet — same
   two-column layout as template-ielts.php (.sbe-hero / .sbe-breadcrumb /
   .sbe-page-body / .sbe-sidebar / .sbe-lead-form-wrap / .sbe-cta-band-ielts
   all reused from destination.css + ielts.css as-is) — this file only adds
   the components unique to this page family: the simplified 3-field
   sidebar form context, the single continuous content-column article
   flow, and the two numbered-list visual variants the source PDFs use.
   ========================================================= */

/* ---------- Hero ----------
   Every Services page uses the exact same hero photo + heading ("Expert
   Guidance Tailored to Your Academic Goals") per the source PDFs — only
   the breadcrumb's last crumb and the content below change per page. */
.sbe-hero-overlay {
	background: linear-gradient(180deg, rgba(30,6,48,.55) 0%, rgba(30,6,48,.35) 45%, rgba(18,4,30,.68) 100%);
}

/* ---------- Content column: one continuous article ----------
   Unlike the destination/IELTS pages' bordered .sbe-section blocks, the
   source design renders this as a single flowing column — only the main
   title has a rule beneath it; subsequent sub-headings are just spaced
   with margin. Each heading still needs scroll-margin-top so the sticky
   sidebar's in-page nav links land below the fixed header. */
.sbe-service-title { margin: 0 0 22px; padding-bottom: 24px; border-bottom: 1px solid var(--sbe-rule); scroll-margin-top: 110px; }
.sbe-service-body h2 { scroll-margin-top: 110px; }
.sbe-service-body > h2:not(.sbe-service-title) { margin-top: 46px; }
.sbe-service-body p { color: var(--sbe-text-light); font-size: 15px; line-height: 1.7; margin: 0 0 18px; }
.sbe-service-body p:last-child { margin-bottom: 0; }

.sbe-service-photo {
	display: block;
	width: 100%;
	height: 420px;
	object-fit: cover;
	border-radius: var(--sbe-radius);
	margin: 0 0 26px;
}

.sbe-svc-list-lead { color: var(--sbe-text-light); font-size: 14.5px; margin: 0 0 22px; }

/* ---------- Simple numbered list (single line + divider) ----------
   Counselling / Visa / Pre-arrival / Airport Pickup all use this style:
   gold circle badge, one bold line, thin divider between items, no
   description text and no connecting rail. */
.sbe-svc-list { list-style: none; padding: 0; margin: 0 0 8px; }
.sbe-svc-list li { display: flex; align-items: center; gap: 18px; padding: 15px 4px; border-bottom: 1px solid var(--sbe-rule); }
.sbe-svc-list li:last-child { border-bottom: none; }
.sbe-svc-list strong { font-family: var(--sbe-font-heading); font-size: 15px; font-weight: 600; color: var(--sbe-text); }

.sbe-svc-list-num {
	flex-shrink: 0;
	width: 34px; height: 34px;
	border-radius: 50%;
	background: var(--sbe-gold-600);
	color: var(--sbe-purple-900);
	display: flex; align-items: center; justify-content: center;
	font-family: var(--sbe-font-heading);
	font-weight: 700;
	font-size: 12px;
	position: relative;
	z-index: 1;
}

/* ---------- Detailed numbered list (title + description + rail) ----------
   Accommodation's "Accommodation Options" list is the only page using
   this style: same gold badge, but each item adds a description line and
   a thin vertical rail connects consecutive badges. */
.sbe-svc-list-desc { list-style: none; padding: 0; margin: 0 0 8px; max-width: 700px; position: relative; }
.sbe-svc-list-desc li { position: relative; display: flex; gap: 18px; padding-bottom: 30px; }
.sbe-svc-list-desc li:last-child { padding-bottom: 0; }
.sbe-svc-list-desc li:not(:last-child)::after {
	content: "";
	position: absolute;
	left: 16px;
	top: 34px;
	bottom: 0;
	width: 1px;
	background: var(--sbe-lavender-300);
}
.sbe-svc-list-desc strong { display: block; font-family: var(--sbe-font-heading); font-size: 16px; font-weight: 600; color: var(--sbe-text); margin-bottom: 4px; }
.sbe-svc-list-desc p { margin: 0; font-size: 14px; color: var(--sbe-text-light); }

/* ---------- CTA band (reuses the exact same graphic/copy as IELTS) ---------- */
.sbe-cta-band-ielts {
	background-color: var(--sbe-purple-700);
	background-image: url('../images/cta-band-ielts.png');
	background-size: cover;
	background-position: center;
	min-height: 460px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 60px 0;
}
.sbe-cta-band-ielts .sbe-cta-inner { z-index: 1; width: 100%; }
.sbe-cta-band-ielts h2 { color: #fff; }
.sbe-cta-band-ielts h2 .sbe-cta-highlight { color: var(--sbe-gold-500); }
.sbe-cta-band-ielts .sbe-cta-desc { color: rgba(255, 255, 255, .82); }
.sbe-cta-band-ielts .sbe-cta-buttons { position: relative; margin-top: 8px; }

@media (max-width: 860px) {
	.sbe-service-photo { height: 260px; }
}