/* ============================================================
   Impulse88 — Promotions (Views/Game/Promotion.cshtml)
   Design: design/promotion/Main.dc.html (1440), Mobile.dc.html (390),
           MobileDetails.dc.html (the details sheet).

   Loaded per page via @section Styles, not from the layout. Colours and
   type come from the --imp-* tokens in impulse88-theme.css; the buttons
   are the theme's own .imp-btn / .imp-btn-ghost. One literal survives:
   #c9d6e0 on the sheet prose, a step brighter than --imp-text-2 for
   reading a paragraph, the same value the blog uses.
   ============================================================ */

/* ============================================================
   1. Page head — same anatomy as the blog head
   ============================================================ */

.imp-promo-head {
    background: linear-gradient(100deg, var(--imp-surface-3), var(--imp-bg-2));
    border-left: 4px solid var(--imp-lime);
    border-bottom: 1px solid var(--imp-line);
    padding: 34px 34px 26px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 28px;
    flex-wrap: wrap;
}

.imp-promo-head-text { min-width: 0; }
.imp-promo-kicker { font: 700 12px/1 var(--imp-cond); letter-spacing: .24em; text-transform: uppercase; color: var(--imp-lime); }
/* margin-bottom 0: the theme's h1 rule leaves the browser's bottom margin,
   which would open a gap under the headline the design does not have */
.imp-promo-h1 { font: 800 40px/1.05 var(--imp-sans); letter-spacing: -.035em; color: var(--imp-text); margin: 14px 0 0; text-wrap: pretty; }
.imp-promo-standfirst { font: 400 14px/1.7 var(--imp-sans); color: var(--imp-text-2); margin-top: 12px; max-width: 520px; }

/* ---- filter row: one segmented group, like the blog language switch ---- */
.imp-promo-filters { flex: none; display: flex; border: 1px solid var(--imp-line); margin-top: 4px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.imp-promo-filters::-webkit-scrollbar { display: none; }

.imp-promo-filter {
    flex: none;
    appearance: none;
    padding: 10px 16px;
    background: var(--imp-bg);
    border: 0;
    border-right: 1px solid var(--imp-line);
    font: 700 12px/1 var(--imp-cond);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--imp-text-3);
    cursor: pointer;
    transition: color .12s ease, background .12s ease;
}

.imp-promo-filter:last-child { border-right: 0; }
.imp-promo-filter:hover { color: var(--imp-lime); }
.imp-promo-filter.on { background: var(--imp-lime); color: var(--imp-bg); }
.imp-promo-filter.on:hover { color: var(--imp-bg); }

/* ============================================================
   2. Body — featured card + grid
   ============================================================ */

.imp-promo-body { display: flex; flex-direction: column; gap: 26px; padding: 26px 34px 40px; }

/* pieces shared by the featured card, the grid cards and the sheet */
.imp-promo-chiprow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.imp-promo-chip { padding: 6px 9px; background: var(--imp-lime); color: var(--imp-bg); font: 700 11px/1 var(--imp-cond); letter-spacing: .18em; text-transform: uppercase; }
.imp-promo-meta { font: 600 12px/1.3 var(--imp-cond); letter-spacing: .14em; text-transform: uppercase; color: var(--imp-text-3); }

.imp-promo-actions { display: flex; align-items: stretch; gap: 10px; }
/* the theme's .imp-btn is a padded inline element; centre its label like the
   ghost button already does, so the two line up in the row */
.imp-promo-cta { display: inline-flex; align-items: center; justify-content: center; text-align: center; text-decoration: none; }
.imp-promo-cta:hover { color: var(--imp-bg) !important; text-decoration: none; }
.imp-promo-details { cursor: pointer; }

