/* ============================================================
   NO BABIES BLISTER — Responsive Stylesheet
   Full mobile-first coverage for all 11 pages
   ============================================================ */

/* ---------- Focus Styles (Accessibility — always on) ---------- */
:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 3px;
  border-radius: 4px;
}
a:focus-visible,
button:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }

/* ---------- Print Styles ---------- */
@media print {
  .navbar-main, #page-loader, #backToTop,
  #scroll-progress, .footer-donate-cta { display: none; }
  body { font-size: 12pt; }
  h1 { font-size: 24pt; }
  h2 { font-size: 20pt; }
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .float-anim { animation: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   BREAKPOINT: ≥ 1400px (Extra Large)
   ============================================================ */
@media (min-width: 1400px) {
  .hero-title { font-size: 5.5rem; }
  .hero-image-card img { height: 600px; }
}

/* ============================================================
   BREAKPOINT: ≥ 1200px (Large Desktop)
   ============================================================ */
@media (min-width: 1200px) {
  .navbar-nav .nav-link { padding: .4rem .65rem !important; }
}

/* ============================================================
   BREAKPOINT: ≥ 992px (Desktop)
   ============================================================ */
@media (min-width: 992px) {
  .hero-floating-card.card-1 { bottom: -20px; left: -30px; }
  .hero-floating-card.card-2 { top: 30px;    right: -20px; }
  /* Donate page — keep form sticky on desktop only */
  .donation-form-card { position: sticky; top: 100px; }
}

/* ============================================================
   BREAKPOINT: ≤ 1199px (Tablets & Small Laptops)
   ============================================================ */
@media (max-width: 1199px) {
  /* Navbar links slightly tighter */
  .navbar-nav .nav-link { font-size: .82rem; }

  /* About page — founder floating badge: adjust overflow */
  .founder-badge-wrap { left: -.5rem; }
}

/* ============================================================
   BREAKPOINT: ≤ 991px (Tablet Landscape / Collapse Point)
   ============================================================ */
@media (max-width: 991px) {
  /* ---- Global ---- */
  section { padding: 4.5rem 0; }
  .section-sm { padding: 3rem 0; }
  .section-lg { padding: 5rem 0; }

  /* ---- Navbar ---- */
  .navbar-main { padding: .75rem 0; }
  .navbar-collapse {
    background: rgba(255,255,255,.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 1.25rem 1.5rem;
    border-radius: var(--radius-md);
    margin-top: .75rem;
    box-shadow: var(--shadow-lg);
    border: 1px solid rgba(108,76,207,.08);
  }
  .navbar-nav .nav-link {
    padding: .65rem .9rem !important;
    border-radius: var(--radius-sm);
  }
  .nav-donate-btn {
    margin-top: .5rem;
    display: inline-block;
    text-align: center;
  }

  /* ---- Hero (index.html) ---- */
  .hero-section { min-height: auto; padding: 7rem 0 4rem; }
  .hero-image-wrap { margin-top: 2.5rem; }
  .hero-image-card img { height: 420px; }
  .hero-floating-card.card-1 { bottom: -10px; left: 10px; }
  .hero-floating-card.card-2 { top: 10px; right: 10px; }
  .hero-stats { gap: 1.5rem; flex-wrap: wrap; }

  /* ---- Page Hero (inner pages) ---- */
  .page-hero { padding: 7rem 0 4rem; }

  /* ---- Donate page ---- */
  .donation-form-card {
    position: static; /* un-sticky on tablet/mobile */
    padding: 2rem;
    margin-top: 3rem;
  }
  .donate-hero { padding: 7rem 0 4rem; }
  .donate-hero::before,
  .donate-hero::after { display: none; }

  /* ---- Newsletter ---- */
  .newsletter-section { padding: 2.5rem; }
  .newsletter-input-wrap { flex-direction: column; max-width: 100%; }
  .newsletter-input-wrap input { border-radius: var(--radius-sm); }
  .newsletter-input-wrap .btn-white-custom { border-radius: var(--radius-sm); justify-content: center; }

  /* ---- Gallery ---- */
  .gallery-grid { columns: 2; }

  /* ---- Timeline ---- */
  .timeline { padding-left: 1.5rem; }
  .timeline-item { padding-left: 1.75rem; margin-bottom: 2rem; }

  /* ---- Footer ---- */
  .footer-donate-cta { padding: 2.5rem 2rem; }
  .footer-main { padding: 4rem 0 2rem; }

  /* ---- Impact counter section ---- */
  .impact-counter-section { padding: 4rem 0; }
  .impact-stat .number { font-size: 2.8rem; }

  /* ---- Children page donate CTA ---- */
  .glass-card { padding: 1.5rem; }

  /* ---- Research page ---- */
  .research-card { padding: 1.5rem; }

  /* ---- Contact form ---- */
  .contact-form-card { padding: 2rem; }
}

/* ============================================================
   INLINE-STYLE OVERRIDES
   These use !important to override height/position inline styles
   on elements across all inner pages.
   ============================================================ */

/* Tall section images (about, children, research, contact) */
@media (max-width: 991px) {
  .col-lg-5 img[style*="height"],
  .col-lg-6 img[style*="height"] {
    height: 380px !important;
  }
  /* Founder badge in about.html — make it static so it doesn't overflow */
  .col-lg-5 [style*="position:absolute"],
  .col-lg-5 [style*="position: absolute"] {
    position: static !important;
    margin-top: 1rem;
    left: auto !important;
    bottom: auto !important;
    right: auto !important;
    top: auto !important;
  }
}

@media (max-width: 767px) {
  .col-lg-5 img[style*="height"],
  .col-lg-6 img[style*="height"] {
    height: 300px !important;
  }
  /* Donate hero child preview image height */
  .donate-child-card img { height: 140px !important; }
}

@media (max-width: 575px) {
  .col-lg-5 img[style*="height"],
  .col-lg-6 img[style*="height"],
  .col-lg-7 img[style*="height"] {
    height: 250px !important;
  }
  /* Research / about large images */
  .rounded-custom[style*="height"] { height: 250px !important; }
  /* Impact page donate-goal-row */
  [style*="font-size:1.5rem"][style*="font-weight:800"] { font-size: 1.2rem !important; }
}

/* ============================================================
   BREAKPOINT: ≤ 767px (Tablet Portrait)
   ============================================================ */
@media (max-width: 767px) {
  /* ---- Typography ---- */
  h2 { font-size: clamp(1.5rem, 5vw, 1.9rem); }
  h3 { font-size: clamp(1.2rem, 4vw, 1.5rem); }
  h4 { font-size: 1.1rem; }
  .lead { font-size: 1.05rem; }

  /* ---- Sections ---- */
  section { padding: 3.75rem 0; }
  .section-sm { padding: 2.5rem 0; }

  /* ---- Hero (index) ---- */
  .hero-title { font-size: clamp(1.9rem, 6vw, 2.6rem); }
  .hero-subtitle { font-size: 1rem; margin-bottom: 1.75rem; }
  .hero-image-card img { height: 320px; }
  .hero-stats { gap: 1.25rem; }
  .hero-stat strong { font-size: 1.4rem; }
  .hero-stat span { font-size: .72rem; }

  /* ---- Page Hero ---- */
  .page-hero { padding: 6.5rem 0 3.5rem; }
  .page-hero h1 { font-size: clamp(1.7rem, 5vw, 2.2rem); }
  .page-hero .lead { font-size: .98rem; }
  .breadcrumb-custom { font-size: .8rem; }

  /* ---- Stat cards ---- */
  .stat-number { font-size: 2.2rem; }
  .stat-card { padding: 1.75rem 1rem; }

  /* ---- Feature cards ---- */
  .feature-card { padding: 1.5rem; }

  /* ---- Testimonials ---- */
  .testimonial-card { padding: 1.75rem; }

  /* ---- Impact counter ---- */
  .impact-stat .number { font-size: 2.2rem; }
  .impact-stat .icon-wrap { width: 50px; height: 50px; font-size: 1.2rem; }

  /* ---- EB page: type cards ---- */
  .type-card { padding: 1.5rem; }

  /* ---- About: founder floating badge ---- */
  .founder-badge-abs { position: static !important; margin-top: 1rem; }

  /* ---- Children: child card ---- */
  .child-card-image { height: 240px; }

  /* ---- News: featured article image ---- */
  .featured-article-image { height: 260px !important; }

  /* ---- Gallery ---- */
  .gallery-grid { columns: 2; }

  /* ---- Newsletter ---- */
  .newsletter-section { padding: 2rem 1.5rem; }

  /* ---- Donate page ---- */
  .donation-form-card { padding: 1.75rem; }
  .amount-grid { grid-template-columns: repeat(2, 1fr); gap: .6rem; }
  .amount-btn .amt { font-size: 1.2rem; }
  .donate-hero { padding: 6.5rem 0 3rem; }
  .donate-submit-btn { font-size: 1rem; padding: 1rem; }
  .donate-child-card img { height: 160px; }

  /* ---- Impact page: campaign card ---- */
  .donate-goal-row { flex-direction: column; align-items: flex-start; gap: .4rem; }

  /* ---- Contact: map placeholder ---- */
  .map-placeholder { height: 280px; }

  /* ---- Get Involved: involvement cards ---- */
  .involvement-card { padding: 1.75rem; }
  .involvement-icon { width: 64px; height: 64px; font-size: 1.6rem; }

  /* ---- Footer ---- */
  .footer-donate-cta { padding: 2rem 1.5rem; }
  .footer-donate-cta h3 { font-size: 1.4rem; }
  .footer-main { padding: 3.5rem 0 1.5rem; }
  .footer-bottom { flex-direction: column; text-align: center; gap: .75rem; }
  .footer-bottom-links { justify-content: center; gap: 1rem; }

  /* ---- Donation type tabs ---- */
  .donation-type-tabs .nav-link { padding: .5rem 1rem; font-size: .88rem; }
}

/* ============================================================
   BREAKPOINT: ≤ 575px (Mobile)
   ============================================================ */
@media (max-width: 575px) {
  /* ---- Typography ---- */
  h2 { font-size: 1.6rem; }
  h3 { font-size: 1.3rem; }
  .lead { font-size: 1rem; }

  /* ---- Global spacing ---- */
  section { padding: 3.25rem 0; }
  .section-sm { padding: 2.25rem 0; }

  /* ---- Navbar ---- */
  .navbar-brand-logo .brand-text strong { font-size: .95rem; }
  .navbar-brand-logo .brand-text small { display: none; }
  .navbar-brand-logo .brand-icon { width: 38px; height: 38px; font-size: 1rem; }

  /* ---- Hero (index) ---- */
  .hero-section { padding: 5.5rem 0 3.5rem; }
  .hero-title { font-size: 1.85rem; line-height: 1.2; }
  .hero-subtitle { font-size: .95rem; margin-bottom: 1.5rem; }
  .hero-badge { font-size: .7rem; padding: .35rem .85rem; }
  .hero-stats { gap: .85rem; flex-wrap: wrap; }
  .hero-stat strong { font-size: 1.25rem; }
  .hero-stat span { font-size: .68rem; }
  .hero-image-card img { height: 260px; }
  .hero-floating-card { display: none; }
  .hero-btn-group { flex-direction: column; gap: .75rem; }
  .hero-btn-group .btn-primary-custom,
  .hero-btn-group .btn-outline-custom,
  .hero-btn-group .btn-white-custom { width: 100%; justify-content: center; }

  /* ---- Page Hero ---- */
  .page-hero { padding: 6rem 0 3rem; }
  .page-hero h1 { font-size: 1.7rem; }
  .page-hero .lead { font-size: .9rem; }

  /* ---- Buttons ---- */
  .btn-primary-custom,
  .btn-outline-custom,
  .btn-white-custom,
  .btn-pink-custom { padding: .75rem 1.4rem; font-size: .88rem; }

  /* ---- Stat cards ---- */
  .stat-card { padding: 1.5rem 1rem; }
  .stat-number { font-size: 2rem; }
  .stat-label { font-size: .78rem; }

  /* ---- Feature cards ---- */
  .feature-card { padding: 1.25rem; }
  .card-icon-wrap { width: 54px; height: 54px; font-size: 1.3rem; }

  /* ---- Impact counter ---- */
  .impact-counter-section { padding: 3rem 0; }
  .impact-stat .number { font-size: 2rem; }
  .impact-stat .label { font-size: .78rem; }
  .impact-stat .icon-wrap { width: 44px; height: 44px; font-size: 1rem; margin-bottom: .75rem; }

  /* ---- Testimonials ---- */
  .testimonial-card { padding: 1.5rem; }
  .testimonial-text { font-size: .9rem; }

  /* ---- EB page ---- */
  .eb-info-card { padding: 1.5rem; }
  .eb-info-card .eb-number { font-size: 2.4rem; }
  .type-card { padding: 1.25rem; }
  .challenge-item { padding: 1rem; flex-direction: column; gap: .75rem; }
  .challenge-icon { width: 42px; height: 42px; font-size: 1rem; flex-shrink: 0; }

  /* ---- About page ---- */
  .timeline { padding-left: 1.25rem; }
  .timeline-item { padding-left: 1.5rem; margin-bottom: 1.75rem; }
  .timeline-year { font-size: .75rem; }
  .timeline-item h4 { font-size: 1rem; }
  .timeline-item p { font-size: .85rem; }
  .timeline::before { left: 0; }
  .timeline-item::before { left: -1.9rem; width: 12px; height: 12px; }

  /* ---- Children page ---- */
  .child-card-image { height: 210px; }
  .child-name { font-size: 1.1rem; }
  /* Full-feature child profiles: stack image above text */
  .children-feature-img { height: 300px !important; }
  /* Monthly donor section: 2 columns instead of 4 */
  .monthly-amounts-row { grid-template-columns: repeat(2, 1fr); }

  /* ---- News page ---- */
  .featured-article-image { height: 220px !important; }
  .news-filter-btn { font-size: .78rem; padding: .35rem .85rem; }
  .news-card-body h4 { font-size: .95rem; }

  /* ---- Gallery page ---- */
  .gallery-grid { columns: 1; }
  .gallery-filter-btn { font-size: .78rem; padding: .35rem .85rem; }

  /* ---- Research page ---- */
  .research-card { padding: 1.25rem; }

  /* ---- Impact page ---- */
  .impact-reason-card { padding: 1.25rem; }

  /* ---- Get Involved page ---- */
  .involvement-card { padding: 1.5rem; }
  .involvement-icon { width: 56px; height: 56px; font-size: 1.4rem; margin-bottom: 1rem; }
  .steps-list li { gap: .75rem; }

  /* ---- Contact page ---- */
  .contact-form-card { padding: 1.5rem; }
  .contact-info-card { padding: 1.25rem; flex-direction: column; gap: .75rem; }
  .contact-info-icon { width: 44px; height: 44px; border-radius: 12px; font-size: 1rem; }
  .map-placeholder { height: 240px; }
  .map-placeholder i { font-size: 2rem; }

  /* ---- Donate page ---- */
  .donate-hero { padding: 5.5rem 0 2.5rem; }
  .donation-form-card { padding: 1.5rem; border-radius: var(--radius-lg); }
  .donation-type-tab { margin-bottom: 1.25rem; }
  .donation-type-tab button { font-size: .82rem; padding: .5rem .25rem; }
  .amount-grid { grid-template-columns: repeat(2, 1fr); gap: .5rem; margin-bottom: 1rem; }
  .amount-btn { padding: .75rem .35rem; }
  .amount-btn .amt { font-size: 1.15rem; }
  .amount-btn .impact { font-size: .65rem; }
  .donate-submit-btn { padding: .9rem 1rem; font-size: .95rem; }
  .trust-bar { gap: .85rem; padding: .85rem 1rem; }
  .trust-item { font-size: .75rem; }
  .donate-progress-wrap { padding: 1.25rem; }
  .donate-goal-row { flex-direction: column; align-items: flex-start; gap: .35rem; }
  .donate-goal-row .raised { font-size: 1.2rem; }
  /* Child preview cards in donate hero */
  .donate-child-card img { height: 130px; }
  .donate-child-card-body { padding: .65rem; }

  /* ---- Newsletter ---- */
  .newsletter-section { padding: 1.75rem 1.25rem; border-radius: var(--radius-lg); }
  .newsletter-input-wrap { gap: .5rem; }

  /* ---- Footer ---- */
  .footer-main { padding: 3rem 0 1.5rem; }
  .footer-donate-cta { padding: 1.75rem 1.25rem; margin-bottom: 2.5rem; }
  .footer-donate-cta h3 { font-size: 1.25rem; }
  .footer-brand { text-align: center; }
  .footer-social { justify-content: center; }
  .footer-bottom { flex-direction: column; text-align: center; gap: .6rem; }
  .footer-bottom-links { justify-content: center; gap: .85rem; }

  /* ---- Back to top ---- */
  #backToTop { bottom: 1.25rem; right: 1.25rem; width: 44px; height: 44px; font-size: 1rem; }

  /* ---- Misc utility fixes ---- */
  .trust-badges { flex-direction: column; align-items: flex-start; }
  /* Ensure flex button groups wrap */
  .d-flex.flex-wrap.gap-3 { gap: .6rem !important; }
  /* Ribbon badge position */
  .ribbon { font-size: .65rem; padding: .2rem .6rem; }
}

/* ============================================================
   BREAKPOINT: ≤ 480px (Small Mobile)
   ============================================================ */
@media (max-width: 480px) {
  /* ---- Hero ---- */
  .hero-title { font-size: 1.7rem; }
  .hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
  .hero-stat strong { font-size: 1.1rem; }

  /* ---- Page Hero ---- */
  .page-hero h1 { font-size: 1.55rem; }

  /* ---- Stat cards: 2-col override ---- */
  .stat-number { font-size: 1.8rem; }

  /* ---- Impact stats: 2 per row ---- */
  .impact-stat .number { font-size: 1.75rem; }

  /* ---- Children page full-feature image ---- */
  .children-feature-img { height: 260px !important; }

  /* ---- Gallery ---- */
  .gallery-grid { columns: 1; }

  /* ---- Donate amounts: full width on very small ---- */
  .amount-grid { grid-template-columns: repeat(2, 1fr); }

  /* ---- Buttons full width when alone ---- */
  .btn-primary-custom.w-100,
  .btn-pink-custom.w-100,
  .btn-outline-custom.w-100 { font-size: .88rem; }

  /* ---- Cards that use left padding ---- */
  .impact-reason-card { padding: 1rem; }
  .impact-reason-card > .d-flex { flex-direction: column; gap: .5rem; }
  .impact-reason-card > .d-flex > div:first-child { font-size: 1.5rem; }
}

/* ============================================================
   BREAKPOINT: ≤ 375px (Very Small Mobile)
   ============================================================ */
@media (max-width: 375px) {
  h2 { font-size: 1.45rem; }
  h3 { font-size: 1.2rem; }
  .hero-title { font-size: 1.6rem; }
  .hero-stats { gap: .5rem; }
  .stat-number { font-size: 1.7rem; }
  .impact-stat .number { font-size: 1.6rem; }
  .section-label { font-size: .7rem; padding: .3rem .75rem; }
  .eb-info-card .eb-number { font-size: 2rem; }
  .amount-grid { grid-template-columns: repeat(2, 1fr); gap: .4rem; }
  .amount-btn { padding: .65rem .25rem; }
  .amount-btn .amt { font-size: 1.05rem; }
  .donation-type-tab button { font-size: .78rem; }
  .donation-form-card { padding: 1.25rem; }
  .contact-form-card { padding: 1.25rem; }
  .newsletter-section { padding: 1.5rem 1rem; }
  .footer-donate-cta { padding: 1.5rem 1rem; }
  .page-hero { padding: 5.5rem 0 2.5rem; }
  .page-hero h1 { font-size: 1.45rem; }
}

/* ============================================================
   BREAKPOINT: ≤ 320px (Tiny Screens)
   ============================================================ */
@media (max-width: 320px) {
  .hero-title { font-size: 1.45rem; }
  h2 { font-size: 1.35rem; }
  .amount-grid { grid-template-columns: 1fr 1fr; gap: .3rem; }
  .amount-btn .amt { font-size: .95rem; }
  .donate-submit-btn { font-size: .85rem; }
  .btn-primary-custom,
  .btn-outline-custom,
  .btn-white-custom,
  .btn-pink-custom { padding: .65rem 1rem; font-size: .82rem; }
}

/* ============================================================
   GLOBAL MOBILE POLISH (all pages)
   ============================================================ */

/* Fix min-vh-100 hero row being too tall on small phones */
@media (max-width: 575px) {
  .hero-section .min-vh-100 { min-height: auto !important; padding: 2rem 0 1rem; }
}

/* Donate hero — child preview: allow 3 cols to shrink gracefully */
@media (max-width: 400px) {
  .donate-hero .col-4 { padding-left: .25rem; padding-right: .25rem; }
  .donate-child-card-body div { font-size: .72rem !important; }
}

/* Button groups on inner pages — stack on phone */
@media (max-width: 480px) {
  .d-flex.gap-3.flex-wrap > .btn-primary-custom,
  .d-flex.gap-3.flex-wrap > .btn-pink-custom,
  .d-flex.gap-3.flex-wrap > .btn-outline-custom,
  .d-flex.gap-3.flex-wrap > .btn-white-custom {
    flex: 1 1 100%;
    justify-content: center;
  }
  /* Exception: keep trust bar items inline */
  .trust-bar .btn-primary-custom { flex: 0 1 auto; }
}

/* Children page: full-feature profile sections on mobile */
@media (max-width: 767px) {
  /* reverse-row child profiles shouldn't reverse on mobile */
  .flex-row-reverse { flex-direction: column !important; }
}

/* Ensure images always fill their column width on mobile */
@media (max-width: 991px) {
  .col-lg-5 img,
  .col-lg-6 img { width: 100%; }
}

/* Progress bars: animate correctly even when table/hidden */
.progress-bar { min-width: 0; }

/* Newsletter input wraps cleanly on all sizes */
@media (max-width: 575px) {
  .newsletter-section .newsletter-input-wrap { flex-direction: column; }
  .newsletter-section .newsletter-input-wrap input { border-radius: var(--radius-sm) !important; }
  .newsletter-section .newsletter-input-wrap .btn-white-custom {
    width: 100%;
    justify-content: center;
    border-radius: var(--radius-sm) !important;
  }
}

/* FAQ accordion: readable on small screens */
@media (max-width: 575px) {
  .faq-accordion .accordion-button { font-size: .92rem; padding: 1rem 1.1rem; }
  .faq-accordion .accordion-body { padding: 1rem 1.1rem; font-size: .9rem; }
}

/* Footer brand text centering on mobile */
@media (max-width: 575px) {
  .footer-brand .navbar-brand-logo { justify-content: center; }
}