/**
 * responsive.css — matt1352.com
 *
 * Centralised responsive & mobile overrides for all pages.
 * Load this AFTER any page-specific <style> blocks.
 *
 * Breakpoints:
 *   1024px  tablet landscape
 *    768px  tablet portrait / large phone
 *    640px  phone landscape
 *    480px  phone portrait
 *    380px  small phone
 */

/* ═══════════════════════════════════════════════════════════════════
   1. SHARED — NAV
   ═══════════════════════════════════════════════════════════════════ */

/* Hamburger button — hidden on desktop */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.nav-hamburger span {
  display: block;
  height: 2px;
  background: var(--muted);
  border-radius: 2px;
  margin: 0 8px;
  transition: transform 0.25s, opacity 0.25s, background 0.2s;
}
.nav-hamburger:hover span { background: var(--gold); }

/* Mobile nav drawer */
.nav-drawer {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
}
.nav-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
}
.nav-drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(320px, 85vw);
  background: var(--surface);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 1.5rem 1.25rem;
  gap: 0.25rem;
}
.nav-drawer.open { display: block; }
.nav-drawer.open .nav-drawer-panel { transform: translateX(0); }

.nav-drawer-close {
  align-self: flex-end;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 8px;
  padding: 0.35rem 0.75rem;
  font-size: 1rem;
  cursor: pointer;
  margin-bottom: 1rem;
}
.nav-drawer-close:hover { color: var(--gold); border-color: var(--gold-dk); }

.nav-drawer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.nav-drawer-links a {
  display: block;
  padding: 0.75rem 1rem;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 8px;
  transition: background 0.15s, color 0.15s;
}
.nav-drawer-links a:hover,
.nav-drawer-links a.act {
  background: rgba(200, 150, 60, 0.1);
  color: var(--gold-lt);
}
.nav-drawer-divider {
  height: 1px;
  background: var(--border);
  margin: 0.75rem 0;
}
.nav-drawer-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: linear-gradient(135deg, rgba(200,150,60,.18), rgba(200,150,60,.08));
  border: 1px solid rgba(200,150,60,.35);
  color: var(--gold-lt);
  padding: 0.65rem 1.25rem;
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
  margin-top: 0.5rem;
}

@media (max-width: 768px) {
  nav {
    padding: 0.85rem 1.25rem;
  }
  .nav-links { display: none; }
  .nav-cta   { display: none; }
  .nav-hamburger { display: flex; }

  /* Shrink global search on tablet */
  .gsearch-input          { width: 140px; }
  .gsearch-input:focus    { width: 190px; }
}

@media (max-width: 480px) {
  nav { padding: 0.75rem 1rem; }
  .gsearch-wrap { display: none; } /* hidden on small phone — use drawer search */
}


