/* Chinese symbols (/symbols, /symbols/{slug}) — hub cards, the concept page hero,
   the "what it does not mean" panel and the word/alternative lists. */

/* ---------- Hub ---------- */
.sym-card {
    transition: transform 0.15s ease;
}

.sym-card:hover {
    transform: translateY(-2px);
}

.sym-card-glyph {
    font-size: 2.6rem;
    line-height: 1.15;
}

.sym-group-heading {
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
    padding-bottom: 0.35rem;
}

/* ---------- Concept page ---------- */
.sym-hero-glyph {
    font-size: 5.5rem;
    line-height: 1;
}

.sym-writer-box {
    width: 180px;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sym-script-glyph {
    font-size: 4rem;
    line-height: 1.1;
}

/* ---------- "What it does not mean" ----------
   The one section on the page that has no equivalent on a competing symbol list, so it is
   given a visual weight that survives skim-reading. */
.sym-warning-card {
    border-left: 4px solid var(--bs-warning, #ffc107) !important;
}

.sym-caution {
    border-left: 3px solid var(--bs-border-color, #dee2e6);
    padding-left: 0.85rem;
}

.sym-caution-claim {
    font-style: italic;
    opacity: 0.85;
}

.sym-caution-reality {
    font-weight: 500;
}

/* ---------- Words and alternatives ---------- */
.sym-word-card {
    transition: transform 0.15s ease;
}

.sym-word-card:hover {
    transform: translateY(-2px);
}

.sym-word-glyph {
    font-size: 1.9rem;
    line-height: 1.1;
}

.sym-alt-glyph {
    font-size: 2.4rem;
    line-height: 1;
    min-width: 2.6rem;
    text-align: center;
}

.sym-audio-btn {
    min-width: 2.3rem;
}

@media (max-width: 575.98px) {
    .sym-hero-glyph {
        font-size: 4rem;
    }

    .sym-script-glyph {
        font-size: 3rem;
    }

    .sym-writer-box {
        width: 150px;
        height: 150px;
    }
}