/* Mobile-only behavior for /resources/materials/. */
.materials-directory-mobile-search {
    display: none;
}

@media (max-width: 767px) {
    .materials-directory-body .materials-directory-hero,
    .materials-directory-body .materials-directory-head {
        display: none !important;
    }

    .materials-directory-body .materials-directory-main {
        padding-top: calc(var(--materials-directory-fixed-header-bottom, 88px) + 20px);
    }

    .materials-directory-mobile-search.is-visible {
        position: fixed;
        top: var(--materials-directory-fixed-header-bottom, 88px);
        right: 0;
        left: 0;
        z-index: 999;
        display: block;
        padding: 10px 20px 12px;
        border-top: 1px solid #e2e8f0;
        border-bottom: 1px solid #cbd5e1;
        background: #fff;
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
    }

    .materials-directory-mobile-search > label {
        display: block;
        margin-bottom: 6px;
        color: #334155;
        font-size: 0.8rem;
        font-weight: 700;
        line-height: 1.4;
    }

    .materials-directory-mobile-search-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
    }

    .materials-directory-mobile-search input,
    .materials-directory-mobile-search button,
    .materials-directory-mobile-search select {
        height: 42px;
        border-radius: 8px;
        font: inherit;
        font-size: 0.875rem;
    }

    .materials-directory-mobile-search input {
        min-width: 0;
        padding: 0 12px;
        color: #102033;
        border: 1px solid #cbd5e1;
        outline: none;
        background: #fff;
    }

    .materials-directory-mobile-search input:focus {
        border-color: #1f6f78;
        box-shadow: 0 0 0 3px rgba(31, 111, 120, 0.12);
    }

    .materials-directory-mobile-search button {
        min-width: 64px;
        padding: 0 12px;
        color: #000;
        border: 1px solid #000;
        background: #fff;
        cursor: pointer;
    }

    .materials-directory-mobile-filter-panel[hidden] {
        display: none !important;
    }

    .materials-directory-mobile-filter-panel {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        margin-top: 10px;
    }

    .materials-directory-mobile-field {
        min-width: 0;
    }

    .materials-directory-mobile-field label {
        display: block;
        margin-bottom: 6px;
        color: #334155;
        font-size: 0.8rem;
        font-weight: 700;
        line-height: 1.4;
    }

    .materials-directory-mobile-search select {
        width: 100%;
        min-width: 0;
        padding: 0 10px;
        color: #102033;
        border: 1px solid #cbd5e1;
        outline: none;
        background: #fff;
    }

    .materials-directory-mobile-search select:focus {
        border-color: #1f6f78;
        box-shadow: 0 0 0 3px rgba(31, 111, 120, 0.12);
    }
}