/* ============================================================
   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;
}

/* Global Mobile Viewport Constraint */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

/* ---- 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; }
  .cd-approach-img {
    height: auto !important;
    max-height: 420px !important;
    max-width: 500px !important;
    margin: 0 auto 24px !important;
    border-radius: 28px !important;
    border-width: 4px !important;
    overflow: hidden !important;
  }
  .cd-approach-img img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: cover !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, .cd-doctor-img-box {
    width: 100% !important;
    max-width: 310px !important;
    height: auto !important;
    aspect-ratio: 3 / 4 !important;
    margin: 0 auto !important;
  }
  .cd-doctor-img-box img, .cd-doctor-img-wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 15% !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 {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    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, .cd-btn-cta-outline {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 14px 24px !important;
  }

  /* CTAs group */
  .cd-hero-ctas, .cd-cta-btns { 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; }
  
  /* Brand Logos - Keep strictly bounded on mobile */
  .brand img {
    height: 52px !important;
    width: auto !important;
    max-width: none !important;
    flex-shrink: 0 !important;
  }
  .site-footer .brand img {
    height: 48px !important;
    width: auto !important;
    max-width: none !important;
    flex-shrink: 0 !important;
  }
  .site-footer .brand-text span {
    white-space: normal !important;
    word-break: break-word !important;
  }

  /* Content Images - Responsive without breaking fixed-height containers */
  img:not(.cd-team-img-wrap img):not(.brand img):not(.cd-doctor-img-box img):not(.cd-approach-img img):not(.cd-gallery-img-box img):not(.cd-hero-img-box img) {
    max-width: 100% !important;
    height: auto;
  }

  /* Why Families Choose Us Image Container - Mobile */
  .cd-approach-img {
    height: auto !important;
    max-height: none !important;
    width: 100% !important;
    max-width: 420px !important;
    margin: 0 auto 20px !important;
    border-radius: 26px !important;
    border: 4px solid var(--pct-purple) !important;
    overflow: hidden !important;
    box-shadow: var(--pct-shadow-md) !important;
  }
  .cd-approach-img img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: cover !important;
  }

  /* Multidisciplinary Team Section Mobile Support */
  .cd-team-grid {
    grid-template-columns: 1fr !important;
    max-width: 360px !important;
    margin: 25px auto 0 !important;
    gap: 22px !important;
  }
  .cd-team-img-wrap {
    aspect-ratio: 3 / 3.8 !important;
    width: 100% !important;
    overflow: hidden !important;
  }
  .cd-team-img-wrap img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center top !important;
  }

  /* Therapy Cards (Comprehensive Therapy Wings) Mobile Layout */
  .cd-therapy-card {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 20px 18px 22px !important;
    border-radius: 26px !important;
    gap: 14px !important;
  }
  .cd-therapy-info {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
    width: 100% !important;
  }
  .cd-therapy-thumb {
    width: 100% !important;
    height: 220px !important;
    aspect-ratio: 16 / 10 !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    box-shadow: 0 6px 18px rgba(168, 81, 138, 0.15) !important;
    border: 2px solid #A8518A !important;
    background: #FDF4FA !important;
  }
  .cd-therapy-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
  }
  .cd-therapy-icon {
    display: none !important;
  }
  .cd-therapy-text {
    width: 100% !important;
  }
  .cd-therapy-text h3 {
    font-size: 1.25rem !important;
    color: #541B44 !important;
    margin: 0 0 6px !important;
  }
  .cd-therapy-text p {
    font-size: 0.93rem !important;
    line-height: 1.6 !important;
    color: #6B5868 !important;
    margin: 0 !important;
  }
  .cd-therapy-arrow {
    align-self: flex-end !important;
    width: 44px !important;
    height: 44px !important;
    font-size: 1.25rem !important;
    margin-top: 2px !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-approach-img {
    border-radius: 20px !important;
    border-width: 3.5px !important;
  }
  .cd-container { padding: 0 12px !important; }
  .cd-team-grid { max-width: 100% !important; }
}