/* ===========================================================================
 * Deal badge
 *
 * CANONICAL COPY. A byte-identical copy lives in the frontend-frisk repo at
 * the same path: application/assets/css/deal-badge.css
 *
 * The badge is rendered live by the browser in both places, so the admin
 * preview and the public site have to be the *same* code or the preview stops
 * being a preview. There is no shared package between the two repos (see the
 * `stui` addin, which is kept in step the same way), so the rule is: change
 * this file, copy it across, and copy blocks/deal_badge.html.twig with it.
 *
 * Markup this expects — see application/views/blocks/deal_badge.html.twig:
 *
 *   <div class="deal-badge-host">
 *       <img …>
 *       <div class="deal-badge deal-badge--banner deal-badge--bg-red deal-badge--text-white">
 *           <span class="deal-badge__text">HALF PRICE</span>
 *       </div>
 *   </div>
 *
 * Sizes are in `cqw` (percent of the host's own width) rather than rem, so one
 * stylesheet serves a 300px listing card, a full-width hero and the admin
 * preview without any of them needing their own numbers. A px fallback is
 * declared first for anything that does not do container queries; it renders
 * small rather than broken.
 * ======================================================================== */

/* Backgrounds are strong and flat on purpose: a badge sits over a photograph
   and has to survive being anywhere on it. Anything washed out disappears
   into the artwork. Add one here, add it to Badges_model::BACKGROUND_COLOURS,
   and it appears in the admin — there is no third place to change. */
:root {
    --deal-badge-red: #d42a24;
    --deal-badge-yellow: #f5c518;
    --deal-badge-orange: #eb6834;
    --deal-badge-green: #1a9e57;
    --deal-badge-blue: #2a78d6;
    --deal-badge-purple: #5b3ea8;
    --deal-badge-pink: #e0518c;
    --deal-badge-black: #111111;
    --deal-badge-white: #ffffff;
}

/* The positioning context. `overflow: hidden` is what crops the banner to the
   corner; without it the strip hangs off the side of the card. */
.deal-badge-host {
    position: relative;
    overflow: hidden;
    container-type: inline-size;
}

.deal-badge {
    position: absolute;
    z-index: 2;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    line-height: 1.1;
    text-align: center;
    /* Not interactive, and the whole card is usually a link. */
    pointer-events: none;
    text-wrap: balance;
}

.deal-badge__text {
    display: block;
}

/* --- Colours ----------------------------------------------------------- */

.deal-badge--bg-red    { background: var(--deal-badge-red); }
.deal-badge--bg-yellow { background: var(--deal-badge-yellow); }
.deal-badge--bg-orange { background: var(--deal-badge-orange); }
.deal-badge--bg-green  { background: var(--deal-badge-green); }
.deal-badge--bg-blue   { background: var(--deal-badge-blue); }
.deal-badge--bg-purple { background: var(--deal-badge-purple); }
.deal-badge--bg-pink   { background: var(--deal-badge-pink); }
.deal-badge--bg-black  { background: var(--deal-badge-black); }
.deal-badge--bg-white  { background: var(--deal-badge-white); }

.deal-badge--text-white { color: var(--deal-badge-white); }
.deal-badge--text-black { color: var(--deal-badge-black); }

/* --- Banners -----------------------------------------------------------
   A strip crossing a top corner at 45 degrees. Rotation is about the strip's
   own centre, so the offsets place that centre just inside the corner and the
   length carries it out past both edges, where the host clips it.

   Two of them, because which corner is free depends on the artwork: a venue's
   logo in the top left is common enough that a badge fixed to that corner
   covers the one thing the client cares about. The pair are mirror images —
   same offsets, opposite side and opposite rotation. */

.deal-badge--banner-left,
.deal-badge--banner-right {
    top: 22px;
    width: 160px;
    padding: 4px 0;
    font-size: 11px;
    transform-origin: center;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}

.deal-badge--banner-left {
    left: -46px;
    transform: rotate(-45deg);
}

.deal-badge--banner-right {
    right: -46px;
    transform: rotate(45deg);
}

@container (min-width: 1px) {
    .deal-badge--banner-left,
    .deal-badge--banner-right {
        top: 8cqw;
        width: 60cqw;
        padding: 1.4cqw 0;
        font-size: 3.6cqw;
    }

    .deal-badge--banner-left  { left: -17cqw; }
    .deal-badge--banner-right { right: -17cqw; }
}

/* --- Marks --------------------------------------------------------------
   Everything that reads as a stamp applied to the artwork: circle, star,
   starburst, diamond, hexagon. All sit 20% in from the left edge and centred
   vertically. `left` places the mark's centre, which is what "20% in" means
   for a round shape.

   All are square boxes with a clip-path (except the circle, which is a
   border-radius). The differences between them are the outline and how much
   of the box the text may occupy — a diamond of a given width holds far less
   than a circle of the same width. */