/* ═══════════════════════════════════════════════════════════════════
   2. SHARED — FOOTER
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .footer-inner {
    grid-template-columns: 1fr !important;
    padding: 2rem 1.25rem 1.5rem;
    gap: 1.5rem;
  }
  .footer-bottom {
    flex-direction: column;
    text-align: center;
    padding: 1rem 1.25rem;
    gap: 0.5rem;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   3. LIBRARY PAGE  (library.html)
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .cards-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
}

@media (max-width: 768px) {
  .filters-panel {
    grid-template-columns: 1fr 1fr;
  }
  .toolbar {
    flex-wrap: wrap;
    gap: 0.6rem;
  }
  .toolbar-left,
  .toolbar-right {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
}

@media (max-width: 640px) {
  .cards-grid {
    grid-template-columns: 1fr;
  }
  .filters-panel {
    grid-template-columns: 1fr;
  }
  .modal-grid {
    grid-template-columns: 1fr;
  }
  .modal-content {
    padding: 1.25rem;
    margin: 0;
    border-radius: 0;
    max-height: 100dvh;
    height: 100dvh;
  }
  .modal-overlay {
    align-items: flex-end;
  }
  .pagination {
    flex-wrap: wrap;
    gap: 0.35rem;
  }
}

@media (max-width: 480px) {
  .filters-panel .filter-group {
    grid-column: 1 / -1;
  }
  .sermon-card {
    padding: 1rem;
  }
  .card-badges {
    flex-wrap: wrap;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   4. HOME PAGE  (home.html)
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .hero {
    padding: 7rem 1.25rem 4rem;
    text-align: center;
  }
  .hero-title {
    font-size: clamp(2rem, 8vw, 3.5rem);
  }
  .hero-actions {
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
  }
  .hero-stats {
    gap: 1.5rem;
    flex-wrap: wrap;
    justify-content: center;
  }
  .features-grid {
    grid-template-columns: 1fr;
  }
  .collections-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .pastors-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .hero {
    padding: 6rem 1rem 3rem;
  }
  .hero-title {
    font-size: clamp(1.75rem, 7vw, 2.5rem);
  }
  .hero-verse {
    font-size: 0.88rem;
    padding: 0.75rem 1rem;
  }
  .collections-grid {
    grid-template-columns: 1fr;
  }
  .hero-stats {
    gap: 1rem;
  }
  .hs-num {
    font-size: 1.75rem;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   5. PASTOR PAGE  (pastor.html)
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .two-col {
    grid-template-columns: 1fr 300px;
    gap: 1.5rem;
  }
}

@media (max-width: 960px) {
  .two-col {
    grid-template-columns: 1fr;
  }
  .stat-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .stats-strip {
    grid-template-columns: repeat(3, 1fr);
  }
  .stats-strip .ss-item:nth-child(4),
  .stats-strip .ss-item:nth-child(5) {
    display: none;
  }
}

@media (max-width: 640px) {
  .stat-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .stats-strip {
    grid-template-columns: repeat(2, 1fr);
  }
  .stats-strip .ss-item:nth-child(4) { display: flex; }
  .player-grid {
    grid-template-columns: 1fr;
  }
  .profile-photo {
    width: 90px;
    height: 90px;
  }
  .profile-name {
    font-size: 1.5rem;
  }
  .tab-bar {
    overflow-x: auto;
    scrollbar-width: none;
  }
  .ai-player-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 480px) {
  .stat-grid-4 {
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
  }
  .stats-strip {
    grid-template-columns: repeat(2, 1fr);
  }
  .player-card {
    padding: 1rem;
  }
  .timeline-item {
    padding: 0.85rem 1rem;
  }
  .day-row {
    grid-template-columns: 1fr;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   6. PASTORS LIST PAGE  (pastors.html)
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .pastors-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
  .stats-bar {
    gap: 1.5rem;
    flex-wrap: wrap;
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .pastors-grid {
    grid-template-columns: 1fr;
  }
  main {
    padding: 5.5rem 0 3rem;
  }
}

@media (max-width: 480px) {
  .pastor-card {
    padding: 1.25rem 1rem;
  }
  .pastor-photo {
    width: 64px;
    height: 64px;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   7. ABOUT PAGE  (about.html)
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .two-col {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .stats-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .stats-row {
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
  }
  .sec-card {
    padding: 1.25rem 1rem;
  }
  main {
    padding: 5.5rem 0 3rem;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   8. AUTH PAGE  (auth.html)
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  .auth-card {
    padding: 2rem 1.25rem;
    border-radius: var(--radius);
    margin: 0 1rem;
  }
  .auth-tabs {
    gap: 0;
  }
}

@media (max-width: 480px) {
  .auth-card {
    padding: 1.75rem 1rem;
    margin: 0 0.5rem;
  }
  .two-col {
    grid-template-columns: 1fr;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   9. MY LIBRARY PAGE  (my-library.html)
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .sermon-grid {
    grid-template-columns: 1fr;
  }
  .filter-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .search-box {
    min-width: unset;
  }
  .stats-strip {
    gap: 0.6rem;
  }
  .stat-pill {
    font-size: 0.78rem;
    padding: 0.35rem 0.85rem;
  }
}

@media (max-width: 480px) {
  .tabs-inner {
    padding: 0 1rem;
  }
  .tab {
    font-size: 0.82rem;
    padding: 0.85rem 1rem;
  }
  .rxn-bar {
    flex-wrap: wrap;
    gap: 0.35rem;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   10. DASHBOARD  (dashboard.html)
   ═══════════════════════════════════════════════════════════════════ */

