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

   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 (base card chrome —
   border-radius/shadow/flex:0 0 280px), .sbe-cta-band. Reused from
   finder.css (also a dependency): .sbe-hero-split (List hero), the
   filter sidebar/toolbar/grid/pagination chrome, .sbe-orangelist
   (Accommodation), and .sbe-numcard-grid (Facilities/Student Life) —
   same patterns as Course Finder/Course Details, zero customisation
   needed so nothing is duplicated here. Only the components unique to
   this family live below.
   ========================================================= */

/* ---------- University hero (University Details) ----------
   Same treatment as Course Details' .sbe-hero-course: a stronger, more
   uniform dark overlay (badge/H1 sit directly on the photo, no white
   card) and the badge in the same flex row as the H1 so its height
   never spills past the hero's own box. */
.sbe-hero-university .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%);
}
.sbe-hero-university .sbe-hero-inner { align-items: flex-start; gap: 32px; }
.sbe-hero-university h1 { max-width: 600px; }

/* ---------- University hero badge ----------
   Two stat lines (Founded / QS Ranking) + share icons, no card/box —
   light text directly on the darkened hero photo, top-right. */
.sbe-university-hero-badge { flex: 0 0 300px; max-width: 300px; text-align: right; padding-top: 6px; }
.sbe-university-hero-stats { display: flex; justify-content: flex-end; gap: 26px; margin-bottom: 16px; }
.sbe-university-hero-stat { text-align: right; }
.sbe-university-hero-stat-label { display: block; font-size: 12px; color: rgba(255,255,255,.75); margin-bottom: 4px; }
.sbe-university-hero-stat-value { display: block; font-family: var(--sbe-font-heading); font-weight: 700; color: #fff; font-size: 21px; }
/* Same share-row treatment as course.css's .sbe-course-hero-badge — kept
   as its own copy here (not moved to finder.css) since it's tied to the
   hero-badge visual context, not a generic listing-chrome pattern. */
.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; }

/* ---------- University card (List grid + Similar Universities) ----------
   Reuses the exact .sbe-uni-card component from destination.css verbatim
   (same card already used for "Popular Universities" on
   template-study-destination.php) — logo (.sbe-uni-logo), name, tagline
   (.sbe-uni-subtitle), hr, description (.sbe-uni-desc, flex-grow:1 —
   equalises card height across a row), founded pill (.sbe-pill), rankings
   row (.sbe-uni-stats), button pinned to the bottom
   (.sbe-uni-card .sbe-btn-block, also in destination.css). .sbe-university-
   card is kept only as the data-attribute/JS hook for the finder script —
   it carries no styling of its own. Nothing unique to add here. */

/* ---------- CTA band ----------
   No per-family override here on purpose, same as course.css: University
   Details uses the exact base .sbe-cta-band component from destination.css
   as-is. */

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