/**
 * Mineral Glossary Styles
 *
 * Extends _card-grid-base.css with mineral-specific theming:
 *   - Per-category card background colors (13 categories)
 *   - Legend color chips matching category palette
 *   - Compact card grid (minerals are short terms)
 *   - Subtitle under page title
 *   - Subcategory labels within sections
 */

/* =========================================================
   SUBTITLE
   ========================================================= */

.mineral-subtitle {
    font-size: 0.8rem;
    color: var(--ink-soft, #5a4943);
    margin: 0.5rem 0 0;
}

/* =========================================================
   SECTION TITLE ACCENT
   ========================================================= */

.mineral-section__title {
    border-bottom-color: var(--card-accent, var(--wood-orange, #e07a00));
}

/* =========================================================
   COMPACT GRID (minerals are short single-word trilingual terms)
   auto-fill gives ~6 columns at 1400px, ~4 at 900px, ~2 at 480px
   ========================================================= */

.mineral-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

@media (max-width: 640px) {
    .mineral-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 400px) {
    .mineral-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* =========================================================
   LINKED CARDS (minerals link to dictionary entries)
   ========================================================= */

a.mineral-card,
a.mineral-card:visited,
a.mineral-card:hover,
a.mineral-card:active {
    text-decoration: none;
    color: inherit;
}

/* =========================================================
   CATEGORY COLOR THEMING (card background + legend chip)
   Applied via cat-* class placed before mineral-card
   ========================================================= */

.cat-precious.mineral-card    { background: #fff8f0; border-left-color: #f9a825; }
.cat-semi-precious.mineral-card { background: #fdf5ff; border-left-color: #8e24aa; }
.cat-organic.mineral-card     { background: #f0fff4; border-left-color: #2e7d32; }
.cat-silicate.mineral-card    { background: #f0f7ff; border-left-color: #1565c0; }
.cat-oxide.mineral-card       { background: #fff3f0; border-left-color: #d84315; }
.cat-sulfide.mineral-card     { background: #fff8f0; border-left-color: #e65100; }
.cat-sulfate.mineral-card     { background: #fff0f5; border-left-color: #c62828; }
.cat-carbonate.mineral-card   { background: #f0fcff; border-left-color: #00838f; }
.cat-halide.mineral-card      { background: #f5f0ff; border-left-color: #6a1b9a; }
.cat-phosphate.mineral-card   { background: #f0f2ff; border-left-color: #283593; }
.cat-element.mineral-card     { background: #fffef0; border-left-color: #f57f17; }
.cat-ore.mineral-card         { background: #f5f0ee; border-left-color: #5d4037; }
.cat-rock.mineral-card        { background: #f0f3f5; border-left-color: #546e7a; }

/* =========================================================
   LEGEND COLOR CHIPS
   ========================================================= */

.cat-precious.mineral-legend__color    { background: #f9a825; }
.cat-semi-precious.mineral-legend__color { background: #8e24aa; }
.cat-organic.mineral-legend__color     { background: #2e7d32; }
.cat-silicate.mineral-legend__color    { background: #1565c0; }
.cat-oxide.mineral-legend__color       { background: #d84315; }
.cat-sulfide.mineral-legend__color     { background: #e65100; }
.cat-sulfate.mineral-legend__color     { background: #c62828; }
.cat-carbonate.mineral-legend__color   { background: #00838f; }
.cat-halide.mineral-legend__color      { background: #6a1b9a; }
.cat-phosphate.mineral-legend__color   { background: #283593; }
.cat-element.mineral-legend__color     { background: #f57f17; }
.cat-ore.mineral-legend__color         { background: #5d4037; }
.cat-rock.mineral-legend__color        { background: #546e7a; }

/* Legend item border tint to match category */
.cat-precious.mineral-legend__item    { border-color: #f9a825; }
.cat-semi-precious.mineral-legend__item { border-color: #8e24aa; }
.cat-organic.mineral-legend__item     { border-color: #2e7d32; }
.cat-silicate.mineral-legend__item    { border-color: #1565c0; }
.cat-oxide.mineral-legend__item       { border-color: #d84315; }
.cat-sulfide.mineral-legend__item     { border-color: #e65100; }
.cat-sulfate.mineral-legend__item     { border-color: #c62828; }
.cat-carbonate.mineral-legend__item   { border-color: #00838f; }
.cat-halide.mineral-legend__item      { border-color: #6a1b9a; }
.cat-phosphate.mineral-legend__item   { border-color: #283593; }
.cat-element.mineral-legend__item     { border-color: #f57f17; }
.cat-ore.mineral-legend__item         { border-color: #5d4037; }
.cat-rock.mineral-legend__item        { border-color: #546e7a; }

/* =========================================================
   SUBCATEGORY LABEL (sub-groups within a section)
   ========================================================= */

.mineral-subcategory {
    font-size: 0.8rem;
    color: var(--ink-soft, #5a4943);
    margin: 1rem 0 0.5rem;
    padding-left: 0.75rem;
    border-left: 3px solid var(--line-gray, #dcd1c3);
}