/* ==========================================================================
   Blossom Beauty Care — Courses listing pages stylesheet
   Used by: courses/index.php (hub page) and courses/course-group.php
   (single-group pages). Scoped under .bbc-courses-listing-page so it
   cannot leak into, or be affected by, any other page's CSS — including
   allservices.css / services-listing.css, which this file does NOT modify or depend on.

   Colour tokens and fonts are copied 1:1 from allservices.css (the
   individual service-page stylesheet already live on the site) so the
   listing pages look like part of the same site, not a different design.
   ========================================================================== */

.bbc-courses-listing-page {
  --plum-deep: #4A263A;
  --plum-dark: #351B2A;
  --plum-secondary: #6A4053;
  --coral: #E77972;
  --coral-dark: #D56560;
  --apricot: #F4B59D;
  --pearl: #FFFDFC;
  --bg-soft: #FBF4F1;
  --text: #3B2932;
  --text-muted: #735F68;
  --border: #EAD8D3;

  --sl-radius-sm: 10px;
  --sl-radius-md: 16px;
  --sl-radius-lg: 26px;
  --sl-shadow-sm: 0 2px 10px rgba(74, 38, 58, 0.06);
  --sl-shadow-md: 0 10px 30px rgba(74, 38, 58, 0.10);
  --sl-container: 1200px;
  --sl-font-body: "Albert Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --sl-font-display: "Fraunces", Georgia, "Iowan Old Style", serif;

  display: block;
  width: 100%;
  background: var(--pearl);
  color: var(--text);
  font-family: var(--sl-font-body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 60px;
}

.bbc-courses-listing-page * {
  box-sizing: border-box;
}

.bbc-courses-listing-page img {
  max-width: 100%;
  display: block;
}

.bbc-courses-listing-page a {
  color: inherit;
  text-decoration: none;
}

.bbc-courses-listing-page > * {
  padding-left: max(20px, calc((100% - var(--sl-container)) / 2));
  padding-right: max(20px, calc((100% - var(--sl-container)) / 2));
}

.bbc-courses-listing-page h1,
.bbc-courses-listing-page h2,
.bbc-courses-listing-page h3 {
  font-family: var(--sl-font-display);
  color: var(--plum-deep);
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 12px;
}

.bbc-courses-listing-page h1 {
  font-size: clamp(1.9rem, 3.2vw, 2.7rem);
  letter-spacing: -0.01em;
}

.bbc-courses-listing-page h2 {
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  margin: 0;
}

/* ---------- Buttons (same classes/behaviour as service pages) ---------- */

.bbc-courses-listing-page .bbc-cf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 28px;
  border-radius: 999px;
  font-family: var(--sl-font-body);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  border: 1.5px solid transparent;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

.bbc-courses-listing-page .bbc-cf-btn-primary {
  background: var(--coral);
  color: var(--pearl);
  box-shadow: 0 10px 24px rgba(231, 121, 114, 0.35);
}

.bbc-courses-listing-page .bbc-cf-btn-primary:hover {
  background: var(--coral-dark);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(213, 101, 96, 0.4);
}

/* ==========================================================================
   HERO (hub page) / CATEGORY HERO (single-group page)
   ========================================================================== */

.bbc-sl-hero,
.bbc-sl-cat-hero {
  padding-top: clamp(36px, 5vw, 60px);
  padding-bottom: clamp(28px, 4vw, 44px);
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}

.bbc-sl-eyebrow {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--coral-dark);
  margin: 0 0 8px;
}

.bbc-sl-intro {
  font-size: 1.05rem;
  color: var(--text-muted);
  margin: 0 0 22px;
}

.bbc-sl-breadcrumb {
  padding-top: 20px;
  font-size: 0.85rem;
  color: var(--text-muted);
  max-width: var(--sl-container);
  margin: 0 auto;
}

.bbc-sl-breadcrumb a:hover {
  color: var(--coral-dark);
}

.bbc-sl-breadcrumb span {
  color: var(--plum-deep);
  font-weight: 600;
}

/* ==========================================================================
   JUMP NAV (hub page only)
   ========================================================================== */