/* Mobile top-bar with sidebar toggle */
.mob-sidebar-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 8px;
  padding: 0.38rem 0.75rem;
  font-size: 1.1rem;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.mob-sidebar-toggle:hover { color: var(--gold); border-color: var(--gold-dk); }

/* Sidebar mobile drawer */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 90;
}
.sidebar-backdrop.open { display: block; }

@media (max-width: 900px) {
  .dash-wrap {
    grid-template-columns: 1fr !important;
  }
  .sidebar {
    position: fixed !important;
    top: 0;
    right: -280px;
    width: 260px;
    height: 100dvh;
    z-index: 100;
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .sidebar.open {
    right: 0;
    box-shadow: -8px 0 40px rgba(0, 0, 0, 0.5);
  }
  .mob-sidebar-toggle { display: inline-flex; align-items: center; gap: 0.35rem; }
  .topbar { padding: 0.85rem 1.25rem; }
}

@media (max-width: 700px) {
  .form-grid,
  .form-grid-3 {
    grid-template-columns: 1fr !important;
  }
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .content {
    padding: 1.25rem 1rem;
  }
}

@media (max-width: 600px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
  .content {
    padding: 1rem 0.85rem;
  }
  .card { border-radius: var(--radius); }
  .card-head {
    padding: 0.9rem 1rem;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .topbar {
    padding: 0.75rem 1rem;
  }
  .topbar-title {
    font-size: 0.9rem;
  }
  .data-table {
    font-size: 0.75rem;
  }
  .data-table th,
  .data-table td {
    padding: 0.5rem 0.65rem;
  }
  /* Import preview — always scrollable */
  .preview-wrap {
    max-height: 320px;
    overflow-y: auto;
  }
  .list-toolbar {
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
  }
  .import-stats {
    gap: 1rem;
    padding: 0.85rem 1rem;
  }
  .btn {
    padding: 0.6rem 1.1rem;
    font-size: 0.82rem;
  }
}

@media (max-width: 480px) {
  .stats-grid {
    grid-template-columns: 1fr 1fr;
  }
  /* Modal full-screen on small phones */
  .modal-overlay {
    align-items: flex-end;
  }
  .modal-box {
    border-radius: var(--radius) var(--radius) 0 0;
    max-height: 90dvh;
    overflow-y: auto;
    width: 100%;
  }
  .submit-row {
    flex-direction: column;
    align-items: stretch;
  }
  .submit-row .btn {
    width: 100%;
    justify-content: center;
  }
  .topbar-right {
    gap: 0.4rem;
  }
  .drop-zone {
    padding: 2rem 1rem;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   11. GLOBAL UTILITY — small-screen helpers
   ═══════════════════════════════════════════════════════════════════ */

/* Prevent long words from breaking layout */
@media (max-width: 640px) {
  body {
    overflow-wrap: break-word;
    word-break: break-word;
  }
}

/* Smooth scroll offset for fixed nav */
[id] { scroll-margin-top: 72px; }

/* Touch targets */
@media (hover: none) and (pointer: coarse) {
  .btn,
  .tb-btn,
  .row-btn,
  .nav-cta,
  .sb-link,
  .tab,
  button {
    min-height: 44px;
  }
  select,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="url"],
  input[type="number"],
  textarea {
    font-size: 16px; /* prevent iOS zoom */
    min-height: 44px;
  }
}

/* Hide scrollbars on overflow-x containers */
.tabs-inner::-webkit-scrollbar,
.tab-bar::-webkit-scrollbar,
.nav-links::-webkit-scrollbar {
  display: none;
}

/* Ensure images never overflow */
img {
  max-width: 100%;
  height: auto;
}

/* RTL-safe flex wrapping */
@media (max-width: 640px) {
  .hero-actions,
  .filter-bar,
  .submit-row,
  .topbar-right {
    flex-wrap: wrap;
  }
}