/* ============================================================
   CHILD DEVELOPMENT INNER PAGES — RESPONSIVE FIX & MOBILE CSS
   Fixes broken CSS variables and makes all subpages mobile-first.
   Does NOT change any desktop styling.
   ============================================================ */

/* ---- Force inherit PCT variables in inner pages ---- */
:root {
  --pct-purple:       #A8518A;
  --pct-purple-dark:  #6B2757;
  --pct-purple-deep:  #541B44;
  --pct-yellow:       #E9D5FF;
  --pct-yellow-hover: #C084FC;
  --pct-pink-light:   #FDF4FA;
  --pct-purple-light: #F5E6F2;
  --pct-dark:         #33142A;
  --pct-muted:        #6B5868;
  --pct-white:        #FFFFFF;
  --pct-shadow-sm:    0 8px 24px rgba(168, 81, 138, 0.12);
  --pct-shadow-md:    0 16px 40px rgba(168, 81, 138, 0.18);
  --pct-shadow-lg:    0 24px 60px rgba(168, 81, 138, 0.25);
  --pct-transition:   all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --pct-font-heading: 'Fredoka', 'Plus Jakarta Sans', sans-serif;
  --pct-font-body:    'Inter', -apple-system, sans-serif;
}

/* ---- Inner hero banner — correct override ---- */
.cd-inner-hero {
  background: linear-gradient(135deg, #A8518A 0%, #541B44 100%) !important;
  color: #FFFFFF !important;
  padding: 90px 0 110px !important;
  text-align: center !important;
  border-bottom: 6px solid #C084FC !important;
  position: relative !important;
  overflow: hidden !important;
}
.cd-inner-hero h1 {
  color: #FFFFFF !important;
  font-size: clamp(2rem, 4.5vw, 3.5rem) !important;
  margin-bottom: 16px !important;
}
.cd-inner-hero p {
  font-size: 1.1rem !important;
  color: rgba(255,255,255,0.92) !important;
  max-width: 680px !important;
  margin: 0 auto 28px !important;
  line-height: 1.7 !important;
}
.cd-pill-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #541B44;
  background: #E9D5FF;
  border: 2px solid #C084FC;
  padding: 7px 20px;
  border-radius: 50px;
  margin-bottom: 16px;
  animation: cdBadgeFloat 4s ease-in-out infinite;
}

@keyframes cdBadgeFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}

/* Button Shine & Pulse Effects for Child Development */
.cd-btn-primary, .cd-btn-cta-white, .btn-cd-appointment {
  position: relative;
  overflow: hidden;
  animation: cdBtnPulse 3s ease-in-out infinite;
}
@keyframes cdBtnPulse {
  0%, 100% { box-shadow: 0 8px 24px rgba(168, 81, 138, 0.3); }
  50%       { box-shadow: 0 14px 36px rgba(192, 132, 252, 0.55), 0 0 0 6px rgba(192, 132, 252, 0.15); }
}

.cd-btn-primary::before, .cd-btn-cta-white::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 70%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  transform: skewX(-25deg);
}
.cd-btn-primary:hover::before, .cd-btn-cta-white:hover::before {
  animation: cdShine 0.85s ease-in-out;
}
@keyframes cdShine {
  0% { left: -100%; }
  100% { left: 180%; }
}

/* Card Hover Lift & Glow for Child Dev Cards */
.cd-approach-card, .cd-mv-box, .cd-journey-card, .cd-service-card-item, .cd-blog-card, .cd-gallery-card {
  transition: transform 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.45s ease, border-color 0.35s ease !important;
}
.cd-approach-card:hover, .cd-mv-box:hover, .cd-journey-card:hover, .cd-service-card-item:hover, .cd-blog-card:hover, .cd-gallery-card:hover {
  transform: translateY(-10px) scale(1.02) !important;
  box-shadow: 0 24px 50px rgba(168, 81, 138, 0.22) !important;
}

/* Image zoom effect */
.cd-about-img-box img, .cd-doctor-img-box img, .cd-gallery-img-box img {
  transition: transform 0.6s ease, filter 0.6s ease;
}
.cd-about-img-box:hover img, .cd-doctor-img-box:hover img, .cd-gallery-img-box:hover img {
  transform: scale(1.07);
  filter: brightness(1.04);
}

