/* ============================================================
   XUNTU — Responsive Stylesheet
   Mobile-first breakpoints; overrides for larger screens.
   ============================================================ */

/* ── Base mobile (320px–575px) ───────────────────────────────────── */
@media (max-width: 575.98px) {

  .hero-section  { min-height: auto; padding: 60px 0 40px; }
  .hero-name     { font-size: 2rem; }
  .hero-intro    { font-size: 1rem; }
  .hero-actions  { flex-direction: column; gap: .5rem; }
  .btn-hero-primary,
  .btn-hero-outline { width: 100%; text-align: center; }

  .hero-photo-wrap { margin-top: 2rem; }
  .hero-photo,
  .hero-photo-placeholder { max-width: 100%; }

  .stats-strip { padding: 24px 0; }
  .stat-number  { font-size: 1.6rem; }
  .stat-divider { display: none; }

  .timeline::before      { left: 20px; }
  .timeline-item          { flex-direction: column !important; }
  .timeline-item .timeline-content { border-left: 4px solid var(--clr-primary) !important; border-right: none !important; }
  .timeline-dot           { left: 20px; }
  .timeline-content       { margin-left: 48px; }

  .project-card-footer    { flex-direction: column; gap: .4rem; align-items: flex-start; }
  .section-pad            { padding: 48px 0; }
  .section-pad-lg         { padding: 64px 0; }

  .footer-bottom .row     { flex-direction: column; gap: .5rem; text-align: center; }
  .footer-bottom .col-md-5 { text-align: center !important; }

  #project-map            { height: 320px; }

  .lga-filter-bar         { flex-direction: column; align-items: stretch; }
  .lga-filter-bar select  { max-width: 100%; }

  .event-card             { flex-direction: column; }
  .event-date-box         { align-self: auto; width: 60px; }
}

/* ── Small devices (576px–767px) ─────────────────────────────────── */
@media (min-width: 576px) and (max-width: 767.98px) {

  .hero-section   { min-height: auto; padding: 72px 0 48px; }
  .hero-name      { font-size: 2.4rem; }
  .hero-photo-wrap { margin-top: 2rem; }

  .timeline::before { left: 20px; }
  .timeline-item    { flex-direction: column !important; }
  .timeline-item .timeline-content { border-left: 4px solid var(--clr-primary) !important; border-right: none !important; }
  .timeline-dot     { left: 20px; }
  .timeline-content { margin-left: 48px; }

  #project-map { height: 380px; }
}

/* ── Medium devices / tablets (768px–1023px) ─────────────────────── */
@media (min-width: 768px) and (max-width: 1023.98px) {

  .hero-section    { min-height: 80vh; padding: 80px 0; }
  .hero-photo-wrap { margin-top: 0; }

  .timeline::before { left: 50%; }
  .timeline-dot     { left: 50%; }

  .navbar-nav .nav-link { padding: .75rem .5rem; font-size: .82rem; }

  #project-map { height: 420px; }
}

/* ── Large screens (1024px+) ─────────────────────────────────────── */
@media (min-width: 1024px) {

  .hero-section { min-height: 92vh; }

  .stats-strip .container {
    display:         flex;
    justify-content: center;
    align-items:     center;
  }
}

/* ── Extra large (1440px+) ───────────────────────────────────────── */
@media (min-width: 1440px) {
  .container { max-width: 1320px; }
}

/* ── Navigation responsive fixes ────────────────────────────────── */
@media (max-width: 991.98px) {

  .navbar-collapse {
    background:    var(--clr-deep-green);
    padding:       1rem;
    border-radius: var(--radius-md);
    margin-top:    .5rem;
    box-shadow:    var(--shadow-lg);
  }

  .navbar-nav .nav-link  { padding: .7rem 1rem; border-radius: var(--radius-sm); }
  .navbar-nav .nav-link:hover { background: rgba(255,255,255,.08); }

  .dropdown-menu { position: static; box-shadow: none; border: none; background: rgba(255,255,255,.05); }
  .dropdown-item { color: rgba(255,255,255,.85); }
  .dropdown-item:hover { background: rgba(255,255,255,.1); color: var(--clr-gold); }

  .nav-cta { margin: .5rem 1rem; display: inline-block; }

  .top-bar { display: none !important; }
}

