/* ============================================================
   mobile.css — Complete Mobile UX Polish
   Subhvaishali Foundation
   ============================================================ */

/* ── BASE MOBILE RESET ── */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: hidden; -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; -webkit-tap-highlight-color: transparent; }
img  { max-width: 100%; height: auto; display: block; }

/* ── TOUCH TARGET MINIMUM 44px ── */
a, button, input[type="submit"], input[type="button"],
.filter-btn, .know-more-btn, .btn, .btn-nav,
.sf-burger, .sf-acc-btn, .sf-signin-btn {
  min-height: 44px;
  touch-action: manipulation;
}

/* ── SMOOTH SCROLLING ── */
html { scroll-behavior: smooth; }

/* ── PREVENT ZOOM ON INPUT FOCUS (iOS) — only on mobile ── */
@media (max-width: 900px) {
  input, textarea, select {
    font-size: max(16px, 1em);
  }
}

/* ── HEADER PADDING FIX ── */
body { padding-top: 0; }

/* ============================================================
   BREAKPOINT: ≤ 1024px (Tablet)
   ============================================================ */
@media (max-width: 1024px) {
  .hero-container    { flex-direction: column; text-align: center; gap: 28px; }
  .hero-left h1      { font-size: 32px; }
  .hero-sub          { text-align: center; max-width: 100%; }
  .hero-buttons      { justify-content: center; }
  .hero-stats        { justify-content: center; }
  .hero-image-frame  { justify-content: center; }
  .hero-image-frame img { width: 300px; height: 300px; }

  .volunteer-container,
  .contact-box,
  .donate-box        { flex-direction: column; }
  .donate-inner      { grid-template-columns: 1fr; }
  .donate-card-box   { grid-template-columns: 1fr 1fr; }
  .foundation-inner  { grid-template-columns: 1fr; }
  .born-inner        { grid-template-columns: 1fr; text-align: center; }
  .born-img img      { margin: 0 auto; max-width: 280px; }
  .vm-section        { flex-direction: column; gap: 20px; }
}

/* ============================================================
   BREAKPOINT: ≤ 768px (Mobile Landscape / Small Tablet)
   ============================================================ */
