/**
 * Casino review UI - consolidated.
 *
 * Rewritten from scratch on 2026-08-12. The previous file had been built by
 * appending three successive patches, which left .ngc-reviewlink defined three
 * times, .abp5-ngc-card-cta .ngc-reviewlink five times and four separate media
 * blocks. Same rendered result, roughly half the rules, one place to edit.
 *
 * Covers both class prefixes so one file body serves the abp5_ngc_* reference
 * theme and the four ngc_* sites.
 *
 * Colour tokens are existing design-system values only:
 *   #e4e8ef borders · #1f6feb link blue · #0b0e14 logo plate · #5b6270 muted
 *
 * Contents
 *   1. Breadcrumbs (reference theme)
 *   2. Review page - header banner (clickable) and spec table
 *   3. Review page - primary CTA
 *   4. "Read Review" secondary CTA - cards only, never the comparison table
 *   5. Responsive
 */

/* ---------- 1. Breadcrumbs ---------- */

.abp5-ngc-crumbs {
    margin: 0 0 14px;
    font-size: .85rem;
    color: #5b6270;
}

.abp5-ngc-crumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.abp5-ngc-crumbs li + li::before {
    content: "/";
    margin-right: 6px;
    color: #c3c9d4;
}

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

/* ---------- 2. Review page header + spec table ---------- */

/* The banner is one big link (see .ngc-reviewhead-link). It contains no other
   anchors, so the stretched overlay never nests. */
.ngc-reviewhead,
.abp5-ngc-reviewhead {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin: 0 0 6px;
    cursor: pointer;
}

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

.ngc-reviewhead .abp5-ngc-logo,
.abp5-ngc-reviewhead .abp5-ngc-logo {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 40px;
    object-fit: contain;
}

.ngc-reviewhead-text,
.abp5-ngc-reviewhead-text {
    flex: 1 1 240px;
    min-width: 0;
}

.ngc-reviewhead-text h1,
.abp5-ngc-reviewhead-text h1 { margin: 0; }

.ngc-reviewscore,
.abp5-ngc-reviewscore {
    flex: 0 0 auto;
    font-size: 1.5rem;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Stretched link: covers the banner, keeps a single real anchor. */
.ngc-reviewhead-link { text-decoration: none; color: inherit; }

.ngc-reviewhead-link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: 12px;
}

.ngc-reviewhead:hover .ngc-reviewhead-text h1,
.abp5-ngc-reviewhead:hover .abp5-ngc-reviewhead-text h1 {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ngc-reviewhead:focus-within,
.abp5-ngc-reviewhead:focus-within {
    outline: 3px solid #1f6feb;
    outline-offset: 6px;
    border-radius: 12px;
}

.ngc-reviewhead-link:focus-visible { outline: none; }

.ngc-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.ngc-reviewspec,
.abp5-ngc-reviewpage .abp5-ngc-spec { min-width: 0; }

.ngc-reviewspec th[scope="row"],
.abp5-ngc-reviewpage .abp5-ngc-spec th[scope="row"] { width: 40%; }

/* ---------- 3. Review page primary CTA ---------- */

.ngc-review-cta { margin-top: 22px; gap: 14px; }

.ngc-review-cta .abp5-ngc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* The base button is content-box; without this, min-height would add to the
       padding and render an oversized control. */
    box-sizing: border-box;
    min-height: 56px;
    padding: 16px 34px;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: .01em;
    line-height: 1.2;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(16, 19, 26, .14);
    transition: background .15s ease, transform .12s ease, box-shadow .15s ease;
}

.ngc-review-cta .abp5-ngc-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 19, 26, .18);
}

.ngc-review-cta .abp5-ngc-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(16, 19, 26, .16);
}

.ngc-review-cta .abp5-ngc-btn:focus-visible {
    outline: 3px solid #1f6feb;
    outline-offset: 3px;
}

.ngc-review-cta .abp5-ngc-btn--ph { box-shadow: none; transform: none; }

/* ---------- 4. "Read Review" secondary CTA ----------
   Card contexts only. The comparison table deliberately carries no secondary
   CTA - "Visit <brand>" is the single call to action in that component. */