.bbc-sl-jumpnav {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 10px max(20px, calc((100% - var(--sl-container)) / 2));
  background: var(--pearl);
  border-bottom: 1px solid var(--border);
  margin-bottom: 30px;
  scrollbar-width: thin;
}

.bbc-sl-jumpnav a {
  flex: 0 0 auto;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--plum-secondary);
  white-space: nowrap;
}

.bbc-sl-jumpnav a:hover {
  background: var(--coral);
  border-color: var(--coral);
  color: var(--pearl);
}

/* ==========================================================================
   CATEGORY SECTIONS (hub page)
   ========================================================================== */

.bbc-sl-cat-section {
  padding-top: 8px;
  padding-bottom: 40px;
  scroll-margin-top: 60px;
}

.bbc-sl-cat-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.bbc-sl-viewall {
  flex: 0 0 auto;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--coral-dark);
}

.bbc-sl-viewall:hover {
  text-decoration: underline;
}

/* ==========================================================================
   CARD GRID
   ========================================================================== */

.bbc-sl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
}

.bbc-sl-grid-detailed {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 22px;
}

.bbc-sl-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--sl-radius-md);
  overflow: hidden;
  box-shadow: var(--sl-shadow-sm);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.bbc-sl-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sl-shadow-md);
  border-color: var(--apricot);
}

.bbc-sl-thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, var(--apricot), var(--coral));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
}

.bbc-sl-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bbc-sl-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px 16px;
  flex: 1;
}

.bbc-sl-name {
  font-family: var(--sl-font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--plum-deep);
  line-height: 1.3;
}

.bbc-sl-desc {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 2px 0 4px;
}

.bbc-sl-duration {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--plum-secondary);
  letter-spacing: 0.02em;
}

.bbc-sl-card-detailed .bbc-sl-desc {
  -webkit-line-clamp: 3;
  font-size: 0.86rem;
}

.bbc-sl-price {
  margin-top: auto;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-top: 6px;
}

.bbc-sl-price-current {
  font-family: var(--sl-font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--coral-dark);
}

.bbc-sl-price-original {
  font-size: 0.85rem;
  color: var(--text-muted);
  text-decoration: line-through;
  text-decoration-color: var(--border);
}

.bbc-sl-price-enquire {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--plum-secondary);
}

.bbc-sl-empty {
  color: var(--text-muted);
  padding: 20px 0 40px;
}

/* ==========================================================================
   FLOATING "BOOK APPOINTMENT" — one per page, not one per card
   ========================================================================== */

.bbc-sl-float-book {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 20;
  box-shadow: 0 12px 30px rgba(74, 38, 58, 0.28);
}

/* ==========================================================================
   ADSENSE / THIRD-PARTY-SCRIPT HARDENING

   Auto ads (and any other script that injects markup into the page) can
   insert an element sized before it knows how much room it actually has —
   a wide ad creative, an iframe with explicit width/height attributes,
   etc. Grid/flex items default to min-width:auto, which means ONE
   oversized child is enough to force the whole row — and the whole
   page — wider than the viewport, which is exactly what produces an
   unwanted horizontal scrollbar. These rules make sure nothing injected
   into this page can ever do that, regardless of what it tries to load.
   ========================================================================== */

.bbc-courses-listing-page {
  max-width: 100vw;
}

.bbc-courses-listing-page ins.adsbygoogle,
.bbc-courses-listing-page iframe,
.bbc-courses-listing-page ins,
.bbc-courses-listing-page embed,
.bbc-courses-listing-page object {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.bbc-sl-grid,
.bbc-sl-grid-detailed {
  min-width: 0;
}

.bbc-sl-grid > *,
.bbc-sl-grid-detailed > * {
  min-width: 0;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 900px) {
  .bbc-sl-grid,
  .bbc-sl-grid-detailed {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
  }
}

@media (max-width: 600px) {
  .bbc-courses-listing-page {
    font-size: 15px;
    padding-bottom: 90px;
  }

  .bbc-sl-grid,
  .bbc-sl-grid-detailed {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .bbc-sl-name {
    font-size: 0.92rem;
  }

  .bbc-sl-cat-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .bbc-sl-float-book {
    right: 14px;
    bottom: 14px;
  }

  .bbc-sl-float-book span.bbc-sl-float-label {
    display: none;
  }
}