@media (max-width: 768px) {

  /* ── TYPOGRAPHY ── */
  h1, .hero-left h1, .page-hero h1, .impact-hero h1,
  .news-hero h1, .contact-hero h1, .vol-hero h1 {
    font-size: 28px !important;
    line-height: 1.25 !important;
  }
  h2, .section-h2, .vm-box h2, .born-text h2 {
    font-size: 24px !important;
  }
  p, .hero-sub, .born-short { font-size: 15px !important; }

  /* ── HERO ── */
  .hero {
    padding-top: 90px !important;
    padding-bottom: 60px !important;
    border-bottom-left-radius: 40px !important;
    border-bottom-right-radius: 40px !important;
  }
  .hero-image-frame img { width: 240px !important; height: 240px !important; }
  .hero-stats { gap: 14px !important; flex-wrap: wrap; justify-content: center; }
  .hstat-n { font-size: 22px !important; }

  /* ── SECTIONS ── */
  .section-wrap { padding: 0 16px !important; }
  .section-title-row { flex-direction: column; align-items: flex-start; gap: 10px; }
  .section-h2 { font-size: 24px !important; }

  /* ── STORIES SLIDER ── */
  .stories-section { padding: 50px 0 !important; }
  .ss-wrap { padding: 10px 40px 20px !important; }
  .ss-card { min-width: 260px !important; max-width: 260px !important; }
  .ss-arr  { width: 34px !important; height: 34px !important; font-size: 18px !important; }

  /* ── VM SECTION ── */
  .vm-section {
    flex-direction: column !important;
    padding: 36px 16px !important;
    border-radius: 20px !important;
    margin: 24px 12px !important;
  }
  .vm-box { padding: 22px 18px !important; }

  /* ── VOLUNTEER ── */
  .volunteer-section { padding: 50px 5% !important; border-radius: 28px 28px 0 0 !important; }
  .volunteer-header h2 { font-size: 26px !important; }
  .volunteer-container { flex-direction: column !important; gap: 20px !important; }
  .volunteer-left, .volunteer-form { padding: 22px 18px !important; }

  /* ── BORN SECTION ── */
  .born-section { margin: 30px 12px !important; padding: 26px 18px !important; }
  .born-section h2 { font-size: 24px !important; }
  .born-img img { max-width: 220px !important; margin: 0 auto !important; }

  /* ── IMPACT ── */
  .impact-section { padding: 50px 0 !important; }
  .impact-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; }
  .impact-card { padding: 22px 14px !important; }
  .impact-card h3 { font-size: 32px !important; }

  /* ── DONATE ── */
  .donate-section { padding: 50px 16px !important; }
  .donate-box { flex-direction: column !important; gap: 24px !important; padding: 22px 18px !important; }
  .donate-left h2 { font-size: 24px !important; }
  .donate-card-box { grid-template-columns: 1fr !important; }
  .qr-img { width: 130px !important; height: 130px !important; }

  /* ── CONTACT ── */
  .contact-section { padding: 50px 16px !important; border-radius: 40px 40px 0 0 !important; }
  .contact-section h2 { font-size: 26px !important; }
  .contact-box { flex-direction: column !important; padding: 20px !important; gap: 20px !important; }
  .contact-hero { padding: 100px 5% 60px !important; border-radius: 0 0 40px 40px !important; }
  .contact-container { flex-direction: column !important; padding: 0 16px !important; margin: 30px auto 50px !important; }

  /* ── ACTIVITIES ── */
  .activities-title { padding: 100px 16px 36px !important; border-radius: 0 0 40px 40px !important; }
  .activity-card { flex-direction: column !important; text-align: center !important; margin: 16px 12px !important; padding: 16px !important; }
  .activity-img img { width: 100% !important; height: 200px !important; }
  .know-more-btn { margin: 0 auto !important; }
  .filter-buttons { gap: 8px !important; padding: 0 12px !important; }
  .filter-btn { padding: 8px 14px !important; font-size: 13px !important; }

  /* ── ABOUT ── */
  .about-hero { flex-direction: column-reverse !important; text-align: center !important; padding: 100px 5% 60px !important; border-radius: 0 0 40px 40px !important; }
  .ah-text h1 { font-size: 28px !important; }
  .ah-img img { width: 80% !important; height: auto !important; margin: 0 auto !important; }
  .mv-section { flex-direction: column !important; padding: 0 16px !important; margin: 36px auto !important; }
  .values-section { padding: 0 16px !important; margin: 36px auto !important; }
  .timeline-section { padding: 0 16px !important; margin: 36px auto !important; }

  /* ── IMPACT PAGE ── */
  .impact-hero { padding: 100px 5% 60px !important; border-radius: 0 0 40px 40px !important; }
  .social-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .stats-grid  { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; }
  .cta-section { padding: 50px 16px !important; }
  .cta-btns { flex-direction: column !important; align-items: center !important; gap: 12px !important; }

  /* ── NEWS ── */
  .news-hero { padding: 100px 5% 60px !important; border-radius: 0 0 40px 40px !important; }
  .news-grid { grid-template-columns: 1fr !important; }
  .news-wrap { margin: 40px auto 60px !important; padding: 0 16px !important; }

  /* ── EVENT DETAIL ── */
  .event-hero { padding: 100px 5% 50px !important; border-radius: 0 0 40px 40px !important; }
  .event-info-section { padding: 0 14px !important; }
  .event-info-card { padding: 20px 16px !important; }
  .event-stats-row { gap: 12px !important; }
  .slide img { height: 220px !important; }

  /* ── FOOTER ── */
  .footer { padding: 40px 16px 16px !important; border-radius: 28px 28px 0 0 !important; }
  .footer-container { flex-direction: column !important; text-align: center !important; gap: 22px !important; }
  .footer-about p { margin: 0 auto !important; }
  .footer-links { align-items: center !important; }

  /* ── FORMS ── */
  .form-row-2, .form-row-3, .form-row { grid-template-columns: 1fr !important; }

  /* ── AUTH PAGES ── */
  .auth-page { margin-top: 100px !important; padding: 0 14px !important; }
  .auth-card { padding: 26px 18px !important; }

  /* ── VOLUNTEER PAGE ── */
  .vol-hero { padding: 100px 5% 60px !important; border-radius: 0 0 40px 40px !important; }
  .vol-wrap { padding: 0 14px !important; margin: 30px auto 50px !important; }
  .vol-card { padding: 24px 18px !important; }

  /* ── MY ACCOUNT ── */
  .account-page { margin-top: 100px !important; padding: 0 14px !important; }
  .profile-hero { flex-direction: column !important; text-align: center !important; padding: 22px 16px !important; }
  .profile-avatar-wrap { margin: 0 auto !important; }
  .progress-wrap { justify-content: center !important; }
  .account-tabs { flex-direction: row !important; overflow-x: auto !important; flex-wrap: nowrap !important; }
  .acc-tab { flex-shrink: 0 !important; font-size: 13px !important; padding: 9px 12px !important; }
  .acc-card { padding: 20px 16px !important; }

  /* ── SECTION SPACING ── */
  .foundation-section { padding: 50px 16px !important; }
  .stories-section { padding: 50px 0 !important; }
  .volunteer-section { padding: 50px 5% !important; }
  .born-section { padding: 40px 16px !important; }
  .impact-section { padding: 50px 0 !important; }
  .donate-section { padding: 50px 16px !important; }
  .contact-section { padding: 50px 16px !important; }
}

