/* Directory pages for label and genre browsing. */
.srkc-directory-shell,
.srkc-taxonomy-shell {
    --srkc-directory-accent: #CC0100;
    --srkc-directory-ink: #111111;
    --srkc-directory-muted: #666666;
    --srkc-directory-line: #e2e2e2;
    --srkc-directory-soft: #f5f5f5;
}

body,
#wrapper,
#wrapper-in,
#content,
#contentInner,
main,
#side {
    background-color: #ffffff !important;
}

.srkc-directory-shell #contentInner,
.srkc-taxonomy-shell #contentInner,
.srkc-directory-shell main,
.srkc-taxonomy-shell main,
.srkc-directory-shell .mainbox,
.srkc-taxonomy-shell .mainbox {
    width: min(1120px, calc(100% - 32px));
    max-width: none !important;
    margin-inline: auto;
    float: none !important;
    box-sizing: border-box;
}

.srkc-directory-shell .mainbox,
.srkc-taxonomy-shell .mainbox { padding: 0; }
.srkc-directory-shell a,
.srkc-taxonomy-shell a { color: inherit; text-decoration: none; }

.srkc-directory-shell #breadcrumb,
.srkc-taxonomy-shell #breadcrumb {
    width: 100%;
    margin: .75rem 0 1.75rem;
    color: #888;
    font-size: .75rem;
    line-height: 1.5;
    overflow: hidden;
}

.srkc-directory-shell #breadcrumb ol,
.srkc-taxonomy-shell #breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem 0; margin: 0; padding: 0; list-style: none; }
.srkc-directory-shell #breadcrumb li,
.srkc-taxonomy-shell #breadcrumb li { display: inline-flex; align-items: center; min-width: 0; }
.srkc-directory-shell #breadcrumb li + li::before,
.srkc-taxonomy-shell #breadcrumb li + li::before { content: '›'; margin: 0 .5rem; color: #aaa; }
.srkc-directory-shell #breadcrumb a,
.srkc-taxonomy-shell #breadcrumb a { color: inherit; text-decoration: none; }
.srkc-directory-shell #breadcrumb a:hover,
.srkc-taxonomy-shell #breadcrumb a:hover { color: var(--srkc-directory-accent); }

.srkc-directory-header,
.srkc-taxonomy-header {
    margin-bottom: clamp(1.8rem, 4vw, 3rem);
    padding-bottom: 1rem;
    border-bottom: 0;
}

.srkc-directory-header > span,
.srkc-taxonomy-header > span {
    display: block;
    margin-bottom: .5rem;
    color: var(--srkc-directory-accent);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .16em;
}

.srkc-directory-header h1,
.srkc-taxonomy-header h1 {
    margin: 0;
    color: var(--srkc-directory-ink);
    font-size: clamp(1.7rem, 4vw, 2.7rem);
    line-height: 1.25;
}

.srkc-directory-header p,
.srkc-taxonomy-header p {
    max-width: 48rem;
    margin: .7rem 0 0;
    color: var(--srkc-directory-muted);
    font-size: .9rem;
    line-height: 1.75;
}

.srkc-directory-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    background: transparent;
}

.srkc-directory-term-card {
    display: flex;
    min-width: 0;
    border: 1px solid var(--srkc-directory-line);
    background: #fff;
}
.srkc-directory-term-card a {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 8.5rem;
    padding: 1.35rem 1.25rem 1.2rem;
    transition: background-color .2s ease, color .2s ease;
}
.srkc-directory-term-card a:hover { background: rgba(204, 1, 0, .08); color: var(--srkc-directory-ink); }
.srkc-directory-term-card h2 { margin: .65rem 0 .35rem; font-size: .9rem; line-height: 1.45; overflow-wrap: break-word; }
.srkc-directory-term-card p { margin: 0; color: var(--srkc-directory-muted); font-size: .75rem; }
.srkc-directory-term-card a:hover p { color: var(--srkc-directory-muted); }
.srkc-directory-term-arrow { position: absolute; right: 1.1rem; bottom: .85rem; color: var(--srkc-directory-accent); font-size: 1.15rem; }
.srkc-directory-term-card a:hover .srkc-directory-term-arrow { color: var(--srkc-directory-accent); }

.srkc-directory-term-card.has-top-post a { min-height: 0; padding-bottom: 1.2rem; }
.srkc-directory-term-featured { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: .7rem; align-items: center; margin-top: auto; padding-top: .8rem; border-top: 1px solid var(--srkc-directory-line); }
.srkc-directory-term-featured img { display: block; width: 5.5rem; aspect-ratio: 16 / 9; object-fit: contain; background: var(--srkc-directory-soft); }
.srkc-directory-term-featured strong { display: block; font-size: .72rem; line-height: 1.4; overflow-wrap: anywhere; }
.srkc-directory-term-featured small { display: block; margin-top: .2rem; color: var(--srkc-directory-muted); font-size: .62rem; }
.srkc-directory-term-card a:hover .srkc-directory-term-featured { border-top-color: rgba(204, 1, 0, .22); }
.srkc-directory-term-card a:hover .srkc-directory-term-featured small { color: var(--srkc-directory-muted); }

