/* =============================================================================
   ᲡᲞᲝᲜᲡᲝᲠᲘᲡ ᲕᲘᲢᲠᲘᲜᲐ — ᲡᲐᲠᲔᲙᲚᲐᲛᲝ ᲖᲝᲜᲐ ᲙᲘᲜᲝᲡ ᲒᲐᲠᲔᲛᲝᲨᲘ
   -----------------------------------------------------------------------------
   სად გამოიყენება: ზონის კონტეინერს მიაწერე კლასი `ad-case` (იხ. kino.php და
   kinoteka.php). სტილის ფაილი ორივე გვერდზე იტვირთება — კომპონენტი ერთია,
   ასლი არსად არ დევს.

   რა პრობლემას ხსნის: რეკლამის რენდერი სურათს სრული სიგანის ყუთში დებს და
   `object-fit: contain`-ით ცენტრავს. ეს ნიშნავდა, რომ 1920×714-იანი კრეატივი
   128px-იანი ჭერით 1296px-იან ზონაში მხოლოდ 344px-ს იკავებდა — ზონის 27%-ს —
   ხოლო „Sponsored" ბეჯი, რომელიც უხილავ ყუთზეა მიბმული, კრეატივიდან 380px-ით
   მოშორებით ეკიდა.

   რა გვაქვს ნაცვლად: ზონა ვიტრინაა — ყუთი ოქროს თმის სისქის ჩარჩოთი, ზემოდან
   დაცემული სხივით და შიგნით ჩამონტაჟებული პოსტერით. კედლებს თავად კრეატივის
   ფერები ანათებს (`--ad-img`, რომელსაც includes/ad_renderer.php აწვდის) —
   იგივე ხერხი, რითაც Departure Board-ზე ალბომის ყდა კედელს ეცემა
   (DESIGN.md / Atmosphere).

   ორი ხრახნი კონტეინერზე:
     --ad-case-h    პოსტერის სიმაღლის ჭერი (ნაგულისხმევი: 150–240px)
     --ad-case-max  ვიტრინის მაქსიმალური სიგანე (kinoteka-ზე ეკრანის 970px-ს
                    უსწორდება, რომ ბანერი სცენაზე განიერი არ აღმოჩნდეს)

   ᲙᲐᲡᲙᲐᲓᲘᲡ ᲨᲔᲜᲘᲨᲕᲜᲐ: ეს ფაილი გვერდის შიდა <style> ბლოკის **შემდეგ** უნდა
   ჩაიტვირთოს. kino.php-ს აქვს `.kino-lobby .ad-card-wrapper { … !important }`
   იმავე სპეციფიკურობით (0,2,0) — თანაბარზე რიგითობა წყვეტს.
   ============================================================================= */

/* ნაგულისხმევები `var()`-ის fallback-შია და არა `.ad-case`-ზე დეკლარაციად:
   ეს ფაილი გვერდის შიდა <style>-ის შემდეგ იტვირთება, ამიტომ `.ad-case { … }`
   თანაბარ სპეციფიკურობაზე (0,1,0) გვერდის საკუთარ პარამეტრს გადაფარავდა —
   kinoteka-ს 970px უკვე ასე დაიკარგა ერთხელ. fallback-ს ეს პრობლემა არ აქვს:
   რასაც გვერდი გამოაცხადებს, ის იმარჯვებს, ჩატვირთვის რიგის მიუხედავად. */

.ad-case .ad-card-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: var(--ad-case-max, none);
    margin: 0 auto;
    padding: 14px;
    background: var(--kino-bg-secondary, #101216) !important;   /* ვიტრინის შიდა კედელი */
    border: 1px solid rgba(212, 175, 55, 0.26) !important;
    border-radius: var(--venue-radius, 4px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    overflow: hidden;
    isolation: isolate;
    transition: border-color 0.3s var(--kino-ease, ease);
}

/* კედლის განათება — თავად პოსტერის ფერები, დაბუნდოვნებული */
.ad-case .ad-card-wrapper::before {
    content: "";
    position: absolute;
    inset: -16%;
    z-index: 0;
    pointer-events: none;
    background-image: var(--ad-img, none);
    background-size: cover;
    background-position: center;
    filter: blur(60px) saturate(1.45) brightness(0.6);
    opacity: 0.34;
    transition: opacity 0.45s var(--kino-ease, ease);
}

/* ზემოდან დაცემული ოქროს სხივი + ნაპირების ჩაბნელება */
.ad-case .ad-card-wrapper::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(118% 92% at 50% -20%, rgba(212, 175, 55, 0.13), rgba(212, 175, 55, 0) 62%),
        linear-gradient(90deg, rgba(8, 9, 11, 0.88) 0%, rgba(8, 9, 11, 0.20) 30%, rgba(8, 9, 11, 0.20) 70%, rgba(8, 9, 11, 0.88) 100%);
}

