/**
 * Homepage - additions only.
 *
 * Supersedes ngc-home-4.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).
 *
 * The homepage reuses non-gamstop-page-3.css wholesale (.abp5-ngc-wrap,
 * -article, -card, -cards, -btn, -faq, -steps, -rg, -disclaimer). This file
 * adds only what that stylesheet does not already provide: multi-column card
 * grids, the Featured Picks strip label, and the muted "not published yet"
 * card state.
 */

/* .abp5-ngc-cards is a single-column grid; these give it columns. */
.abp5-ngc-cards--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.abp5-ngc-cards--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 768px) {
    .abp5-ngc-cards--2,
    .abp5-ngc-cards--3 {
        grid-template-columns: 1fr;
    }
}

/* Featured Picks strip: a label, deliberately not a heading element. */
.abp5-ngc-striplabel {
    margin: 0 0 14px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: #5b6270;
}

.abp5-ngc-card-desc {
    margin: 0;
    color: #3a4150;
    font-size: .95rem;
    line-height: 1.6;
}

.abp5-ngc-card-title a {
    color: #10131a;
    text-decoration: none;
}

.abp5-ngc-card-title a:hover,
.abp5-ngc-card-title a:focus-visible {
    color: #1f6feb;
    text-decoration: underline;
}

/* Cards whose destination page does not exist yet. Muted, never a dead link. */
.abp5-ngc-card--soon {
    background: #fbfcfe;
    border-style: dashed;
}

.abp5-ngc-card--soon .abp5-ngc-card-title {
    color: #5b6270;
}

.abp5-ngc-soon {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    background: #eef1f6;
    color: #5b6270;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* News teasers */
.abp5-ngc-newsmeta {
    margin: 0 0 6px;
    font-size: .82rem;
    color: #5b6270;
}

.abp5-ngc-trustgrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
}

.abp5-ngc-trustgrid li {
    padding: 14px 16px;
    border: 1px solid #e4e8ef;
    border-radius: 10px;
    background: #fff;
    text-align: center;
}

.abp5-ngc-trustnum {
    display: block;
    font-size: 1.35rem;
    font-weight: 800;
    color: #10131a;
    line-height: 1.2;
}

.abp5-ngc-trustlab {
    display: block;
    margin-top: 2px;
    font-size: .82rem;
    color: #5b6270;
}

/* Stat awaiting a confirmed figure - muted, never a red dev placeholder. */
.abp5-ngc-trustnum--tbc {
    color: #c3c9d4;
}

@media (max-width: 640px) {
    .abp5-ngc-trustgrid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

/* =====================================================================
   Featured Picks cards (2026-08-11)
   Scoped to .abp5-ngc-card--pick / .abp5-ngc-cards--picks only, so no other
   card grid on the homepage (Reviews, Guides, News) is affected.
   The 2-column layout itself comes from the existing .abp5-ngc-cards--2,
   which already collapses to one column at <=768px.
   ===================================================================== */

/* Equal heights come from the grid's default stretch - no height:100% here,
   which would resolve against the stretched row and push the card taller than
   its own content, leaving dead space above the CTA. The flex column plus the
   auto margin on the CTA keeps both buttons on the same baseline whatever the
   offer text does. */
.abp5-ngc-card--pick {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* One identical logo plate per card. The plate background matches the
   artwork, so the two read as a single deliberate shape. */
.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, never distorted. Both logos
   are capped to the same 40px height, giving 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 the space-between this
   inherits from non-gamstop-page-3.css: with one child space-between would
   align it left, away from where it has always sat. */
.abp5-ngc-card--pick .abp5-ngc-card-head {
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin: 0;
    flex-wrap: nowrap;
}

/* Rating presentation identical in both cards. */
.abp5-ngc-card--pick .abp5-ngc-card-rating {
    font-size: 1.05rem;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

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

/* CTA sits flush at the card foot, identical in both cards. */
.abp5-ngc-card--pick .abp5-ngc-card-cta {
    margin-top: auto;
    padding-top: 2px;
}

.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; }
}