.srkc-taxonomy-description { margin: -1.5rem 0 2rem; color: var(--srkc-directory-muted); font-size: .9rem; line-height: 1.75; }
.srkc-taxonomy-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.8rem 1rem; }
.srkc-taxonomy-card { min-width: 0; }
.srkc-taxonomy-card a { display: block; }
.srkc-taxonomy-card-image { aspect-ratio: 16 / 9; margin-bottom: .7rem; overflow: hidden; background: var(--srkc-directory-soft); }
.srkc-taxonomy-card-image img { display: block; width: 100%; height: 100%; object-fit: contain; }
.srkc-taxonomy-card p { margin: 0 0 .3rem; color: var(--srkc-directory-accent); font-size: .7rem; font-weight: 800; letter-spacing: .08em; }
.srkc-taxonomy-card h2,
.srkc-taxonomy-card h3 { margin: 0; color: var(--srkc-directory-ink); font-size: .95rem; line-height: 1.5; overflow-wrap: break-word; }
.srkc-taxonomy-card a:hover h3 { color: var(--srkc-directory-accent); }
.srkc-taxonomy-card small { display: block; margin-top: .35rem; color: var(--srkc-directory-muted); font-size: .72rem; }
.srkc-taxonomy-pagination { margin-top: 3rem; text-align: center; }
.srkc-taxonomy-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 2.2rem; min-height: 2.2rem; margin: 0 .15rem; border: 1px solid var(--srkc-directory-line); color: var(--srkc-directory-ink); font-size: .8rem; }
.srkc-taxonomy-pagination .page-numbers.current { border-color: var(--srkc-directory-accent); background: var(--srkc-directory-accent); color: #fff; }
.srkc-touch-pagination { display: none; }
.srkc-taxonomy-empty { padding: 2rem 0; color: var(--srkc-directory-muted); }

@media (max-width: 700px) {
    .srkc-directory-shell #contentInner,
    .srkc-taxonomy-shell #contentInner,
    .srkc-directory-shell main,
    .srkc-taxonomy-shell main,
    .srkc-directory-shell .mainbox,
    .srkc-taxonomy-shell .mainbox { width: min(100% - 24px, 600px); }
    .srkc-directory-shell #breadcrumb,
    .srkc-taxonomy-shell #breadcrumb { margin-bottom: 1.25rem; font-size: .7rem; }
    .srkc-directory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .srkc-directory-term-card a { min-height: 7.5rem; padding: 1rem .9rem; }
    .srkc-directory-term-card h2 { font-size: .85rem; }
    .srkc-taxonomy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem .75rem; }
}

@media (max-width: 420px) {
    .srkc-directory-grid,
    .srkc-taxonomy-grid { grid-template-columns: 1fr; }
}

@media (max-width: 959px) {
    .srkc-taxonomy-pagination { margin-top: 2.25rem; }
    .srkc-taxonomy-pagination > ul.page-numbers { display: none; }
    .srkc-touch-pagination {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(8rem, 1.35fr) minmax(0, 1fr);
        gap: .6rem;
        align-items: stretch;
        width: 100%;
    }
    .srkc-touch-pagination-control,
    .srkc-touch-pagination-select {
        box-sizing: border-box;
        min-height: 48px;
        border: 1px solid var(--srkc-directory-line);
        border-radius: 3px;
        background: #fff;
        color: var(--srkc-directory-ink);
        font-size: .9rem;
        font-weight: 700;
        line-height: 1.2;
    }
    .srkc-touch-pagination-control {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .35rem;
        padding: .65rem .5rem;
        text-decoration: none;
        white-space: nowrap;
    }
    .srkc-touch-pagination-control.is-next {
        border-color: var(--srkc-directory-accent);
        background: var(--srkc-directory-accent);
        color: #fff;
    }
    .srkc-touch-pagination-control.is-disabled {
        background: var(--srkc-directory-soft);
        color: #aaa;
        cursor: default;
    }
    .srkc-touch-pagination-arrow { font-size: 1.05rem; line-height: 1; }
    .srkc-touch-pagination-select-wrap { position: relative; display: block; min-width: 0; }
    .srkc-touch-pagination-select-wrap::after {
        position: absolute;
        top: 50%;
        right: .75rem;
        color: var(--srkc-directory-accent);
        content: '⌄';
        font-size: 1rem;
        pointer-events: none;
        transform: translateY(-55%);
    }
    .srkc-touch-pagination-select {
        width: 100%;
        padding: 0 2rem 0 .7rem;
        appearance: none;
        -webkit-appearance: none;
    }
}

@media (max-width: 420px) {
    .srkc-touch-pagination { grid-template-columns: minmax(0, 1fr) minmax(7.4rem, 1.3fr) minmax(0, 1fr); gap: .45rem; }
    .srkc-touch-pagination-control,
    .srkc-touch-pagination-select { font-size: .82rem; }
    .srkc-touch-pagination-control { gap: .2rem; padding-inline: .3rem; }
    .srkc-touch-pagination-select { padding-inline: .45rem 1.6rem; }
    .srkc-touch-pagination-select-wrap::after { right: .5rem; }
}
