
/* ========================================
   RESPONSIVE FIXES - Comprehensive Mobile-First
   ======================================== */

/* ===== Small phones (< 400px) ===== */
@media (max-width: 399.98px) {
  .set-topbar { font-size: 0.7rem; }
  .set-topbar .py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
  .set-navbar .logo-img { height: 48px; }
  .set-nav-links a { font-size: 0.7rem !important; padding: 0.5rem 0.4rem !important; }

  #heroCarousel .carousel-caption h1,
  #heroCarousel .carousel-caption h2 { font-size: 1.3rem !important; }
  #heroCarousel .carousel-caption .lead { font-size: 0.85rem !important; }
  .slide-subtitle { font-size: 0.65rem !important; }

  .page-hero { min-height: 24vh !important; }
  .page-hero h1 { font-size: 1.4rem !important; }
  .page-hero .lead { font-size: 0.85rem !important; }

  .section-padding { padding: 2rem 0 !important; }
  .section-padding-sm { padding: 1.5rem 0 !important; }

  .floating-give-btn { width: 48px; height: 48px; font-size: 1.2rem; bottom: 1rem; right: 1rem; }
  .floating-give-btn .tooltip-text { display: none; }

  .quick-link-card { padding: 1.2rem 0.8rem !important; }
  .quick-link-card .ql-icon { width: 48px; height: 48px; font-size: 1.2rem; }
  .quick-link-card h5 { font-size: 0.8rem !important; }
  .quick-link-card p { font-size: 0.7rem !important; }

  .vision-icon { width: 56px; height: 56px; font-size: 1.4rem; }
  .vision-card h5 { font-size: 0.95rem; }
  .vision-card p { font-size: 0.78rem; }

  .life-card { height: 200px !important; }
  .life-card .life-overlay { padding: 1rem !important; }
  .life-card .life-overlay h5 { font-size: 0.9rem; }
  .life-card .life-overlay p { font-size: 0.72rem; }

  .schedule-card { min-width: 140px !important; }

  .support-card { padding: 1.5rem 1rem 1.25rem !important; }
  .support-card .sc-icon { width: 52px; height: 52px; font-size: 1.3rem; }
  .support-card h5 { font-size: 0.9rem; }
  .support-card p { font-size: 0.78rem; }
  .support-card .btn { font-size: 0.72rem; padding: 0.5rem 1.2rem; }
  .support-section h2 { font-size: 1.5rem !important; }
  .support-section .section-sub { font-size: 0.88rem; }

  .blockquote { font-size: 1rem !important; }

  .member-card-img { height: 160px !important; }

  .footer-heading { font-size: 0.78rem; }
  .footer-links a { font-size: 0.78rem; }
  .footer-bottom p { font-size: 0.72rem; }
}

/* ===== Small phones extra ===== */
@media (max-width: 575.98px) {
  .set-topbar .container { padding: 0 0.75rem; }
  .set-topbar .py-1 { padding-top: 0.35rem !important; padding-bottom: 0.35rem !important; }

  .set-navbar .container { padding: 0 0.75rem; }
  .set-navbar .logo-img { height: 52px; }

  #heroCarousel,
  #heroCarousel .carousel-inner,
  #heroCarousel .carousel-item {
    height: 65vh !important;
    min-height: 320px !important;
  }

  #heroCarousel .carousel-caption h1,
  #heroCarousel .carousel-caption h2 {
    font-size: 1.5rem !important;
    letter-spacing: -0.01em !important;
  }
  #heroCarousel .carousel-caption .lead {
    font-size: 0.88rem !important;
    padding: 0 0.5rem;
  }
  .slide-buttons .btn { padding: 0.5rem 1.2rem !important; font-size: 0.82rem !important; }
  .slide-buttons .btn + .btn { margin-top: 0.5rem; margin-left: 0 !important; }

  .section-padding { padding: 2.5rem 0 !important; }

  .life-card { height: 220px !important; }

  .gallery-grid .gallery-item img { height: 160px; }

  .footer-bottom .row { text-align: center !important; }
  .footer-bottom .text-md-end { text-align: center !important; margin-top: 0.5rem; }
  .footer-bottom-link { margin: 0 0.5rem !important; font-size: 0.75rem; }
}