/* ============================================================
   BREAKPOINT: ≤ 480px (Mobile Portrait)
   ============================================================ */
@media (max-width: 480px) {

  /* ── HERO ── */
  .hero { padding-top: 80px !important; padding-bottom: 50px !important; border-bottom-left-radius: 28px !important; border-bottom-right-radius: 28px !important; }
  .hero-left h1 { font-size: 22px !important; }
  .hero-sub { font-size: 14px !important; }
  .hero-image-frame { display: flex !important; justify-content: center !important; }
  .hero-image-frame img { width: 180px !important; height: 180px !important; border-radius: 16px !important; }
  .hero-stats { gap: 10px !important; }
  .hstat-n { font-size: 18px !important; }
  .hstat-l { font-size: 11px !important; }
  .hero-buttons { flex-direction: column !important; align-items: center !important; gap: 10px !important; }
  .hero-buttons .btn, .hero-buttons .btn-outline { width: 100% !important; text-align: center !important; }

  /* ── STORIES SLIDER ── */
  .ss-wrap { padding: 10px 8px 20px !important; }
  .ss-arr  { display: none !important; }
  .ss-card { min-width: 82vw !important; max-width: 82vw !important; }

  /* ── IMPACT GRID ── */
  .impact-grid { grid-template-columns: 1fr !important; }
  .impact-card h3 { font-size: 28px !important; }

  /* ── DONATE ── */
  .donate-card-box { grid-template-columns: 1fr !important; }
  .donate-left h2 { font-size: 22px !important; }
  .pulse-btn { font-size: 15px !important; padding: 11px 22px !important; }

  /* ── BUTTONS ── */
  .btn-primary-hero { padding: 11px 20px !important; font-size: 14px !important; }
  .btn-outline-hero { padding: 10px 18px !important; font-size: 14px !important; }
  .btn-donate-big   { padding: 12px 22px !important; font-size: 14px !important; }
  .btn-cta-white, .btn-cta-outline { width: 100% !important; text-align: center !important; }

  /* ── VOLUNTEER FORM ── */
  .interest-pills { gap: 8px !important; }
  .interest-pill { padding: 7px 12px !important; font-size: 12px !important; }

  /* ── STATS GRID ── */
  .stats-grid { grid-template-columns: 1fr !important; }
  .stat-num { font-size: 36px !important; }

  /* ── FOOTER ── */
  .footer { padding: 32px 12px 14px !important; border-radius: 22px 22px 0 0 !important; }
  .footer-container { gap: 18px !important; }
  .footer h3 { font-size: 18px !important; }
  .footer h4 { font-size: 15px !important; }

  /* ── SCROLL TO TOP ── */
  #scrollTopBtn { bottom: 80px !important; right: 14px !important; width: 40px !important; height: 40px !important; font-size: 18px !important; }

  /* ── MODAL ── */
  .reg-modal { padding: 22px 16px !important; }
  .reg-modal h3 { font-size: 17px !important; }

  /* ── AI CHAT ── */
  #svChatWin { width: calc(100vw - 24px) !important; right: -4px !important; }
  #svChat { bottom: 16px !important; right: 14px !important; }

  /* ── SECTION TITLES ── */
  .section-h2 { font-size: 22px !important; }
  .section-kicker { font-size: 11px !important; }

  /* ── CARDS ── */
  .social-card { padding: 22px 16px !important; }
  .news-card-body { padding: 16px 16px 18px !important; }
  .news-card-body h3 { font-size: 16px !important; }

  /* ── ACCOUNT TABS ── */
  .acc-tab { font-size: 12px !important; padding: 8px 10px !important; }
}

/* ============================================================
   TOUCH UX IMPROVEMENTS (all mobile)
   ============================================================ */
