/* ==========================================
   Resources Page — Card Styles
   ========================================== */

.resource-card {
    background: var(--color-white);
    border: 1px solid var(--color-charcoal);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    position: relative;
}

.resource-card .card-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: 999px;
    margin-bottom: 0.5rem;
}

/* ==========================================
   Category badge colors
   ========================================== */

.cat-commentaries .card-badge,
.cat-interpretation .card-badge,
.cat-theology .card-badge {
    background: color-mix(in srgb, var(--color-wine-red) 15%, white);
    color: var(--color-wine-red);
}

.cat-greek .card-badge {
    background: color-mix(in srgb, var(--color-sage) 30%, white);
    color: var(--color-forest-green);
}

.cat-apologetics .card-badge {
    background: color-mix(in srgb, var(--color-slate-blue) 20%, white);
    color: var(--color-slate-blue);
}

/* ==========================================
   Card content
   ========================================== */

.resource-card .card-title {
    font-weight: 500;
    margin: 0 0 2px;
}

.resource-card .card-author {
    font-size: 0.875rem;
    color: var(--color-charcoal);
    margin: 0 0 12px;
}

/* ==========================================
   Citation toggle
   ========================================== */

.cite-toggle {
    font-size: 0.75rem;
    padding: 4px 10px;
    border: 1px solid var(--color-charcoal);
    border-radius: 6px;
    background: transparent;
    color: var(--color-charcoal);
    cursor: pointer;
}

.cite-text {
    display: none;
    font-size: 0.75rem;
    color: var(--color-charcoal);
    margin-top: 8px;
}

.cite-text.is-open {
    display: block;
}

/* ==========================================
   Website link (non-citation cards)
   ========================================== */

.card-link {
    font-size: 0.8125rem;
    color: var(--color-slate-blue);
    text-decoration: none;
}

.card-link:hover {
    text-decoration: underline;
}

/* ==========================================
   Filter pills
   ========================================== */

.filter-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 1.5rem;
}

.filter-pill {
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 0.8125rem;
    border: 1.5px solid var(--color-charcoal);
    background: transparent;
    cursor: pointer;
}

.filter-pill.is-active {
    background: var(--color-charcoal);
    color: var(--color-white);
}

/* ==========================================
   Search box
   ========================================== */

#resource-search {
    width: 100%;
    max-width: 400px;
    margin: 0 auto 1rem;
    display: block;
    padding: 8px 12px;
    border: 1px solid var(--color-charcoal);
    border-radius: 8px;
}

/* ==========================================
   Grid filtering
   ========================================== */

.resource-card.is-hidden {
    display: none;
}

/* ==========================================
   Section dividers (Testament + Book)
   ========================================== */

.resource-card {
    margin-bottom: 1rem;
}

.section-divider {
    font-size: 1.0625rem;
    font-weight: 500;
    color: var(--color-wine-red);
    margin: 1.5rem 0 0.5rem;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--color-sage);
}

.section-divider:first-of-type {
    margin-top: 0;
}

.book-divider {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-charcoal);
    text-decoration: underline;
    margin: 1rem 0 0.5rem;
}

.section-divider.is-hidden,
.book-divider.is-hidden {
    display: none;
}

/* ==========================================
   Disclaimer footer
   ========================================== */

.filter-pill {
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 0.8125rem;
    border: 1.5px solid var(--color-charcoal);
    background: transparent;
    color: var(--color-charcoal);
    cursor: pointer;
}