/*
 * Banner text-overlay component classes.
 *
 * Plain CSS (no Tailwind build) so the exact same file renders on the storefront
 * and inside the admin live-preview editor. Class names are produced by
 * Hypostore\Banner\ViewModel\PresetStyle::CLASS_MAP — keep the two in sync.
 */

@font-face {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url('../fonts/PlayfairDisplay.woff2') format('woff2');
}

@font-face {
    font-family: 'Glacial Indifference';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/GlacialIndifference-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Glacial Indifference';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/GlacialIndifference-Bold.woff2') format('woff2');
}

/* ---- Fluid scaling ----------------------------------------------------- *
 * Text and graphics scale with the banner width, the same way the old
 * baked-in overlay image did (it was always the same fraction of the image).
 *
 * Every size/offset below is authored in "reference pixels": the value a token
 * had when the banner is at its reference width (--bnr-ref-w). One unit,
 * var(--bnr-u, 1px), equals 1px at that reference and grows/shrinks proportionally
 * with the actual banner width via container-query units (cqw).
 *
 * Desktop and mobile carry their own reference width so each device's authored
 * sizes stay true and scale with the image rather than the viewport. Tweak
 * these two numbers to make everything globally larger/smaller per device:
 *   --bnr-ref-w: 1440  -> at a 1440px-wide banner, sizes equal the reference px.
 * A smaller reference makes text bigger; a larger reference makes it smaller.
 *
 * The `var(--bnr-u, 1px)` fallback keeps things sane when --bnr-u is unavailable
 * (a row rendered outside a container, or a browser without container queries):
 * it degrades to fixed reference pixels.
 */
.bnr-slide,
.bnr-banner {
    container-type: inline-size;
    --bnr-ref-w: 1440;
}

@media (max-width: 1023px) {
    .bnr-slide,
    .bnr-banner { --bnr-ref-w: 390; }
}

.bnr-overlay,
.bnr-element { --bnr-u: calc(100cqw / var(--bnr-ref-w, 1440)); }

/* ---- Overlay container + stack ---------------------------------------- */

.bnr-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    pointer-events: none;
}

.bnr-overlay a,
.bnr-overlay .bnr-button {
    pointer-events: auto;
}

/* Device-specific overlays (desktop vs mobile row sets). */
@media (max-width: 1023px) {
    .bnr-overlay--hide-mobile { display: none; }
}

@media (min-width: 1024px) {
    .bnr-overlay--hide-desktop { display: none; }
}

.bnr-box-h-left { align-items: flex-start; }
.bnr-box-h-center { align-items: center; }
.bnr-box-h-right { align-items: flex-end; }

.bnr-box-v-top { justify-content: flex-start; }
.bnr-box-v-middle { justify-content: center; }
.bnr-box-v-bottom { justify-content: flex-end; }

.bnr-box-pad-sm { padding: calc(16 * var(--bnr-u, 1px)); }
.bnr-box-pad-md { padding: calc(32 * var(--bnr-u, 1px)); }
.bnr-box-pad-lg { padding: calc(64 * var(--bnr-u, 1px)); }

.bnr-stack {
    display: flex;
    flex-direction: column;
    max-width: 100%;
}

.bnr-box-w-sm { width: calc(320 * var(--bnr-u, 1px)); max-width: 100%; }
.bnr-box-w-md { width: calc(512 * var(--bnr-u, 1px)); max-width: 100%; }
.bnr-box-w-lg { width: calc(704 * var(--bnr-u, 1px)); max-width: 100%; }

/* ---- Graphic elements (badges) --------------------------------------- */

.bnr-element {
    position: absolute;
    pointer-events: none;
    max-width: 100%;
}

.bnr-element > img {
    display: block;
    width: 100%;
    height: auto;
}

.bnr-el-h-left { left: 0; }
.bnr-el-h-center { left: 50%; }
.bnr-el-h-right { right: 0; }

.bnr-el-v-top { top: 0; }
.bnr-el-v-middle { top: 50%; }
.bnr-el-v-bottom { bottom: 0; }

