/* Archive filters are independent of the legacy site-filters/btn styles. */
.martyr-filters {
    --filter-surface: #f4f1e7;
    --filter-button: #fffdf8;
    --filter-text: #344a3b;
    --filter-border: #d8ddcf;
    --filter-hover: #e7eddf;
    --filter-active: #173c2b;
    --filter-active-text: #fffdf6;
    --filter-focus: #85691c;
    margin-block-end: 36px;
    padding: 12px;
    border: 1px solid var(--filter-border);
    border-radius: 18px;
    background: var(--filter-surface);
}

.martyr-filters .martyr-filters__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.martyr-filters__list > li {
    display: flex;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

.martyr-filters .martyr-filters__button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 130px;
    min-height: 48px;
    padding: 10px 24px;
    border: 1px solid var(--filter-border);
    border-radius: 11px;
    color: var(--filter-text);
    background: var(--filter-button);
    font-family: inherit;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
    cursor: pointer;
    transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}

.martyr-filters__button:hover {
    border-color: var(--filter-text);
    background: var(--filter-hover);
}

.martyr-filters__list > .active .martyr-filters__button {
    border-color: var(--filter-active);
    color: var(--filter-active-text);
    background: var(--filter-active);
    box-shadow: inset 0 -3px 0 #d8bd61;
}

.martyr-filters__button:focus-visible {
    outline: 2px solid var(--filter-focus);
    outline-offset: 3px;
}

html.layout-dark .martyr-filters {
    --filter-surface: #14291f;
    --filter-button: #1d3529;
    --filter-text: #ece8d9;
    --filter-border: #3d5345;
    --filter-hover: #294635;
    --filter-active: #d8bd61;
    --filter-active-text: #142019;
    --filter-focus: #f0dc91;
}

@media (max-width: 575px) {
    .martyr-filters {
        margin-block-end: 24px;
        padding: 10px;
        border-radius: 14px;
    }

    .martyr-filters .martyr-filters__list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .martyr-filters .martyr-filters__button {
        min-width: 0;
        padding: 10px 12px;
        font-size: 16px;
    }
}

/* Phones: two portraits per row instead of one oversized card. */
@media (max-width: 767px) {
    .martyr-grid.row.sp15 {
        margin-inline: -6px;
    }

    .martyr-grid .card-container {
        width: 50%;
        flex: 0 0 50%;
        max-width: 50%;
        padding-inline: 6px;
    }

    .martyr-grid .content-box2 {
        margin-bottom: 14px;
        padding: 8px;
    }

    .martyr-grid .dz-box.style-4 {
        margin-bottom: 8px;
    }

    .martyr-grid .dz-box.style-4 .dz-media img {
        width: 100%;
        height: auto;
        aspect-ratio: 813 / 1135;
        object-fit: cover;
    }

    .martyr-grid .dz-box .view-btn {
        width: 34px;
        height: 34px;
        line-height: 34px;
        font-size: 12px;
    }

    .martyr-grid .dz-bottom .btn {
        padding: 8px 6px;
        font-size: 13px;
        line-height: 1.4;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

@media (prefers-reduced-motion: reduce) {
    .martyr-filters .martyr-filters__button {
        transition: none;
    }
}

/* Search field above the category filters. Shares the filters' palette so the
   two controls read as one toolbar. */
.martyr-search {
    --search-surface: #f4f1e7;
    --search-field: #fffdf8;
    --search-text: #344a3b;
    --search-muted: #6d7d70;
    --search-border: #d8ddcf;
    --search-accent: #173c2b;
    display: grid;
    gap: 10px;
    margin-block-end: 18px;
    padding: 14px 16px;
    border: 1px solid var(--search-border);
    border-radius: 18px;
    background: var(--search-surface);
}

.martyr-search__label {
    color: var(--search-text);
    font-size: 17px;
    font-weight: 700;
}

.martyr-search__field {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    border: 1px solid var(--search-border);
    border-radius: 12px;
    background: var(--search-field);
}

.martyr-search__field:focus-within {
    border-color: var(--search-accent);
    box-shadow: 0 0 0 3px rgba(23, 60, 43, .12);
}

.martyr-search__field .ui-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    color: var(--search-muted);
}

.martyr-search__field input {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--search-text);
    font-family: inherit;
    font-size: 18px;
    line-height: 1.5;
}

.martyr-search__field input::placeholder { color: var(--search-muted); }
.martyr-search__field input:focus { outline: none; }
.martyr-search__field input::-webkit-search-cancel-button { display: none; }

.martyr-search__clear {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: var(--search-text);
    background: rgba(23, 60, 43, .08);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.martyr-search__clear:hover { background: rgba(23, 60, 43, .16); }

.martyr-search__status {
    min-height: 22px;
    margin: 0;
    color: var(--search-muted);
    font-size: 15px;
}

.martyr-search__status:empty { display: none; }

/* Isotope positions the cards, so a filtered-out card must not take part in
   layout at all — the class is only a marker for the combined filter. */
.martyr-grid .card-container.is-search-hidden { display: none; }

/* The portrait now carries the martyr's name. */
.martyr-grid .martyr-card__name {
    margin: 0 0 10px;
    color: #1d2f24;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.45;
    text-align: center;
    overflow-wrap: anywhere;
}

.martyr-grid .martyr-card__name a { color: inherit; }
.martyr-grid .martyr-card__name a:hover { color: #85691c; }

html.layout-dark .martyr-search {
    --search-surface: #14291f;
    --search-field: #1d3529;
    --search-text: #ece8d9;
    --search-muted: #a7b3a8;
    --search-border: #3d5345;
    --search-accent: #d8bd61;
}

html.layout-dark .martyr-search__field:focus-within {
    box-shadow: 0 0 0 3px rgba(216, 189, 97, .18);
}

html.layout-dark .martyr-search__clear {
    color: #ece8d9;
    background: rgba(236, 232, 217, .1);
}

html.layout-dark .martyr-grid .martyr-card__name { color: #ece8d9; }
html.layout-dark .martyr-grid .martyr-card__name a:hover { color: #f0dc91; }

@media (max-width: 575px) {
    .martyr-search { padding: 12px; border-radius: 14px; }
    .martyr-search__label { font-size: 16px; }
    .martyr-search__field input { min-height: 44px; font-size: 16px; }
    .martyr-grid .martyr-card__name { font-size: 15px; }
}

/* The archive lays itself out: a plain responsive row, filtered by class, with
   no masonry/isotope pass over 700+ cards on every click. */
.martyr-grid { align-items: stretch; }
.martyr-grid .card-container { display: flex; }
.martyr-grid .card-container.is-filtered-out { display: none !important; }
.martyr-grid .content-box2 { display: flex; width: 100%; flex-direction: column; }
.martyr-grid .dz-box.style-4 { flex: 1 1 auto; }
.martyr-grid .dz-media img { width: 100%; height: auto; aspect-ratio: 813 / 1135; object-fit: cover; }

/* Two lines for every name, so the rows stay level without a layout engine. */
.martyr-grid .martyr-card__name {
    display: -webkit-box;
    min-height: 2.9em;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.martyr-search__empty {
    display: none;
    margin: 24px 0 0;
    padding: 28px 20px;
    border: 1px solid var(--search-border, #d8ddcf);
    border-radius: 14px;
    color: var(--search-text, #344a3b);
    font-size: 18px;
    text-align: center;
}

.martyr-search__empty.is-visible { display: block; }