/* First-party house-ad spots, shared by every server-rendered slot: the kommune
   and city pages (municipality-banner + municipality-side), the home page
   (home-banner) and the EU-kontroll frist result (deadline-result, rendered
   client-side from the same markup). Lives outside articlePage.css because the
   home page does not load the article typography.

   Neutral class names ("promo", never "ad"/"banner") keep content blockers from
   hiding first-party inventory; the "Annonse" label stays for legal disclosure.
   The card mirrors the Vue partner-spot, but standalone: the Vue styles are
   scoped to the bundle, so server-rendered markup cannot reuse them. */

.promo-spot {
    position: relative;
    margin: 28px 0;
    background: white;
    border-radius: 0;
    border-top: 4px solid var(--ad-brand, var(--action-primary));
    box-shadow: var(--standard-box-shadow);
    overflow: hidden;
}

.promo-spot__label {
    display: block;
    padding: 10px 20px 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--foreground-tertiary);
}

.promo-spot__link {
    display: flex;
    align-items: stretch;
    text-decoration: none;
    color: inherit;
}

.promo-spot__media {
    position: relative;
    flex: 0 0 38%;
    min-height: 220px;
}

.promo-spot__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Portrait reel artwork (layout 4) in a landscape card: the copy is burnt into
   the lower half and the card already carries it, so the crop takes the
   photograph off the top. Wider media too, otherwise a ~1:2 source
   is cropped down to a slice. */
.promo-spot__media--tall-source {
    flex-basis: 46%;
    min-height: 300px;
}

.promo-spot__media--tall-source .promo-spot__img {
    object-position: center top;
}

/* Reel creatives carry no body copy, so the text column is short next to the
   taller media — centre it rather than leaving it stranded at the top. */
.promo-spot__media--tall-source ~ .promo-spot__text {
    justify-content: center;
}

/* Offer sticker, e.g. "−15%": bold brand-colored chip over the creative. */
.promo-spot__badge {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 8px 13px;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: 0.2px;
    color: var(--foreground-primary);
    background: var(--ad-brand, var(--action-primary));
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transform: rotate(3deg);
}

.promo-spot__text {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 22px 20px;
    min-width: 0;
}

.promo-spot__brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.promo-spot__logo {
    width: 32px;
    height: 32px;
    object-fit: contain;
    border-radius: 4px;
    background: #fff;
    padding: 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.promo-spot__company {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.2px;
    color: var(--ad-brand, var(--foreground-secondary));
}

.promo-spot__headline {
    font-size: 20px;
    line-height: 1.25;
    font-weight: 700;
    color: var(--foreground-primary);
}

.promo-spot__body {
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--foreground-secondary);
}

.promo-spot__cta {
    align-self: flex-start;
    margin-top: 6px;
    padding: 12px 16px;
    background-color: var(--ad-brand, var(--action-primary));
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(0, 0, 0, 0.05));
    color: #fff;
    border-radius: 6px;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transition: transform 0.12s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.promo-spot__link:hover .promo-spot__cta {
    filter: brightness(0.92);
    transform: translateY(-1px);
}

@media screen and (max-width: 700px) {
    .promo-spot__link {
        flex-direction: column;
    }

    .promo-spot__media {
        flex-basis: auto;
        min-height: 0;
        aspect-ratio: 16 / 9;
    }
}

/* Desktop side rails flanking the article (municipality-side slot). The article
   column is max-width 850px centered, so each 320px rail plus a 24px gap needs
   half-widths of 425 + 24 + 320 = 769px per side: shown from 1560px viewports.
   Fixed position keeps the rails in view while scrolling the article. */
.promo-rail {
    display: none;
}

@media screen and (min-width: 1560px) {
    .promo-rail {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 100px;
        width: 320px;
        background: white;
        border-radius: 12px;
        border-top: 4px solid var(--ad-brand, var(--action-primary));
        box-shadow: var(--standard-box-shadow);
        overflow: hidden;
        z-index: 5;
    }

    .promo-rail--left {
        left: calc(50% - 769px);
    }

    .promo-rail--right {
        right: calc(50% - 769px);
    }
}

.promo-rail__label {
    display: block;
    padding: 8px 16px 5px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--foreground-tertiary);
}

