/* ============================================================
   Casinoay — single-casino_review (стиль casino.guru)
   BEM, только токены из tokens.css. Mobile-first, брейкпойнт 960px.
   ============================================================ */

.review { padding-block: var(--space-6) var(--space-8); }

.review__inner {
    width: min(100% - 2 * var(--space-4), var(--container));
    margin-inline: auto;
    display: grid;
    gap: var(--space-6);
}

/* Desktop: 2 колонки, сайдбар слева */
@media (min-width: 960px) {
    .review__inner {
        grid-template-columns: 320px minmax(0, 1fr);
        align-items: start;
    }
}

/* ---------- Сайдбар фактов ---------- */
.review-facts {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-5);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

/* sticky — только на десктопе; top с запасом под будущую шапку */
@media (min-width: 960px) {
    .review-facts {
        position: sticky;
        top: calc(var(--space-8) + var(--space-2));
    }
}

.review-facts__logo {
    display: flex;
    justify-content: center;
    padding: var(--space-2);
}

.review-facts__logo img { max-height: 72px; width: auto; }

/* ---------- Score Chip (signature) ---------- */
.score-chip {
    inline-size: 136px;
    block-size: 136px;
    margin-inline: auto;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 0;
    border-radius: var(--radius-pill);
    background:
        radial-gradient(circle at 50% 32%, color-mix(in srgb, var(--chip-bg) 80%, #ffffff 12%), var(--chip-bg) 70%);
    /* «фишка»: золотое кольцо по краю */
    box-shadow:
        inset 0 0 0 4px var(--chip-ring),
        inset 0 0 0 8px var(--chip-bg),
        inset 0 0 0 9px color-mix(in srgb, var(--chip-ring) 45%, transparent),
        var(--shadow-md);
    color: var(--chip-label);
    text-align: center;
}

.score-chip__value {
    font-family: var(--font-display);
    font-weight: var(--fw-black);
    font-size: 2.6rem;
    line-height: 1;
    letter-spacing: var(--ls-tight);
    color: var(--chip-score);
}

.score-chip__max {
    font-size: var(--fs-caption);
    color: var(--chip-label);
    margin-top: 2px;
}

.score-chip__verdict {
    margin-top: var(--space-1);
    font-family: var(--font-mono);
    font-size: var(--fs-caption);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--chip-ring);
}

/* ---------- Кнопки ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    border: 0;
    border-radius: var(--radius);
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    font-size: var(--fs-base);
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.15s ease, transform 0.05s ease;
}

.btn:active { transform: translateY(1px); }

.btn--cta {
    background: var(--cta);
    color: var(--cta-ink);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.btn--cta:hover { background: var(--cta-hover); color: var(--cta-ink); }

.review-facts__cta { width: 100%; padding-block: var(--space-4); font-size: var(--fs-lead); }

.btn--ghost {
    background: transparent;
    color: var(--brand);
    border: 1px solid var(--border-strong);
}

.btn--ghost:hover { background: var(--brand-tint); color: var(--brand-strong); }

/* ---------- Таблица фактов ---------- */
.review-facts__table { display: flex; flex-direction: column; margin: 0; }

.review-facts__row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-3);
    align-items: baseline;
    padding-block: var(--space-3);
    border-top: 1px solid var(--border);
}

.review-facts__row--wide { grid-template-columns: 1fr; }

.review-facts__label { color: var(--muted); font-size: var(--fs-sm); margin: 0; }

.review-facts__value { color: var(--ink); font-weight: var(--fw-medium); text-align: end; margin: 0; }

.review-facts__row--wide .review-facts__value { text-align: start; margin-top: var(--space-2); }

/* моно для «данных»-значений (год, депозит, лицензия) */
.review-facts__value--data { font-family: var(--font-mono); font-weight: var(--fw-medium); }

.review-facts__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.review-facts__chip {
    font-family: var(--font-mono);
    font-size: var(--fs-caption);
    padding: 2px var(--space-2);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
}

.review-facts__empty {
    padding: var(--space-4);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
    color: var(--muted);
}

.review-facts__empty strong { color: var(--ink); }

