/**
 * ngc-ranking-2.css - casino ranking components only.
 *
 * Supersedes ngc-ranking-1.css. The filename changed only to bust the CDN's
 * long-lived static cache; the sole rule change is the pick-card head, which
 * now aligns its rating with flex-end because the brand name beside it was
 * removed (the logo plate above already carries it).
 *
 * Structure, spacing and alignment for the comparison table and the homepage
 * pick cards. Deliberately carries almost no colour: every rule below reuses
 * classes the per-site palette already themes, so each site keeps its own
 * identity. The single exception is the logo plate, whose dark background is
 * dictated by the operator artwork (both logos ship on black), not by the site.
 *
 * Scoped to .abp5-ngc-compare and .abp5-ngc-card--pick, so no other table or
 * card grid on any page is affected.
 */

/* ---------- Comparison table ---------- */

.abp5-ngc-compare {
    table-layout: fixed;
    min-width: 0;
}

.abp5-ngc-compare thead th:nth-child(1) { width: 5%; }
.abp5-ngc-compare thead th:nth-child(2) { width: 21%; }
.abp5-ngc-compare thead th:nth-child(3) { width: 9%; }
.abp5-ngc-compare thead th:nth-child(4) { width: 25%; }
.abp5-ngc-compare thead th:nth-child(5) { width: 15%; }
.abp5-ngc-compare thead th:nth-child(6) { width: 11%; }
.abp5-ngc-compare thead th:nth-child(7) { width: 14%; }

.abp5-ngc-compare tbody td,
.abp5-ngc-compare tbody th {
    vertical-align: middle;
    padding: 14px 12px;
    overflow-wrap: anywhere;
}

.abp5-ngc-compare tbody td:nth-child(4) {
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: none;
    line-height: 1.45;
}

/* Rank, rating and the short-value columns centred, so a missing "—"
   reads as intentional rather than as a broken cell. */
.abp5-ngc-compare tbody td:nth-child(1),
.abp5-ngc-compare tbody td:nth-child(3),
.abp5-ngc-compare tbody td:nth-child(5),
.abp5-ngc-compare tbody td:nth-child(6),
.abp5-ngc-compare thead th:nth-child(3),
.abp5-ngc-compare thead th:nth-child(5),
.abp5-ngc-compare thead th:nth-child(6) { text-align: center; }

.abp5-ngc-compare .abp5-ngc-rating {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Brand cell: one identical logo plate per row. */
.abp5-ngc-cbrand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
}

.abp5-ngc-compare .abp5-ngc-logo {
    width: 100%;
    max-width: 132px;
    height: 38px;
    max-height: none;
    object-fit: contain;
    background: #0b0e14;
    border-radius: 8px;
    padding: 5px 9px;
    box-sizing: border-box;
    display: block;
}

/* Both CTAs identical. Wrapping rather than nowrap: the column is narrow at
   small desktop widths and nowrap clips the longer label. */
.abp5-ngc-compare .abp5-ngc-cta-cell { text-align: center; }

.abp5-ngc-compare .abp5-ngc-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    padding: 8px 6px;
    font-size: .74rem;
    line-height: 1.15;
    white-space: normal;
    text-align: center;
    box-sizing: border-box;
}

.abp5-ngc-compare tbody tr:last-child td,
.abp5-ngc-compare tbody tr:last-child th { border-bottom: 0; }

/* Narrow desktop: the CTA column is too tight for the longer label here, so
   rebalance the columns rather than shrink the text. */
@media (min-width: 769px) and (max-width: 900px) {
    .abp5-ngc-compare thead th:nth-child(2) { width: 18%; }
    .abp5-ngc-compare thead th:nth-child(4) { width: 22%; }
    .abp5-ngc-compare thead th:nth-child(7) { width: 19%; }
    .abp5-ngc-compare .abp5-ngc-btn { font-size: .7rem; padding: 8px 4px; }
}

/* Stacked, labelled rows on tablet/phone - no horizontal scrolling. */
@media (max-width: 768px) {
    .abp5-ngc-compare thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .abp5-ngc-compare,
    .abp5-ngc-compare tbody,
    .abp5-ngc-compare tr,
    .abp5-ngc-compare td,
    .abp5-ngc-compare th { display: block; width: auto; }

    .abp5-ngc-compare tr {
        border: 1px solid;
        border-color: inherit;
        border-radius: 12px;
        margin: 0 0 14px;
        overflow: hidden;
    }

    .abp5-ngc-compare td,
    .abp5-ngc-compare th[scope="row"] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 14px;
        padding: 11px 16px;
        text-align: right;
        font-size: .95rem;
        width: auto;
    }

    .abp5-ngc-compare td::before {
        content: attr(data-label);
        font-weight: 700;
        text-align: left;
    }

    .abp5-ngc-compare .abp5-ngc-cname { text-align: left; font-size: 1.05rem; }
    .abp5-ngc-compare .abp5-ngc-cbrand { flex-direction: row; align-items: center; gap: 10px; }
    .abp5-ngc-compare .abp5-ngc-rank { display: none; }
    .abp5-ngc-compare .abp5-ngc-logo { width: 108px; max-width: 108px; height: 36px; }
    .abp5-ngc-compare .abp5-ngc-cta-cell { padding: 12px 16px; }
    .abp5-ngc-compare .abp5-ngc-cta-cell::before { content: none; }
    .abp5-ngc-compare .abp5-ngc-btn { min-height: 46px; font-size: .95rem; }
    .abp5-ngc-compare tbody td:nth-child(1),
    .abp5-ngc-compare tbody td:nth-child(3),
    .abp5-ngc-compare tbody td:nth-child(4),
    .abp5-ngc-compare tbody td:nth-child(5),
    .abp5-ngc-compare tbody td:nth-child(6) { text-align: right; }
}

/* ---------- Homepage pick cards ---------- */

/* Equal heights come from the grid's default stretch. No height:100% here:
   that resolves against the stretched row and pushes the card taller than its
   own content, leaving dead space above the CTA. */
.abp5-ngc-card--pick {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.abp5-ngc-pick-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    padding: 10px 16px;
    background: #0b0e14;
    border-radius: 10px;
    box-sizing: border-box;
}

/* contain + auto dimensions: never stretched. Both logos capped to the same
   height, which is what gives them balanced prominence. */
.abp5-ngc-pick-logo .abp5-ngc-logo {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 40px;
    object-fit: contain;
}

/* The rating is the only child here - the brand name was removed because the
   logo plate above already carries it. flex-end, not space-between: with one
   child space-between would align it left, away from where it has always sat. */
.abp5-ngc-card--pick .abp5-ngc-card-head {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin: 0;
}

.abp5-ngc-card--pick .abp5-ngc-card-rating {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.abp5-ngc-card--pick .abp5-ngc-card-desc { margin: 0; }

.abp5-ngc-card--pick .abp5-ngc-card-cta { margin-top: auto; }

.abp5-ngc-card--pick .abp5-ngc-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 46px;
    padding: 10px 14px;
    text-align: center;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .abp5-ngc-card--pick { gap: 12px; }
    .abp5-ngc-pick-logo { height: 56px; }
}