/* KoUcuzGB — ad slots + side rails (public/js/ads.js). Uses the --k-* tokens from kuz-ui.css with fallbacks.
 * Ads are always labelled, never inside / above price tables, never in print. */

.kuz-ad-slot { margin: 20px 0 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.kuz-ad-slot[hidden], .kuz-ad-slot:empty { display: none; }

.kuz-ad-label {
    font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--k-dim, #8D98AD);
}

.kuz-ad-list { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
@media (min-width: 900px) {
    .kuz-ad-list.is-multi { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}

/* card */
.kuz-ad-card {
    display: flex; align-items: center; gap: 12px; min-width: 0;
    padding: 12px 14px; border-radius: var(--k-r, 10px);
    background: var(--k-card, #1C1A33); border: 1px solid var(--k-border, rgba(255, 255, 255, 0.09));
    color: var(--k-fg, #EEF0F7); text-decoration: none;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.kuz-ad-card:hover { border-color: var(--k-primary-border, rgba(139, 92, 246, 0.45)); }
.kuz-ad-img {
    width: 56px; height: 56px; object-fit: cover; border-radius: 8px; flex-shrink: 0;
    background: var(--k-surface, rgba(255, 255, 255, 0.045));
}
.kuz-ad-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; overflow-wrap: anywhere; }
.kuz-ad-text strong { font-family: var(--k-font-head, inherit); font-weight: 600; }
.kuz-ad-desc { font-size: 0.85rem; color: var(--k-muted, #A9B3C6); }
.kuz-ad-go { color: var(--k-link, #B4A0FB); flex-shrink: 0; display: inline-flex; }

/* empty slot: house ad pointing to /reklam */
.kuz-ad-placeholder { background: transparent; border-style: dashed; border-color: var(--k-border-strong, rgba(255, 255, 255, 0.16)); }
.kuz-ad-placeholder .kuz-ad-text { align-items: center; text-align: center; }
.kuz-ad-placeholder strong { color: var(--k-muted, #A9B3C6); font-weight: 600; }

/* banner: 970×90 desktop (scales down), optional 320×100 mobile image via <picture> */
.kuz-ad-banner {
    display: block; max-width: 970px; width: 100%; margin: 0 auto; line-height: 0;
    border-radius: var(--k-r-sm, 6px); overflow: hidden;
    border: 1px solid var(--k-border, rgba(255, 255, 255, 0.09));
}
.kuz-ad-banner img { display: block; width: 100%; height: auto; }
@media (max-width: 727px) {
    .kuz-ad-banner.has-mobile { max-width: 320px; }
}

.kuz-ad-card:focus-visible,
.kuz-ad-banner:focus-visible,
.kuz-rail-link:focus-visible {
    outline: 2px solid var(--k-focus, #C4B5FD);
    outline-offset: 2px;
}

/* side rails: fixed in the free space beside the content; ads.js sets left/top/width and un-hides */
.kuz-rail {
    position: fixed; z-index: 5; display: flex; flex-direction: column; gap: 4px; align-items: center;
}
.kuz-rail[hidden] { display: none; }
.kuz-rail .kuz-ad-label {
    padding: 2px 8px; border-radius: var(--k-r-pill, 999px);
    background: #1C1A33; color: #A9B3C6; /* own chip so it reads on light legacy pages too */
}
.kuz-rail-link {
    display: block; line-height: 0; border-radius: var(--k-r-sm, 6px); overflow: hidden;
    border: 1px solid var(--k-border, rgba(255, 255, 255, 0.09));
}
.kuz-rail-link img { display: block; width: 160px; height: auto; }
@media (max-width: 1599px) { .kuz-rail { display: none !important; } }

@media print {
    .kuz-rail, .kuz-ad-slot { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
    .kuz-ad-card { transition: none; }
}