/* ---------- Тело обзора ---------- */
.review-body { min-width: 0; }

.review-body__title { font-size: var(--fs-h1); margin-bottom: var(--space-3); }

.review-body__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
    color: var(--muted);
    font-size: var(--fs-sm);
    margin-bottom: var(--space-5);
}

.review-body__author { font-weight: var(--fw-semibold); color: var(--text); }
.review-body__sep { color: var(--border-strong); }

/* Вердикт автора — выделенный блок */
.review-verdict {
    padding: var(--space-5);
    margin-bottom: var(--space-6);
    background: var(--brand-tint);
    border-inline-start: 4px solid var(--brand);
    border-radius: var(--radius);
}

.review-verdict__title {
    font-size: var(--fs-h4);
    margin-bottom: var(--space-2);
    color: var(--brand-strong);
}

.review-verdict__text { color: var(--ink); }
.review-verdict__text :last-child { margin-bottom: 0; }

/* Сворачиваемый контент */
.review-body__content { position: relative; }

.review-body__content.is-collapsed {
    max-height: 640px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
}

.review-body__more { margin-top: var(--space-4); }

/* ---------- Плюсы / минусы ---------- */
.pros-cons {
    display: grid;
    gap: var(--space-5);
    margin-block: var(--space-7);
}

@media (min-width: 600px) {
    .pros-cons { grid-template-columns: 1fr 1fr; }
}

.pros-cons__col {
    padding: var(--space-5);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.pros-cons__title { font-size: var(--fs-h4); margin-bottom: var(--space-3); }
.pros-cons__col--pos .pros-cons__title { color: var(--pos); }
.pros-cons__col--neg .pros-cons__title { color: var(--neg); }

.pros-cons__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }

.pros-cons__item { position: relative; padding-inline-start: var(--space-6); color: var(--text); }

.pros-cons__item::before {
    position: absolute;
    inset-inline-start: 0;
    inline-size: 1.25rem;
    block-size: 1.25rem;
    border-radius: var(--radius-pill);
    color: #fff;
    font-weight: var(--fw-bold);
    font-size: 0.9rem;
    line-height: 1.25rem;
    text-align: center;
}

.pros-cons__item--pos::before { content: "+"; background: var(--pos); }
.pros-cons__item--neg::before { content: "−"; background: var(--neg); }

/* ---------- Скриншоты ---------- */
.screenshots { margin-block: var(--space-7); }
.screenshots__title { font-size: var(--fs-h3); margin-bottom: var(--space-4); }

.screenshots__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--space-3);
}

.screenshots__item {
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    cursor: zoom-in;
    background: var(--surface-2);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.screenshots__item:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.screenshots__item img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }

/* ---------- Провайдеры ---------- */
.review-providers { margin-block: var(--space-7); }
.review-providers__title { font-size: var(--fs-h3); margin-bottom: var(--space-4); }
.review-providers__list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }

.provider-badge {
    padding: var(--space-2) var(--space-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    font-size: var(--fs-sm);
    color: var(--ink);
}

/* ---------- Автор ---------- */
.review-author {
    display: flex;
    gap: var(--space-4);
    align-items: center;
    margin-top: var(--space-7);
    padding-top: var(--space-5);
    border-top: 1px solid var(--border);
}

.review-author__avatar { border-radius: var(--radius-pill); }
.review-author__name { font-family: var(--font-display); font-weight: var(--fw-bold); color: var(--ink); }
.review-author__bio { margin: var(--space-1) 0 0; color: var(--muted); font-size: var(--fs-sm); }

/* ---------- Лайтбокс (свой, без библиотек) ---------- */
.review-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    place-items: center;
    padding: var(--space-5);
    background: rgba(7, 12, 10, 0.85);
}

.review-lightbox.is-open { display: grid; }

.review-lightbox__img {
    max-width: min(96vw, 1100px);
    max-height: 90vh;
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
}

.review-lightbox__close {
    position: absolute;
    top: var(--space-4);
    inset-inline-end: var(--space-4);
    inline-size: 2.5rem;
    block-size: 2.5rem;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--ink);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}