/* Duly Promet — promotivni baneri (admin „Sadržaj → Baneri").
   Složeni redom kao na werkteh.hr: velika kartica, gumb dolje lijevo. Samostalno — ne ovisi o app.css,
   pa isto izgleda i u pregledu u adminu. */

.promo-section { padding: 20px 0 4px; }
.promo-section + .promo-section { padding-top: 0; }
.promo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.promo-w-puna { grid-column: 1 / -1; }

.promo {
    --t-bg: #0b2545; --t-ink: #fff; --t-accent: #f5b301; --t-sub: #cfe0f5; --t-deco: #f5b301;
    position: relative; display: block; overflow: hidden; isolation: isolate;
    border-radius: 16px; text-decoration: none; color: var(--t-ink); background: #0b2545;
    box-shadow: 0 1px 2px rgba(11, 37, 69, .08), 0 10px 28px rgba(11, 37, 69, .12);
    transition: transform .25s ease, box-shadow .25s ease;
    font-family: "Manrope", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.promo:hover { transform: translateY(-3px); box-shadow: 0 18px 42px rgba(11, 37, 69, .24); }
.promo:focus-visible { outline: 3px solid #f5b301; outline-offset: 3px; }

/* ---- teme složenog banera ---- */
.promo-t-tamna   { --t-bg: radial-gradient(130% 150% at 82% 30%, #1d5aa3 0%, #0f3560 42%, #0b2545 100%);
                   --t-ink: #fff; --t-accent: #f5b301; --t-sub: #cfe0f5; --t-deco: #f5b301; }
.promo-t-crvena  { --t-bg: radial-gradient(130% 150% at 82% 30%, #ef4444 0%, #b91c1c 45%, #7f1d1d 100%);
                   --t-ink: #fff; --t-accent: #ffd23f; --t-sub: #fde2e2; --t-deco: #ffd23f; }
.promo-t-zuta    { --t-bg: radial-gradient(130% 150% at 82% 30%, #ffe066 0%, #ffc928 40%, #f5b301 100%);
                   --t-ink: #0b2545; --t-accent: #c8102e; --t-sub: #3d3420; --t-deco: #0b2545; }
.promo-t-zelena  { --t-bg: radial-gradient(130% 150% at 82% 30%, #22c55e 0%, #166534 48%, #0f3d22 100%);
                   --t-ink: #fff; --t-accent: #bef264; --t-sub: #dcfce7; --t-deco: #bef264; }
.promo-t-svijetla{ --t-bg: linear-gradient(115deg, #ffffff 0%, #f3f6fa 55%, #e6edf5 100%);
                   --t-ink: #0b2545; --t-accent: #c8102e; --t-sub: #566577; --t-deco: #c8102e; }

/* ---- baner s učitanom slikom ---- */
.promo--img picture, .promo--img img { display: block; width: 100%; height: auto; }
/* slika krivog omjera (npr. uspravna) ne smije narasti preko pola ekrana — reže se po sredini */
.promo--img img { max-height: 600px; object-fit: cover; transition: transform .7s ease; }
.promo--img:hover img { transform: scale(1.025); }
.promo--img { --t-ink: #fff; --t-sub: #e6eef8; }
.promo--img .promo-text--over {
    position: absolute; inset: 0; z-index: 2; padding: 26px 30px 82px; max-width: none;
    display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px;
    background: linear-gradient(90deg, rgba(11, 37, 69, .88) 0%, rgba(11, 37, 69, .55) 42%, rgba(11, 37, 69, 0) 72%);
}

/* ---- složeni baner ---- */
.promo--gen {
    background: var(--t-bg); min-height: 270px;
    display: flex; align-items: center; padding: 28px 30px 84px;
}
.promo-w-pola.promo--gen { min-height: 250px; }
.promo-deco { position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image: repeating-linear-gradient(115deg, rgba(255, 255, 255, .045) 0 2px, transparent 2px 22px); }
.promo-deco::before, .promo-deco::after {
    content: ""; position: absolute; top: -30%; bottom: -30%; background: var(--t-deco); transform: skewX(-20deg);
}
.promo-deco::before { right: 34%; width: 54px; opacity: .92; }
.promo-deco::after  { right: calc(34% - 34px); width: 14px; opacity: .55; }
.promo-w-pola .promo-deco::before { right: 40%; width: 40px; }
.promo-w-pola .promo-deco::after  { right: calc(40% - 26px); width: 10px; }

.promo-text { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; max-width: 56%; }
.promo-w-pola .promo-text { max-width: 60%; }
.promo-kicker {
    font-weight: 800; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--t-ink); opacity: .85;
}
.promo-title {
    display: flex; flex-direction: column; font-family: "Anton", Impact, "Arial Narrow", sans-serif;
    text-transform: uppercase; line-height: .98; letter-spacing: .005em; font-weight: 400;
    text-shadow: 0 2px 14px rgba(0, 0, 0, .18);
}
.promo-l1, .promo-l2 { font-size: clamp(32px, 4.3vw, 56px); }
.promo-l1 { color: var(--t-ink); }
.promo-l2 { color: var(--t-accent); }
.promo-w-pola .promo-l1, .promo-w-pola .promo-l2 { font-size: clamp(28px, 2.9vw, 42px); }
.promo-sub { font-weight: 600; font-size: 15.5px; line-height: 1.35; color: var(--t-sub); max-width: 36ch; margin-top: 4px; }
.promo-price {
    margin-top: 10px; display: inline-flex; align-items: baseline; gap: 7px;
    font-family: "Anton", Impact, sans-serif; font-size: clamp(26px, 2.8vw, 40px); line-height: 1;
    color: #c8102e; background: #fff; padding: 6px 14px 5px; border-radius: 6px;
    transform: skewX(-6deg); box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
}
.promo-t-svijetla .promo-price { background: #f5b301; }
.promo-price small { font-family: "Manrope", system-ui, sans-serif; font-weight: 800; font-size: 14px; color: #0b2545; letter-spacing: .04em; }

/* slike proizvoda — bijele pločice koje se preklapaju (slike proizvoda su na bijeloj podlozi) */
.promo-imgs {
    position: absolute; z-index: 1; right: 3.5%; top: 46%; transform: translateY(-50%);
    display: flex; align-items: center;
}
.promo-tile {
    width: clamp(118px, 13vw, 178px); aspect-ratio: 1 / 1; background: #fff; border-radius: 18px; padding: 10px;
    display: grid; place-items: center; box-shadow: 0 16px 34px rgba(0, 0, 0, .32);
    transition: transform .35s ease;
}
.promo-tile img { width: 100%; height: 100%; object-fit: contain; }
.promo-tile + .promo-tile { margin-left: -26px; }
.promo-tile:nth-child(1) { transform: rotate(-6deg) translateY(10px); }
.promo-tile:nth-child(2) { transform: rotate(3deg) translateY(-12px) scale(1.08); position: relative; z-index: 2; }
.promo-tile:nth-child(3) { transform: rotate(8deg) translateY(12px); }
.promo-n1 .promo-tile { transform: rotate(-3deg); width: clamp(150px, 17vw, 220px); }
.promo:hover .promo-tile:nth-child(1) { transform: rotate(-8deg) translate(-6px, 6px); }
.promo:hover .promo-tile:nth-child(2) { transform: rotate(2deg) translateY(-20px) scale(1.12); }
.promo:hover .promo-tile:nth-child(3) { transform: rotate(10deg) translate(6px, 8px); }
.promo-w-pola .promo-tile { width: clamp(96px, 9.5vw, 136px); }
.promo-w-pola .promo-tile:nth-child(3) { display: none; }   /* u pola širine najviše dvije, da ne prekriju tekst */

/* ---- gumb (kao na werkteh.hr: dolje lijevo) ---- */
.promo-btn {
    position: absolute; left: 22px; bottom: 20px; z-index: 3;
    display: inline-flex; align-items: center; padding: 12px 24px; border-radius: 10px;
    font-weight: 700; font-size: 17px; line-height: 1.15; letter-spacing: .005em;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .28); transition: background .2s, transform .2s;
}
.promo:hover .promo-btn { transform: translateY(-2px); }
.promo-btn--crvena { background: #c8102e; color: #fff; }
.promo:hover .promo-btn--crvena { background: #a50d26; }
.promo-btn--zuta   { background: #f5b301; color: #0b2545; }
.promo:hover .promo-btn--zuta { background: #ffc61a; }
.promo-btn--tamna  { background: #0b2545; color: #fff; }
.promo:hover .promo-btn--tamna { background: #14508c; }
.promo-btn--bijela { background: #fff; color: #0b2545; }
.promo-btn--zelena { background: #15803d; color: #fff; }
.promo:hover .promo-btn--zelena { background: #166534; }

/* ---- pregled isključenih (samo admin) ---- */
.promo--off { outline: 3px dashed #f59e0b; outline-offset: -3px; }
.promo-off-tag { position: absolute; top: 10px; right: 10px; z-index: 4; background: rgba(17, 17, 17, .85); color: #fff;
    font-weight: 700; font-size: 12px; padding: 4px 9px; border-radius: 6px; }

/* ---- stranica ponude (/ponuda/…) ---- */
.promo-landing-head { padding: 20px 0 4px; }

/* ---- mobitel ---- */
@media (max-width: 900px) {
    .promo-w-pola .promo-tile { width: clamp(90px, 15vw, 130px); }
}
@media (max-width: 760px) {
    .promo-grid { grid-template-columns: 1fr; gap: 14px; }
    .promo-section { padding-top: 14px; }
    .promo { border-radius: 14px; }
    .promo--gen, .promo-w-pola.promo--gen, .promo-w-puna.promo--gen { min-height: 214px; padding: 20px 18px 74px; }
    /* tekst lijevo (≈52 %), pločice desno — bez preklapanja */
    .promo-text, .promo-w-pola .promo-text { max-width: 54%; gap: 4px; }
    .promo-l1, .promo-l2, .promo-w-pola .promo-l1, .promo-w-pola .promo-l2 { font-size: clamp(26px, 8vw, 40px); }
    .promo-kicker { font-size: 11px; letter-spacing: .12em; }
    .promo-sub { font-size: 13px; }
    .promo-price { font-size: 26px; margin-top: 6px; }
    .promo-imgs { right: 10px; top: 42%; }
    .promo-tile, .promo-w-pola .promo-tile { width: clamp(70px, 22vw, 104px); border-radius: 13px; padding: 6px; }
    .promo-n1 .promo-tile { width: clamp(96px, 30vw, 136px); }
    .promo-tile + .promo-tile { margin-left: -16px; }
    .promo-tile:nth-child(3) { display: none; }
    .promo-deco::before { right: 28%; width: 34px; }
    .promo-deco::after  { right: calc(28% - 22px); width: 9px; }
    .promo--img .promo-text--over { padding: 18px 18px 72px; background: linear-gradient(90deg, rgba(11, 37, 69, .9) 0%, rgba(11, 37, 69, .5) 60%, rgba(11, 37, 69, .1) 100%); }
    .promo-btn { left: 14px; bottom: 14px; padding: 11px 18px; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .promo, .promo img, .promo-tile, .promo-btn { transition: none; }
    .promo:hover, .promo:hover .promo-btn { transform: none; }
}