.ngc-reviewlink,
.abp5-ngc-reviewlink {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
    min-height: 48px;
    padding: 0 22px;
    border: 1.5px solid #e4e8ef;
    border-radius: 10px;
    background: #fff;
    color: #1f6feb;
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    max-width: 100%;
    transition: border-color .15s ease, background-color .15s ease;
}

.ngc-reviewlink-arrow {
    display: inline-block;
    transition: transform .15s ease;
}

.ngc-reviewlink:hover,
.abp5-ngc-reviewlink:hover {
    border-color: #1f6feb;
    background: rgba(31, 111, 235, .06);
    text-decoration: none;
}

.ngc-reviewlink:hover .ngc-reviewlink-arrow,
.abp5-ngc-reviewlink:hover .ngc-reviewlink-arrow { transform: translateX(3px); }

.ngc-reviewlink:active,
.abp5-ngc-reviewlink:active {
    background: rgba(31, 111, 235, .12);
    border-color: #1f6feb;
}

.ngc-reviewlink:focus-visible,
.abp5-ngc-reviewlink:focus-visible {
    outline: 3px solid #1f6feb;
    outline-offset: 2px;
}

/* Never grow: the CTA row becomes a column at <=640px and a growing item would
   stretch to fill the remaining height. */
.abp5-ngc-card-cta .ngc-reviewlink,
.abp5-ngc-card-cta .abp5-ngc-reviewlink { flex: none; }

/* Homepage pick cards only: the primary there is full width, so the secondary
   matches it and sits directly beneath. Review cards on the listicle keep an
   auto width, so the inline primary stays the larger control. Width is set via
   `width`, never flex-basis, which would resolve against height in a column. */
.abp5-ngc-card--pick .abp5-ngc-card-cta .ngc-reviewlink,
.abp5-ngc-card--pick .abp5-ngc-card-cta .abp5-ngc-reviewlink { width: 100%; }

/* ---------- 5. Responsive ---------- */

@media (max-width: 768px) {
    .ngc-reviewhead,
    .abp5-ngc-reviewhead { gap: 14px; }
}

@media (max-width: 640px) {
    .ngc-reviewhead,
    .abp5-ngc-reviewhead { gap: 12px; }

    .ngc-reviewhead .abp5-ngc-pick-logo,
    .abp5-ngc-reviewhead .abp5-ngc-pick-logo { width: 108px; height: 52px; }

    .ngc-reviewscore,
    .abp5-ngc-reviewscore { font-size: 1.25rem; }

    .ngc-reviewspec th[scope="row"],
    .abp5-ngc-reviewpage .abp5-ngc-spec th[scope="row"] { width: 46%; }

    .ngc-review-cta { gap: 10px; margin-top: 18px; }

    .ngc-review-cta .abp5-ngc-btn {
        width: 100%;
        min-height: 54px;
        padding: 15px 22px;
        font-size: 1rem;
    }

    /* Full width in every card context once the CTA row stacks. */
    .abp5-ngc-card-cta .ngc-reviewlink,
    .abp5-ngc-card-cta .abp5-ngc-reviewlink { width: 100%; }
}


/* ---------- 6. Screenshots inside review copy ---------- */

/* One reusable figure. Border, radius and muted caption colour are existing
   design-system values, so a screenshot reads as part of the page rather than
   as a new component. Spacing matches the paragraph rhythm around it. */
.abp5-ngc-shot {
    margin: 28px 0;
}

/* <picture> is inline by default; block keeps the figure box exact when a
   screenshot ships an art-directed narrow crop alongside the wide one. */
.abp5-ngc-shot picture {
    display: block;
}

/* width:100% + height:auto honours the intrinsic ratio from the width/height
   attributes: the box is reserved before load (no layout shift) and the image
   scales down on narrow screens without ever being stretched. Where a <source>
   carries its own width/height, that ratio is the one reserved. */
.abp5-ngc-shot img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    border: 1.5px solid #e4e8ef;
    border-radius: 12px;
    background: #0b0e14;
    box-sizing: border-box;
}

.abp5-ngc-shot figcaption {
    margin: 10px 2px 0;
    font-size: .92rem;
    line-height: 1.55;
    color: #5b6270;
}

@media (max-width: 640px) {
    .abp5-ngc-shot { margin: 22px 0; }
    .abp5-ngc-shot img { border-radius: 10px; }
    .abp5-ngc-shot figcaption { font-size: .88rem; }
}