/* =====================
    Hero
   ===================== */

.hero-artwork {
    background-image: url("../imgs/heroes/hero-chaos-gate.webp");
    background-position: center 70%;
}

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

.chaos-gate-search {
    margin-bottom: 40px;
}

/* =====================
    Chapters
   ===================== */

.chapter-intro {
    max-width: 70ch;
    margin-bottom: 8px;
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.7;
}

.list-card-meta .meta-item-status {
    color: var(--accent);
}

/* Applied by the generator to releases whose data hasn't been verified yet,
   giving the tag a dashed/muted look instead of the normal solid accent tag. */
.list-card-tag.list-card-tag-unverified {
    background: none;
    color: var(--text-faint);
    border: 1px dashed var(--border-color);
}

/* =====================
    Unlinked Releases
   ===================== */

/*  Applied by the generator to a card for a release with no detail page to
    link to yet, dimming it so it still shows up in the list without implying
    it's clickable like the other cards. */
.list-card-unlinked {
    position: relative;
    opacity: 0.5;
    transition: opacity .2s ease;
}

.list-card-unlinked:hover {
    opacity: 0.7;
}

/* Pure-CSS tooltip reading its text from the data-tooltip attribute, explaining
   why the card is unlinked, without needing JS to show/position it. */
.list-card-unlinked::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 20px;
    padding: 6px 10px;
    background: var(--text);
    color: var(--panel);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform: translateY(4px);
    transition: opacity .2s ease, transform .2s ease;
    z-index: 1;
}

.list-card-unlinked:hover::after {
    opacity: 1;
    transform: translateY(0);
}