/* ---- tier numbers: bonus % · max · turnover · min deposit ---- */
.imp-promo-tiers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.imp-promo-tier { padding: 10px 8px; background: var(--imp-surface-2); border: 1px solid var(--imp-line); text-align: center; }
.imp-promo-tier-value { font: 800 17px/1 var(--imp-sans); color: var(--imp-text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.imp-promo-tier-value.gain { color: var(--imp-lime); }
.imp-promo-tier-label { margin-top: 6px; font: 700 9px/1.2 var(--imp-cond); letter-spacing: .14em; text-transform: uppercase; color: var(--imp-text-3); }

/* the featured card has room for the tiles to read as facts, not chips */
.imp-promo-tiers-featured { gap: 12px; margin-top: 18px; }
.imp-promo-tiers-featured .imp-promo-tier { padding: 12px 14px; text-align: left; }
.imp-promo-tiers-featured .imp-promo-tier-value { font-size: 16px; line-height: 1.1; }
.imp-promo-tiers-featured .imp-promo-tier-label { font-size: 11px; letter-spacing: .16em; }

/* ---- key : value facts ---- */
.imp-promo-facts { display: flex; flex-direction: column; gap: 7px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--imp-line); }
.imp-promo-fact { display: flex; justify-content: space-between; gap: 12px; font: 400 12px/1.4 var(--imp-sans); }
.imp-promo-fact > span:first-child { font: 700 12px/1.4 var(--imp-cond); letter-spacing: .12em; text-transform: uppercase; color: var(--imp-text-3); }
.imp-promo-fact > span:last-child { font-weight: 600; color: var(--imp-text); text-align: right; }

/* ---- featured: Order = 1 ---- */
.imp-promo-featured {
    display: flex;
    background: var(--imp-surface);
    border: 1px solid var(--imp-line);
    border-top: 3px solid var(--imp-lime);
}

/* 760px at the banner's own 1100×480 ratio comes to 332px tall, which is
   just taller than the text column — so the banner shows whole and the
   column gets the spare few pixels, never the other way round (a taller
   column stretches the picture and crops the headline off the left). */
.imp-promo-featured-art { flex: none; width: 760px; aspect-ratio: 1100 / 480; overflow: hidden; background: var(--imp-surface-3); }
.imp-promo-featured-art img { display: block; width: 100%; height: 100%; object-fit: cover; }

.imp-promo-featured-body { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 24px 28px; }
.imp-promo-featured-title { font: 800 28px/1.15 var(--imp-sans); letter-spacing: -.03em; color: var(--imp-text); margin-top: 14px; text-wrap: pretty; }
.imp-promo-featured-excerpt { font: 400 14px/1.7 var(--imp-sans); color: var(--imp-text-2); margin-top: 10px; max-width: 560px; }
.imp-promo-featured-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: auto; padding-top: 20px; }

/* ---- grid: the rest, 3-up ---- */
/* Bootstrap's gutters are 15px; the design has an 18px gap, so the row is
   pulled out by 9px a side and each column padded to match. */
.imp-promo-grid > .row { margin-left: -9px; margin-right: -9px; }
.imp-promo-grid > .row > [class*="col-"] { padding-left: 9px; padding-right: 9px; margin-bottom: 18px; display: flex; }

.imp-promo-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--imp-surface);
    border: 1px solid var(--imp-line);
    border-top: 3px solid var(--imp-line);
    transition: border-color .12s ease;
}

.imp-promo-card:hover { border-color: var(--imp-line-2); }

.imp-promo-card-art { aspect-ratio: 1100 / 480; overflow: hidden; background: var(--imp-surface-3); }
.imp-promo-card-art img { display: block; width: 100%; height: 100%; object-fit: cover; }

.imp-promo-card-body { display: flex; flex-direction: column; flex: 1; padding: 16px 18px 18px; }
.imp-promo-card-body .imp-promo-chiprow { gap: 10px; }
.imp-promo-card-body .imp-promo-chip { padding: 5px 8px; font-size: 10px; }
.imp-promo-card-body .imp-promo-meta { font-size: 11px; }
.imp-promo-card-title { font: 800 18px/1.25 var(--imp-sans); letter-spacing: -.02em; color: var(--imp-text); margin-top: 10px; text-wrap: pretty; }

/* three lines, then cut — one long description must not push its card's
   buttons below its neighbours' */
