/* ========================================
   📣 JAPEBO DYNAMISK BANNER ([japebo_banner])
   Typografien matcher shoppens håndbyggede
   Flatsome-bannere (h3 uppercase bold + h4
   uppercase + trust-linje + Flatsome-knap).
   Farver/mønster styres af --theme-banner-*
   fra themes/<tema>.css; fallbacks gør
   banneret pænt selv uden aktivt tema.
   ======================================== */
.japebo-dynamic-banner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 500px;
    padding: 48px 24px;
    text-align: center;
    overflow: hidden;
    background: var(--theme-banner-bg, linear-gradient(160deg, #0F5F65 0%, #3CAFC8 100%));
    background-size: cover;
    /* Hvilket udsnit af billedet der vises. Høje billeder (fx 3:2) beskæres
       ellers på midten, så motivet i bunden forsvinder. */
    background-position: var(--theme-banner-position, center);
    color: var(--jdb-text, var(--theme-banner-text, #ffffff));
}

/* Med baggrundsbillede: billedet dækker, mønster-laget slås fra */
.japebo-dynamic-banner--has-image::before {
    display: none !important;
}

/* Sæson-mønster (kun uden billede) som blidt drivende lag */
.japebo-dynamic-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image: var(--theme-banner-pattern, none);
    background-repeat: repeat;
    background-size: var(--theme-banner-pattern-size, 420px auto);
    opacity: var(--theme-banner-pattern-opacity, 0.18);
    animation: japeboBannerDrift 70s linear infinite;
}

@keyframes japeboBannerDrift {
    from {
        background-position: 0 0;
    }

    to {
        background-position: -420px 420px;
    }
}

/* Tekststil oven på billede: lys tekst får et mørkt slør bag sig */
.japebo-dynamic-banner--has-image.japebo-dynamic-banner--text-light::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: rgba(0, 0, 0, 0.35);
}

.japebo-dynamic-banner--text-dark {
    --jdb-text: #243236;
}

.japebo-dynamic-banner--text-light {
    --jdb-text: #ffffff;
}

.japebo-dynamic-banner__inner {
    position: relative;
    z-index: 1;
    max-width: 820px;
    margin: 0 auto;
}

/* Matcher h3.uppercase <b> i det håndbyggede banner */
.japebo-dynamic-banner__headline {
    color: var(--jdb-text, #ffffff) !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: clamp(1.5rem, 3.2vw, 2.15rem);
    line-height: 1.2;
    margin: 0 0 0.45em;
}

/* Matcher h4.uppercase i det håndbyggede banner */
.japebo-dynamic-banner__subline {
    color: var(--jdb-text, #ffffff) !important;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 0.02em;
    font-size: clamp(1rem, 2.1vw, 1.45rem);
    line-height: 1.45;
    margin: 0 0 0.3em;
}

.japebo-dynamic-banner__trust {
    color: var(--jdb-text, #ffffff) !important;
    font-size: clamp(0.95rem, 1.7vw, 1.2rem);
    line-height: 1.4;
    margin: 0 0 1.3em;
    opacity: 0.9;
}

/* Knappen er en ægte Flatsome-knap (.button.primary) og arver derfor
   shoppens knapfarve, hover-animation og sæson-ikon (japebo-theme-button).
   Her justeres kun radius og margin, som i det håndbyggede banner. */
.japebo-dynamic-banner__button {
    border-radius: 10px !important;
    margin-bottom: 0;
}

/* Flatsome sætter hvid knaptekst fra en @media-regel, som slår base.css'
   farve. Sæt den derfor eksplicit her, så knappen følger temaets
   tekstfarve-på-primær (afgørende på lyse primærfarver som Påskes gule).

   Kun i sæson: uden for sæson loades hverken base.css eller tema-filen, så
   --theme-primary-text findes ikke. En ugyldig var() gør color til 'inherit',
   og knappen ville derfor arve bannerets hvide tekst — hvid på shoppens gule
   primærfarve. Helårs-banneret lader i stedet shoppens egen knapstyling stå,
   så knappen ser ud som alle andre knapper i shoppen. */
.japebo-dynamic-banner:not(.japebo-dynamic-banner--default) .japebo-dynamic-banner__button,
.japebo-dynamic-banner:not(.japebo-dynamic-banner--default) .japebo-dynamic-banner__button span,
.japebo-dynamic-banner:not(.japebo-dynamic-banner--default) .japebo-dynamic-banner__button:hover,
.japebo-dynamic-banner:not(.japebo-dynamic-banner--default) .japebo-dynamic-banner__button:hover span {
    color: var(--theme-primary-text) !important;
}

/* Note der kun vises i UX Builder-forhåndsvisningen */
.japebo-dynamic-banner__editor-note {
    display: inline-block;
    background: rgba(0, 0, 0, 0.55);
    color: #fff !important;
    font-size: 0.8rem;
    padding: 4px 12px;
    border-radius: 20px;
    margin: 0 0 1em;
}

@media (max-width: 549px) {
    .japebo-dynamic-banner {
        min-height: 400px;
        padding: 36px 18px;
    }

    /* Mørk tekst på billede: blødt lyst slør på mobil for læsbarhed
       (samme greb som bg_overlay__sm i det håndbyggede banner) */
    .japebo-dynamic-banner--has-image.japebo-dynamic-banner--text-dark::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 0;
        background: rgba(255, 255, 255, 0.25);
    }
}

/* ========================================
   🏠 HELÅRS-VARIANT (uden for sæson)
   Roligt Japebo-blåt design; brug evt. et
   billede via indstillingssiden i stedet.
   ======================================== */
.japebo-dynamic-banner--default {
    --theme-banner-bg: linear-gradient(160deg, #24586B 0%, #4FA3C2 100%);
    --theme-banner-text: #ffffff;
    --theme-banner-pattern: none;
    --theme-banner-pattern-opacity: 0;
}

/* ========================================
   🃏 KORT-LAYOUT — HELÅRSBANNERET
   Fotoet får lov at være lyst: teksten ligger i et hvidt kort med samme
   radius og skygge som shoppens øvrige kort, så overskriften kan være
   SORT i stedet for hvid (17,7 i kontrast mod 4,8 med slør oven på foto).
   Kortet har to spalter — tekst og knap til venstre, Trustpilot til højre
   bag en lodret streg — så banneret holder sin højde på 480 px.
   Kun helårsvarianten bruger layoutet; sæsonbannerne er urørte.
   ======================================== */
.japebo-dynamic-banner--card {
    /* min-height skal betyde bannerets FULDE højde. Uden border-box lægges
       padding oven i, og de 500 px bliver 588. Flatsome sætter normalt
       border-box selv, men banneret skal ikke afhænge af det. */
    box-sizing: border-box;
    /* Samme højde som shoppenes egne bannere, målt på japebo.dk: 500 px. */
    min-height: 500px;
    /* Kortets flade. Én værdi at skrue på: højere alfa = mere dækkende.
       Sort tekst på 90 % hvid over selv et mørkt foto giver stadig ~14 i
       kontrast, så gennemsigtigheden koster ikke læsbarhed. */
    --japebo-card-bg: rgba(255, 255, 255, 0.9);
    /* Har shoppen intet motiv, er fladen en dæmpet udgave af brandets grønne
       i stedet for den gamle blå gradient — så "intet billede" ser ud som et
       valg og ikke som en manglende fil. Et inline background-image fra
       shoppen slår den her. */
    --theme-banner-bg: linear-gradient(160deg, #EAF4EE 0%, #D8EADF 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    /* Kortet skal flugte med shoppens indholdsgitter, ikke med vinduet.
       Flatsome-rækkerne er 1340 px brede (målt ens på japebo.dk og
       hearing-protection.dk), så logoet, navigationen og alle rækker nedenfor
       starter samme sted. Med 5 % hang kortet op til 194 px længere ude på en
       bred skærm — synligt, men svært at sætte ord på. */
    --japebo-site-width: 1340px;
    padding: 44px max(24px, calc((100% - var(--japebo-site-width)) / 2));
    /* Kortet står til VENSTRE, ikke centreret: standardmotivet har sine
       produkter i højre side og en rolig flade til venstre, og et centreret
       kort ville lægge sig oven på produkterne. */
    justify-content: flex-start;
    /* Motivet er 1536x1024 (1,5:1) og bliver beskåret i et 3:1-banner.
       Udsnittet lægges på 53 % af højden, hvor produktklyngen har sin midte
       (målt: den fylder 19-86 % af billedhøjden). */
    background-position: var(--theme-banner-position, center 53%);
}

/* Intet mørkt slør: hele pointen er, at teksten ikke ligger på fotoet. */
.japebo-dynamic-banner--card.japebo-dynamic-banner--has-image::after {
    display: none !important;
}

.japebo-dynamic-banner__card {
    position: relative;
    z-index: 1;
    width: 100%;
    /* 800 og ikke bredere: nu kortet starter ved gitteret (130 px ved 1600,
       290 ved 1920) skal det være smallere for at holde sig fri af motivets
       produkter, som begynder ca. 55 % inde. */
    max-width: 800px;
    box-sizing: border-box;
    background: var(--japebo-card-bg, #ffffff);
    border-radius: 10px;
    box-shadow: 0 6px 26px rgba(0, 0, 0, 0.16);
    overflow: hidden;
    text-align: left;
}

/* Kan browseren sløre det, der ligger bagved, bliver kortet frostet glas i
   stedet for blot halvgennemsigtigt. Uden understøttelse står de 90 % hvid
   alene, hvilket også er læsbart — derfor ingen fallback-regel. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .japebo-dynamic-banner__card {
        -webkit-backdrop-filter: blur(10px) saturate(1.04);
        backdrop-filter: blur(10px) saturate(1.04);
    }
}

/* To spalter — kun når shoppen faktisk har en TrustBox at vise. */
.japebo-dynamic-banner__card--split {
    display: grid;
    /* 1,4 mod 1,25 før: kortet er blevet smallere, og overskriften skal ikke
       betale for det med en ekstra linje. */
    grid-template-columns: 1.4fr 1fr;
    align-items: center;
}

/* Uden TrustBox skal kortet følge teksten. Ellers står det 940 px bredt med
   en tom højre halvdel — målt til 231 px dødt felt på hearing-protection.dk,
   og det er præcis det, der får banneret til at se skævt ud. */
.japebo-dynamic-banner__card:not(.japebo-dynamic-banner__card--split) {
    max-width: 640px;
}

.japebo-dynamic-banner--card .japebo-dynamic-banner__inner {
    max-width: none;
    margin: 0;
    padding: 40px 44px;
    text-align: left;
}

/* Teksten står på hvidt og skal derfor altid være mørk — uafhængigt af
   tekststil-indstillingen, som kun gælder tekst oven på et billede. */
.japebo-dynamic-banner--card .japebo-dynamic-banner__headline {
    color: #14191a !important;
    font-size: clamp(1.4rem, 2.2vw, 2.1rem);
    line-height: 1.16;
    /* Shoppens egne sektionsoverskrifter er vægt 500 med 0,05 em knibning.
       Basens 700 med 0,02 em læses som en anden skrift ved siden af dem, selv
       om det er samme Poppins. 600/0,04 em ligger imellem: stadig en hero,
       men samme stemme som resten af siden. */
    font-weight: 600;
    letter-spacing: 0.04em;
}

.japebo-dynamic-banner--card .japebo-dynamic-banner__subline {
    color: #4b5253 !important;
    text-transform: none;
    font-size: clamp(0.95rem, 1.2vw, 1rem);
    line-height: 1.55;
    margin: 0.85em 0 0;
}

.japebo-dynamic-banner--card .japebo-dynamic-banner__trust {
    color: #7d7d7d !important;
    font-size: 0.85rem;
    opacity: 1;
    margin: 0.7em 0 0;
}

.japebo-dynamic-banner--card .japebo-dynamic-banner__button {
    margin-top: 24px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* Temaets ikonfont, så ikonet følger knappens tekstfarve og størrelse. */
.japebo-dynamic-banner__cart {
    font-size: 1.15em;
    line-height: 1;
    flex: none;
}

/* VIGTIGT: indtil 1.1.4 var ikonet et inline SVG, og det havde sin størrelse
   fra width/height her. Sidecaches og browsere kan holde den gamle HTML i
   dagevis, mens den NYE css-fil hentes med det samme — og et SVG uden mål
   fylder så hele knappens bredde. Reglen bliver derfor stående. */
svg.japebo-dynamic-banner__cart {
    width: 18px;
    height: 18px;
}

/* Trustpilot-spalten. Den lyse flade er det, Trustpilot selv anbefaler
   bag Mini-skabelonen, og stregen adskiller beviset fra salgsteksten. */
.japebo-dynamic-banner--card .japebo-dynamic-banner__extra {
    display: block;
    margin: 0;
    min-width: 0;
    max-width: none;
    padding: 28px 32px;
    /* Stakker oven på kortets egen flade, så Trustpilot-spalten ender mere
       dækkende end tekstsiden. Widgetten er en iframe fra Trustpilot, som vi
       ikke kan style indeni, og deres mørke tekst skal have en rolig, lys
       bund — ikke et foto der skinner igennem. */
    background: rgba(255, 255, 255, 0.5);
    border-left: 1px solid rgba(0, 0, 0, 0.07);
}

/* ---------- Mobil ----------
   VIGTIGT: den gamle regel skjulte TrustBox'en under 850 px. Scoren er en
   del af budskabet, så nu stakker spalterne i stedet for at forsvinde. */
@media (max-width: 849px) {
    .japebo-dynamic-banner--card {
        display: block;
        min-height: 0;
        padding: 200px 14px 16px;
        /* Fotoet som et fast bånd øverst. Med 'cover' skalerede motivet efter
           sektionens HØJDE — som er stor, fordi kortet ligger under båndet —
           og båndet viste så billedets øverste, tomme femtedel. En fast
           båndhøjde og et vandret udsnit til højre viser produkterne. */
        background-size: auto 320px;
        background-position: 68% top;
        background-repeat: no-repeat;
        background-color: #EAF4EE;
    }

    /* Trust-boksen centrerer sig selv (Trustpilots egen iframe), så teksten
       gør det samme her — ellers står de to blokke i kortet og skændes. */
    .japebo-dynamic-banner--card .japebo-dynamic-banner__inner {
        text-align: center;
    }

    .japebo-dynamic-banner__card,
    .japebo-dynamic-banner__card--split {
        display: block;
        max-width: none;
    }

    .japebo-dynamic-banner--card .japebo-dynamic-banner__inner {
        padding: 22px 20px 24px;
    }

    .japebo-dynamic-banner--card .japebo-dynamic-banner__extra {
        border-left: 0;
        border-top: 1px solid rgba(0, 0, 0, 0.07);
        padding: 20px;
    }
}

/* Ekstra indhold uden kort-layout (sæsonbannere, hvis de nogensinde får
   en TrustBox): til højre på desktop, skjult på mobil som i den gamle
   opsætning. Kort-layoutet ovenfor overskriver begge regler. */
.japebo-dynamic-banner__extra {
    position: relative;
    z-index: 1;
    margin-left: 32px;
    min-width: 300px;
    max-width: 380px;
}

@media (max-width: 849px) {
    .japebo-dynamic-banner:not(.japebo-dynamic-banner--card) .japebo-dynamic-banner__extra {
        display: none;
    }
}