.deal-badge--circle,
.deal-badge--star,
.deal-badge--starburst,
.deal-badge--diamond,
.deal-badge--hexagon {
    top: 50%;
    left: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    font-size: 9px;
    transform: translate(-50%, -50%);
    /* A single long word ("EXCLUSIVE") will not wrap on its own and simply
       runs out of the shape, which on a star means over the artwork. */
    overflow-wrap: anywhere;
    line-height: 1.05;
}

@container (min-width: 1px) {
    .deal-badge--circle,
    .deal-badge--star,
    .deal-badge--starburst,
    .deal-badge--diamond,
    .deal-badge--hexagon {
        /* 22% of the host's width is ~39% of its height at 16:9 — a sticker
           on the image rather than a thing competing with it. */
        width: 22cqw;
        height: 22cqw;
        font-size: 2.5cqw;
    }
}

.deal-badge--circle {
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}

.deal-badge--circle .deal-badge__text {
    max-width: 82%;
}

/* Eight points: sixteen vertices alternating between an outer radius of 50%
   and an inner radius of 27%, starting at the top. A star cannot carry a
   box-shadow (clip-path crops it), hence the drop-shadow filter instead. */
.deal-badge--star {
    clip-path: polygon(
        50% 0%, 60.33% 25.05%, 85.36% 14.64%, 74.95% 39.67%,
        100% 50%, 74.95% 60.33%, 85.36% 85.36%, 60.33% 74.95%,
        50% 100%, 39.67% 74.95%, 14.64% 85.36%, 25.05% 60.33%,
        0% 50%, 25.05% 39.67%, 14.64% 14.64%, 39.67% 25.05%
    );
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .3));
}

/* Twelve points, twenty-four vertices, outer 50% and inner 34% — a shallower
   notch than the eight-pointed star, which is what makes it read as a price
   splat rather than a sheriff's badge. */
.deal-badge--starburst {
    clip-path: polygon(
        50% 0%, 58.80% 17.16%, 75% 6.70%, 74.04% 25.96%,
        93.30% 25%, 82.84% 41.20%, 100% 50%, 82.84% 58.80%,
        93.30% 75%, 74.04% 74.04%, 75% 93.30%, 58.80% 82.84%,
        50% 100%, 41.20% 82.84%, 25% 93.30%, 25.96% 74.04%,
        6.70% 75%, 17.16% 58.80%, 0% 50%, 17.16% 41.20%,
        6.70% 25%, 25.96% 25.96%, 25% 6.70%, 41.20% 17.16%
    );
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .3));
}

/* A square on its point. Half the bounding box is corner, so the usable band
   through the middle is narrow — the tightest text allowance of the lot. */
.deal-badge--diamond {
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .3));
}

/* Flat top and bottom, points left and right: the most text-friendly of the
   clipped shapes, and the one to reach for when the wording will not shorten. */
.deal-badge--hexagon {
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .3));
}

/* Stars and starbursts of a given width hold far less text than a circle of
   the same width: the usable area is the inner radius, not the bounding box.
   So they are drawn larger and set their text smaller, sized so a single word
   of about ten characters — as long as badge copy sensibly gets — lands on one
   line. Past that, `overflow-wrap` above breaks it rather than letting it run
   out over the artwork. */
.deal-badge--star,
.deal-badge--starburst,
.deal-badge--diamond {
    width: 82px;
    height: 82px;
}

@container (min-width: 1px) {
    .deal-badge--star,
    .deal-badge--starburst,
    .deal-badge--diamond {
        width: 28cqw;
        height: 28cqw;
    }
}

.deal-badge--star .deal-badge__text,
.deal-badge--starburst .deal-badge__text {
    max-width: 60%;
    font-size: .78em;
}

.deal-badge--diamond .deal-badge__text {
    max-width: 56%;
    font-size: .76em;
}

.deal-badge--hexagon .deal-badge__text {
    max-width: 76%;
}

/* --- Pill ---------------------------------------------------------------
   Not a fixed square: it grows to its text, so long wording stays on one line
   instead of being squeezed into a shape that cannot take it. Same 20%-in,
   vertically-centred placement as the marks. */

.deal-badge--pill {
    top: 50%;
    left: 20%;
    transform: translate(-50%, -50%);
    /* Centred on 20%, so anything wider than 40% of the host would hang off
       the left edge and be clipped. 34% keeps the worst case inside with room
       to spare; longer wording wraps within the pill instead. */
    max-width: 34%;
    padding: .5em 1.05em;
    border-radius: 999px;
    font-size: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}

@container (min-width: 1px) {
    .deal-badge--pill {
        padding: 1.3cqw 2.8cqw;
        font-size: 2.7cqw;
    }
}

/* --- Ribbon -------------------------------------------------------------
   A band across the full width, low on the image. For the wording that has to
   be unmissable — SOLD OUT, LAST FEW — where a mark tucked to one side is too
   easy to miss. */

.deal-badge--ribbon {
    left: 0;
    right: 0;
    bottom: 10%;
    width: 100%;
    padding: .45em 1em;
    font-size: 11px;
    letter-spacing: .12em;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .3);
}

@container (min-width: 1px) {
    .deal-badge--ribbon {
        padding: 1.2cqw 2cqw;
        font-size: 3.1cqw;
    }
}