/* ============================================================
   LIBRARY SYSTEM — FULL RESPONSIVE STYLESHEET
   Breakpoints:
     - Desktop  : > 1024px (default)
     - Tablet   : 768px – 1024px
     - Mobile   : < 768px
     - Small    : < 480px
   ============================================================ */

/* ── Meta viewport safety ── */
html { overflow-x: hidden; }
body { overflow-x: hidden; }

/* ===================================================================
   1. TOP INFO BAR
=================================================================== */
@media (max-width: 768px) {
  .top-info-bar .container {
    flex-direction: column !important;
    gap: 0.5rem !important;
    padding: 0.5rem 1rem !important;
    text-align: center !important;
  }
  .top-info-bar .container > div {
    width: 100% !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
  }
  /* Hide search in top bar on mobile (hero has its own search) */
  .nav-search-box { display: none !important; }
}

/* ===================================================================
   2. MAIN HEADER / NAV
=================================================================== */
.public-nav-inner {
  flex-wrap: wrap;
}

/* Hamburger button — hidden on desktop */
#mobile-menu-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.4rem;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  justify-content: center;
}
#mobile-menu-btn span {
  display: block;
  width: 24px;
  height: 2.5px;
  background: #333;
  border-radius: 2px;
  transition: all 0.3s;
}

@media (max-width: 900px) {
  .header-center-info {
    display: none !important;
  }
}

@media (max-width: 768px) {
  /* Show hamburger */
  #mobile-menu-btn { display: flex !important; }

  /* Header row */
  .public-nav-inner {
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    padding: 0.5rem 1rem !important;
    min-height: 60px !important;
  }

  /* Ministry logo smaller */
  .public-nav-inner > div:first-child img {
    height: 45px !important;
  }

  /* INPFP logo smaller */
  .public-nav-inner img[alt="INPFP"] {
    height: 55px !important;
  }

  /* Nav links: collapsible */
  .public-links {
    display: none !important;
    flex-direction: column !important;
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    left: 0 !important;
    background: #ffffff !important;
    border-top: 2px solid #254b8c !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1) !important;
    padding: 1rem !important;
    gap: 1rem !important;
    z-index: 999 !important;
  }
  .public-links.nav-open {
    display: flex !important;
  }
  .public-links a {
    font-size: 1.05rem !important;
    padding: 0.5rem 0 !important;
    border-bottom: 1px solid #f0f0f0 !important;
    display: block !important;
    text-align: right !important;
  }
  .public-links a:last-child {
    border-bottom: none !important;
  }

  /* Wrap header with relative for dropdown positioning */
  .public-nav { position: relative !important; }

  /* hide lang switcher from right side on mobile, move to top bar */
  .public-nav-inner .lang-switcher { display: none !important; }
}