/* ── Tables responsive ───────────────────────────────────────────── */
@media (max-width: 767.98px) {
  .table-responsive-card thead { display: none; }
  .table-responsive-card tbody tr {
    display:        block;
    margin-bottom:  1rem;
    border:         1px solid var(--clr-border);
    border-radius:  var(--radius-md);
    padding:        .75rem;
  }
  .table-responsive-card tbody td {
    display:     block;
    border:      none;
    padding:     .25rem 0;
    font-size:   .88rem;
  }
  .table-responsive-card tbody td::before {
    content:     attr(data-label) ': ';
    font-weight: 700;
    color:       var(--clr-text-muted);
  }
}

/* ── About photo frame ───────────────────────────────────────────── */
@media (max-width: 767.98px) {
  .about-badge {
    bottom: -8px;
    right:  -8px;
    font-size: .75rem;
    padding:   .5rem .75rem;
  }
}

/* ── Hausa text adjustments ──────────────────────────────────────── */
[lang="ha"] body,
.hausa-text {
  font-size:   1.0125rem; /* slightly larger for readability */
  line-height: 1.75;
}

/* ── Long title handling ─────────────────────────────────────────── */
.project-title,
.news-title,
.event-title {
  word-break: break-word;
  overflow-wrap: break-word;
}

/* ── Gallery grid ────────────────────────────────────────────────── */
.gallery-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap:                   12px;
}
@media (max-width: 575.98px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}

/* ── Modal overflow fix ──────────────────────────────────────────── */
@media (max-width: 575.98px) {
  .modal-dialog { margin: .5rem; }
  .modal-body   { padding: 1rem; }
}

/* ── No horizontal overflow ──────────────────────────────────────── */
body { overflow-x: hidden; }
.container { overflow-x: hidden; }

/* ── Accessibility toolbar — small screens ───────────────────────── */
@media (max-width: 575.98px) {
  .accessibility-toolbar {
    gap:        .25rem;
    padding:    .3rem .5rem;
  }
  .a11y-btn {
    padding:    .25rem .4rem;
    font-size:  .7rem;
  }
}

/* ── Contact / request section ───────────────────────────────────── */
@media (max-width: 767.98px) {
  .contact-info-card  { margin-bottom: 1.5rem; }
  .contact-form-card  { padding: 1.25rem; }
}

/* ── Stats strip — medium screens ────────────────────────────────── */
@media (min-width: 576px) and (max-width: 767.98px) {
  .stat-number { font-size: 1.8rem; }
  .stat-divider { display: none; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .stat-number  { font-size: 2rem; }
  .stat-divider { opacity: .4; }
}

/* ── Priority cards — tablet ─────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .priority-card { min-height: 220px; }
}

/* ── Cookie notice — small screens ──────────────────────────────── */
@media (max-width: 575.98px) {
  #cookie-notice .container { flex-direction: column; text-align: center; }
  #cookie-notice .btn        { width: 100%; }
}

/* ── Reduced motion (accessibility) ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .hero-photo        { animation: none !important; }
  .hero-content,
  .hero-name,
  .hero-subtitle,
  .hero-intro,
  .hero-actions,
  .hero-photo-wrap   { animation: none !important; opacity: 1 !important; transform: none !important; }

  .request-section   { animation: none !important; background-size: 100% 100% !important; }
  .progress-bar::after { animation: none !important; }
  .about-badge       { animation: none !important; }

  .project-card:hover,
  .news-card:hover,
  .priority-card:hover,
  .testimonial-card:hover,
  .event-card:hover,
  .stat-item:hover   { transform: none !important; }
}

/* ── Landscape tablet optimizations ──────────────────────────────── */
@media (min-width: 768px) and (max-width: 1023.98px) and (orientation: landscape) {
  .hero-section   { min-height: 75vh; }
  .hero-photo     { max-width: 380px; }
  .stat-number    { font-size: 2rem; }
}

/* ── Print styles ─────────────────────────────────────────────────── */
@media print {
  .accessibility-toolbar,
  #cookie-notice,
  .navbar,
  .top-bar,
  .footer-social,
  .btn-hero-primary,
  .btn-hero-outline,
  .live-search-wrap,
  .back-to-top,
  [data-aos]           { display: none !important; }

  body        { font-size: 11pt; color: #000; background: #fff; }
  a           { color: #000; text-decoration: underline; }
  .container  { max-width: 100%; }
  .hero-section { min-height: auto; padding: 1cm 0; animation: none !important; }
  .project-card,
  .news-card  { break-inside: avoid; }
}