.imp-promo-card-excerpt {
    font: 400 12px/1.6 var(--imp-sans);
    color: var(--imp-text-2);
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--imp-line);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.imp-promo-card-body .imp-promo-actions { margin-top: auto; padding-top: 16px; gap: 8px; }
.imp-promo-card-body .imp-promo-cta { flex: 1; font-size: 13px !important; padding: 12px 18px !important; }
.imp-promo-card-body .imp-promo-details { font-size: 13px; padding: 10px 16px !important; }

/* ---- empty ---- */
.imp-promo-empty { padding: 40px 24px; background: var(--imp-surface); border: 1px solid var(--imp-line); text-align: center; }
.imp-promo-empty-title { font: 800 20px/1.2 var(--imp-sans); letter-spacing: -.02em; color: var(--imp-text); }
.imp-promo-empty-body { font: 400 13px/1.6 var(--imp-sans); color: var(--imp-text-2); margin-top: 8px; }

/* ============================================================
   3. Details — the old modal, now the design's sheet
   ============================================================ */

/* The old inline value overflowed int32 and browsers clamped it; this is
   what they were actually using. Kept so the sheet still clears whatever
   the layout floats above 1050. */
.imp-promo-modal { z-index: 2147483647; }

/* body.imp-promo-open is set by the page script while a sheet is open */
body.imp-promo-open .modal-backdrop.show { opacity: .72; }

.imp-promo-modal .modal-content { display: flex; flex-direction: column; max-height: calc(100vh - 3.5rem); border-top: 3px solid var(--imp-lime) !important; }

.imp-promo-sheet-head { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 0 18px; }
.imp-promo-sheet-handle { display: none; width: 36px; height: 4px; border-radius: 99px; background: var(--imp-line-2); }

.imp-promo-sheet-close {
    appearance: none;
    margin-left: auto;
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    display: grid;
    place-items: center;
    color: var(--imp-text-2);
    cursor: pointer;
}

.imp-promo-sheet-close:hover { color: var(--imp-lime); }
.imp-promo-sheet-close svg { width: 20px; height: 20px; display: block; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }

.imp-promo-sheet-body { flex: 1; overflow-y: auto; padding: 2px 24px 20px !important; }
.imp-promo-sheet-title { font: 800 24px/1.15 var(--imp-sans); letter-spacing: -.03em; color: var(--imp-text); margin-top: 12px; text-wrap: pretty; }
.imp-promo-sheet-section { font: 700 11px/1 var(--imp-cond); letter-spacing: .2em; text-transform: uppercase; color: var(--imp-text-3); margin-top: 22px; }
.imp-promo-sheet-section.gain { color: var(--imp-lime); }

/* The admin's editor writes the description: paragraphs, lists, the odd
   inline colour. Ground it on the theme without fighting it. */
