/* ============================================================
   KindMind by Eroisha — Responsive CSS
   Isolates mobile & tablet visual excellence and layouts.
   ============================================================ */

/* ── TABLET & SMALL SCREEN DEVICES (max-width: 900px) ───── */
@media (max-width: 900px) {
  /* Navigation */
  .nav-cta {
    display: none !important; /* Hide cramped ghost button on top mobile navbar */
  }
  .nav-logo img {
    height: 100px !important; /* Elegant logo sizing on mobile */
  }
  .hamburger {
    display: flex !important; /* Ensure hamburger is visible */
  }

  /* About Section Sticky Fix */
  .about-image-col {
    position: relative !important;
    top: 0 !important;
    margin-bottom: 24px !important;
  }
  .about-photo-frame {
    min-height: auto !important;
    aspect-ratio: 1.1 / 1 !important; /* Balanced photo box on mobile */
    padding: 32px 24px 0 !important;
  }
  .about-photo {
    max-height: 300px !important;
  }
  .about-signature {
    text-align: center !important;
    margin-top: 18px !important;
    font-size: 32px !important;
  }
  .about-social {
    justify-content: center !important;
    margin-top: 14px !important;
    margin-bottom: 32px !important;
  }

  /* Stats Section Centering */
  .stat-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
  .stat-text {
    margin: 0 auto !important;
  }

  /* Footer Mobile Formatting */
  .site-footer {
    text-align: center !important;
    padding: 64px 24px 32px !important;
  }
  .footer-brand {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    margin-bottom: 40px !important;
  }
  .footer-brand p {
    max-width: 100% !important;
    margin-bottom: 24px !important;
  }
  .footer-social {
    justify-content: center !important;
  }
  .footer-cols {
    grid-template-columns: 1fr !important;
    text-align: center !important;
    gap: 36px !important;
  }
  .footer-bottom {
    flex-direction: column !important;
    gap: 16px !important;
    text-align: center !important;
    padding-top: 32px !important;
  }
  
  .navbar.scrolled .nav-logo img {
  height: 40px !important;
}
  
}

/* ── PHONE DEVICES (max-width: 600px) ───────────────────── */
@media (max-width: 600px) {
  /* Global side padding reduction to 12px */
  .container {
    padding: 0 12px !important;
  }
  .navbar, .navbar.scrolled {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .about,
  .stats,
  .services,
  .how-it-works,
  .testimonials,
  .cta-section {
    padding: 60px 12px !important; /* Tight 60px top/bottom padding with 12px side padding */
  }
  .site-footer {
    padding: 60px 12px 32px !important; /* Balanced footer padding */
  }
  .page-shell {
    padding: 100px 12px 60px !important; /* 100px top padding to safely clear the fixed mobile navbar */
  }
  .section-spacing {
    padding: 56px 0 !important; /* Elegant top/bottom spacing on mobile */
  }

  /* Hero Section */
  .hero {
    padding: 120px 12px 60px !important;
  }
  .hero-content {
    text-align: center !important;
    margin-bottom: 0px !important;
  }
  .hero-image-wrapper {
    display: block !important;
    position: relative !important;
    max-width: 480px !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }
  .hero-image-wrapper img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    border-radius: 4px !important;
  }

  /* Floating tags mobile scaling & containment */
  .float-tag {
    padding: 6px 12px !important;
    font-size: 11px !important;
  }
  .float-tag.float-caring {
    top: 8% !important;
    left: 4% !important;
  }
  .float-tag.float-convenient {
    top: 42% !important;
    left: 2% !important; /* Kept inside viewport to prevent horizontal scroll */
  }
  .float-tag.float-confidential {
    top: 58% !important;
    bottom: auto !important;
    right: 4% !important;
  }

  /* Hero credentials badge redesigned as a clean horizontal details row below the photo on mobile */
  .hero-credential {
    position: relative !important;
    left: 0 !important;
    bottom: 0 !important;
    margin-top: 18px !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 14px 20px !important;
    gap: 12px !important;
    background: var(--km-surface-warm) !important;
    border: 1px solid var(--km-border-subtle) !important;
    border-radius: 2px !important;
    box-shadow: none !important;
  }
  .hero-credential .cred-line {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
  }
  .hero-credential .cred-label {
    font-size: 9px !important;
    margin-bottom: 0 !important;
  }
  .hero-credential .cred-val {
    font-size: 15px !important;
    line-height: 1 !important;
  }
  .hero-content h1 {
    font-size: clamp(38px, 9vw, 54px) !important;
    line-height: 1.1 !important;
  }
  .hero-subtitle {
    font-size: 16px !important;
    margin: 0 auto 28px !important;
  }
  .hero-actions {
    flex-direction: column !important;
    align-items: center !important;
    gap: 14px !important;
  }
  .hero-actions .btn-cta,
  .hero-actions .link-quiet {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }
  .hero-actions .link-quiet {
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  .hero-modalities {
    display: none !important;
  }

  /* Credentials Banner */
  .credentials {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .cred-card {
    border-left: 0 !important;
    border-top: 1px solid var(--km-border-subtle) !important;
    padding: 16px 0 0 !important;
    align-items: center !important;
    text-align: center !important;
  }
  .cred-card:first-child {
    border-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Benefits Banner */
  .benefits {
    padding: 48px 0 !important;
  }
  .benefits h3 {
    font-size: 20px !important;
    line-height: 1.6 !important;
  }
  .benefit-icon {
    width: 38px !important;
    height: 38px !important;
    margin: -3px 8px 0 !important;
  }
  .benefit-icon svg {
    width: 16px !important;
    height: 16px !important;
  }

  /* Services cards mobile details */
  .services-header h2 {
    font-size: 36px !important;
  }
  .service-card.editorial .service-card-body {
    padding: 24px 20px !important;
  }
  .service-card.editorial h3 {
    font-size: 24px !important;
  }

  /* Steps / Process Section */
  .how-header h2 {
    font-size: 36px !important;
  }
  .step-card {
    padding: 32px 24px !important;
  }
  .step-number {
    font-size: 48px !important;
  }

  /* Testimonials Mobile Optimization */
  .testimonials-header {
    margin-bottom: 48px !important;
    padding: 0 20px !important;
  }
  .testimonials-header h2 {
    font-size: 36px !important;
  }
  .testimonial-card.editorial {
    flex: 0 0 290px !important; /* Perfect card footprint on narrow screens */
    margin-right: 20px !important;
    padding: 28px 24px 24px !important;
    gap: 18px !important;
  }
  .testimonial-card.editorial blockquote {
    font-size: 16px !important;
    line-height: 1.45 !important;
  }
  .testimonial-meta-row {
    gap: 10px !important;
  }

  /* CTA Section / Card */
  .cta-section {
    padding: 56px 20px !important;
  }
  .cta-card {
    padding: 40px 24px !important;
    border-radius: 4px !important;
  }
  .cta-card h2 {
    font-size: 32px !important;
    line-height: 1.15 !important;
    margin-bottom: 24px !important;
  }
  
  .navbar.scrolled .nav-logo img {
  height: 40px !important;
}
  
}