/* ===================================================================
   3. HERO SECTION
=================================================================== */
@media (max-width: 900px) {
  .hero-content-v2 {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  .hero-img-col { display: none !important; }
  .hero-text-col {
    text-align: center !important;
    padding: 2rem 1rem !important;
  }
  .hero-badge-strip,
  .hero-cta-v2,
  .hero-stats-v2 {
    justify-content: center !important;
    flex-wrap: wrap !important;
  }
  .hero-search-v2 { max-width: 100% !important; }
}

@media (max-width: 600px) {
  .hero-text-col h1 {
    font-size: 1.6rem !important;
  }
  .hero-stats-v2 {
    gap: 1rem !important;
  }
  .hero-cta-v2 {
    flex-direction: column !important;
    align-items: center !important;
  }
  .hero-cta-v2 a, .hero-cta-v2 button {
    width: 100% !important;
    text-align: center !important;
  }
}

/* ===================================================================
   4. HOME SECTIONS (General)
=================================================================== */
.home-section { padding: 3rem 0 !important; }

@media (max-width: 768px) {
  .home-section { padding: 2rem 0 !important; }
  .section-header { margin-bottom: 1.5rem !important; }
  .section-title { font-size: 1.4rem !important; }
  .container { padding: 0 1rem !important; }
}

/* ===================================================================
   5. PUBLICATIONS (new arrivals / ebooks)
=================================================================== */
@media (max-width: 900px) {
  .pub-grid,
  [style*="grid-template-columns: repeat(auto-fill, minmax(200px"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 480px) {
  .pub-grid,
  [style*="grid-template-columns: repeat(auto-fill, minmax(200px"] {
    grid-template-columns: 1fr !important;
  }
}

/* ===================================================================
   6. SPECIALTIES / CATEGORIES GRID
=================================================================== */
@media (max-width: 900px) {
  .categories-grid-v2 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 480px) {
  .categories-grid-v2 {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.75rem !important;
  }
  .category-tile-v2 {
    padding: 1.2rem 0.75rem !important;
  }
  .cat-icon { font-size: 1.8rem !important; }
  .cat-name { font-size: 0.85rem !important; }
}

/* ===================================================================
   7. GALLERY STRIP
=================================================================== */
@media (max-width: 768px) {
  .gallery-strip {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }
  .gallery-card img {
    height: 220px !important;
  }
}

/* ===================================================================
   8. SERVICES GRID
=================================================================== */
@media (max-width: 900px) {
  .services-grid-v2 {
    grid-template-columns: 1fr 1fr !important;
  }
}
@media (max-width: 600px) {
  .services-grid-v2 {
    grid-template-columns: 1fr !important;
  }
}

/* ===================================================================
   9. CTA BANNER (Stats + Call to Action)
=================================================================== */
@media (max-width: 600px) {
  .cta-banner {
    padding: 2rem 1rem !important;
    text-align: center !important;
  }
  .cta-banner h2 {
    font-size: 1.3rem !important;
  }
  .cta-banner-btns {
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.75rem !important;
  }
  .cta-banner-btns a, .cta-banner-btns button {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }
  .cta-stats {
    max-width: 100% !important;
    gap: 1rem !important;
  }
  .cta-stats > div {
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* ===================================================================
   10. FOOTER
=================================================================== */
@media (max-width: 768px) {
  footer .container,
  #footer .container {
    flex-direction: column !important;
    gap: 1.5rem !important;
    text-align: center !important;
    align-items: center !important;
  }
  footer .footer-col,
  #footer .footer-col {
    width: 100% !important;
    text-align: center !important;
    align-items: center !important;
  }
  footer .qr-block,
  #footer .qr-block {
    align-items: center !important;
  }
}

/* ===================================================================
   11. CATALOG PAGE
=================================================================== */
@media (max-width: 900px) {
  .catalog-layout {
    flex-direction: column !important;
  }
  .filter-sidebar {
    width: 100% !important;
    position: static !important;
  }
  .books-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 480px) {
  .books-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.75rem !important;
  }
  .book-card .book-cover { height: 150px !important; }
}

/* ===================================================================
   12. AUTH PAGES (Login / Register)
=================================================================== */
@media (max-width: 768px) {
  .auth-card {
    grid-template-columns: 1fr !important;
    border-radius: 12px !important;
  }
  .auth-side {
    padding: 1.5rem !important;
    text-align: center !important;
    border-radius: 12px 12px 0 0 !important;
  }
  .auth-form {
    padding: 1.25rem !important;
  }
  .plan-select {
    grid-template-columns: 1fr !important;
  }
}

/* ===================================================================
   13. MINISTRY BAR
=================================================================== */
@media (max-width: 600px) {
  .ministry-bar-inner {
    flex-wrap: wrap !important;
    gap: 0.4rem !important;
    text-align: center !important;
    justify-content: center !important;
  }
  .ministry-center { display: none !important; }
}

/* ===================================================================
   14. BOOK DETAIL / READER PAGE
=================================================================== */
@media (max-width: 768px) {
  .book-detail-layout {
    flex-direction: column !important;
  }
  .book-detail-cover {
    width: 100% !important;
    max-width: 260px !important;
    margin: 0 auto !important;
  }
}

/* ===================================================================
   15. SMALL MOBILE TWEAKS  (< 400px)
=================================================================== */
@media (max-width: 400px) {
  .section-badge { font-size: 0.65rem !important; }
  .section-title { font-size: 1.2rem !important; }
  .lang-btn { padding: 0.15rem 0.3rem !important; }
  .lang-code { font-size: 0.6rem !important; }
}