.imp-promo-sheet-prose { margin-top: 10px; font: 400 14px/1.7 var(--imp-sans); color: #c9d6e0; }
.imp-promo-sheet-prose p { margin: 0 0 10px; }
.imp-promo-sheet-prose p:last-child { margin-bottom: 0; }
.imp-promo-sheet-prose ul, .imp-promo-sheet-prose ol { padding-left: 20px; margin: 0 0 10px; }
.imp-promo-sheet-prose li { margin: 4px 0; }
.imp-promo-sheet-prose strong { color: var(--imp-text); }
.imp-promo-sheet-prose img { max-width: 100%; height: auto; }
.imp-promo-sheet-prose a { color: var(--imp-lime); }
.imp-promo-sheet-prose table { width: 100%; }

.imp-promo-tier-table { width: 100%; border-collapse: collapse; margin-top: 10px; }
.imp-promo-tier-table th { padding: 8px 10px; background: var(--imp-surface-2); border: 1px solid var(--imp-line); font: 700 10px/1.3 var(--imp-cond); letter-spacing: .16em; text-transform: uppercase; color: var(--imp-text-3); text-align: left; }
.imp-promo-tier-table td { padding: 10px; border: 1px solid var(--imp-line); font: 700 14px/1.2 var(--imp-sans); color: var(--imp-text); font-variant-numeric: tabular-nums; }
.imp-promo-tier-table td.gain { color: var(--imp-lime); }

.imp-promo-sheet-foot { flex: none; display: flex; flex-direction: column; gap: 10px; padding: 14px 24px 18px; border-top: 1px solid var(--imp-line); background: var(--imp-surface); }
.imp-promo-sheet-foot .imp-promo-cta { width: 100%; }

/* ============================================================
   4. Tablet — two-up grid, featured keeps its shape while it fits
   ============================================================ */

@media only screen and (max-width: 1199px) {
    .imp-promo-featured-art { width: 560px; }
    .imp-promo-featured-title { font-size: 24px; }
    .imp-promo-tiers-featured { gap: 8px; }
}

/* ============================================================
   5. Mobile — the 390 artboard: one card per row, the sheet at the foot
   ============================================================ */

@media only screen and (max-width: 767px) {
    .imp-promo-head { padding: 20px 18px; gap: 16px; }
    .imp-promo-h1 { font-size: 24px; margin-top: 10px; }
    .imp-promo-standfirst { font-size: 13px; line-height: 1.6; margin-top: 9px; }
    .imp-promo-filter { padding: 9px 12px; font-size: 11px; }

    .imp-promo-body { gap: 14px; padding: 16px 18px 26px; }

    /* the featured card becomes the same card as the rest */
    .imp-promo-featured { flex-direction: column; }
    .imp-promo-featured-art { width: auto; }
    .imp-promo-featured-body { padding: 14px 16px 16px; }
    .imp-promo-featured .imp-promo-chiprow { gap: 10px; }
    .imp-promo-featured .imp-promo-chip { padding: 5px 8px; font-size: 10px; }
    .imp-promo-featured .imp-promo-meta { font-size: 11px; }
    .imp-promo-featured-title { font-size: 17px; line-height: 1.25; letter-spacing: -.02em; margin-top: 10px; }
    .imp-promo-featured-excerpt { font-size: 12px; line-height: 1.6; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--imp-line); max-width: none; }
    .imp-promo-tiers-featured { gap: 6px; margin-top: 12px; }
    .imp-promo-tiers-featured .imp-promo-tier { padding: 10px 6px; text-align: center; }
    .imp-promo-tiers-featured .imp-promo-tier-value { font-size: 16px; }
    .imp-promo-tiers-featured .imp-promo-tier-label { font-size: 9px; letter-spacing: .12em; }
    .imp-promo-featured-foot { padding-top: 16px; }
    .imp-promo-featured-foot .imp-promo-actions { flex: 1; gap: 8px; }
    .imp-promo-featured-foot .imp-promo-cta { flex: 1; }

    .imp-promo-grid > .row > [class*="col-"] { margin-bottom: 14px; }
    .imp-promo-grid > .row > [class*="col-"]:last-child { margin-bottom: 0; }
    .imp-promo-card-body { padding: 14px 16px 16px; }
    .imp-promo-card-title { font-size: 17px; }
    .imp-promo-tier-value { font-size: 16px; }
    .imp-promo-tier { padding: 10px 6px; }

    /* the theme sets the mobile button size to 15px / 16px 20px; keep it */
    .imp-promo-card-body .imp-promo-cta,
    .imp-promo-featured-foot .imp-promo-cta { font-size: 15px !important; padding: 16px 20px !important; }
    .imp-promo-card-body .imp-promo-details,
    .imp-promo-featured-foot .imp-promo-details { font-size: 14px; padding: 13px 16px !important; }

    /* ---- the details modal becomes a bottom sheet ---- */
    .imp-promo-modal .modal-dialog {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        margin: 0;
        max-width: none;
        width: auto;
        transform: translateY(100%);
        transition: transform .28s cubic-bezier(.22, .61, .36, 1);
    }

    .imp-promo-modal.show .modal-dialog { transform: translateY(0); }
    .imp-promo-modal .modal-content { max-height: 88vh; box-shadow: 0 -18px 40px rgba(0, 0, 0, .45); }
    .imp-promo-sheet-handle { display: block; }
    .imp-promo-sheet-body { padding: 2px 18px 20px !important; }
    .imp-promo-sheet-foot { padding: 14px 18px calc(18px + env(safe-area-inset-bottom, 0px)); }
}