/*
 * CMS "Buttons & Links": image badges and colour buttons on banners.
 * Used by the website (frontend/partials/cms-actions*) and by the admin
 * editor's live banner preview, so both always look the same.
 *
 * Each item carries inline custom properties:
 *   --cms-s   scale (1 = normal size)
 *   --cms-bg  button colour      --cms-fg  text colour
 */

/* ---------- colour button ---------- */
.cms-act-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45em;
    padding: .78em 1.6em;
    border: 2px solid var(--cms-bg, #0c8ce9);
    border-radius: .55em;
    background: var(--cms-bg, #0c8ce9);
    color: var(--cms-fg, #fff) !important;
    font-family: inherit;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .01em;
    white-space: nowrap;
    text-decoration: none !important;
    box-shadow: 0 .35em .9em -.25em rgba(15, 23, 42, .35);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease, background-color .15s ease, color .15s ease;
    cursor: pointer;
}
.cms-act-btn:hover,
.cms-act-btn:focus-visible {
    transform: translateY(-1px);
    filter: brightness(1.06);
    box-shadow: 0 .55em 1.2em -.3em rgba(15, 23, 42, .4);
    outline: none;
}
.cms-act-btn:active { transform: translateY(0); }
.cms-act-btn--pill { border-radius: 999px; }
.cms-act-btn--square { border-radius: 0; }
.cms-act-btn--outline {
    background: transparent;
    color: var(--cms-bg, #0c8ce9) !important;
    box-shadow: none;
}
.cms-act-btn--outline:hover,
.cms-act-btn--outline:focus-visible {
    background: var(--cms-bg, #0c8ce9);
    color: var(--cms-fg, #fff) !important;
    filter: none;
}

/* ---------- image badge ---------- */
.cms-act-link { display: inline-block; line-height: 0; transition: transform .15s ease; }
.cms-act-link:hover { transform: translateY(-1px); }
.cms-act-img { display: block; height: auto; max-width: none; }

/* ---------- inline mode (buttons under the section text) ---------- */
.banner .banner--content-wrapper .banner--content-box .cms-actions {
    flex-wrap: wrap;
    align-items: center;
}
.banner .banner--content-wrapper .banner--content-box .cms-actions--left { justify-content: flex-start; align-self: flex-start; }
.banner .banner--content-wrapper .banner--content-box .cms-actions--center { justify-content: center; align-self: center; }
.banner .banner--content-wrapper .banner--content-box .cms-actions--right { justify-content: flex-end; align-self: flex-end; }
.banner .banner--content-wrapper .banner--content-box .cms-actions .cms-act-img { width: calc(135px * var(--cms-s, 1)); }
.banner .banner--content-wrapper .banner--content-box .cms-actions .cms-act-btn { font-size: calc(15px * var(--cms-s, 1)); }
@media (max-width: 992px) {
    .banner .banner--content-wrapper .banner--content-box .cms-actions .cms-act-img { width: calc(100px * var(--cms-s, 1)); }
    .banner .banner--content-wrapper .banner--content-box .cms-actions .cms-act-btn { font-size: calc(12px * var(--cms-s, 1)); }
}
@media (max-width: 576px) {
    /* phones: store badges are ~49px wide (~16px tall); keep buttons the same height */
    .banner .banner--content-wrapper .banner--content-box .cms-actions { gap: 5px; }
    .banner .banner--content-wrapper .banner--content-box .cms-actions .cms-act-img { width: calc(49px * var(--cms-s, 1)); }
    .banner .banner--content-wrapper .banner--content-box .cms-actions .cms-act-btn { font-size: calc(7px * var(--cms-s, 1)); padding: .45em 1.1em; border-width: 1px; box-shadow: 0 .2em .5em -.2em rgba(15, 23, 42, .35); }
}

/* ---------- free mode (each button placed on the banner by drag & drop) ----------
   The layer covers the whole banner and is a size container, so positions (%)
   and sizes (cqw = % of banner width) scale together with the banner image:
   what the admin places on the preview is what visitors see on any screen. */
.cms-free {
    position: absolute;
    inset: 0;
    z-index: 5;
    container-type: inline-size;
    pointer-events: none;
}
.cms-free__item {
    position: absolute;
    pointer-events: auto;
    line-height: 0;
}
/* No minimum size on purpose: everything keeps its proportion to the banner,
   so buttons never overlap each other or the artwork on small screens. */
.cms-free .cms-act-img { width: calc(9.5cqw * var(--cms-s, 1)); }
.cms-free .cms-act-btn { font-size: calc(1.05cqw * var(--cms-s, 1)); border-width: max(1px, .14em); }