/* ──────────────────────────────────────────────────────────────────────
   CGMBet26 Preview Page — page-specific styles

   Built on top of /style.css (loaded first). The site stylesheet provides:
     - colour variables (--bg-primary, --accent-primary, etc.)
     - typography (Segoe UI body font)
     - navbar, footer, buttons
     - the .early-bird-banner accent line

   This file adds only what's unique to the preview page: the filter cards,
   the results region, the match cards, and the upsell two-column layout.
   ────────────────────────────────────────────────────────────────────── */

/* Clear the fixed navbar (70px) + the early-bird accent line (~6px).
   The site's .page-header has its own 60px top/bottom padding, so we
   only need to push down enough to clear the navbar; .page-header's
   padding completes the visual breathing room above the title. */
.preview-main {
    padding-top: 76px;
    padding-bottom: 4rem;
    background: var(--bg-primary);
}

/* Shared container width for every section below — matches the site's
   1200px content rail used by .navbar-container, .footer-content, etc.
   The site's own .page-header rule (full-width, centred, big blue title)
   handles the page title above this rail. */
.preview-intro-wrap,
.filter-region,
.stance-banner,
.results-region,
.preview-upsell {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 2rem;
    padding-right: 2rem;
}

/* ── Page intro (disclosure box below the title) ────────────────────── */

/* The site-wide .page-header above renders the big centred blue title +
   muted intro paragraph; we don't need any custom rules for that. The
   disclosure box sits below it, inside the standard content rail so its
   left/right edges line up with the filter cards. */

.preview-intro-wrap {
    padding-top: 0;
    padding-bottom: 0.5rem;
}

.preview-disclosure {
    padding: 1rem 1.25rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--accent-primary);
    border-radius: 8px;
    font-size: 1rem;
    color: var(--text-primary);
    line-height: 1.55;
}

.preview-disclosure strong {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--text-primary);
}

/* ── Filter region ──────────────────────────────────────────────────── */

.filter-region {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    padding-top: 1.5rem;
    padding-bottom: 0.5rem;
}

@media (min-width: 768px) {
    .filter-region {
        grid-template-columns: 1fr 1fr;
    }
}

.filter-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.4rem 1.5rem 1.6rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04),
                0 1px 3px rgba(0, 0, 0, 0.06);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.filter-card:hover {
    border-color: var(--accent-secondary);
}

.filter-card h2 {
    margin: 0 0 0.25rem;
    font-size: 1.05rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-primary);
}

.filter-card__icon {
    font-size: 1.2rem;
}

.filter-card__hint {
    margin: 0 0 1.1rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.filter-controls {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

@media (min-width: 540px) {
    .filter-controls {
        /* Strategy column intentionally narrower than the other two: the
           closed-state select only needs to show enough characters to
           recognise the picked strategy (the full name appears in the
           dropdown when opened anyway). Strictness ("Standard (60%)") and
           period ("Last 5 matches") need the full label visible at all
           times because their values are short and similar — truncation
           there is genuinely confusing. */
        grid-template-columns: 0.85fr 1.2fr 1.2fr;
    }
}

.filter-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.filter-field__label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    font-weight: 600;
}

.filter-field select {
    width: 100%;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-primary);
    font-size: 0.92rem;
    font-family: inherit;
    color: var(--text-primary);
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%2364748b' d='M6 8L0 0h12z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    padding-right: 1.8rem;
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.filter-field select:hover {
    border-color: var(--accent-secondary);
}

.filter-field select:focus {
    outline: 2px solid var(--accent-primary);
    outline-offset: 1px;
    border-color: var(--accent-primary);
}

.filter-field select:disabled {
    background-color: var(--bg-secondary);
    color: var(--text-muted);
    cursor: not-allowed;
}

/* When a side's strategy is "None", dim the strictness + period selects
   on that card. They stay enabled — user might be about to pick a
   strategy — but visually de-emphasised so the cause-and-effect is clear. */
.filter-card[data-strategy-empty="true"] .filter-field--inactive select {
    opacity: 0.55;
}

/* Plain-English description of the current filter, shown below the
   three dropdowns once a strategy is selected. Reinforces what the
   filter actually does in human language — the strategy IDs alone
   ("Strong Home Teams", "BTTS") leave the threshold and period
   implicit; the explainer makes them explicit. */
.filter-explainer {
    margin: 0.9rem 0 0;
    padding: 0.5rem 0.7rem 0.5rem 0.85rem;
    border-left: 3px solid var(--accent-secondary);
    background: rgba(0, 0, 0, 0.02);
    border-radius: 4px;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--text-secondary);
    font-style: italic;
}

.filter-explainer strong {
    font-style: normal;
    font-weight: 600;
    color: var(--text-primary);
}

/* ── Stance banner ──────────────────────────────────────────────────── */

/* Sits between the filter cards and the results. Was previously styled
   with saturated amber backgrounds — visually too prominent next to the
   neutral filter cards and results, making it shout rather than inform.
   Now matches the .preview-disclosure pattern: soft neutral background
   with a blue accent stripe on the left edge, signalling "informational
   note" through colour position rather than colour intensity. */
.stance-banner {
    /* Padding inherited from the shared container rule (2rem horizontal)
       so the banner's outer box lines up exactly with the filter cards
       and result list above and below. The visual "box" styling lives
       on an inner wrapper so the outer alignment is never broken by
       changes to the visual treatment. */
    padding-top: 1.5rem;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 1.5rem;
}

.stance-banner__inner {
    padding: 0.85rem 1.1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--accent-primary);
    border-radius: 8px;
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.55;
}

