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

.hero-artwork {
    background-image: url("../imgs/heroes/hero-visit-other-worlds.webp");
    background-position: center 60%;
}

.hero-text h1 {
    max-width: none;
    white-space: nowrap;
}

/* =====================
    Collection Header
   ===================== */

.worlds-collection-header {
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}

.worlds-toolbar {
    justify-content: space-between;
}

.worlds-count {
    margin-bottom: 0;
    white-space: nowrap;
    font-size: 20px;
}

.worlds-controls {
    display: flex;
    align-items: center;
    gap: 24px;
}

.worlds-filters {
    display: flex;
    gap: 16px;
}

.worlds-toolbar-action {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    color: var(--accent);
    text-decoration: none;
}

.worlds-toolbar-action i {
    width: 16px;
    height: 16px;
    stroke-width: 1.8;
}

.worlds-toolbar-action:hover {
    text-decoration: underline;
}

/* =====================
    Resource Grid
   ===================== */

.worlds-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    /* Auto (content-sized) rows: every card now reserves the same 4-line
       description block, so all cards end up the same height and rows
       align naturally without any hover-growing to manage. */
    grid-auto-rows: auto;
    column-gap: 20px;
    row-gap: 32px;
    margin-top: 20px;
}

/* =====================
    Resource Entry
   ===================== */

.world-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 16px 16px;
    border: 1px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

/* This page's stylesheet loads after style-common.css, so .world-card's
   display:flex (equal specificity, later in cascade) would otherwise beat
   the site-wide .hidden utility that setupListFilters toggles on
   filtered-out cards — making the filters appear to do nothing. */
.world-card.hidden {
    display: none;
}

.world-card:hover {
    border-color: var(--hover-border);
    background: var(--panel);
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(76, 52, 130, 0.14);
}

/* Lifts a hovered card's shadow above its neighbors' cards, which otherwise
   sit at the same stacking level and would clip the shadow underneath them. */
.world-card:hover {
    z-index: 10;
}

/* Lifted further than a plain hover so the card's open links panel (which
   overlaps neighboring cards) always draws on top of them. */
.world-card:has(.world-links-panel.open) {
    z-index: 20;
}

/* all: unset strips the default <a>/<button> styling so these act as
   invisible, absolutely-positioned hit targets layered over the card. */
.world-card-badge,
.world-card-action {
    all: unset;
    position: absolute;
    top: 36px;
    right: calc(50% - 70px);
    z-index: 4;
    width: 22px;
    height: 22px;
    cursor: pointer;
}

.world-hex {
    width: 80px;
    height: 92px;
    margin-bottom: 18px;
    background: var(--accent-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.world-hex img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.world-hex i {
    width: 30px;
    height: 30px;
    color: var(--accent);
    stroke-width: 1.6;
}

.world-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.world-title {
    margin-bottom: 6px;
    font-family: "Newsreader", serif;
    font-size: 21px;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.25;
}

.world-meta {
    margin-bottom: 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
}

/* Every card reserves space for exactly 4 lines of description, even when
   the description is empty, so all cards end up the same height. The
   reserved block (4 × 1.6em line height) fits every description in the
   dataset, so the full text is shown at once — no collapsed state and no
   hover-grow to manage. */
.world-description {
    width: 100%;
    height: calc(4 * 1.6em);
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-muted);
}

/* =====================
    Links Panel
   ===================== */

/* Animates via max-height (0 -> a value comfortably larger than the panel
   ever gets) rather than height:auto, since auto can't be transitioned. */
.world-links-panel {
    position: absolute;
    top: 36px;
    left: calc(50% + 56px);
    z-index: 5;
    width: 180px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--panel);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
    padding: 6px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateX(-6px);
    pointer-events: none;
    transition: max-height .25s ease, opacity .2s ease, transform .2s ease;
}

/* Toggled by setupPanelToggles/closeAllPanels; only one panel has this class
   at a time. */
.world-links-panel.open {
    max-height: 320px;
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

.world-links-panel a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    color: var(--text-subtle);
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}

.world-links-panel a:hover {
    background: var(--accent-soft);
    color: var(--accent);
}

.world-links-panel i,
.world-links-panel img {
    width: 16px;
    height: 16px;
    stroke-width: 1.8;
    flex-shrink: 0;
    object-fit: contain;
}