@media (max-width: 900px) {

  /* Larger tap targets */
  .filter-btn  { min-height: 44px; }
  .know-more-btn { min-height: 44px; display: inline-flex; align-items: center; }
  .btn-nav     { min-height: 44px; display: flex; align-items: center; justify-content: center; }

  /* Remove sticky hover effects on touch devices */
  @media (hover: none) {
    .story-card:hover,
    .activity-card:hover,
    .impact-card:hover,
    .social-card:hover,
    .stat-card:hover,
    .news-card:hover { transform: none; box-shadow: none; }
  }

  /* Better form inputs */
  input, textarea, select {
    -webkit-appearance: none;
    appearance: none;
    border-radius: var(--r-md, 12px);
  }

  /* Smooth scrolling for sliders */
  .ss-track,
  .stories-slider,
  .story-slider {
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }

  /* Active press feedback */
  .btn:active,
  .btn-primary-hero:active,
  .btn-outline-hero:active,
  .know-more-btn:active,
  .filter-btn:active,
  .sf-signin-btn:active {
    transform: scale(0.97);
    transition: transform 0.1s;
  }

  /* Prevent text selection on interactive elements */
  button, .btn, .filter-btn, .know-more-btn {
    -webkit-user-select: none;
    user-select: none;
  }

  /* Better reading line-height */
  p { line-height: 1.7; }

  /* Consistent section padding */
  .section-wrap { padding: 0 var(--sp-4, 16px); }

  /* Prevent overflow */
  .vm-section, .born-section, .impact-section { overflow: hidden; }

  /* Lighter shadows on mobile */
  .acc-card, .vol-card, .auth-card {
    box-shadow: var(--shadow-sm, 0 4px 16px rgba(255,106,0,0.10));
  }
}

/* ============================================================
   SAFE AREA (iPhone notch / home indicator)
   ============================================================ */
@supports (padding: max(0px)) {
  .sf-header { padding-top: max(10px, env(safe-area-inset-top)); }
  .footer    { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
  #svChat    { bottom: max(24px, calc(env(safe-area-inset-bottom) + 16px)); }
  #scrollTopBtn { bottom: max(80px, calc(env(safe-area-inset-bottom) + 70px)); }
}

/* ============================================================
   DARK MODE — public-facing pages
   ============================================================ */
@media (prefers-color-scheme: dark) {
  body {
    background: var(--clr-bg, #0f0a06);
    color: var(--clr-text, #f5ede4);
  }

  /* Cards */
  .story-card,
  .activity-card,
  .news-card,
  .vol-card,
  .acc-card,
  .auth-card,
  .event-info-card,
  .donate-qr-card,
  .donate-btn-card {
    background: var(--clr-surface, #1c1208);
    border-color: var(--clr-primary-border, rgba(255,120,0,0.25));
  }

  /* Header */
  header.sf-header,
  header.header {
    background: var(--clr-surface, #1c1208);
    box-shadow: 0 3px 15px rgba(0,0,0,0.35);
  }

  /* Nav links */
  .sf-nav a,
  .nav a { color: var(--clr-text-2, #d4c4b4); }

  /* Inputs */
  input, textarea, select {
    background: rgba(255,106,0,0.08);
    color: var(--clr-text, #f5ede4);
    border-color: rgba(255,120,0,0.30);
  }

  /* Footer */
  .footer { background: #cc5500; }

  /* Sections with light backgrounds */
  .foundation-section,
  .born-section,
  .vm-section,
  .stories-section,
  .impact-section { background: var(--clr-bg, #0f0a06); }

  /* Volunteer section stays orange (intentional brand) */
  .volunteer-section { background: linear-gradient(135deg, #cc5500, #e07020); }

  /* Donate section */
  .donate-section { background: linear-gradient(135deg, #0a0400, #1a0800); }

  /* Contact section */
  .contact-section { background: linear-gradient(135deg, #1c1208, #2a1a08); }

  /* Dropdowns */
  .account-dropdown,
  .signin-dropdown,
  .sf-acc-drop,
  .sf-si-drop {
    background: var(--clr-surface, #1c1208);
    border-color: var(--clr-primary-border, rgba(255,120,0,0.25));
  }

  /* Alerts */
  .alert-success { background: rgba(22,163,74,0.15); }
  .alert-error   { background: rgba(220,38,38,0.15); }
}

/* ============================================================
   REDUCED MOTION — respect user preference
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-left,
  .reveal-right {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .hero-img img,
  .hero-image-frame img { animation: none; }

  .story-card,
  .activity-card,
  .impact-card,
  .vol-card,
  .doc-card,
  .event-grid-card {
    transition: none;
  }

  .story-card:hover,
  .activity-card:hover,
  .impact-card:hover { transform: none; }

  #scrollTopBtn { transition: opacity 0.1s; }

  .toast { animation: none; }
  .skeleton { animation: none; background: var(--clr-border, #f0e0d0); }
}