/* =========================================================
   SmartBee — IELTS "Why Choose SmartBee" page styles
   Built entirely on top of the shared tokens/components in main.css and
   destination.css (colors, shadows, .sbe-btn, .sbe-hero, .sbe-sidebar,
   .sbe-section, .sbe-timeline, .sbe-callout, .sbe-cta-band, etc.) — this
   file only adds the handful of components unique to this page.
   ========================================================= */

/* ---------- Hero note ----------
   This page's hero has a descriptive line instead of a CTA button in the
   top-right slot (source design), so .sbe-hero-inner's existing
   space-between/flex layout is reused as-is — just swap the child. */
.sbe-hero-note {
	max-width: 380px;
	color: rgba(255, 255, 255, .92);
	font-size: 14.5px;
	line-height: 1.5;
	animation: sbe-fade-up .7s ease .28s both;
}

/* This page's hero photo (lecture hall) is brighter than destination.css's
   default overlay was tuned for, so it washes out — darken it specifically
   here. ielts.css loads after destination.css, so this same-specificity
   rule wins only on this template without touching the shared default. */
.sbe-hero-overlay {
	background: linear-gradient(180deg, rgba(30,6,48,.6) 0%, rgba(30,6,48,.45) 45%, rgba(18,4,30,.72) 100%);
}

/* ---------- Share row (sidebar, above the lead form) ---------- */
.sbe-share-row { display: flex; align-items: center; gap: 10px; margin-top: 30px; }
.sbe-share-label { font-family: var(--sbe-font-heading); font-size: 13px; font-weight: 600; color: var(--sbe-purple-700); }
.sbe-share-icons { display: flex; gap: 8px; }
.sbe-share-icons a {
	width: 32px; height: 32px;
	border-radius: 50%;
	border: 1px solid var(--sbe-lavender-300);
	color: var(--sbe-purple-600);
	display: flex; align-items: center; justify-content: center;
	transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.sbe-share-icons a:hover { background: var(--sbe-purple-600); color: #fff; border-color: var(--sbe-purple-600); transform: translateY(-2px); }
.sbe-share-icons .sbe-icon { width: 14px; height: 14px; }

/* ---------- Numbered reasons list ("Why Choose SmartBee IELTS?") ----------
   Simpler than .sbe-timeline — the number lives inline in the heading text
   itself rather than a separate circle badge, matching the source design. */
.sbe-reasons-list { display: flex; flex-direction: column; gap: 26px; margin-top: 28px; list-style: none; padding-left: 0; }
.sbe-reasons-list li { scroll-margin-top: 110px; }
.sbe-reasons-list strong {
	display: block;
	color: var(--sbe-purple-700);
	font-family: var(--sbe-font-heading);
	font-size: 19px;
	font-weight: 600;
	margin-bottom: 6px;
}
.sbe-reasons-list p { margin: 0; color: var(--sbe-text-light); font-size: 14.5px; }

/* ---------- Pathway list (gold circle variant of .sbe-timeline) ----------
   Reuses .sbe-timeline's structure/spacing wholesale — only the number
   badge's resting colour changes (gold instead of lavender/purple), so the
   hover state still upgrades to solid purple like every other timeline. */
.sbe-timeline-gold .sbe-timeline-num { background: var(--sbe-gold-600); color: var(--sbe-purple-900); }
.sbe-timeline-gold li:hover .sbe-timeline-num { background: var(--sbe-purple-700); color: #fff; }
.sbe-explore-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--sbe-purple-700);
	font-family: var(--sbe-font-heading);
	font-weight: 600;
	font-size: 15px;
	margin-top: 4px;
	transition: gap .18s ease, color .18s ease;
}
.sbe-explore-link .sbe-icon { width: 16px; height: 16px; }
.sbe-explore-link:hover { gap: 12px; color: var(--sbe-purple-600); }

/* ---------- Scholarship grid (2x2 numbered cards) ---------- */
.sbe-scholarship-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 26px; }
.sbe-scholarship-item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	background: var(--sbe-lavender-100);
	border-radius: var(--sbe-radius-sm);
	border-bottom: 3px solid var(--sbe-purple-600);
	padding: 18px 20px;
	box-shadow: var(--sbe-shadow);
	transition: box-shadow .2s ease, transform .2s ease;
}
.sbe-scholarship-item:hover { box-shadow: var(--sbe-shadow-lg); transform: translateY(-3px); }
.sbe-scholarship-num {
	flex-shrink: 0;
	width: 32px; height: 32px;
	border-radius: 50%;
	background: var(--sbe-purple-700);
	color: #fff;
	display: flex; align-items: center; justify-content: center;
	font-weight: 600;
	font-size: 13px;
	font-family: var(--sbe-font-heading);
}
.sbe-scholarship-item p { margin: 0; font-size: 14px; font-weight: 600; color: var(--sbe-text); line-height: 1.4; }

/* ---------- Event / expert session card ----------
   The 4 detail items live in their own 2x2 grid so they always wrap as a
   block; the CTA sits in a second flex child and is vertically centered
   against that whole block (rather than being free to wrap onto its own
   row misaligned from any one item, which is what a single flex-wrap row
   of 5 children did before). */
.sbe-event-card {
	border: 1px solid var(--sbe-lavender-300);
	border-radius: var(--sbe-radius);
	box-shadow: var(--sbe-shadow);
	padding: 26px 28px;
	margin-top: 22px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px 40px;
}
.sbe-event-details {
	display: grid;
	grid-template-columns: repeat(2, minmax(200px, 1fr));
	gap: 22px 40px;
	flex: 1 1 420px;
}
.sbe-event-item { display: flex; align-items: center; gap: 12px; }
.sbe-event-icon {
	flex-shrink: 0;
	width: 44px; height: 44px;
}
.sbe-event-icon img { display: block; width: 100%; height: 100%; }
.sbe-event-label { display: block; font-size: 12.5px; color: var(--sbe-text-light); margin-bottom: 2px; }
.sbe-event-value { display: block; font-size: 14.5px; font-weight: 600; color: var(--sbe-text); }
.sbe-event-cta { flex-shrink: 0; align-self: center; }

/* ---------- CTA band (real graphic from the client) ----------
   Uses the actual exported CTA-band background (graduation-cap watermark +
   sunburst + gold checker + arrow doodles) supplied by the client, rather
   than the CSS-approximated shapes from the first pass. */
.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;
	/* .sbe-cta-band's shared base rule only sets padding-top (70px 0 0) —
	   fine for the UK page where bottom-anchored badges fill the lower
	   space, but here it left the content block-flowed near the top with a
	   dead gap below. Switch to flex + justify-content:center so the
	   content is vertically centered in the band regardless of section
	   height, with even breathing room top/bottom instead of a fixed
	   top-only padding. */
	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-hero-note { max-width: 100%; }
	.sbe-scholarship-grid { grid-template-columns: 1fr; }
	.sbe-event-card { padding: 20px; }
	.sbe-event-details { grid-template-columns: 1fr; }
	.sbe-event-cta { width: 100%; }
	.sbe-event-cta .sbe-btn { width: 100%; justify-content: center; }
}