/* ===== Tablets (576px - 768px) ===== */
@media (min-width: 576px) and (max-width: 768px) {
  .set-navbar .logo-img { height: 56px; }
  .life-card { height: 240px; }
}

/* ===== Medium devices (769px - 992px) ===== */
@media (min-width: 769px) and (max-width: 991.98px) {
  .set-navbar .logo-img { height: 60px; }
  .set-nav-links a { font-size: 0.7rem !important; padding: 0.6rem 0.5rem !important; }
  .set-nav-links .nav-sep { font-size: 0.9rem; padding: 0 0.1rem; }
  .set-nav-cta a { font-size: 0.68rem !important; padding: 0.5rem 1rem !important; }
}

/* ===== General mobile fixes ===== */
@media (max-width: 991.98px) {
  /* Container padding */
  .container { padding-left: 1rem; padding-right: 1rem; }

  /* Hero carousel mobile */
  #heroCarousel .carousel-caption { padding-left: 0 !important; text-align: center !important; }
  .slide-divider { margin-left: auto !important; margin-right: auto !important; }

  /* Vision section */
  .vision-section .row { gap: 0.75rem !important; }
  .vision-card { padding: 1.5rem 1rem !important; }

  /* Quick links - better mobile grid */
  .quick-link-card { padding: 1.25rem 0.75rem; }
  .quick-link-card h5 { font-size: 0.82rem; }

  /* Life cards */
  .life-card { height: 200px; }

  /* Schedule scroll */
  .schedule-scroll { padding-bottom: 1rem; gap: 0.75rem !important; }
  .schedule-card { min-width: 150px; }

  /* Support section */
  .support-section { padding: 3rem 0 !important; }
  .support-card { margin-bottom: 0.5rem; }
  .support-section .row { gap: 0.5rem !important; }

  /* Footer */
  .main-footer { padding: 2.5rem 0 1.5rem !important; }
  .main-footer h5 { font-size: 0.85rem; margin-bottom: 1rem; }
  .main-footer p, .main-footer li { font-size: 0.82rem; line-height: 1.7; }
  .main-footer ul li::before { display: none; }
  .main-footer .social-links a { width: 34px; height: 34px; font-size: 0.85rem; }
  .footer-bottom-link { margin-left: 0 !important; }

  /* Member cards */
  .member-card-img { height: 180px; }
}

/* ===== Gallery grid responsive ===== */
@media (max-width: 575.98px) {
  .gallery-grid .gallery-item img { height: 140px; }
}

/* ===== Forms responsive ===== */
@media (max-width: 575.98px) {
  .form-control, .form-select { padding: 0.55rem 0.75rem; font-size: 0.88rem; }
  .form-label { font-size: 0.82rem; }
}

/* ===== Breadcrumb responsive ===== */
@media (max-width: 575.98px) {
  .breadcrumb { padding: 0.5rem 0; }
  .breadcrumb-item { font-size: 0.78rem; }
}

/* ===== Page hero inner content responsive ===== */
@media (max-width: 575.98px) {
  .page-hero { min-height: 28vh !important; }
  .page-hero h1 { font-size: 1.5rem !important; line-height: 1.3 !important; }
  .page-hero .lead { font-size: 0.88rem !important; }
}

/* ===== Donate page responsive ===== */
@media (max-width: 575.98px) {
  .payment-card { padding: 1.25rem !important; }
  .momo-number { font-size: 1.1rem !important; }
}

/* ===== Table responsive wrapper ===== */
.table-responsive { border-radius: var(--radius-lg); }

/* ===== Image overflow prevention ===== */
img { max-width: 100%; height: auto; }

/* ===== Prevent horizontal scroll ===== */
html { overflow-x: hidden; }
body { overflow-x: hidden; }

/* ===== Fix sticky navbar height offset ===== */
.set-navbar.sticky-top + div,
.set-navbar.sticky-top + section {
  scroll-margin-top: 80px;
}

/* ===== Accessibility: focus states for mobile ===== */
@media (max-width: 991.98px) {
  .set-nav-links a:focus,
  .set-nav-cta a:focus {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
  }
}

/* ===== Smooth transition for all interactive elements ===== */
* { -webkit-tap-highlight-color: transparent; }
