/* ==========================================================================
   Blossom Beauty Care — Course detail pages stylesheet
   Used by: every courses/{slug}.php individual course page (31 pages).

   DELIBERATE DESIGN CHOICE — please read before extending:
   The existing individual SERVICE pages (e.g. classic-facial.php) each
   reference a shared 'all-services.css' file with a distinct class
   prefix per page (bbc-cf-*, etc.). This session never had access to
   the actual contents of all-services.css, so rather than guess at 31
   near-duplicate, unverified CSS blocks, every course detail page
   below shares ONE stylesheet and ONE class prefix (bbc-cd-*, "course
   detail"), scoped under .bbc-course-detail-page. This is functionally
   equivalent and easier to maintain; only .bbc-cf-btn / .bbc-cf-btn-
   primary are kept as class NAMES (not re-styled from scratch) so
   button markup stays consistent with the rest of the site if you
   later want to merge these into one global stylesheet.

   Colour tokens and fonts are copied 1:1 from courses-listing.css /
   services-listing.css so this page looks like part of the same site.
   ========================================================================== */

.bbc-course-detail-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;

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

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

.bbc-course-detail-page * {
  box-sizing: border-box;
}

.bbc-course-detail-page img {
  max-width: 100%;
  display: block;
}

.bbc-course-detail-page a {
  color: inherit;
}

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

.bbc-course-detail-page h1,
.bbc-course-detail-page h2,
.bbc-course-detail-page h3 {
  font-family: var(--cd-font-display);
  color: var(--plum-deep);
  font-weight: 600;
  line-height: 1.28;
  margin: 0 0 12px;
}

.bbc-course-detail-page h1 {
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  letter-spacing: -0.01em;
}

.bbc-cd-content h2 {
  font-size: clamp(1.25rem, 1.9vw, 1.55rem);
  margin-top: 34px;
}

.bbc-cd-content h3 {
  font-size: 1.05rem;
  margin-top: 20px;
}

.bbc-cd-content p,
.bbc-cd-content li {
  margin: 0 0 16px;
  color: var(--text);
}

.bbc-cd-content ul {
  padding-left: 22px;
  margin: 0 0 16px;
}

/* ---------- Buttons ---------- */

.bbc-cf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 28px;
  border-radius: 999px;
  font-family: var(--cd-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-cf-btn-primary {
  background: var(--coral);
  color: var(--pearl);
  box-shadow: 0 10px 24px rgba(231, 121, 114, 0.35);
}

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

.bbc-cf-btn-secondary {
  background: transparent;
  color: var(--plum-deep);
  border-color: var(--border);
}

.bbc-cf-btn-secondary:hover {
  border-color: var(--coral);
  color: var(--coral-dark);
}

/* ==========================================================================
   BREADCRUMB
   ========================================================================== */

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

.bbc-cd-breadcrumb a:hover {
  color: var(--coral-dark);
  text-decoration: underline;
}

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

/* ==========================================================================
   HERO
   ========================================================================== */

.bbc-cd-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 34px;
  align-items: center;
  padding-top: clamp(24px, 4vw, 40px);
  padding-bottom: clamp(28px, 4vw, 40px);
}

.bbc-cd-hero-media {
  border-radius: var(--cd-radius-lg);
  overflow: hidden;
  background: linear-gradient(135deg, var(--apricot), var(--coral));
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--cd-shadow-md);
}

.bbc-cd-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

.bbc-cd-intro {
  font-size: 1.02rem;
  color: var(--text-muted);
  margin: 0 0 18px;
}

.bbc-cd-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 0 0 18px;
}

.bbc-cd-meta-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bbc-cd-meta-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.bbc-cd-meta-value {
  font-family: var(--cd-font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--plum-deep);
}

.bbc-cd-price-block {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 22px;
}

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

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

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

.bbc-cd-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ==========================================================================
   MAIN CONTENT ARTICLE
   ========================================================================== */

.bbc-cd-content {
  max-width: var(--cd-container);
  margin: 0 auto;
  padding-top: 10px;
}

.bbc-cd-lead {
  font-size: 1.08rem;
  color: var(--text);
}

/* ==========================================================================
   FAQ
   ========================================================================== */

.bbc-cd-faq-item {
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
}

.bbc-cd-faq-item:last-child {
  border-bottom: none;
}

.bbc-cd-faq-item h3 {
  margin: 0 0 8px;
}

.bbc-cd-faq-item p {
  margin: 0;
  color: var(--text-muted);
}

/* ==========================================================================
   FLOATING "ENQUIRE" CTA
   ========================================================================== */

.bbc-cd-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 (same discipline as
   courses-listing.css / services-listing.css)
   ========================================================================== */

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

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

@media (max-width: 780px) {
  .bbc-cd-hero {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

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

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

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