/* ============================================================
   LECHOLI — MOBILE RESPONSIVE
   ============================================================ */

/* ── Prevent horizontal scroll ── */
html, body { overflow-x: hidden; max-width: 100%; }
img { max-width: 100%; height: auto; }

/* ── Tablet (≤ 991px) ── */
@media (max-width: 991.98px) {

  /* Navbar mobile dropdown */
  .ftco-navbar-light .navbar-collapse {
    background: rgba(13,15,14,.98);
    padding: 12px 20px 20px;
    border-top: 1px solid rgba(255,255,255,.08);
    max-height: 75vh;
    overflow-y: auto;
  }

  .ftco-navbar-light .navbar-nav > .nav-item > .nav-link {
    padding: .65rem 0 !important;
    font-size: 1rem !important;
    border-bottom: 1px solid rgba(255,255,255,.06);
  }

  .ftco-navbar-light .navbar-nav > .nav-item:last-child > .nav-link {
    border-bottom: none;
  }

  .ftco-navbar-light .navbar-nav > .nav-item > .nav-link::after { display: none; }

  /* Hero */
  .hero-wrap { height: 100svh; min-height: 560px; background-attachment: scroll; }
  .slider-text { height: 100svh; min-height: 560px; }

  /* Timer */
  #timer { width: 100%; }
  #timer .time { font-size: 1.8rem; padding: 12px 6px 10px; margin: 0 3px; }
  #timer .time span { font-size: .58rem; }

  /* Sections */
  .ftco-section { padding: 60px 0; }
  .ftco-intro { padding: 60px 0; }
  .ftco-team { padding: 60px 0; }

  /* Contact */
  .info-wrap { border-radius: 12px 12px 0 0 !important; }
  .contact-wrap { border-radius: 0 0 12px 12px !important; }

  /* Event cards */
  .event-card .row.no-gutters { flex-direction: column; }
  .event-card .event-img { min-height: 220px !important; }
  .order-md-last { order: 0 !important; }

  /* Footer */
  .ftco-footer { padding-top: 48px; }
}

/* ── Mobile (≤ 767px) ── */
@media (max-width: 767.98px) {

  /* Body padding — no top bar on mobile */
  body { padding-top: 60px !important; }

  /* Typography */
  .slider-text h1 { font-size: clamp(1.9rem, 9vw, 2.8rem) !important; line-height: 1.05; }
  .slider-text .bread { font-size: clamp(1.5rem, 6vw, 2rem) !important; }
  .slider-text p.loc-date { font-size: .82rem; }
  .slider-text p.loc-date span { display: block; margin-right: 0; margin-bottom: 4px; }
  .heading-section h2 { font-size: 1.65rem !important; }

  /* Hero content */
  .hero-wrap .col-md-12[style*="padding-top"] { padding-top: 70px !important; }

  /* Timer */
  #timer .time { font-size: 1.4rem; padding: 10px 4px 8px; }

  /* Sections */
  .ftco-section { padding: 44px 0; }
  .ftco-intro { padding: 44px 0; }

  /* About section */
  .ftco-about .img { min-height: 260px !important; height: 260px; }
  .ftco-about .about-intro { padding: 0; }
  .ftco-about .col-md-6.pl-md-5 { padding: 28px 16px !important; }

  /* Hero-wrap-2 inner pages */
  .hero-wrap.hero-wrap-2 { height: 36vh; min-height: 240px; }
  .hero-wrap.hero-wrap-2 .slider-text { height: 36vh; min-height: 240px; }
  .slider-text .breadcrumbs { font-size: .75rem; }

  /* Gallery grid */
  .project-wrap { height: 180px; }

  /* YouTube embed */
  .youtube-embed { width: 100% !important; height: 210px !important; }

  /* Sub-page cards */
  .cut-card, .merch-card, .mvv-card, .promo-card { margin-bottom: 16px; }
  .delivery-step { flex-direction: column; gap: 10px; }

  /* Event cards */
  .event-card .event-body { padding: 20px 16px; }
  .event-card .event-meta { gap: 10px; flex-wrap: wrap; }
  .event-card h3 { font-size: 1.25rem; }

  /* Past edition cards */
  .past-card { height: 200px; margin-bottom: 16px; }

  /* Gallery page masonry */
  .gallery-grid { columns: 1 !important; column-gap: 0; }
  .gallery-grid .g-item { margin-bottom: 8px; }

  /* Edition tabs */
  .edition-tabs { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding-bottom: 8px; -webkit-overflow-scrolling: touch; }
  .edition-tab { flex-shrink: 0; font-size: .75rem; padding: 8px 16px; }

  /* Ticket cards */
  .ticket-card { margin-bottom: 20px; }

  /* Subscription modal */
  #sub-modal { width: 96%; height: 500px; }
  #sub-modal.show { bottom: 12px; }

  /* Footer */
  .ftco-footer { padding-top: 36px; }
  .ftco-footer .row.mb-5 { margin-bottom: 0 !important; }
  .ftco-footer .ftco-footer-widget { margin-bottom: 24px; }
  .ftco-footer .col-sm-12 { padding-bottom: 0; }

  /* Buttons */
  .btn { padding: .6rem 1.4rem; font-size: .82rem; }

  /* Navbar logo */
  .navbar-logo { width: 88px; }

  /* Who section (about page) */
  .who-text-col { padding-left: 0 !important; padding-top: 28px; }
  .about-img-wrap { min-height: 320px; padding-bottom: 40px; }
  .about-img-main { width: 100%; height: 280px; }
  .about-img-secondary { width: 52%; height: 160px; }

  /* MVV cards */
  .mvv-card { margin-bottom: 16px; }

  /* Value items */
  .value-item { padding: 16px; }

  /* Chesanyama image */
  .chesa-section .col-md-6.d-flex { margin-top: 28px; }

  /* Bulk CTA */
  .bulk-section { padding: 44px 0; }

  /* Location strip */
  .location-strip { font-size: .8rem; text-align: center; }
  .location-strip .col-md-auto { padding: 0 12px; }

  /* Promo cards */
  .promo-card { margin-bottom: 16px; }

  /* Menu items */
  .menu-category { margin-bottom: 28px; }
}

/* ── Small mobile (≤ 480px) ── */
@media (max-width: 480px) {
  .slider-text h1 { font-size: 1.75rem !important; }
  .slider-text .bread { font-size: 1.4rem !important; }
  #timer .time { font-size: 1.2rem; }
  .ftco-intro h2 { font-size: 1.35rem !important; }
  .heading-section h2 { font-size: 1.45rem !important; }
  .navbar-logo { width: 78px; }
  .gallery-grid { columns: 1 !important; }
  .edition-header h3 { font-size: 1.5rem; }
  .ticket-price { font-size: 2rem; }
  .ticket-price.small-price { font-size: 1.5rem; }
  .event-card h3 { font-size: 1.1rem; }
  .ftco-footer .ftco-footer-widget h2 { font-size: .68rem; }
}

/* ── Fix: col stacking on mobile ── */
@media (max-width: 767.98px) {
  .col-sm-6 { flex: 0 0 50%; max-width: 50%; }
  .col-md-3, .col-md-4, .col-md-6, .col-md-7, .col-md-8 { padding-left: 12px; padding-right: 12px; }
  .row { margin-left: -12px; margin-right: -12px; }
}

/* ── Fix: no-gutters gallery stays full width ── */
@media (max-width: 767.98px) {
  .row.no-gutters { margin-left: 0; margin-right: 0; }
  .row.no-gutters > [class*="col-"] { padding-left: 0; padding-right: 0; }
}