/* ---- 1024px: Large Tablets ---- */
@media (max-width: 1024px) {
  .cd-container { padding: 0 20px !important; }
  .cd-section-pad { padding: 70px 0 !important; }
  .cd-journey-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .site-footer .footer-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 30px !important; }
}

/* ---- 992px: Tablets ---- */
@media (max-width: 992px) {
  /* Hero */
  .cd-inner-hero { padding: 65px 20px 80px !important; }
  .cd-inner-hero h1 { font-size: 2.2rem !important; }

  /* About page: split layout → stack */
  .cd-about-split { grid-template-columns: 1fr !important; gap: 30px !important; }
  .cd-about-img-box { height: 320px !important; }
  .cd-approach-grid { grid-template-columns: 1fr !important; }

  /* Mission / Vision */
  .cd-mv-container { grid-template-columns: 1fr !important; gap: 24px !important; }

  /* Stats / trust grids */
  .cd-trust-grid, .cd-support-grid, .cd-testi-grid,
  .cd-stats-row, .cd-therapy-row { grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; }

  /* Gallery */
  .cd-gallery-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Doctor profile */
  .cd-doctor-split { grid-template-columns: 1fr !important; gap: 30px !important; }
  .cd-doctor-img-wrap { max-width: 320px !important; margin: 0 auto !important; }

  /* Services */
  .cd-services-grid { grid-template-columns: 1fr !important; }
  .cd-service-item { flex-direction: column !important; }

  /* Contact */
  .cd-contact-grid { grid-template-columns: 1fr !important; gap: 30px !important; }

  /* CTA box */
  .cd-cta-box { padding: 50px 24px !important; border-radius: 28px !important; }
}

/* ---- 768px: Small Tablets ---- */
@media (max-width: 768px) {
  .cd-section-pad { padding: 50px 0 !important; }
  .cd-header-center { margin-bottom: 30px !important; }
  .cd-header-center h2 { font-size: 1.75rem !important; }

  .cd-inner-hero { padding: 55px 16px 70px !important; }
  .cd-inner-hero h1 { font-size: 1.9rem !important; }
  .cd-inner-hero p { font-size: 1rem !important; }

  .cd-journey-grid { grid-template-columns: 1fr !important; }
  .cd-trust-grid, .cd-support-grid, .cd-testi-grid { grid-template-columns: 1fr !important; }
  .cd-gallery-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }

  .cd-mv-box { padding: 30px 22px !important; }

  /* All inline grids → 1 col */
  [style*="grid-template-columns"]:not(.site-footer .footer-grid) {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* Buttons full width */
  .cd-btn-primary, .cd-btn-secondary, .cd-btn-cta-white {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 14px 24px !important;
  }

  /* CTAs group */
  .cd-hero-ctas { flex-direction: column !important; gap: 12px !important; width: 100% !important; }
}

/* ---- 600px: Phones ---- */
@media (max-width: 600px) {
  .cd-inner-hero { padding: 45px 16px 60px !important; }
  .cd-inner-hero h1 { font-size: 1.65rem !important; }
  .cd-pill-tag { font-size: 0.76rem !important; padding: 6px 14px !important; }

  .cd-float-card-1, .cd-float-card-2,
  .cd-hero-float-1, .cd-hero-float-2 { display: none !important; }

  .cd-hero-img-box { height: 260px !important; }

  .cd-gallery-grid { grid-template-columns: 1fr !important; }

  .cd-approach-card { flex-direction: column !important; gap: 10px !important; }
  .cd-journey-card { padding: 24px 18px !important; }

  .site-footer .footer-grid { grid-template-columns: 1fr !important; }
  .site-footer .footer-bottom { flex-direction: column !important; text-align: center !important; }

  h1 { font-size: 1.65rem !important; }
  h2 { font-size: 1.45rem !important; }
  h3 { font-size: 1.2rem !important; }

  p { font-size: 0.95rem !important; line-height: 1.65 !important; }
  img { max-width: 100% !important; height: auto !important; }

  .cd-container { padding: 0 14px !important; }
  section { padding: 40px 0 !important; }
}

/* ---- 480px: Very small phones ---- */
@media (max-width: 480px) {
  .cd-inner-hero h1 { font-size: 1.45rem !important; }
  .cd-cta-box { padding: 32px 16px !important; border-radius: 20px !important; }
  .cd-mv-box { padding: 22px 16px !important; }
  .cd-approach-card { padding: 18px 14px !important; }
  .cd-container { padding: 0 12px !important; }
}