/* Coupons V1 — Green angled ticket cards with mascot over the top */

.cpn.v1 {

    /* Show the section background image at full opacity (site default is 0.2) */
    --img-bg-o: 1;

    /* The background image lives inside the grid box (.bg is absolute).
       Lift the box's content into the positioned layer so the header/CTA
       paint above the image instead of behind it. */
    .cpn-v1-grid > :not(.bg) {
        position: relative;
    }

    /* ── Underlay: lime-green instead of the default yellow ──────────────
       The card sits on a colored shape (theme.css: *:has(> .cpn-itm)::before).
       --callout resolves to the brand lime (#c8e524) inside the card scope. */
    --cpn-udr-clr: var(--callout, #c8e524);

    /* How far the green peeks past the card top/bottom and sides */
    --cpn-udr-o: 18px;   /* top/bottom overflow */
    --cpn-udr-s: 14px;   /* left/right inset    */

    /* Angle the green underlay so it peeks at top-right / bottom-left */
    li:has(.cpn-itm)::before {
        transform: rotate(3.5deg);
    }

    /* ── Mascot peeks over the top edge of the card ──────────────────────
       The list already reserves headroom via --cpn-v1-lgo-ovlp; pull the
       branding block up into it so the robot straddles the card top. */
    .cpn-itm {
        --inner-theme: white;
    }
    .cpn-itm .branding {
        margin-top: calc(var(--cpn-v1-lgo-ovlp, 5.5rem) * -1);
        position: relative;
        z-index: 2;
    }

    .cpn-itm .branding img {
        max-width: 6rem;   /* mascot size — tune to taste */
        height: auto;
    }

    /* ── Title: uppercase, letter-spaced (color stays brand blue via clr-1) ── */
    .cpn-itm .ttl {
        text-transform: uppercase;
        letter-spacing: 0.1em;
        font-weight: 600;
    }
}