.ad-case .ad-media-container {
    position: relative;
    z-index: 2;
    width: auto;
    max-width: 100%;
    text-align: center;
}

.ad-case .ad-link-block,
.ad-case .ad-video-wrapper {
    display: block;
    width: auto;
    max-width: 100%;
}

/* ჩამონტაჟებული პოსტერი: სიმაღლე ზღუდავს ჩვეულებრივ ბანერს, სიგანე კი
   უკიდურესად განიერს — პროპორცია არასდროს ირღვევა, კრეატივი არ იჭრება */
.ad-case .ad-image,
.ad-case .ad-video {
    width: auto !important;
    height: auto !important;
    max-height: var(--ad-case-h, clamp(150px, 15.5vw, 240px)) !important;
    max-width: 100% !important;
    margin: 0 auto;
    border-radius: 2px;
    outline: 1px solid rgba(255, 255, 255, 0.08);
    outline-offset: -1px;
    box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.85), 0 2px 6px -2px rgba(0, 0, 0, 0.6);
    transition: transform 0.45s var(--kino-ease, ease);
}

/* ვიტრინა ხელის შეხებაზე ინთება — არ ხტება */
.ad-case .ad-card-wrapper:hover {
    transform: none !important;
    border-color: rgba(212, 175, 55, 0.42) !important;
}

.ad-case .ad-card-wrapper:hover::before {
    opacity: 0.46;
}

.ad-case .ad-card-wrapper:hover .ad-image,
.ad-case .ad-card-wrapper:hover .ad-video {
    transform: scale(1.012);
}

.ad-case .ad-link-block:focus-visible,
.ad-case .ad-video-clickable-layer:focus-visible {
    outline: 2px solid var(--kino-gold-color, #d4af37);
    outline-offset: 4px;
    border-radius: 3px;
}

/* ვიტრინის ფირფიტა — რეკლამის აღნიშვნა, არა სათაური */
.ad-case .ad-badge {
    top: 0;
    right: 0;
    z-index: 3;
    padding: 5px 10px;
    /* გაუმჭვირვალე ფირფიტა განზრახ: ნახევრად გამჭვირვალე ფონზე კონტრასტი
       კრეატივის ფერებზე იქნებოდა დამოკიდებული — ღია ბანერზე წარწერა 4.5:1-ს
       ვერ გაივლიდა. ასე 7.6:1 ყოველთვის გარანტირებულია. */
    background: var(--kino-bg-primary, #08090b);
    color: #9aa3b1;
    border-left: 1px solid rgba(212, 175, 55, 0.26);
    border-bottom: 1px solid rgba(212, 175, 55, 0.26);
    border-radius: 0 3px 0 4px;
    font-family: var(--venue-board, 'Noto Sans Georgian', system-ui, sans-serif);
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.2em;
}

@media (max-width: 767.98px) {
    /* ტელეფონზე კედელი აღარ სჭირდება — პოსტერი თავად იკავებს მთელ სიგანეს */
    .ad-case .ad-card-wrapper { padding: 8px; }

    .ad-case .ad-media-container,
    .ad-case .ad-link-block,
    .ad-case .ad-video-wrapper { width: 100%; }

    .ad-case .ad-image,
    .ad-case .ad-video {
        width: 100% !important;
        max-height: none !important;
    }

    .ad-case .ad-badge {
        font-size: 0.5rem;
        padding: 4px 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ad-case .ad-card-wrapper,
    .ad-case .ad-card-wrapper::before,
    .ad-case .ad-image,
    .ad-case .ad-video { transition: none; }

    .ad-case .ad-card-wrapper:hover .ad-image,
    .ad-case .ad-card-wrapper:hover .ad-video { transform: none; }
}