/* =====================================================================
   Nairobi Music Hub - mobile / responsive layer
   Loaded after nmh/css/style.css on every public page (home + guest layout).
   Only overrides; nothing here changes the desktop layout above 991px.
   ===================================================================== */

/* never let anything push the page sideways */
html, body { max-width: 100%; overflow-x: hidden; }
img, video, iframe, svg { max-width: 100%; }
img { height: auto; }

@media (max-width: 991px) {
    .container { padding-left: 18px; padding-right: 18px; }
    section { padding-top: 56px; padding-bottom: 56px; }
    h1 { font-size: 2.1rem; line-height: 1.2; }
    h2 { font-size: 1.7rem; line-height: 1.25; }
    h3 { font-size: 1.4rem; }
}

/* ---------------------------------------------------------------
   Instruments gallery (home #instruments and /instruments).
   Isotope absolutely positions each tile at a fixed pixel width,
   which on a phone leaves the grid hugging the left edge. Below
   768px we switch the grid to a normal centred flow; filtering
   still works because Isotope only toggles display on the tiles.
   --------------------------------------------------------------- */
@media (max-width: 767px) {
    .da-thumbs.gallery {
        position: static !important;
        height: auto !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column;
        align-items: center;
        padding: 0;
        margin: 0 auto;
    }
    .da-thumbs.gallery > li.items {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        float: none !important;
        width: 100% !important;
        max-width: 420px;
        margin: 0 auto 22px !important;
        padding: 0;
        overflow: hidden;
        border-radius: 8px;
        box-sizing: border-box;
    }
    .da-thumbs.gallery > li.items:last-child { margin-bottom: 0 !important; }
    .da-thumbs li img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 366 / 263;
        object-fit: cover;
        display: block;
    }
    .filtering { flex-wrap: wrap; gap: 6px; padding: 0 8px; }
    .filtering .nav-link { padding: 6px 14px; font-size: 14px; }
}

/* ---------------------------------------------------------------
   Forms: one consistent control size, 16px text (stops iOS zooming
   the page when a field is focused), full-width buttons on phones.
   --------------------------------------------------------------- */
@media (max-width: 767px) {
    input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
    input[type="number"], input[type="date"], select, textarea { font-size: 16px; }
    .btn-large { padding-left: 24px; padding-right: 24px; }
}

/* the apply page form (frontend/apply/create) */
.nmh-form-control, .nmh-form-select { box-sizing: border-box; min-height: 44px; }
select.nmh-form-control, select.nmh-form-select { height: 44px; line-height: normal; padding-top: 0; padding-bottom: 0; }

/* ---------------------------------------------------------------
   Header / navigation
   --------------------------------------------------------------- */
@media (max-width: 991px) {
    .navbar-top-default .container { align-items: center; }
    .nmh-text-logo { max-width: 120px; }
    .side-menu { width: 100%; max-width: 320px; }
}

/* ---------------------------------------------------------------
   Content blocks
   --------------------------------------------------------------- */
@media (max-width: 767px) {
    .row > [class*="col-"] { padding-left: 15px; padding-right: 15px; }
    .box-margin { margin-bottom: 18px; }
    .bg-testimonial .owl-carousel, .bg-testimonial .item { padding-left: 4px; padding-right: 4px; }
    .blog-post, .blog-card, article.blog { margin-bottom: 24px; }
    .map, iframe.map { height: 280px; }
    .counter-item, .counters .col-6 { margin-bottom: 18px; }
    table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .btn { white-space: normal; }
    .site-footer .col-md-3, .site-footer .col-md-4, footer .col-md-3, footer .col-md-4, footer .col-sm-6 { margin-bottom: 26px; }
}