/* =========================================================
   SmartBee — Course Finder page family styles
   Shared by template-course-finder.php (listing) and
   template-course-details.php (single course, reusable —
   duplicate the demo course page and edit the "Course Details —
   Course Content" meta box to add another course).

   Reused as-is from destination.css (loaded as a dependency —
   see functions.php): .sbe-hero/.sbe-hero-overlay/.sbe-guide-tab,
   .sbe-breadcrumb, .sbe-page-body/.sbe-sidebar/.sbe-sidebar-nav,
   .sbe-lead-form-wrap/.sbe-lead-form, .sbe-section/.sbe-callout/
   .sbe-bullets, .sbe-carousel*/.sbe-card/.sbe-course-card (Related
   courses), .sbe-cta-band. Reused from finder.css (also loaded as a
   dependency — the filter sidebar/toolbar/grid/pagination chrome and
   the orange-numbered-list/numbered-card-grid patterns are identical
   between Course Finder and University List, so they live there once
   instead of being duplicated). Only the components unique to this
   family live below.
   ========================================================= */

/* ---------- Course hero (Course Details) ----------
   Stronger, more uniform dark overlay than the shared .sbe-hero-overlay
   gradient (that one's built for a bright top edge on other pages) — this
   page's hero text/badge sit directly on the photo with no white card, so
   the whole image needs to read dark, not just its bottom edge. */
.sbe-hero-course .sbe-hero-overlay {
	background: linear-gradient(180deg, rgba(12,5,22,.55) 0%, rgba(12,5,22,.4) 45%, rgba(10,4,18,.72) 100%);
}
/* H1 and badge now sit in the same flex row as .sbe-hero-inner (not an
   absolutely-positioned overlay) — that's what keeps the badge's full
   height inside the hero's own box (no more spilling past the image into
   the breadcrumb bar) and keeps both aligned to the same top edge. */
.sbe-hero-course .sbe-hero-inner { align-items: flex-start; gap: 32px; }
.sbe-hero-course h1 { max-width: 600px; }

/* ---------- Course hero badge ----------
   No card/box — university logo (or name as text if no logo is set),
   duration line, one-line summary and share icons sit directly on the
   darkened hero photo, top-right, all light text. */
.sbe-course-hero-badge {
	flex: 0 0 360px;
	max-width: 360px;
	text-align: right;
	padding-top: 6px;
}
.sbe-course-hero-logo { display: inline-flex; background: #fff; border-radius: var(--sbe-radius-sm); padding: 8px 14px; margin-bottom: 12px; box-shadow: var(--sbe-shadow); }
.sbe-course-hero-logo img { height: 30px; width: auto; max-width: 260px; object-fit: contain; display: block; }
.sbe-course-hero-badge strong.sbe-course-hero-uni { display: block; color: #fff; font-family: var(--sbe-font-heading); font-size: 17px; margin-bottom: 10px; }
.sbe-course-hero-duration { font-weight: 700; color: #fff; font-size: 14px; margin: 0 0 10px; }
.sbe-course-hero-summary { font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,.82); margin: 0 0 16px; }
.sbe-share-row { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.sbe-share-row span.sbe-share-label { font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.82); }
.sbe-share-icons { display: flex; gap: 8px; }
.sbe-share-icons a {
	width: 30px; height: 30px;
	border-radius: 50%;
	background: rgba(255,255,255,.16);
	border: 1px solid rgba(255,255,255,.3);
	color: #fff;
	display: flex; align-items: center; justify-content: center;
	transition: background .18s ease, color .18s ease, transform .18s ease;
}
.sbe-share-icons a:hover { background: #fff; color: var(--sbe-purple-700); transform: translateY(-2px); }
.sbe-share-icons .sbe-icon { width: 14px; height: 14px; }

/* ---------- Related course card (Course Details) ----------
   New component — landscape photo|content split, unlike the plain vertical
   .sbe-card/.sbe-course-card used everywhere else in the site (Course
   Finder grid, the original Study Destination courses carousel). Reuses
   .sbe-carousel/.sbe-carousel-track for scrolling, .sbe-course-meta/
   .sbe-meta-icon for the meta rows, and the existing .sbe-btn-white +
   smartbee_arrow_circle(false) combo for the "Check Details" button — only
   the card shell/photo treatment below is new. The purple wash on the photo
   is a background-blend-mode duotone (no precedent elsewhere in the theme
   for a full-photo tint, so this introduces the purple gradient + blend
   pairing fresh, using the same brand purples as the hero overlays). */
.sbe-related-card {
	flex: 0 0 480px;
	display: flex;
	align-items: stretch;
	background: #fff;
	border-radius: var(--sbe-radius);
	box-shadow: var(--sbe-shadow);
	overflow: hidden;
	scroll-snap-align: start;
	transition: transform .2s ease, box-shadow .2s ease;
}
.sbe-related-card:hover { transform: translateY(-4px); box-shadow: var(--sbe-shadow-lg); }
.sbe-related-photo {
	flex: 0 0 34%;
	background-size: cover;
	background-position: center;
	background-blend-mode: multiply;
}
.sbe-related-content { flex: 1 1 auto; min-width: 0; padding: 22px 24px; display: flex; flex-direction: column; }
.sbe-related-content h3 { font-size: 17px; margin: 0 0 6px; }
.sbe-related-desc {
	font-size: 13px; color: var(--sbe-text-light); margin: 0 0 14px;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sbe-related-content .sbe-course-meta { margin: 0 0 18px; }
.sbe-related-content .sbe-btn { align-self: flex-start; margin-top: auto; }

/* ---------- CTA band ----------
   No per-family override here on purpose: Course Details uses the exact
   base .sbe-cta-band component (markup + CSS) from destination.css as-is —
   same photo background and badge positioning as template-study-
   destination.php — instead of a duplicated "-ielts" variant. */

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
	.sbe-hero-course .sbe-hero-inner { flex-direction: column; }
	.sbe-hero-course h1 { max-width: 100%; }
	.sbe-course-hero-badge { flex-basis: auto; max-width: 100%; margin-top: 4px; text-align: left; }
	.sbe-course-hero-logo { align-self: flex-start; }
	.sbe-share-row { justify-content: flex-start; }
}

@media (max-width: 600px) {
	.sbe-related-card { flex-basis: 300px; flex-direction: column; }
	.sbe-related-photo { flex-basis: 140px; }
}