/* ============================================================
   UI BLOCK LIBRARY v2 (richer building blocks for editorial pages)
   Use these inside .pillar-body and section content to break long
   text into readable scan-friendly visual chunks.
   ============================================================ */

/* === Callout boxes (Green Flag / Red Flag / Pro Tip / Math / Quote) === */
.callout {
    margin: 1.5rem 0;
    padding: 1.1rem 1.3rem 1.1rem 3.1rem;
    border-radius: var(--radius);
    border-left: 4px solid var(--cyan-500);
    background: var(--bg-card);
    position: relative;
    line-height: 1.6;
}
.callout::before {
    position: absolute;
    left: .9rem; top: 1.05rem;
    font-size: 1.2rem; line-height: 1;
}
.callout p { margin: 0; }
.callout p + p { margin-top: .55rem; }
.callout strong { color: var(--cyan-900); }
.callout a { color: var(--cyan-700); border-bottom: 1px dashed var(--cyan-300); text-decoration: none; }

.callout--green  { border-left-color: var(--emerald-500); background: rgba(52, 211, 153, 0.07); }
.callout--green::before  { content: "GF"; color: var(--emerald-700); font-weight: 800; font-size: .72rem; letter-spacing: .04em; }
.callout--green strong   { color: var(--emerald-700); }

