/* Shared utility classes for block templates.
   These rules are theme-agnostic — they encode block behavior
   (visibility, interactivity hints) that doesn't need theme styling.
   Loaded once from the root base.html so every theme inherits. */

/* Casino table — rows beyond the "show more" cutoff start hidden. */
.casino-row-hidden {
    display: none;
}

/* Casino table — whole-row click affordance.
   Applied when translations.casino_table_row_clickable is set. */
.casinotable-card--clickable,
.casino-row--clickable {
    cursor: pointer;
}

/* Hall-of-Fame submission form — fields that need extra spacing.
   The HoF template adds these instead of inline style="margin-top: 1rem". */
.hof-field--spaced,
.hof-dropzone-preview--spaced {
    margin-top: 1rem;
}

/* HoF multiplier field — narrower input. */
.hof-field--multiplier {
    margin-top: 1rem;
    max-width: 14rem;
}

/* ───────────────────────────────────────────────────────────────
   Data-driven sizing/coloring via CSS custom properties.
   Templates set --var-name as data; these rules consume it.
   The actual styling (colors, borders, layout) stays in theme SCSS.
   ─────────────────────────────────────────────────────────────── */

/* match_detail head-to-head prediction bar segments. */
.md-hpred-seg {
    width: var(--seg-pct, 0%);
}

/* bonus_detail — background color set from bonus_type_bg_color in template. */
.bonus-review-header-visual,
.bonus-card-visual,
.bonus-quickview-visual-inner {
    background-color: var(--bonus-bg-color);
}

/* bonus_detail — banner background image set from featured_image_url. */
.bonus-review-banner {
    background-image: var(--bonus-banner-image);
}

/* bonus_detail hero — background image set from entry.background_url. */
.hero-bg {
    background-image: var(--hero-bg-image);
}

/* ───────────────────────────────────────────────────────────────
   Visibility toggle utility.
   Used in place of inline style="display:none" for elements that
   JS shows/hides at runtime. JS toggles the class instead of
   setting style.display directly.
   `!important` is needed so this beats any class on the element
   that sets display: flex / block (e.g. .griez-sidebar-search-clear
   sets display:flex).
   ─────────────────────────────────────────────────────────────── */
.is-hidden {
    display: none !important;
}

/* ───────────────────────────────────────────────────────────────
   JS template-string utility classes.
   These replace inline styles inside JavaScript HTML builders so
   the templates don't carry styling responsibility.
   ─────────────────────────────────────────────────────────────── */

/* match_detail — wrapper divs in JS-built sections (line 438, 835). */
.md-relative {
    position: relative;
}

/* match_detail — bar widths driven by data via --bar-pct. */
.md-stat-bar-home,
.md-stat-bar-away,
.md-comp-bar-home,
.md-comp-bar-away,
.md-h2h-bar-seg {
    width: var(--bar-pct, 0%);
}

/* match_calendar — centered nav header content. */
.mc-nav-center {
    display: flex;
    align-items: center;
}

/* match_calendar — link wrappers around match cards (in JS strings). */
.mc-link-reset {
    text-decoration: none;
    color: inherit;
    display: block;
}

/* match_calendar — relative-positioned match cell (in JS strings). */
.mc-match--relative {
    position: relative;
}

/* sports_calendar — dynamic sport color (filled via --sport-color in JS). */
.sc-event-sport,
.sc-cal-chip {
    background: var(--sport-color);
}
.sc-modal-sport {
    color: var(--sport-color);
}

