/*
 * offer-engine.mobile.css — Offer Grid mobile layout
 * Loaded with media="(max-width: N px)" from gin_oe_mobile_layout_max_px() (1199; desktop from 1200px).
 * Desktop card in offer-engine.css starts at 1200px (GIN_OE_DESKTOP_GRID_BREAKPOINT_PX) so default modes do not overlap.
 * See docs/CSS-DESKTOP-MOBILE-SPLIT.md and LISTED-CARDS-PRODUCTION-MINDSET.md.
 */

/* ------------------------------------------------------------------
   MOBILE LAYOUT (active whenever this stylesheet is loaded — outer link matches breakpoint)
   ------------------------------------------------------------------ */
@media (max-width: 100000px) {

    /* Ensure card and wrapper have theme vars on mobile (button, borders, etc.) */
    /* Wrapper width % comes from #gin-oe-table-styles / gin_oe_get_offer_grid_layout_css (gin_get_oe_mv_table_width_percent); default 100%. */
    .campaign-compact-table__wrapper {
        --color-cta:            #27a85a;
        --color-cta-hover:      #1e8f4a;
        --oe-cta-scale-pct:     100;
        --oe-cta-depth:         1.5px;
        --oe-cta-inset:         1px;
        --color-border:         #e2e8f0;
        --color-border-light:   transparent;
        --color-bg-card:        #ffffff;
        --color-featured:       #ffb100;
        --color-badge:          #2d6a5a;
        --color-text-primary:   #1a202c;
        --color-text-secondary: #4a5568;
        --color-text-muted:     #718096;
        --color-bg-compliance:  #f9fafb;
        --radius-card:          12px;
        --border-width-card:    1px;
        --shadow-card:          0 2px 4px rgba(0, 0, 0, 0.05);
        padding: 0 8px;
        margin: 24px auto !important;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Activate mobile per-offer logo crop vars */
    .campaign-compact-table__offer {
        --oe-logo-fit: var(--oe-logo-fit-mobile);
        --oe-logo-x: var(--oe-logo-x-mobile);
        --oe-logo-y: var(--oe-logo-y-mobile);
        --oe-logo-scale: var(--oe-logo-scale-mobile);
    }

    /* ── Card container: visible box (border, background, shadow) ── */
    .campaign-compact-table__offer {
        position: relative;
        display: grid;
        /*
         * Two equal flexible tracks (not auto|1fr). "auto" sized the first column to max-content
         * (score+stars intrinsic width), so narrow cards overflowed. Both minmax(0,1fr) cap tracks to
         * the card width so rating + platforms stay in proportion when resizing.
         */
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: auto auto auto auto auto;
        grid-template-areas:
            "logo logo"
            "rating-row platforms"
            "features features"
            "cta cta"
            "compliance compliance";
        align-items: stretch;
        gap: 0 10px;
        background: var(--color-bg-card, #ffffff);
        border: var(--border-width-card, 1px) solid var(--color-border, #e2e8f0);
        border-radius: var(--radius-card, 12px);
        margin-bottom: 20px;
        /*
         * Do not pair overflow-x: clip with overflow-y: visible — the spec rewrites visible to auto,
         * which clips box-shadow so only the bottom of the list (or the last card) reads as “having” shadow.
         * Horizontal containment comes from minmax(0,1fr) tracks + tighter overflow on inner rows.
         */
        overflow: visible;
        box-shadow: var(--shadow-card, 0 2px 4px rgba(0, 0, 0, 0.05));
        box-sizing: border-box;
        container-type: inline-size;
        container-name: oe-m-card;
    }

    .campaign-compact-table__offer.is-featured {
        border: 3px solid var(--color-featured, #ffb100) !important;
        box-shadow: var(--shadow-card, 0 2px 4px rgba(0, 0, 0, 0.05)), 0 4px 20px rgba(255, 177, 0, 0.25) !important;
    }

    /* No empty columns: description block doesn't exist in card HTML; hide if present */
    .campaign-compact-table__offer-description {
        display: none !important;
    }

    /* Base padding for card sections (logo row is excluded — full-bleed width). */
    .campaign-compact-table__offer > div:not(.campaign-compact-table__offer-logo) {
        padding: 10px 12px;
    }

    /*
     * Logo — row 1: full horizontal stretch (edge-to-edge inside the card border).
     * Height follows aspect-ratio from grid layout CSS (gin_oe_get_logo_shape_mobile ref W × row H) so the
     * band scales with card width; optional max-height from PHP (filter gin_oe_mv_row1_max_band_height_px) only.
     * Img is 100%×100% of the strip; zoom may clip at overflow:hidden.
     */
    .campaign-compact-table__offer-logo {
        grid-area: logo;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        padding: 0;
        width: 100%;
        min-width: 0;
        border-bottom: 1px solid var(--color-border-light);
        position: relative;
        text-align: center;
        overflow: hidden;
        border-radius: var(--radius-card, 12px) var(--radius-card, 12px) 0 0;
        box-sizing: border-box;
    }

    .campaign-compact-table__offer-logo a {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        min-width: 0;
        min-height: 0;
        text-decoration: none;
        flex: 1 1 auto;
        box-sizing: border-box;
    }

    /*
     * Logo slot W×H + <img> object-fit come from gin_oe_mobile_logo_wrap_css_fragment() in wp_head / layout cache
     * (same ref as Customizer row 1 + Listed Logo editor). Do not re-size .logo-wrap here — flex + aspect-ratio:auto
     * broke WYSIWYG and made object-fit look like “stretch”.
     */
    .campaign-compact-table__offer-logo .campaign-compact-table__logo-wrap {
        border-radius: var(--radius-card, 12px) var(--radius-card, 12px) 0 0;
        transition: width 0.22s ease-out, height 0.22s ease-out;
    }

    /* Logo hover: show offer title */
    .campaign-compact-table__offer-brand-name {
        display: block !important;
        position: absolute;
        left: 50%;
        bottom: 8px;
        transform: translateX(-50%) translateY(6px);
        opacity: 0;
        pointer-events: none;
        z-index: 3;

        padding: 4px 10px;
        border-radius: 999px;
        background: rgba(0, 0, 0, 0.55);
        color: #ffffff !important;
        text-decoration: none !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: calc(100% - 22px);

        transition: opacity 0.2s ease, transform 0.2s ease;
        font-weight: 700;
        font-size: 12px;
        line-height: 1.2;
    }
    .campaign-compact-table__offer-logo:hover .campaign-compact-table__offer-brand-name {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }

    /* ── Rating row: score + stars (row 2, left column; platforms in right column same row). ── */
    .campaign-compact-table__offer > .campaign-compact-table__rating-row {
        grid-area: rating-row;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 4px !important;
        padding: 4px 0 4px 10px !important;
        /* visible: min-width:0 + overflow clip was clipping the leading digit of the score at the mobile breakpoint */
        overflow-x: visible;
        overflow-y: visible;
        min-width: 0;
        width: 100%;
        max-width: 100%;
        min-height: 0;
        align-self: center !important;
        position: relative;
        z-index: 2;
        box-sizing: border-box;
    }

    .campaign-compact-table__offer > .campaign-compact-table__offer-platforms-column {
        grid-area: platforms;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        /* Right-align platform strip; stars stay left in the sibling grid cell */
        justify-content: flex-end !important;
        padding: 4px 10px 4px 0 !important;
        /* Clip row bleed into the stars cell; +N popover sets overflow visible inline when open */
        overflow-x: hidden;
        overflow-x: clip;
        overflow-y: visible;
        min-width: 0;
        width: 100%;
        box-sizing: border-box;
        z-index: 1;
    }

    .campaign-compact-table__offer-platforms-column .campaign-compact-table__rating-col--platforms {
        overflow-x: hidden;
        overflow-x: clip;
        overflow-y: visible;
        flex: 1 1 auto;
        min-width: 0 !important;
        max-width: 100%;
        justify-content: flex-end;
    }

    /* Score+stars: may shrink with the grid cell; min-width 0 so flex/grid can compress (was 0 0 auto + overflow visible → bleed). */
    .campaign-compact-table__rating-score-stars {
        flex: 1 1 auto !important;
        display: flex !important;
        flex-direction: row;
        align-items: center;
        /* Default until Customizer inline (#gin-oe-table-styles) sets gap from gin_oe_mv_star_gap */
        gap: 6px;
        min-width: 0;
        max-width: 100%;
        overflow-x: visible;
        overflow-y: visible;
    }

    .campaign-compact-table__rating-col {
        flex: 0 1 auto !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        min-width: 0;
        max-width: 100%;
    }

    /* Do not shrink the numeric score — min-width:0 on .rating-col let the digit column collapse to “.9”. */
    .campaign-compact-table__rating-col--score {
        flex: 0 0 auto !important;
        flex-shrink: 0 !important;
        min-width: auto !important;
        justify-content: flex-start;
    }

    .campaign-compact-table__rating-col--stars {
        justify-content: flex-start;
    }

    /* Platforms cell: fill grid track; icons align to the right (toward highlights). */
    .campaign-compact-table__offer-platforms-column .campaign-compact-table__rating-col--platforms {
        flex: 1 1 0% !important;
        margin-left: 0;
        justify-content: flex-end;
        min-width: 0 !important;
        max-width: 100%;
    }

    .campaign-compact-table__offer-rating-text {
        margin-top: 0 !important;
    }

    .campaign-compact-table__offer-rating-text span {
        font-size: calc(17px * var(--oe-mobile-rating-row-scale, 1)) !important;
        margin-bottom: 0;
        display: inline-block;
        max-width: none;
    }

    /* Stars: single visual layer (empty = grey bg, filled = orange overlay). Do not make system flex or layers stack. */
    .campaign-compact-table__rating-col--stars .star-rating-system {
        display: inline-block !important;
        position: relative !important;
        font-size: calc(var(--oe-star-font-size, 18px) * var(--oe-mobile-rating-row-scale, 1)) !important;
        line-height: 1 !important;
        flex-shrink: 1;
        min-width: 0;
        max-width: 100%;
    }

    @supports (font-size: 1cqw) {
        .campaign-compact-table__offer-rating-text span {
            font-size: clamp(
                12px,
                calc(8px + 4.2cqw * var(--oe-mobile-rating-row-scale, 1)),
                calc(17px * var(--oe-mobile-rating-row-scale, 1))
            ) !important;
        }
        .campaign-compact-table__rating-col--stars .star-rating-system {
            font-size: clamp(
                11px,
                calc(6px + 3.8cqw * var(--oe-mobile-rating-row-scale, 1)),
                calc(var(--oe-star-font-size, 18px) * var(--oe-mobile-rating-row-scale, 1))
            ) !important;
        }
    }
    .campaign-compact-table__rating-row .star-rating-empty {
        color: var(--color-star-empty, #d1d5db) !important;
        display: block !important;
    }
    .campaign-compact-table__rating-row .star-rating-filled {
        color: var(--color-star-filled, #f59e0b) !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        overflow: hidden !important;
        white-space: nowrap !important;
    }

    /* Platform icons: same button look as desktop — circular, hover label, click feedback */
    /*
     * Must fill the platforms column width (not shrink-wrap to visible icons).
     * Otherwise platform-overflow JS measures a tiny clientWidth after hiding icons → stuck at 1 + +N with empty space.
     */
    .campaign-compact-table__rating-col--platforms .campaign-compact-table__offer-platforms {
        display: flex !important;
        width: 100% !important;
        box-sizing: border-box;
        align-items: center;
        justify-content: flex-end;
        gap: 6px !important;
        flex-wrap: nowrap !important;
        row-gap: 0 !important;
        max-width: 100%;
        min-width: 0;
        overflow-x: hidden;
        overflow-x: clip;
        overflow-y: visible;
    }

    .campaign-compact-table__rating-col--platforms .campaign-compact-table__platform-logo-wrap {
        margin: 0;
        flex-shrink: 0;
        position: relative;
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        cursor: pointer;
        text-decoration: none;
    }

    .campaign-compact-table__rating-col--platforms a.campaign-compact-table__platform-logo-wrap {
        color: inherit;
    }

    /* Same circular button style as desktop (+N chip excluded — it has its own contrast circle). */
    .campaign-compact-table__rating-col--platforms .campaign-compact-table__platform-logo:not(.campaign-compact-table__platform-logo--overflow) {
        width: calc(24px * var(--oe-mobile-rating-row-scale, 1)) !important;
        height: calc(24px * var(--oe-mobile-rating-row-scale, 1)) !important;
        min-width: calc(24px * var(--oe-mobile-rating-row-scale, 1)) !important;
        min-height: calc(24px * var(--oe-mobile-rating-row-scale, 1)) !important;
        border-radius: 50% !important;
        overflow: hidden !important;
        background: var(--color-bg-features, #f6f7f7) !important;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .campaign-compact-table__rating-col--platforms .campaign-compact-table__platform-logo-wrap.campaign-compact-table__platform-overflow {
        width: calc(24px * var(--oe-mobile-rating-row-scale, 1)) !important;
        height: calc(24px * var(--oe-mobile-rating-row-scale, 1)) !important;
        min-width: calc(24px * var(--oe-mobile-rating-row-scale, 1)) !important;
        min-height: calc(24px * var(--oe-mobile-rating-row-scale, 1)) !important;
        max-width: calc(24px * var(--oe-mobile-rating-row-scale, 1)) !important;
        max-height: calc(24px * var(--oe-mobile-rating-row-scale, 1)) !important;
        /* Row flex: column + empty label slot skewed +N downward; row centers the chip with the icons */
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        align-self: center !important;
        position: relative;
        z-index: 5;
    }

    .campaign-compact-table__rating-col--platforms .campaign-compact-table__offer-platforms > .campaign-compact-table__platform-logo-wrap:not(.campaign-compact-table__platform-overflow):hover > .campaign-compact-table__platform-logo,
    .campaign-compact-table__rating-col--platforms .campaign-compact-table__offer-platforms > .campaign-compact-table__platform-logo-wrap:not(.campaign-compact-table__platform-overflow):active > .campaign-compact-table__platform-logo {
        transform: scale(1.08) !important;
    }

    .campaign-compact-table__platform-overflow-popover .campaign-compact-table__platform-logo-wrap:hover > .campaign-compact-table__platform-logo,
    .campaign-compact-table__platform-overflow-popover .campaign-compact-table__platform-logo-wrap:active > .campaign-compact-table__platform-logo {
        transform: scale(1.08) !important;
    }

    .campaign-compact-table__rating-col--platforms .campaign-compact-table__platform-logo img {
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        object-fit: cover !important;
        display: block !important;
    }

    /* +N badge: same footprint as platform circles; keep gradient + border visible (not flat features bg). */
    .campaign-compact-table__rating-col--platforms .campaign-compact-table__platform-overflow .campaign-compact-table__platform-logo.campaign-compact-table__platform-logo--overflow {
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1 !important;
        font-size: clamp(8px, calc(10px * var(--oe-mobile-rating-row-scale, 1)), 13px) !important;
        padding: 0 !important;
        background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 45%, #cbd5e1 100%) !important;
        border: 1.5px solid #64748b !important;
        box-shadow:
            0 1px 2px rgba(15, 23, 42, 0.18),
            0 2px 4px rgba(15, 23, 42, 0.08),
            inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
    }

    /* Platform name on hover — above icon; enough padding and size so text isn't cut off */
    .campaign-compact-table__rating-col--platforms .campaign-compact-table__platform-logo-label {
        position: absolute !important;
        bottom: 100% !important;
        left: 50% !important;
        transform: translateX(-50%) translateY(-4px);
        margin-bottom: 4px;
        padding: 5px 8px;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.4;
        white-space: nowrap;
        color: #1a202c;
        background: rgba(255, 255, 255, 0.98);
        border-radius: 6px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease, transform 0.2s ease;
        z-index: 10;
    }

    .campaign-compact-table__rating-col--platforms .campaign-compact-table__offer-platforms > .campaign-compact-table__platform-logo-wrap:not(.campaign-compact-table__platform-overflow):hover .campaign-compact-table__platform-logo-label {
        opacity: 1 !important;
        transform: translateX(-50%) translateY(0);
    }

    .campaign-compact-table__platform-overflow-popover .campaign-compact-table__platform-logo-wrap:hover > .campaign-compact-table__platform-logo-label {
        opacity: 1 !important;
        transform: translateX(-50%) translateY(0);
    }

    /* +N popover clones: labels above icons must sit above the dark pill (same hover as main row). */
    .campaign-compact-table__platform-overflow-popover .campaign-compact-table__platform-logo-label {
        z-index: 35 !important;
    }

    /* ── CTA — full width, explicit styles so button always looks correct on mobile ── */
    .campaign-compact-table__offer-cta-button {
        grid-area: cta;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px 12px !important;
        border-top: 1px solid var(--color-border-light);
    }

    .campaign-compact-table__offer-cta-button a {
        width: 100%;
        max-width: 100%;
        min-height: 44px;
        height: auto;
        /* Horizontal padding overridden by Customizer head CSS with !important. */
        padding-left: 18px;
        padding-right: 18px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        background: var(--color-cta, #27a85a) !important;
        color: #ffffff !important;
        font-size: 13px;
        font-weight: 700;
        line-height: 1.2;
        text-decoration: none !important;
        text-transform: uppercase;
        white-space: normal;
        word-break: break-word;
        overflow-wrap: anywhere;
        text-align: center;
        border-radius: 999px;
        border: 1px solid rgba(0, 0, 0, 0.1);
        cursor: pointer;
        box-shadow:
            inset 0 var(--oe-cta-inset, 1px) 0 rgba(255, 255, 255, 0.28),
            0 var(--oe-cta-depth, 2px) 0 rgba(0, 0, 0, 0.16),
            0 calc(var(--oe-cta-depth, 2px) + 4px) 14px rgba(0, 0, 0, 0.08);
        transition:
            transform 0.18s ease,
            box-shadow 0.18s ease,
            filter 0.18s ease,
            background 0.2s ease;
    }

    .campaign-compact-table__offer-cta-button a:hover {
        background: var(--color-cta-hover, #1e8f4a) !important;
        transform: translateY(-1px);
        filter: brightness(1.04);
        box-shadow:
            inset 0 var(--oe-cta-inset, 1px) 0 rgba(255, 255, 255, 0.38),
            0 calc(var(--oe-cta-depth, 2px) + 2px) 0 rgba(0, 0, 0, 0.12),
            0 calc(var(--oe-cta-depth, 2px) + 10px) 22px rgba(0, 0, 0, 0.14);
    }

    .campaign-compact-table__offer-cta-button a:active {
        transform: translateY(0);
        filter: brightness(0.97);
    }

    .campaign-compact-table__offer-cta-button a:focus-visible {
        outline: 2px solid var(--color-cta-hover, #1e8f4a);
        outline-offset: 2px;
    }

    /* ── Offer Highlights — full width, list + checkmarks ── */
    .campaign-compact-table__offer-key-features {
        grid-area: features;
        background: transparent;
        align-items: flex-start;
        text-align: left;
        padding: 10px 12px !important;
        border-top: 1px solid var(--color-border-light);
        /* Row height comes from the card grid; keep nudges (Customizer translate on ul) inside this box. */
        min-height: 0;
        overflow: hidden;
    }

    .campaign-compact-table__offer-key-features ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .campaign-compact-table__offer-key-features li {
        font-size: 12px;
        color: var(--color-text-secondary, #4a5568);
        position: relative;
        padding-left: 22px;
        margin-bottom: 5px;
    }

    .campaign-compact-table__offer-key-features li::before {
        content: '';
        position: absolute;
        left: 0;
        top: 2px;
        width: 12px;
        height: 12px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2327ae60' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
        background-size: contain;
        background-repeat: no-repeat;
    }

    /* ── Compliance — full width ── */
    .campaign-compact-table__offer-compliance {
        grid-area: compliance;
        background: var(--color-bg-compliance, #f9fafb);
        border-top: 1px solid #edf2f7;
        border-radius: 0 0 var(--radius-card, 12px) var(--radius-card, 12px);
        padding: 10px 12px !important;
        font-size: 11px;
        color: var(--color-text-muted, #718096);
        text-align: center;
    }

    /* ── Position badge: overlay on top-left of logo (so "1" is not plain text above card) ── */
    .campaign-compact-table__position-badge {
        position: absolute !important;
        top: 6px !important;
        left: 6px !important;
        width: 24px !important;
        height: 24px !important;
        background: var(--color-badge, #2d6a5a) !important;
        color: #ffffff !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        z-index: 2;
        line-height: 1 !important;
        pointer-events: none;
        box-sizing: border-box;
    }

    /* ── Brand name ── */
    .campaign-compact-table__offer-brand-name {
        font-size: 26px !important;
        font-weight: 700 !important;
        margin: 0 0 10px;
        letter-spacing: 0.02em;
        line-height: 1.25;
    }

    /* ── Filter pills ── */
    .campaign-shortcode-table_filter-list {
        gap: 8px;
        margin-bottom: 18px;
    }

    .campaign-shortcode-table_filter-list-item {
        font-size: 12px;
        height: 32px;
        padding: 6px 12px;
    }
}

/* ------------------------------------------------------------------
   SMALL PHONE  (≤ 480px)
   ------------------------------------------------------------------ */
@media (max-width: 480px) {

    .campaign-compact-table__wrapper {
        padding: 0 8px;
    }

    /* Keep two proportional columns — 1fr alone broke grid-template-areas (2 columns) and caused layout bugs */
    .campaign-compact-table__offer {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .campaign-compact-table__offer-rating-text {
        margin-top: 0 !important;
    }

    /* Score/stars: main block clamp() + cqw handles narrow width; do not use a fixed huge px here */

    .campaign-compact-table__offer-description p {
        font-size: 12px;
    }

    .campaign-compact-table__offer-cta-button a {
        width: 100%;
        min-height: 44px;
        height: auto;
        padding-left: 18px;
        padding-right: 18px;
        font-size: 13px;
    }

    .campaign-shortcode-table_filter-list-item {
        font-size: 11px;
        height: 28px;
        padding: 5px 10px;
    }
}