.callout--red    { border-left-color: #ef4444; background: rgba(239, 68, 68, 0.07); }
.callout--red::before    { content: "RF"; color: #b91c1c; font-weight: 800; font-size: .72rem; letter-spacing: .04em; }
.callout--red strong     { color: #b91c1c; }

.callout--pro    { border-left-color: var(--cyan-500); background: rgba(0, 217, 255, 0.06); }
.callout--pro::before    { content: "i"; color: var(--cyan-700); font-weight: 800; font-size: 1rem; font-style: italic; }

.callout--math   { border-left-color: var(--amber-500); background: rgba(251, 191, 36, 0.07); font-family: var(--font-mono, ui-monospace, Consolas, monospace); }
.callout--math::before   { content: "fx"; color: var(--amber-700); font-weight: 800; font-size: .82rem; letter-spacing: -.02em; }

.callout--quote  { border-left-color: var(--slate-400); background: rgba(148, 163, 184, 0.08); font-style: italic; }
.callout--quote::before  { content: "\201C"; font-size: 1.6rem; color: var(--slate-500); top: .85rem; line-height: 1; }

.callout--warn   { border-left-color: #f59e0b; background: rgba(251, 191, 36, 0.1); }
.callout--warn::before   { content: "!"; color: #d97706; font-weight: 800; font-size: 1.2rem; line-height: 1; }

/* === Fact strip (scan-friendly stats row above body) === */
.fact-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    margin: 1.5rem 0 2rem;
}
.fact-strip__item {
    background: var(--bg-card);
    padding: 1.1rem 1.2rem;
    text-align: center;
}
.fact-strip__num {
    display: block;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.65rem;
    color: var(--cyan-700);
    line-height: 1.1;
    margin-bottom: .25em;
}
.fact-strip__num--em { color: var(--emerald-700); }
.fact-strip__num--am { color: var(--amber-600); }
.fact-strip__lab {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--slate-600);
    line-height: 1.3;
}

/* === Comparison row (visual A-vs-B with winner) === */
.compare-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1rem;
    margin: 1.4rem 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-card);
    padding: 1.2rem;
}
.compare-row__col { padding: .3rem; }
.compare-row__col h4 {
    margin: 0 0 .5em;
    font-family: var(--font-heading);
    color: var(--slate-700);
    font-size: .82rem;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.compare-row__col p { margin: 0; font-size: 1.02rem; line-height: 1.5; color: var(--slate-800); }
.compare-row__col--win h4 { color: var(--emerald-700); }
.compare-row__col--win p { color: var(--emerald-800); font-weight: 600; }
.compare-row__vs {
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-heading);
    font-weight: 800;
    color: var(--slate-400);
    font-size: 1.2rem;
}

/* === Decision flow (step-by-step branch) === */
.decision-flow {
    list-style: none;
    counter-reset: dflow;
    padding: 0; margin: 1.5rem 0;
    display: grid;
    gap: 1rem;
}
.decision-flow > li {
    counter-increment: dflow;
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 4px solid var(--cyan-500);
    border-radius: var(--radius);
    padding: 1.1rem 1.3rem;
    align-items: start;
}
.decision-flow > li::before {
    content: counter(dflow);
    grid-column: 1;
    background: var(--cyan-100);
    color: var(--cyan-800);
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.2rem;
    align-self: start;
}
.decision-flow .df-q { font-weight: 700; color: var(--cyan-900); margin: 0 0 .35em; font-size: 1.05rem; }
.decision-flow .df-a { margin: 0; color: var(--slate-700); line-height: 1.55; }

/* === Pull quote === */
.pull-quote {
    margin: 2rem 0;
    padding: 1.4rem 1.6rem;
    background: linear-gradient(135deg, rgba(0, 217, 255, 0.08), rgba(52, 211, 153, 0.05));
    border-left: 5px solid var(--cyan-500);
    border-radius: var(--radius);
    font-family: var(--font-heading);
    font-size: 1.18rem;
    line-height: 1.5;
    color: var(--cyan-900);
    font-weight: 600;
}
.pull-quote cite { display: block; margin-top: .5em; color: var(--slate-600); font-size: .82rem; font-weight: 500; font-style: normal; letter-spacing: .04em; }

/* === Mini scorecard (use inline in sections) === */
.mini-score {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    background: var(--cyan-100);
    color: var(--cyan-800);
    padding: .25em .65em;
    border-radius: var(--radius-pill);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: .82rem;
}
.mini-score--em { background: rgba(52,211,153,.15); color: var(--emerald-800); }
.mini-score--am { background: rgba(251,191,36,.15); color: #92400e; }

/* === TLDR block === */
.tldr-block {
    margin: 1.5rem 0 2rem;
    padding: 1.4rem 1.6rem;
    background: linear-gradient(135deg, rgba(0, 217, 255, 0.08), rgba(0, 184, 212, 0.04));
    border: 1px solid var(--cyan-500);
    border-radius: var(--radius-lg);
    position: relative;
}
.tldr-block__label {
    display: inline-block;
    background: var(--cyan-500);
    color: #0A0E1A;
    padding: .3em .9em;
    border-radius: var(--radius-pill);
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: .82rem;
    letter-spacing: .12em;
    margin-bottom: .85rem;
}
.tldr-block p { margin: 0 0 .65em; color: var(--cyan-900); font-size: 1.05rem; line-height: 1.55; }
.tldr-block p:last-child { margin-bottom: 0; }
.tldr-block strong { color: var(--cyan-700); }

/* === Two-column related: separate "Related pages" vs "Related blog posts" === */
.related-split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin: 1.5rem 0;
}
.related-col {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.3rem 1.4rem;
}
.related-col h3 {
    margin: 0 0 .9em;
    font-family: var(--font-heading);
    font-size: 1rem;
    color: var(--cyan-900);
    padding-bottom: .55em;
    border-bottom: 2px solid var(--cyan-300);
    letter-spacing: .04em;
}
.related-col h3.related-col__h--blog { border-bottom-color: var(--emerald-500); color: var(--emerald-800); }
.related-col ul { list-style: none; padding: 0; margin: 0; }
.related-col li { padding: .6rem 0; border-bottom: 1px dashed var(--border); }
.related-col li:last-child { border-bottom: 0; }
.related-col a { color: var(--cyan-700); text-decoration: none; font-weight: 600; line-height: 1.4; }
.related-col a:hover { color: var(--cyan-900); }
.related-col__h--blog + ul a { color: var(--emerald-700); }
.related-col__h--blog + ul a:hover { color: var(--emerald-900); }

/* === Section anchor reset for sticky header offset === */
.section[id], h2[id], h3[id] { scroll-margin-top: 90px; }

/* Mobile tweaks */
@media (max-width: 720px) {
    .compare-row { grid-template-columns: 1fr; gap: .8rem; }
    .compare-row__vs { display: none; }
    .compare-row__col--win::after { content: " ★ winner"; color: var(--emerald-700); font-weight: 700; font-size: .82rem; }
    .decision-flow > li { grid-template-columns: 44px 1fr; gap: .7rem; padding: .9rem 1rem; }
    .decision-flow > li::before { width: 36px; height: 36px; font-size: 1rem; }
    .pull-quote { font-size: 1.05rem; padding: 1.1rem 1.2rem; }
    .related-split { grid-template-columns: 1fr; }
}

/* === Screenshot evidence grid (casino review pages) === */
.section--screenshots { padding-block: 3rem; }
.screenshot-grid {
    list-style: none; padding: 0; margin: 1.5rem 0 0;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 1rem;
}
.screenshot-grid li { margin: 0; }
.screenshot-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.screenshot-card figure { margin: 0; }
.screenshot-card img { width: 100%; height: auto; display: block; }
.screenshot-card figcaption {
    padding: .65rem .85rem;
    font-size: .82rem;
    color: var(--slate-700);
    border-top: 1px solid var(--border);
    line-height: 1.4;
}
.screenshot-card--wide { grid-row: span 2; }
.screenshot-card--wide img { aspect-ratio: 1200 / 800; object-fit: cover; }
.screenshot-grid__note {
    margin-top: 1rem; padding: .85rem 1rem;
    background: rgba(251, 191, 36, .07);
    border-left: 3px solid var(--amber-500);
    border-radius: var(--radius);
    font-size: .88rem;
    color: var(--slate-700);
}
@media (max-width: 880px) {
    .screenshot-grid { grid-template-columns: 1fr; gap: .85rem; }
    .screenshot-card--wide { grid-row: auto; }
}

/* === Sticky scroll-CTA bar (review page) === */
.scroll-cta {
    position: fixed;
    bottom: 18px; left: 50%;
    transform: translateX(-50%) translateY(120%);
    width: min(720px, calc(100vw - 30px));
    background: var(--bg-card);
    border: 1px solid var(--cyan-300);
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
    padding: .8rem 1rem;
    z-index: 60;
    transition: transform .35s cubic-bezier(.22,.61,.36,1), opacity .25s;
    opacity: 0;
}
.scroll-cta.is-visible { transform: translateX(-50%) translateY(0); opacity: 1; }
.scroll-cta__inner {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: .8rem;
}
.scroll-cta__logo {
    width: 56px; height: 22px; object-fit: contain;
    background: var(--slate-50);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 4px 6px;
}
.scroll-cta__body { line-height: 1.25; min-width: 0; }
.scroll-cta__name {
    display: block;
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--cyan-900);
    font-size: .95rem;
}
.scroll-cta__pitch {
    display: block;
    color: var(--slate-600);
    font-size: .82rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.scroll-cta__visit {
    white-space: nowrap;
    padding: .55em 1em;
    font-size: .92rem;
}
.scroll-cta__dismiss {
    width: 30px; height: 30px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--slate-600);
    cursor: pointer;
    font-size: 1.2rem;
    line-height: 1;
    display: flex; align-items: center; justify-content: center;
    transition: all .18s;
}
.scroll-cta__dismiss:hover { color: var(--red-600, #dc2626); border-color: var(--red-300, #fca5a5); }
@media (max-width: 720px) {
    .scroll-cta { bottom: 12px; padding: .65rem .8rem; }
    .scroll-cta__inner { gap: .5rem; }
    .scroll-cta__pitch { display: none; }
    .scroll-cta__visit { padding: .5em .9em; font-size: .85rem; }
}

/* === Inline mid-article CTA (one per blog post, after 3rd H2) === */
.inline-cta {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 1rem;
    align-items: center;
    margin: 2rem 0;
    padding: 1rem 1.2rem;
    background: linear-gradient(135deg, rgba(0, 217, 255, 0.06), rgba(52, 211, 153, 0.04));
    border: 1px solid var(--cyan-300);
    border-left: 4px solid var(--emerald-500);
    border-radius: var(--radius);
}
.inline-cta img {
    width: 100px; height: 40px; object-fit: contain;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 4px 8px;
}
.inline-cta__body { line-height: 1.4; min-width: 0; }
.inline-cta__body strong {
    display: block;
    color: var(--cyan-900);
    font-family: var(--font-heading);
    font-size: 1rem;
    margin-bottom: .15em;
}
.inline-cta__pitch {
    display: block;
    color: var(--slate-700);
    font-size: .88rem;
}
@media (max-width: 720px) {
    .inline-cta { grid-template-columns: 1fr; gap: .65rem; padding: 1rem; }
    .inline-cta img { justify-self: start; }
}