/* sports_calendar — static design values (used to be inline in JS). */
.sc-event-date-box {
    background: var(--ec-bg-navy, #12203F);
}
.sc-upcoming-header {
    background: linear-gradient(135deg, #12203F, #1e3a5f);
}

/* ───────────────────────────────────────────────────────────────
   Extended data-driven background images and colors via custom
   properties. Templates set the --var; these rules consume them.
   ─────────────────────────────────────────────────────────────── */

/* Hero variants — all consume the same --hero-bg-image var. */
.home-hero__bg,
.blog-hero-bg,
.studios-card__hero,
.studio-hero__bg {
    background-image: var(--hero-bg-image);
}

/* Blog index card background image. */
.blog-card-image {
    background-image: var(--blog-card-image);
}

/* Section block background color (set from entry.config.background_color). */
.content-section--bg {
    background-color: var(--section-bg-color);
}

/* Casino review structured page — sub-rating bar widths. */
.cr-rating-bar-fill {
    width: var(--bar-pct, 0%);
}

/* google_map embed — height set from block config (default 400px). */
.google-map-embed {
    height: var(--map-height, 400px);
}

/* HoF feature display - large multiplier on the top winner card. */
.hof-mult-num--xl {
    font-size: clamp(2.4rem, 6vw, 4.5rem);
}

/* HoF feature meta with top spacing. */
.hof-feature-meta--spaced {
    margin-top: 0.85rem;
}

/* HoF row multiplier in the leaderboard table. */
.hof-row-mult-x--sm {
    font-size: 1rem;
}

/* ───────────────────────────────────────────────────────────────
   Static utility classes used to replace inline styles
   ─────────────────────────────────────────────────────────────── */

/* page_public_index list grid (auto-fill cards) and card-as-block. */
.bonus-grid--auto-fill {
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
}
.bonus-card--block {
    text-decoration: none;
    color: inherit;
    display: block;
    height: 100%;
}
.bonus-desc--no-bottom {
    margin-bottom: 0;
}

/* SVG arrow used in casino_review_list — left margin on inline-after icon. */
.cr-list-arrow {
    margin-left: 6px;
}

/* Honeypot field (off-screen, hidden from real users). */
.honeypot {
    position: absolute;
    left: -9999px;
}

/* Iframes without their default border (e.g. embedded google maps). */
.iframe-borderless {
    border: 0;
}

/* Admin bar link reset (in root base.html nav). */
.admin-bar-link {
    color: var(--text-muted);
    text-decoration: none;
}

/* page_header_meta — fact-check wrapper and avatar placeholder. */
.page-meta-fact-check {
    position: relative;
}
.page-meta-factcheck-avatar--placeholder {
    width: 56px;
    height: 56px;
}

/* withdrawal_reports — range bar uses --range-left / --range-width
   and tick uses --tick-left for data-driven positioning. */
.wdr-range-span {
    left: var(--range-left, 0%);
    width: var(--range-width, 0%);
}
.wdr-range-tick {
    left: var(--tick-left, 0%);
}

/* ───────────────────────────────────────────────────────────────
   Likme-theme popups — admin-configured design widgets.
   Templates set CSS custom properties from admin config; these
   rules consume them. The static structural rules live in
   likme-theme/_popups.scss; this is only the dynamic-value layer.
   ─────────────────────────────────────────────────────────────── */

/* Carousel card background image (set per slide). */
.likme-carousel-card {
    background-image: var(--carousel-card-bg-image);
}

/* Header banner gradient (start/end colors from admin). */
.likme-header-banner {
    background: var(--header-banner-bg);
}

/* Footer banner — multi-property surface customization. */
.likme-footer-banner {
    background: var(--banner-bg);
    background-color: var(--banner-bg-color);
    background-image: var(--banner-bg-image);
    background-repeat: var(--banner-bg-repeat);
    background-position: var(--banner-bg-position);
    border-top-color: var(--banner-border-top-color);
}
.likme-footer-banner-featured,
.likme-footer-banner-desc {
    color: var(--banner-text-color);
}
.likme-footer-banner-cta {
    background: var(--banner-cta-bg);
    color: var(--banner-cta-text);
}

/* Site entry popup — gradient/image background + button colors. */
.likme-entry-popup {
    background: var(--entry-popup-bg);
}
.likme-entry-popup-btn--primary {
    background: var(--entry-btn-bg);
    color: var(--entry-btn-text);
}

/* slot_simulator chart hover indicator — initial hidden state (SVG group). */
.sim-chart-hover {
    opacity: 0;
    pointer-events: none;
}

/* linksgrid block — column-flow variant when entry.config.style == 'list'. */
.linksgrid-items--list-cols-2 { display: block; columns: 2; column-gap: 2rem; }
.linksgrid-items--list-cols-3 { display: block; columns: 3; column-gap: 2rem; }
.linksgrid-items--list-cols-4 { display: block; columns: 4; column-gap: 2rem; }
.linksgrid-items--list-cols-5 { display: block; columns: 5; column-gap: 2rem; }
.linksgrid-items--list-cols-6 { display: block; columns: 6; column-gap: 2rem; }

/* ───────────────────────────────────────────────────────────────
   match_calendar row extras (best-odds bookmaker, per-team scores,
   flag labels + verdicts). Hidden by default: each theme opts in
   with its own layout — un-styled themes keep their current look.
   ─────────────────────────────────────────────────────────────── */
.mc-fx__ob,
.mc-fx__tsc,
.mc-fx__flaglbl,
.mc-fx__flagres {
    display: none;
}