/* Engravers-Gothic (the site's own font file) doesn't cover every Polish
   diacritic (ą, ę...) or every digit — a Google Fonts fallback (Jost) was
   tried here but the site's own CSP appears to block fonts.googleapis.com,
   so it never loaded. Falling back straight to Century-Gothic instead:
   it's self-hosted from the site's own domain (proven to load) and is
   already one of the site's two brand fonts, so missing characters render
   in a legitimate — if not pixel-identical — house style instead of an
   unpredictable system font. This is a limitation of the actual font file,
   present site-wide (see the global h1-h4 rule in the site's own CSS),
   not something introduced by this embed.

   dnka-banners embed — fully self-contained styling.
   Fonts are self-hosted here (see @font-face below) so headings render
   correctly even without the agency's script, which used to be the only
   thing that loaded these font files on the page.
   The only thing still shared with the site is the .btn / .btn-content
   button classes (used everywhere on the site).
   Renders directly into Horoshop's own <section class="banners ..."> placeholders
   (first one = hero slider, carries banners--cover; the rest = single category
   banners, carry banners--wide instead — matched on the shared 'banners' class,
   not the modifier, since it differs by slot), so page position/order always
   matches what Horoshop already lays out. */

@font-face {
    font-family: 'Engravers-Gothic';
    src: url('https://dnka.com.pl/content/uploads/files/engravers-gothic-bt-font.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Century-Gothic';
    src: url('https://dnka.com.pl/content/uploads/files/centurygothic.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Century-Gothic';
    src: url('https://dnka.com.pl/content/uploads/files/centurygothic_bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Horoshop renders its own native banner markup into these sections before
   our script runs. Hide it until dnka-hero-root/dnka-cat-root is added (right
   when we set the real content) so visitors never see the old content flash
   before ours loads. :not() excludes the section the moment our script has
   taken it over, so there's no specificity fight with a competing "show"
   rule (a plain .dnka-hero-root selector is weaker than this one and would
   lose, leaving the banner hidden forever — that was the bug just now).
   No layout shift: visibility keeps the box's size. */
section.banners:not(.dnka-hero-root):not(.dnka-cat-root) {
    visibility: hidden;
}

.dnka-hero-root,
.dnka-cat-root {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.dnka-slider {
    position: relative;
    width: 100%;
    height: 100%;
}

.dnka-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity .9s ease;
}
.dnka-slide.is-active {
    opacity: 1;
    pointer-events: auto;
    z-index: 2;
}

.dnka-slide-img,
.dnka-cat-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s ease;
}

/* subtle zoom-in on hover, like the reference site */
.dnka-hero-root:hover .dnka-slide.is-active .dnka-slide-img,
.dnka-cat-root:hover .dnka-cat-img {
    transform: scale(1.06);
}

.dnka-slide:after,
.dnka-cat-root:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(86.92deg, rgba(0,0,0,.6) 2%, rgba(0,0,0,0) 50.22%, rgba(0,0,0,0) 76.54%, rgba(0,0,0,.3) 96.81%);
}

.dnka-content {
    position: relative;
    z-index: 3;
    height: 100%;
    display: flex;
    align-items: center;
    margin: 0 10em;
}
@media screen and (max-width: 1630px) { .dnka-content { margin: 0 8em; } }
@media screen and (max-width: 1430px) { .dnka-content { margin: 0 5em; } }
@media screen and (max-width: 768px)  { .dnka-content { margin: 0 24px; } }

.dnka-col {
    position: relative;
    z-index: 4;
    width: 100%;
    max-width: 640px;
}

.dnka-heading {
    font-family: 'Century-Gothic', Arial, Helvetica, sans-serif !important;
    font-weight: 400 !important;
    font-size: calc(24px + 26 * (100vw / 1440)) !important;
    line-height: 1.05 !important;
    color: #fff !important;
    text-shadow: 0 2px 16px rgba(0,0,0,.35);
    margin: 0 0 20px !important;
}

.dnka-desc {
    font-family: 'Century-Gothic', Arial, Helvetica, sans-serif !important;
    font-size: calc(12px + 11 * (100vw / 1440)) !important;
    line-height: 1.6 !important;
    color: #fff !important;
    text-shadow: 0 1px 10px rgba(0,0,0,.35);
    margin: 0 0 35px !important;
}

/* reveal-on-active animation for the hero slider only */
.dnka-hero-root .dnka-heading,
.dnka-hero-root .dnka-desc,
.dnka-hero-root .dnka-slide-btn {
    opacity: 0;
    transform: translateY(30px);
}
.dnka-hero-root .dnka-slide.is-active .dnka-heading,
.dnka-hero-root .dnka-slide.is-active .dnka-desc,
.dnka-hero-root .dnka-slide.is-active .dnka-slide-btn {
    animation: dnkaFadeUp .8s ease forwards;
}
.dnka-hero-root .dnka-slide.is-active .dnka-desc { animation-delay: .15s; }
.dnka-hero-root .dnka-slide.is-active .dnka-slide-btn { animation-delay: .3s; }

@keyframes dnkaFadeUp {
    to { opacity: 1; transform: translateY(0); }
}

/* category banners are single/static — show immediately, no reveal animation */
.dnka-cat-root .dnka-heading,
.dnka-cat-root .dnka-desc,
.dnka-cat-root .dnka-slide-btn {
    opacity: 1;
    transform: none;
}

/* self-contained on purpose — don't lean on the site's own .btn sizing/
   alignment rules, which may or may not be present on every device (that
   gap is exactly what made this button render wide with top-aligned text
   on mobile once). */
.dnka-slide-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    white-space: nowrap;
    padding: 15px 30px !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    font-family: 'Century-Gothic', Arial, Helvetica, sans-serif;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
}

.dnka-dots {
    position: absolute;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 5;
}
.dnka-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255,255,255,.45);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: .25s;
}
.dnka-dot.is-active {
    background: #fff;
    width: 22px;
    border-radius: 5px;
}

.dnka-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 44px;
    height: 44px;
    border: none;
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.65);
    font-size: 30px;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    transition: color .2s, transform .2s;
}
.dnka-arrow:hover { color: #fff; transform: translateY(-50%) scale(1.15); }
.dnka-arrow--prev { left: 8px; }
.dnka-arrow--next { right: 8px; }

@media (max-width: 768px) {
    .dnka-arrow { display: none; }
    .dnka-dots { bottom: 14px; }
    /* full screen height, like the reference site. Went with a shorter box
       earlier to reduce object-fit:cover cropping on wide/landscape photos —
       but now that every banner can have its own purpose-cropped mobile
       image (with drag-to-reposition in the admin), full height is safe:
       upload a mobile image for anything that still crops badly instead of
       shrinking the box for everyone. */
    .dnka-hero-root, .dnka-cat-root {
        width: 100%;
        height: 100vh;
        height: 100svh;
    }
    /* the admin's per-banner mobile-image drag-to-reposition + scroll-to-zoom
       — only takes effect here (mobile), set as CSS vars per-<img> in
       main.js, so the same element still uses the plain centered/unzoomed
       crop on desktop */
    .dnka-slide-img, .dnka-cat-img {
        object-position: var(--pos-mobile-x, 50%) var(--pos-mobile-y, 50%);
        transform: scale(calc(var(--zoom-mobile, 100) / 100));
    }
}