.stance-banner__inner strong {
    display: block;
    margin-bottom: 0.15rem;
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.95rem;
}

/* ── Results region ─────────────────────────────────────────────────── */

.results-region {
    padding-bottom: 2rem;
}

.results-initial,
.results-empty,
.results-loading,
.results-error {
    padding: 2.5rem 1.5rem;
    text-align: center;
    background: var(--bg-card);
    border: 1px dashed var(--border-color);
    border-radius: 12px;
    color: var(--text-secondary);
    line-height: 1.55;
}

.results-initial p,
.results-empty p,
.results-error p {
    margin: 0 0 0.75rem;
}

.results-initial p:last-child,
.results-empty p:last-child,
.results-error p:last-child {
    margin-bottom: 0;
}

.results-initial p.muted,
.results-empty p.muted {
    font-size: 0.9rem;
    color: var(--text-muted);
}

.results-loading {
    border-style: solid;
    background: var(--bg-secondary);
}

.results-loading::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 0.625rem;
    border: 2px solid var(--border-color);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: preview-spin 0.8s linear infinite;
    vertical-align: middle;
}

@keyframes preview-spin {
    to { transform: rotate(360deg); }
}

.results-error {
    border-color: #f4b6b6;
    background: #fef2f2;
    color: #7a3030;
}

.results-summary {
    margin: 0 0 1rem;
    padding: 0 0.25rem;
    font-size: 0.92rem;
    color: var(--text-secondary);
}

.results-summary strong {
    color: var(--text-primary);
}

/* ── Match cards ────────────────────────────────────────────────────── */

/* Larger gap between cards so each one reads as its own discrete
   block, not as part of a continuous list. The match list is short
   (usually 1-10 items) so extra space costs nothing. */
.match-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

/* Card styling deliberately stronger than the filter cards above. The
   results region is what visitors look at most; the cards need to feel
   like distinct, scannable units rather than blurring into one list.
   Three things differentiate them:
     1. A faint tinted background (not pure white) against the white
        page, so the gap between cards reads as a real gap.
     2. A clearer border that picks up a hint of the accent colour, so
        the page has a coherent visual language without each card
        being heavily decorated.
     3. A small vertical accent stripe on the left edge — restrained
        but enough to give each card a recognisable shape. */
.match-card {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--accent-secondary);
    border-radius: 10px;
    padding: 1.1rem 1.25rem 1.1rem 1.35rem;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06),
                0 1px 2px rgba(15, 23, 42, 0.04);
    transition: box-shadow 0.2s ease, border-left-color 0.2s ease;
}

/* Even rows get a very faint secondary tint to help the eye separate
   adjacent cards. The contrast is deliberately tiny — not zebra-striping,
   just enough that you can see one card ends and the next begins. */
.match-card:nth-child(even) {
    background: var(--bg-secondary);
}

.match-card:hover {
    border-left-color: var(--accent-primary);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08),
                0 2px 4px rgba(15, 23, 42, 0.04);
}

.match-card__meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.7rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    gap: 0.75rem;
    flex-wrap: wrap;
}

.match-card__league {
    font-weight: 600;
    color: var(--text-secondary);
}

.match-card__kickoff {
    font-variant-numeric: tabular-nums;
}

.match-card__teams {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.match-card__team {
    flex: 1 1 0;
}

.match-card__team--home {
    text-align: right;
}

.match-card__team--away {
    text-align: left;
}

.match-card__vs {
    flex: 0 0 auto;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.match-card__team--triggered {
    color: var(--accent-primary);
}

.match-card__triggers {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.6rem;
    /* No trailing margin — the trigger box is now the last element in the
       card. Chips used to sit below; they were removed because they read
       as broken buttons. */
}

@media (min-width: 560px) {
    .match-card__triggers[data-count="2"] {
        grid-template-columns: 1fr 1fr;
    }
}

.trigger {
    padding: 0.7rem 0.85rem;
    background: var(--bg-secondary);
    border-radius: 8px;
    border-left: 3px solid var(--accent-primary);
    font-size: 0.92rem;
}

.trigger__role {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-bottom: 0.1rem;
    font-weight: 600;
}

.trigger__stat {
    color: var(--text-primary);
    line-height: 1.4;
}

/* ── Upsell section ─────────────────────────────────────────────────── */

.preview-upsell {
    padding-top: 2.5rem;
    padding-bottom: 3rem;
    border-top: 1px solid var(--border-color);
    margin-top: 2rem;
}

.preview-upsell h2 {
    font-size: clamp(1.4rem, 3vw, 1.8rem);
    font-weight: 600;
    text-align: center;
    margin-bottom: 1.8rem;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

.comparison {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .comparison {
        grid-template-columns: 1fr 1fr;
    }
}

.comparison__column {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.4rem 1.5rem;
}

.comparison__column--highlight {
    border-color: var(--accent-primary);
    background: linear-gradient(to bottom, #f0f7ff, #ffffff);
}

.comparison__column h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.9rem;
}

.comparison__column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.comparison__column li {
    padding: 0.5rem 0;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
}

.comparison__column li:last-child {
    border-bottom: none;
}

.preview-cta-wrap {
    text-align: center;
    margin-bottom: 1.8rem;
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.preview-closing {
    max-width: 640px;
    margin: 0 auto 1.5rem;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.98rem;
    line-height: 1.6;
}

.preview-meta {
    margin: 0;
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* ── Tiny utility ───────────────────────────────────────────────────── */

.muted {
    color: var(--text-muted);
}