/* ==========================================================================
   Blossom Beauty Care — Classic Facial service page stylesheet
   Scope: everything is nested under .bbc-classic-facial-page so it cannot
   leak into, or be affected by, unrelated site styles (including the
   existing About Us CSS, which is NOT modified by this file).

   Design tokens below match the About Us page's exact palette values.
   Fraunces / Albert Sans are referenced by name only — assumed already
   loaded site-wide (see assumption #8 in classic-facial.php). No
   generic/global class names (.card, .container, .title, .section, etc.)
   are used anywhere in this file.
   ========================================================================== */

.bbc-classic-facial-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;

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

  /* Plain, normal block width — matches how .header and .footer already
     size themselves (100% of body, no vw tricks). `100vw` was tried here
     earlier, but vw includes the browser's scrollbar width while the
     header/footer's 100% does not, so it made this section a few pixels
     WIDER than the rest of the page and threw off alignment. The real
     fix for the squeezed look lives below, on the paragraph/heading
     max-width rules — this element itself was never the problem. */
  display: block;
  width: 100%;

  background: var(--pearl);
  color: var(--text);
  font-family: var(--cf-font-body);
  font-size: 16px;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

.bbc-classic-facial-page * {
  box-sizing: border-box;
}

.bbc-classic-facial-page img {
  max-width: 100%;
  display: block;
}

.bbc-classic-facial-page a {
  color: inherit;
}

.bbc-classic-facial-page > section,
.bbc-classic-facial-page > article {
  padding-left: max(24px, calc((100% - var(--cf-container)) / 2));
  padding-right: max(24px, calc((100% - var(--cf-container)) / 2));
}

.bbc-classic-facial-page h1,
.bbc-classic-facial-page h2,
.bbc-classic-facial-page h3 {
  font-family: var(--cf-font-display);
  color: var(--plum-deep);
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 16px;
}

.bbc-classic-facial-page h1 {
  font-size: clamp(2rem, 3.4vw, 2.9rem);
  letter-spacing: -0.01em;
}

.bbc-classic-facial-page h2 {
  font-size: clamp(1.5rem, 2.2vw, 1.95rem);
  margin-top: 8px;
}

.bbc-classic-facial-page h3 {
  font-size: 1.1rem;
  font-weight: 600;
}

.bbc-classic-facial-page p {
  color: var(--text-muted);
  max-width: 100%;
  margin: 0 0 18px;
}

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

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

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

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

.bbc-classic-facial-page .bbc-cf-btn-secondary:hover {
  background: var(--plum-deep);
  color: var(--pearl);
  transform: translateY(-2px);
}

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

.bbc-cf-hero {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 5vw, 64px);
  padding-top: clamp(40px, 6vw, 72px);
  padding-bottom: clamp(48px, 6vw, 80px);
}

.bbc-cf-hero-media img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 25%;
  border-radius: var(--cf-radius-lg);
  box-shadow: var(--cf-shadow-md);
  border: 1.5px solid var(--border);
}

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

.bbc-cf-intro {
  font-size: 1.05rem;
  max-width: 100%;
}

/* ---------- Price block ---------- */

.bbc-cf-price-block {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 4px 0 28px;
}

.bbc-cf-price-current {
  font-family: var(--cf-font-display);
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--coral-dark);
  line-height: 1;
}

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

.bbc-cf-price-enquire {
  font-family: var(--cf-font-display);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--plum-secondary);
}

.bbc-cf-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

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

.bbc-cf-content {
  padding-top: var(--cf-gap-section);
  padding-bottom: var(--cf-gap-section);
  background: var(--bg-soft);
  border-radius: var(--cf-radius-lg);
  margin-bottom: 40px;
}

.bbc-cf-lead {
  font-size: 1.08rem;
  color: var(--text);
  max-width: 100%;
}

.bbc-cf-content h2 {
  margin-top: 40px;
}

.bbc-cf-content h2:first-of-type {
  margin-top: 24px;
}

/* ---------- FAQ ---------- */

.bbc-cf-faq-item {
  padding: 22px 24px;
  background: var(--pearl);
  border: 1px solid var(--border);
  border-radius: var(--cf-radius-md);
  margin-bottom: 16px;
  box-shadow: var(--cf-shadow-sm);
}

.bbc-cf-faq-item:last-of-type {
  margin-bottom: 0;
}

.bbc-cf-faq-item h3 {
  color: var(--plum-deep);
  margin-bottom: 8px;
}

.bbc-cf-faq-item p {
  margin-bottom: 0;
  max-width: none;
}

/* ==========================================================================
   MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .bbc-classic-facial-page .bbc-cf-btn {
    transition: none;
  }
  .bbc-classic-facial-page .bbc-cf-btn-primary:hover,
  .bbc-classic-facial-page .bbc-cf-btn-secondary:hover {
    transform: none;
  }
}

/* ==========================================================================
   RESPONSIVE — TABLET (≤ 900px)
   ========================================================================== */

@media (max-width: 900px) {
  .bbc-cf-hero {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .bbc-cf-hero-media {
    max-width: 380px;
    margin: 0 auto;
  }

  .bbc-cf-hero-media img {
    max-height: 320px;
  }

  .bbc-cf-hero-content {
    text-align: center;
  }

  .bbc-cf-intro {
    margin-left: auto;
    margin-right: auto;
  }

  .bbc-cf-price-block {
    justify-content: center;
  }

  .bbc-cf-hero-cta {
    justify-content: center;
  }
}

/* ==========================================================================
   RESPONSIVE — MOBILE (≤ 600px)
   ========================================================================== */

@media (max-width: 600px) {
  .bbc-classic-facial-page {
    font-size: 15px;
  }

  .bbc-classic-facial-page > section,
  .bbc-classic-facial-page > article {
    padding-left: 20px;
    padding-right: 20px;
  }

  .bbc-cf-hero {
    padding-top: 28px;
    padding-bottom: 36px;
  }

  .bbc-cf-hero-media {
    max-width: 100%;
    width: 100%;
    margin: 0;
  }

  .bbc-cf-hero-media img {
    aspect-ratio: 3 / 2;
    max-height: 260px;
    object-position: 50% 22%;
    border-radius: var(--cf-radius-md);
  }

  .bbc-cf-hero-cta {
    flex-direction: column;
    width: 100%;
  }

  .bbc-cf-hero-cta .bbc-cf-btn {
    width: 100%;
  }

  .bbc-cf-content {
    border-radius: var(--cf-radius-md);
  }

  .bbc-cf-faq-item {
    padding: 18px 18px;
  }
}

/* ==========================================================================
   RESPONSIVE — SMALL MOBILE (≤ 400px)
   ========================================================================== */

@media (max-width: 400px) {
  .bbc-cf-hero-media img {
    max-height: 210px;
  }
}