/* =========================================================
   SmartBee — Study Destination page template styles
   ========================================================= */

/* ---------- Hero ---------- */
.sbe-hero {
	position: relative;
	min-height: 480px;
	background-size: cover;
	background-position: center;
	background-color: var(--sbe-purple-900);
	display: flex;
	align-items: flex-end;
}
.sbe-hero-overlay {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(51,9,79,.35) 0%, rgba(51,9,79,.15) 45%, rgba(30,6,48,.55) 100%);
}
.sbe-hero-inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 20px;
	padding-bottom: 46px;
	width: 100%;
}
.sbe-hero h1 { color: #fff; font-size: 46px; margin: 0; animation: sbe-fade-up .7s ease .1s both; }
.sbe-hero-inner > .sbe-btn { animation: sbe-fade-up .7s ease .28s both; }
@keyframes sbe-fade-up {
	from { opacity: 0; transform: translateY(18px); }
	to { opacity: 1; transform: translateY(0); }
}

.sbe-guide-tab {
	position: absolute;
	right: 0;
	top: 55%;
	width: 68px;
	min-height: 266px;
	transform: translateY(-50%) rotate(180deg);
	writing-mode: vertical-rl;
	background-image: url('../images/guide-tab-bg.png');
	background-size: 100% 100%;
	color: #fff;
	padding: 18px 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-weight: 600;
	font-size: 13px;
	transition: transform .25s ease, box-shadow .25s ease;
	animation: sbe-guide-tab-in .7s ease .45s both;
}
.sbe-guide-tab:hover { transform: translateY(-50%) rotate(180deg) translateX(4px); box-shadow: -4px 0 14px rgba(0,0,0,.18); }
.sbe-guide-tab .sbe-icon { transform: rotate(90deg); width: 14px; height: 14px; }
@keyframes sbe-guide-tab-in {
	from { opacity: 0; transform: translateY(-50%) rotate(180deg) translateX(24px); }
	to { opacity: 1; transform: translateY(-50%) rotate(180deg) translateX(0); }
}

/* ---------- Breadcrumb ---------- */
.sbe-breadcrumb {
	background: linear-gradient(90deg, var(--sbe-purple-900), var(--sbe-purple-700));
	padding: 14px 0;
}
.sbe-breadcrumb .sbe-container { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sbe-breadcrumb a { color: rgba(255,255,255,.75); font-size: 14px; font-weight: 600; transition: color .18s ease; }
.sbe-breadcrumb a:hover { color: #fff; }
.sbe-breadcrumb span { color: rgba(255,255,255,.5); font-size: 13px; }
.sbe-breadcrumb .is-current { color: #fff; font-weight: 600; }

/* ---------- Two column body ---------- */
/* Sidebar 352px, 120px gutter, content column takes the rest (~920px at 1392,
   the 1440px container minus its 24px side padding). Proportions match the
   original 389/132/1015-at-1536 layout, scaled down for the narrower canvas.
   minmax(0, 1fr) — not just 1fr — so the content track can shrink below its
   children's natural min-content width instead of pushing the page wider. */
/* align-items must stay "stretch" (the grid default — do NOT set it to
   "start"). A "start"-aligned grid item is only as tall as its own content,
   which leaves position: sticky zero room to travel and it detaches almost
   immediately. Stretched, the sidebar's box spans the full (very tall) row
   height set by the long main column, giving the sticky sidebar the room it
   needs to stay pinned all the way down the page. Content still renders at
   the top of that box, so nothing looks different — only the sticking
   behaves correctly. */
.sbe-page-body {
	display: grid;
	grid-template-columns: 352px minmax(0, 1fr);
	gap: 120px;
	padding: 56px 24px 20px;
}

/* The jump menu and contact form stack together as one sidebar block and
   stick in place while the main column scrolls past it. top:180px clears
   the site's own sticky header (row1 113px + nav row ~52px ≈ 165px) with a
   ~15px gap, so the sidebar never renders underneath it.
   Deliberately NOT height-capped: a viewport-relative max-height (100vh
   minus an offset) clips a different percentage of the form on every
   screen size, which looked broken rather than helpful. The full jump menu
   and full form always render completely, uncut, on every screen — the
   trade-off is that on a very short browser window the bottom of the form
   may sit below the fold until the page scrolls far enough to release it.
   align-self is intentionally left as "stretch" (inherited default) — see
   note above .sbe-page-body — which is what gives sticky room to hold this
   in place all the way down the page instead of detaching early. */
.sbe-sidebar {
	position: sticky;
	top: 180px;
	min-width: 0;
}
.sbe-main-col { min-width: 0; }

/* Jump menu: each row underlined, active row purple. Lighter weight and a
   soft grey tone — not pure black — per the source design. */
.sbe-sidebar-nav li a {
	display: block;
	padding: 11px 0 11px 2px;
	font-family: var(--sbe-font-heading);
	font-size: 14px;
	font-weight: 500;
	color: var(--sbe-text-light);
	border-bottom: 1px solid var(--sbe-rule);
	transition: color .18s ease, padding-left .18s ease, border-bottom-color .18s ease;
}
.sbe-sidebar-nav li a:hover { color: var(--sbe-purple-700); padding-left: 8px; }
.sbe-sidebar-nav li a.is-active {
	color: var(--sbe-purple-700);
	border-bottom-color: var(--sbe-purple-700);
}

.sbe-lead-form-wrap {
	margin-top: 34px;
	background: #fff;
	border: 1px solid var(--sbe-lavender-300);
	border-radius: var(--sbe-radius);
	padding: 24px;
	position: relative;
	z-index: 2;
}
.sbe-lead-form-wrap h3 { color: var(--sbe-purple-700); font-size: 19px; }
.sbe-lead-form { display: flex; flex-direction: column; gap: 14px; }
.sbe-lead-form label { font-size: 13px; font-weight: 500; color: var(--sbe-text); display: flex; flex-direction: column; gap: 6px; }
.sbe-lead-form input,
.sbe-lead-form select {
	font-family: var(--sbe-font-body);
	font-weight: 500;
	font-size: 14px;
	padding: 11px 14px;
	border: 1px solid #ddd3ea;
	border-radius: 8px;
	background: #fbf9fe;
	color: var(--sbe-text);
}
.sbe-lead-form input:focus,
.sbe-lead-form select:focus { outline: none; border-color: var(--sbe-purple-500); background: #fff; }
.sbe-lead-form button { margin-top: 6px; justify-content: space-between; }
.sbe-form-notice { padding: 10px 14px; border-radius: 8px; font-size: 13px; margin-bottom: 14px; font-weight: 600; }
.sbe-form-success { background: #e6f7ec; color: #1b7a3e; }
.sbe-form-error { background: #fdeaea; color: #b32323; }

/* left:0 + width:100% (instead of a fixed pixel offset/width) so this stays
   flush with the sidebar's own left edge and tracks its width at every
   breakpoint (352px / 300px / 240px) — a negative pixel offset tuned for one
   viewport doesn't hold up across the others and gets clipped by the
   site-wide overflow-x:hidden safety net. */
.sbe-sidebar-decor {
	position: absolute;
	left: 0;
	bottom: -120px;
	width: 100%;
	height: 528px;
	background-image: url('../images/sidebar-decor.png');
	background-size: contain;
	background-position: left bottom;
	background-repeat: no-repeat;
	opacity: .55;
	z-index: 1;
	pointer-events: none;
}

/* ---------- Sections (shared) ---------- */
.sbe-section { padding: 46px 0; border-bottom: 1px solid #f1eaf9; scroll-margin-top: 110px; }
.sbe-section:last-child { border-bottom: none; }
.sbe-section-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 6px; }
.sbe-subheading { color: var(--sbe-purple-600); font-size: 19px; margin-top: 26px; }
.sbe-subheading-purple { color: var(--sbe-purple-600); }

.sbe-carousel-arrows { display: flex; gap: 10px; flex-shrink: 0; }
.sbe-arrow {
	width: 38px; height: 38px;
	border-radius: 50%;
	border: 1px solid var(--sbe-lavender-300);
	background: #fff;
	color: var(--sbe-purple-600);
	display: flex; align-items: center; justify-content: center;
	cursor: pointer;
	transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.sbe-arrow:hover { background: var(--sbe-purple-600); color: #fff; border-color: var(--sbe-purple-600); transform: scale(1.08); }
.sbe-arrow:active { transform: scale(.96); }
.sbe-arrow-prev .sbe-icon { transform: rotate(180deg); }

/* ---------- Why list ---------- */
.sbe-why-list { display: flex; flex-direction: column; gap: 18px; margin-top: 20px; }
.sbe-why-list li { display: flex; gap: 12px; align-items: flex-start; }
.sbe-why-icon { color: var(--sbe-purple-600); flex-shrink: 0; margin-top: 3px; }
.sbe-why-list strong { display: block; color: var(--sbe-purple-600); font-size: 16.5px; margin-bottom: 4px; }
.sbe-why-list p { margin: 0; color: var(--sbe-text-light); font-size: 14.5px; }

/* ---------- Carousel / cards ---------- */
/* flow-root (not overflow:hidden) — a card lifting on hover needs its shadow
   to render outside .sbe-carousel-track's box, and overflow:hidden here would
   clip it. flow-root still stops the track's own negative margin (below)
   from collapsing into this element's margin-top, without clipping anything. */
.sbe-carousel { display: flow-root; margin-top: 22px; }
.sbe-carousel-track {
	display: flex;
	gap: 20px;
	overflow-x: auto; /* also forces overflow-y:auto per spec — the padding+
	   negative-margin pair below gives hover lift/shadow room inside that
	   clip boundary instead of right at the card's own edge. */
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding: 16px 2px 20px;
	margin: -16px -2px -16px;
}
.sbe-carousel-track::-webkit-scrollbar { display: none; }
/* 280px card + 20px gap: 3 cards (3*280 + 2*20 = 880px) fit inside the main
   column's ~920px width at the default 1440px canvas, with a small peek of
   a 4th to hint the row scrolls. */
.sbe-card {
	scroll-snap-align: start;
	flex: 0 0 280px;
	background: #fff;
	border: 1px solid var(--sbe-lavender-300);
	border-radius: var(--sbe-radius);
	padding: 22px;
	box-shadow: var(--sbe-shadow);
	display: flex;
	flex-direction: column;
	transition: transform .2s ease, box-shadow .2s ease;
}
/* Basic hover: a clearly-visible lift + deeper shadow — no color change. */
.sbe-card:hover { transform: translateY(-4px); box-shadow: var(--sbe-shadow-lg); }

/* The real university logos are wordmark lockups (crest + name), not square
   icons — sized to their native 40px height with free width so the name
   stays legible instead of being squashed into a 44x44 square. */
.sbe-uni-logo { height: 40px; width: auto; max-width: 100%; object-fit: contain; object-position: left center; margin-bottom: 14px; }
.sbe-uni-card h3 { font-size: 18px; margin-bottom: 4px; }
.sbe-uni-subtitle { color: var(--sbe-purple-600); font-size: 13px; font-weight: 600; margin-bottom: 12px; }
.sbe-uni-card hr, .sbe-course-card hr { border: none; border-top: 1px solid var(--sbe-lavender-300); margin: 0 0 14px; }
.sbe-uni-desc { font-size: 13.5px; color: var(--sbe-text-light); flex-grow: 1; }
.sbe-pill {
	display: inline-block;
	font-family: var(--sbe-font-heading);
	background: var(--sbe-lavender-200);
	color: var(--sbe-purple-700);
	font-size: 12px;
	font-weight: 600;
	padding: 6px 14px;
	border-radius: 999px;
	margin-bottom: 14px;
}
.sbe-uni-stats { display: flex; gap: 14px; font-family: var(--sbe-font-heading); font-size: 12px; color: var(--sbe-text-light); font-weight: 600; margin-bottom: 16px; flex-wrap: wrap; }

/* Logo + tag(s) share one row and never wrap to a second line. The logo's
   max-width is capped tighter than the university-card version specifically
   so a wordmark logo plus both tag pills reliably fit on one line inside a
   280px card. */
.sbe-course-top { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; margin-bottom: 12px; }
/* Real institution logos are wordmark lockups, not square icons — same fix
   as .sbe-uni-logo: fixed height, free width, so they aren't squashed. */
.sbe-course-badge { height: 22px; width: auto; max-width: 52px; object-fit: contain; object-position: left center; flex-shrink: 0; }
/* inline-block + align-self:flex-start so this stays a short, content-width
   pill even as a direct child of a column-direction flex card (where
   align-items:stretch would otherwise pull it to the full card width). */
.sbe-tag {
	display: inline-block;
	align-self: flex-start;
	font-family: var(--sbe-font-heading);
	background: var(--sbe-lavender-200);
	color: var(--sbe-purple-700);
	font-size: 11px;
	font-weight: 600;
	padding: 4px 10px;
	border-radius: 999px;
}
.sbe-course-card h3 { font-size: 17px; }
.sbe-course-meta { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 18px; }
.sbe-course-meta li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--sbe-text-light); }
.sbe-meta-icon { width: 15px; height: 15px; object-fit: contain; flex-shrink: 0; }
.sbe-course-meta strong { color: var(--sbe-text); font-weight: 600; }

/* ---------- Intakes ----------
   Full-bleed season photo cards: background photo, a bottom-anchored dark
   gradient for legibility, and the title/description/button sitting on top. */
.sbe-intakes-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 22px; }
.sbe-intake-card {
	position: relative;
	overflow: hidden;
	border-radius: var(--sbe-radius);
	aspect-ratio: 3 / 4;
	background-color: var(--sbe-purple-900);
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: flex-end;
	box-shadow: var(--sbe-shadow);
	transition: box-shadow .3s ease, transform .35s ease;
}
/* Whole-card scale (not just the bg-image) — keeps the gradient overlay and
   text perfectly in sync with the photo instead of risking them drifting out
   of alignment or the overlay's stacking order shifting on hover. */
.sbe-intake-card:hover { box-shadow: var(--sbe-shadow-lg); transform: scale(1.025); }
.sbe-intake-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(20, 8, 32, 0) 38%, rgba(20, 8, 32, .8) 100%);
}
.sbe-intake-content { position: relative; z-index: 1; width: 100%; padding: 22px; }
.sbe-intake-content strong { display: block; color: #fff; font-size: 26px; font-weight: 600; margin-bottom: 8px; }
.sbe-intake-content p { margin: 0 0 16px; font-size: 13px; color: rgba(255, 255, 255, .85); }

/* ---------- Cost tables ---------- */
.sbe-table-box {
	border: 1px solid var(--sbe-lavender-300);
	border-left: 4px solid var(--sbe-purple-500);
	border-radius: var(--sbe-radius);
	padding: 24px 26px;
	margin: 18px 0 22px;
	box-shadow: var(--sbe-shadow);
}
.sbe-table-head { font-weight: 600; margin-bottom: 12px; }
.sbe-table-row {
	display: flex;
	justify-content: space-between;
	padding: 11px 10px;
	margin: 0 -10px;
	border-top: 1px solid var(--sbe-lavender-200);
	border-radius: var(--sbe-radius-sm);
	font-size: 14px;
	font-weight: 600;
	transition: background .18s ease;
}
.sbe-table-row:hover { background: var(--sbe-lavender-100); }
.sbe-table-value { color: var(--sbe-purple-700); font-family: var(--sbe-font-heading); font-weight: 600; }
.sbe-table-note { font-size: 12px; color: var(--sbe-purple-600); font-style: italic; margin: 14px 0 0; }

/* ---------- Scholarship cards ---------- */
.sbe-scholarship-card { background: var(--sbe-lavender-100); border-color: var(--sbe-lavender-300); }
.sbe-scholarship-card h3 { font-size: 17px; margin-top: 10px; }
.sbe-scholarship-card p { font-size: 13.5px; color: var(--sbe-text-light); }
.sbe-tag-purple { background: var(--sbe-lavender-300); color: var(--sbe-purple-700); }
.sbe-bullets { margin: 10px 0 18px; display: flex; flex-direction: column; gap: 8px; }
.sbe-bullets li { position: relative; padding-left: 16px; font-size: 13.5px; color: var(--sbe-text-light); }
.sbe-bullets li::before { content: ""; position: absolute; left: 0; top: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--sbe-purple-500); }
.sbe-scholarship-card .sbe-btn { margin-top: auto; align-self: flex-start; }

/* ---------- Cities ---------- */
.sbe-city-card { padding: 0; overflow: hidden; flex: 0 0 260px; }
.sbe-city-card img { height: 190px; object-fit: cover; transition: transform .45s ease; }
.sbe-city-card:hover img { transform: scale(1.08); }
.sbe-city-caption { padding: 16px 18px; }
.sbe-city-caption strong { display: block; margin-bottom: 4px; }
.sbe-city-caption p { margin: 0; font-size: 13px; color: var(--sbe-text-light); }

/* ---------- Visa timeline ---------- */
/* No connecting line between steps — just the numbered circles + text. */
.sbe-timeline { max-width: 700px; margin: 26px 0; position: relative; }
.sbe-timeline li { position: relative; display: flex; gap: 18px; padding: 8px 10px 26px; margin: 0 -10px; border-radius: var(--sbe-radius-sm); transition: background .2s ease; }
.sbe-timeline li:last-child { padding-bottom: 8px; }
.sbe-timeline li:hover { background: var(--sbe-lavender-100); }
/* Flat lavender circle + purple number — no gradient, no drop shadow. */
.sbe-timeline-num {
	position: relative;
	z-index: 1;
	flex-shrink: 0;
	width: 36px; height: 36px;
	border-radius: 50%;
	background: var(--sbe-lavender-200);
	color: var(--sbe-purple-700);
	display: flex; align-items: center; justify-content: center;
	font-weight: 600;
	font-size: 13px;
	transition: transform .2s ease, background .2s ease, color .2s ease;
}
.sbe-timeline li:hover .sbe-timeline-num { transform: scale(1.1); background: var(--sbe-purple-700); color: #fff; }
.sbe-timeline strong { display: block; margin-bottom: 3px; font-size: 15.5px; }
.sbe-timeline p { margin: 0; font-size: 13.5px; color: var(--sbe-text-light); }

/* ---------- Callout box ---------- */
.sbe-callout {
	background: var(--sbe-lavender-100);
	border-left: 4px solid var(--sbe-purple-500);
	border-radius: var(--sbe-radius-sm);
	padding: 20px 24px;
	margin: 20px 0;
	font-size: 14px;
	box-shadow: var(--sbe-shadow);
}
.sbe-callout strong { display: block; margin-bottom: 10px; color: var(--sbe-purple-700); }
.sbe-callout .sbe-bullets { margin-bottom: 0; }
.sbe-bullets-square li::before { border-radius: 2px; }

/* ---------- Documents ---------- */
.sbe-documents-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 22px 0; }
.sbe-document-box { border: 1px solid var(--sbe-lavender-300); border-radius: var(--sbe-radius); padding: 20px; box-shadow: var(--sbe-shadow); transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.sbe-document-box:hover { border-color: var(--sbe-purple-500); box-shadow: var(--sbe-shadow-lg); transform: translateY(-3px); }
.sbe-document-box strong { color: var(--sbe-purple-700); display: block; margin-bottom: 14px; font-size: 15px; }

/* ---------- Accommodation ---------- */
.sbe-accommodation-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: 22px 0; }
.sbe-accommodation-card { border: 1px solid var(--sbe-lavender-300); border-radius: var(--sbe-radius); padding: 18px; box-shadow: var(--sbe-shadow); transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.sbe-accommodation-card:hover { border-color: var(--sbe-purple-500); box-shadow: var(--sbe-shadow-lg); transform: translateY(-3px); }
.sbe-accommodation-card strong { color: var(--sbe-purple-700); display: block; margin-bottom: 8px; font-size: 15px; }
.sbe-accommodation-card p { font-size: 13px; color: var(--sbe-text-light); }

/* ---------- Career & PR ---------- */
.sbe-career-field { margin-bottom: 22px; }
.sbe-career-field-title { display: block; margin-bottom: 8px; font-size: 15.5px; }
.sbe-career-field .sbe-bullets li span { font-weight: 600; color: var(--sbe-text); }

/* ---------- CTA band ---------- */
/* Background is one composite image (radial-shape backdrop + the 3 people
   already cut into it), supplied as cta_bg_image — matches the source
   design exactly instead of layering separate person cutouts in CSS. */
.sbe-cta-band {
	position: relative;
	overflow: hidden;
	background-color: var(--sbe-lavender-200);
	background-size: cover;
	background-position: center bottom;
	background-repeat: no-repeat;
	min-height: 660px;
	padding: 70px 0 0;
	margin-top: 30px;
	text-align: center;
}
.sbe-cta-inner { position: relative; }
.sbe-cta-band h2 { font-size: 32px; }
.sbe-cta-subheading { color: var(--sbe-purple-600); font-weight: 600; font-size: 17px; }
.sbe-cta-desc { max-width: 640px; margin: 0 auto 24px; color: var(--sbe-text-light); }
.sbe-cta-buttons { display: flex; gap: 16px; justify-content: center; margin-bottom: 20px; }

/* Badges are anchored to .sbe-cta-band's own bottom edge — not to the
   height of the heading/subheading/description text above them — so both
   sides sit at the same, consistent height next to the (bottom-anchored)
   background photo no matter how long the CTA copy is. Nudge `bottom` if
   your final background image's people sit at a different height. */
.sbe-cta-badges { position: absolute; left: 0; right: 0; bottom: 190px; max-width: 1180px; margin: 0 auto; padding: 0 24px; pointer-events: none; }
.sbe-cta-badge { position: absolute; top: 0; pointer-events: auto; }
.sbe-cta-badge-left { left: 24px; }
.sbe-cta-badge-right { right: 24px; }
.sbe-cta-badge.sbe-cta-badge-text {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #fff;
	padding: 10px 16px;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--sbe-purple-700);
	box-shadow: var(--sbe-shadow);
	white-space: nowrap;
	transition: transform .2s ease, box-shadow .2s ease;
}
.sbe-cta-badge.sbe-cta-badge-text:hover { transform: translateY(-3px); box-shadow: var(--sbe-shadow-lg); }
.sbe-cta-badge.sbe-cta-badge-text .sbe-icon { color: var(--sbe-purple-600); width: 14px; height: 14px; }

/* ---------- Responsive ----------
   Breakpoints retuned to the 1440px container: the first tier only matters
   once the viewport actually gets narrower than the container itself
   (1440px + 48px side padding = 1488px). */
@media (max-width: 1488px) {
	.sbe-page-body { grid-template-columns: 300px minmax(0, 1fr); gap: 64px; }
}

@media (max-width: 1080px) {
	.sbe-page-body { grid-template-columns: 240px minmax(0, 1fr); gap: 32px; }
	.sbe-accommodation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
	.sbe-page-body { grid-template-columns: 1fr; }
	/* Sidebar just flows in the page like everything else below this width. */
	.sbe-sidebar { position: static; }
	/* Once the sidebar is static it no longer anchors the decor's absolute
	   position, so hide the decorative watermark rather than let it float
	   relative to the whole page. */
	.sbe-sidebar-decor { display: none; }
	.sbe-documents-grid { grid-template-columns: 1fr; }
	.sbe-cta-band { min-height: 420px; background-position: bottom center; }
	/* Below this width badges drop out of absolute positioning entirely and
	   just stack in normal flow under the CTA content. */
	.sbe-cta-badges { position: static; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 16px; padding: 0; }
	.sbe-cta-badge { position: static; max-width: 220px; }
}

@media (max-width: 600px) {
	.sbe-hero { min-height: 380px; }
	.sbe-hero h1 { font-size: 32px; }
	.sbe-intakes-grid { grid-template-columns: 1fr; }
	.sbe-intake-card { aspect-ratio: 16 / 10; }
	.sbe-accommodation-grid { grid-template-columns: 1fr; }
	.sbe-card { flex-basis: 260px; }
	.sbe-guide-tab { display: none; }
	.sbe-section-head { flex-direction: column; align-items: flex-start; }
}