.compilation-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 3px;
    margin-bottom: 8px;
}

.compilation-table td {
    width: 308px; /* match 300px cover + padding/border */
    text-align: center;
    vertical-align: top;
    padding: 3px;
    border: 0px solid #ddd;
    box-sizing: border-box;
    background-color: #121C35;
}

.compilation-item {
    display: flex;               /* center children reliably */
    flex-direction: column;
    align-items: center;         /* horizontal centering */
    justify-content: flex-start; 
    text-align: center;
    font-size: 1rem;
    cursor: pointer;
}

/* Default cover size (used outside CompOverview override) */
.compilation-cover {
    width: 300px;  /* default */
    height: auto;  /* maintain aspect ratio */
    display: block;
    margin: auto;
    border-radius: 2px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

/* Scope smaller covers to CompOverview page only */
.compoverview-page .compilation-cover {
    width: 198px;
    height: auto;
}

.compilation-details {
    display: flex;               /* make centering effective */
    flex-direction: column;
    align-items: center;         /* center horizontally */
    justify-content: center;     /* center vertically within its min-height */
    text-align: center;          /* center inline content */
    margin: 4px auto 0 auto;     /* centered block with spacing */
    font-size: 1rem;
    min-height: 48px;            /* was height:48px; allow growth */
}

/* ensure images/links inside details are centered as blocks */
.compilation-details img {
    display: block;
    margin: 0 auto;
}

.pagination-icon {
    height: 24px;
    vertical-align: middle;
}

/* ---- Compilation Detail Layout (page) ---- */
.compdetail-layout {
    display: flex;
    flex-direction: column;   /* stack sections vertically */
    align-items: center;      /* center sections horizontally */
    gap: 16px;
}

.cover-panel {
    display: flex;            /* place front/back side by side */
    justify-content: center;  /* center as a group */
    align-items: center;
    gap: 24px;                /* space between covers */
    flex-wrap: wrap;          /* wrap on small screens */
}

.cover-panel img {
    max-width: 320px; /* doubled from 160px */
    height: auto;
    display: block;
}

/* Center and constrain details under covers on detail page */
.compdetail-layout .compilation-details {
    width: 100%;
    max-width: 900px;
    margin-top: 8px;
}

/* Center the loops table under details */
.loopstable {
    margin: 0 auto;
}

/* FIX: td.loop-item-comp should behave like a table-cell, not a block */
.loop-item-comp {
    display: table-cell; /* restore table layout */
    max-width: none;     /* let .loopstable td control width */
    height: auto;
}

/* Optional: reduce cover size on narrow screens */
@media (max-width: 700px) {
    .cover-panel img {
        max-width: 240px;
    }
}