/* Text centred over the element graphic. */
.bnr-el-text {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.bnr-el-text a,
.bnr-el-text .bnr-button {
    pointer-events: auto;
}

/* ---- Row base --------------------------------------------------------- */

.bnr-row {
    display: block;
    margin: 0;
    line-height: 1.05;
    max-width: 100%;
}

.bnr-align-left { text-align: left; align-self: flex-start; }
.bnr-align-center { text-align: center; align-self: center; }
.bnr-align-right { text-align: right; align-self: flex-end; }

/* ---- Fonts ------------------------------------------------------------ */

.bnr-font-heading { font-family: 'Playfair Display', 'Times New Roman', Didot, serif; }
.bnr-font-sans { font-family: 'Glacial Indifference', 'Helvetica Neue', Arial, sans-serif; }

.bnr-italic { font-style: italic; }

.bnr-weight-normal { font-weight: 400; }
.bnr-weight-bold { font-weight: 700; }
.bnr-weight-black { font-weight: 900; }

.bnr-transform-uppercase { text-transform: uppercase; }
.bnr-transform-lowercase { text-transform: lowercase; }
.bnr-transform-capitalize { text-transform: capitalize; }

/* ---- Sizes (Tailwind scale, fluid via --bnr-u) ----------------------- */

.bnr-size-sm { font-size: calc(14 * var(--bnr-u, 1px)); }
.bnr-size-base { font-size: calc(16 * var(--bnr-u, 1px)); }
.bnr-size-lg { font-size: calc(18 * var(--bnr-u, 1px)); }
.bnr-size-xl { font-size: calc(20 * var(--bnr-u, 1px)); }
.bnr-size-2xl { font-size: calc(24 * var(--bnr-u, 1px)); }
.bnr-size-3xl { font-size: calc(30 * var(--bnr-u, 1px)); }
.bnr-size-4xl { font-size: calc(36 * var(--bnr-u, 1px)); }
.bnr-size-5xl { font-size: calc(48 * var(--bnr-u, 1px)); }
.bnr-size-6xl { font-size: calc(60 * var(--bnr-u, 1px)); }
.bnr-size-7xl { font-size: calc(72 * var(--bnr-u, 1px)); }

/* ---- Colours (brand palette) ----------------------------------------- */

.bnr-text-white { color: #ffffff; }
.bnr-text-black { color: #272727; }
.bnr-text-pink { color: #D4B3B3; }
.bnr-text-muted-pink { color: #C96F88; }
.bnr-text-primary-darker { color: #c69a9a; }
.bnr-text-support { color: #F9F5F5; }
.bnr-text-green { color: #8CB097; }
.bnr-text-purple { color: #B2B5D4; }
.bnr-text-yellow { color: #EDAB1D; }
.bnr-text-red { color: #AF4835; }

.bnr-bg-white { background-color: #ffffff; }
.bnr-bg-black { background-color: #272727; }
.bnr-bg-pink { background-color: #D4B3B3; }
.bnr-bg-muted-pink { background-color: #C96F88; }
.bnr-bg-primary-darker { background-color: #c69a9a; }
.bnr-bg-support { background-color: #F9F5F5; }
.bnr-bg-green { background-color: #8CB097; }
.bnr-bg-purple { background-color: #B2B5D4; }
.bnr-bg-yellow { background-color: #EDAB1D; }
.bnr-bg-red { background-color: #AF4835; }

/* ---- Spacing / shape -------------------------------------------------- */

.bnr-pad-sm { padding: calc(2.4 * var(--bnr-u, 1px)) calc(9.6 * var(--bnr-u, 1px)); }
.bnr-pad-md { padding: calc(6.4 * var(--bnr-u, 1px)) calc(16 * var(--bnr-u, 1px)); }
.bnr-pad-lg { padding: calc(9.6 * var(--bnr-u, 1px)) calc(24 * var(--bnr-u, 1px)); }

.bnr-radius-sm { border-radius: 4px; }
.bnr-radius-lg { border-radius: 8px; }
.bnr-radius-full { border-radius: 9999px; }

/* Overlap uses em so it scales with the overlapping row's own font-size. */
.bnr-overlap-sm { margin-top: -0.15em; }
.bnr-overlap-md { margin-top: -0.35em; }
.bnr-overlap-lg { margin-top: -0.6em; }

/* Unified spacing above a row: negative overlaps (em, scale with font) + positive gaps (fluid). */
.bnr-space-overlap-sm { margin-top: -0.15em; }
.bnr-space-overlap-md { margin-top: -0.35em; }
.bnr-space-overlap-lg { margin-top: -0.6em; }
.bnr-space-gap-sm { margin-top: calc(8 * var(--bnr-u, 1px)); }
.bnr-space-gap-md { margin-top: calc(16 * var(--bnr-u, 1px)); }
.bnr-space-gap-lg { margin-top: calc(32 * var(--bnr-u, 1px)); }

/* ---- Badge / button variants (declared after .bnr-row to win) --------- */

.bnr-badge {
    display: inline-block;
    max-width: 100%;
}

.bnr-button {
    display: inline-block;
    max-width: 100%;
    text-decoration: none;
    cursor: pointer;
}