.promo-rail__link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}

.promo-rail__media {
    position: relative;
    aspect-ratio: 2 / 3;
}

.promo-rail__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.promo-rail__badge {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 6px 11px;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0.2px;
    color: var(--foreground-primary);
    background: var(--ad-brand, var(--action-primary));
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transform: rotate(3deg);
}

.promo-rail__text {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 16px 16px;
}

.promo-rail__brand {
    display: flex;
    align-items: center;
    gap: 8px;
}

.promo-rail__logo {
    width: 26px;
    height: 26px;
    object-fit: contain;
    border-radius: 4px;
    background: #fff;
    padding: 2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.promo-rail__company {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.2px;
    color: var(--ad-brand, var(--foreground-secondary));
}

.promo-rail__headline {
    font-size: 17px;
    line-height: 1.3;
    font-weight: 700;
    color: var(--foreground-primary);
}

.promo-rail__cta {
    align-self: stretch;
    text-align: center;
    margin-top: 6px;
    padding: 12px 14px;
    background-color: var(--ad-brand, var(--action-primary));
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(0, 0, 0, 0.05));
    color: #fff;
    border-radius: 6px;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transition: transform 0.12s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.promo-rail__link:hover .promo-rail__cta {
    filter: brightness(0.92);
    transform: translateY(-1px);
}

/* --- Layout 4 "canvas" creatives in the side rails. The artwork is a finished
   ad with its own headline and CTA, so the chrome shrinks to the legal label
   and one brand-coloured bar docked at the bottom — the same treatment
   AdSlot.vue gives layout 4 in the reels feed. The in-article spot keeps the
   card layout instead: a 700px-tall portrait unit would swallow the article. */
.promo-rail__canvas-link {
    display: block;
    position: relative;
    text-decoration: none;
    color: inherit;
}

.promo-rail__canvas-label {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    padding: 5px 11px;
    border-radius: 20px;
    background: rgba(14, 26, 20, 0.55);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.promo-rail__canvas-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 14px;
    background: var(--ad-brand, var(--action-primary));
    color: var(--ad-ink, #fff);
}

/* Fixed height, free width: a square icon mark stays a chip while a wordmark
   gets the width it needs to stay readable. */
.promo-rail__canvas-logo {
    height: 28px;
    width: auto;
    max-width: 130px;
    flex-shrink: 0;
    object-fit: contain;
    border-radius: 8px;
    background: #fff;
    padding: 4px 7px;
    box-sizing: content-box;
}

.promo-rail__canvas-company {
    min-width: 0;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.promo-rail__canvas-cta {
    margin-left: auto;
    flex-shrink: 0;
    padding: 10px 16px;
    border-radius: 999px;
    background: var(--ad-ink, #fff);
    color: var(--ad-brand, var(--action-primary));
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    transition: filter 0.18s ease, transform 0.12s ease;
}

.promo-rail__canvas-link:hover .promo-rail__canvas-cta {
    filter: brightness(0.94);
    transform: translateY(-1px);
}

/* The rail is fixed to the viewport, so the creative gets a fixed box and is
   cropped to fit rather than pushing past the fold. 1:2 is close enough to the
   portrait reel creatives that the crop only trims their safe margins. */
.promo-rail__canvas-media {
    display: block;
    position: relative;
    aspect-ratio: 1 / 2;
}

.promo-rail__canvas-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Shorter laptop screens: narrow the rail so the whole unit still clears the
   fold (width drives height through the fixed aspect ratio). The offsets keep
   the inner edge 24px off the 850px article column as the width changes. */
@media screen and (min-width: 1560px) and (max-height: 860px) {
    .promo-rail--canvas {
        width: 260px;
    }

    .promo-rail--canvas.promo-rail--left {
        left: calc(50% - 709px);
    }

    .promo-rail--canvas.promo-rail--right {
        right: calc(50% - 709px);
    }
}

@media screen and (min-width: 1560px) and (max-height: 740px) {
    .promo-rail--canvas {
        width: 220px;
    }

    .promo-rail--canvas.promo-rail--left {
        left: calc(50% - 669px);
    }

    .promo-rail--canvas.promo-rail--right {
        right: calc(50% - 669px);
    }
}