/* =============================================================================
   ᲡᲐᲠᲔᲙᲚᲐᲛᲝ ᲖᲝᲚᲘ — ღია ზედაპირების საერთო კომპონენტი
   -----------------------------------------------------------------------------
   სად: news.php (სტატიის თავი), views/mobile/news.php (სიის და სტატიის თავი),
   modules/jobs/index.php და job_view.php. მუქ სამყაროებს საკუთარი აქვთ —
   kino: assets/css/ad-case.css, locations: locations.css-ის .loc-ad.

   ᲠᲘᲡᲘ ᲒᲐᲛᲝᲪᲓᲘᲚᲔᲑᲐᲐ ᲐᲥ ᲩᲐᲬᲔᲠᲘᲚᲘ (ორივე ერთხელ უკვე გასწორდა ცოცხალზე):

   1) ბაზისურად `.ad-card-wrapper` სრული სიგანისაა, სურათი კი `object-fit:
      contain`-ით შუაში დგას — ვიწრო კრეატივი ცარიელ ყუთში ცურავს და
      „Sponsored" ბეჯი მისგან ასობით პიქსელით შორდება. აქ ბანერს ზოლი
      ეკრავს: ბარათი მთელ რიგს იკავებს, კრეატივი შუაშია, კედლებს კი მისივე
      ფერები ანათებს (`--ad-img`, რომელსაც includes/ad_renderer.php აწვდის).

   2) სიმაღლის ჭერის გარეშე 1920×714-იანი კრეატივი 1140px-იან რიგში 425px-ს
      იკავებს და გვერდის თავს პირველი ეკრანიდან აგდებს. ჭერი აქ არის და
      ორივე ღერძი შეზღუდულია, ამიტომ არც ერთი კრეატივი არ იჭრება და არც
      პროპორციას კარგავს.

   ᲗᲕᲘᲗᲙᲛᲐᲠᲘᲡᲘᲐ: ad_styles.css-ზე არ არის დამოკიდებული (მობილური შაბლონები მას
   საერთოდ არ ტვირთავენ — იქ ბეჯი სხვა შემთხვევაში ჩვეულებრივ ტექსტად ჩამოწვებოდა).

   ᲮᲠᲐᲮᲜᲔᲑᲘ (კონტეინერზე გადაწერე):
     --ad-band-h        კრეატივის სიმაღლის ჭერი
     --ad-band-ground   ზოლის ფონი
     --ad-band-line     ჩარჩოს ფერი
     --ad-band-radius   მომრგვალება
   ============================================================================= */

.ad-band {
    --ad-band-h: clamp(130px, 14vw, 210px);
    --ad-band-ground: #f6f8fb;
    --ad-band-line: #e6e9ee;
    --ad-band-radius: 16px;
    --ad-band-gap: 18px;

    display: block;
    /* ცარიელი ზონა ადგილს არ იკავებს: ყველა padding/margin შიდა ბარათზეა,
       რომელიც მხოლოდ მაშინ არსებობს, როცა რეკლამა მართლა დარენდერდა */
}

.ad-band .ad-card-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    margin: var(--ad-band-gap) auto 0;
    padding: 14px;
    background: var(--ad-band-ground);
    border: 1px solid var(--ad-band-line);
    border-radius: var(--ad-band-radius);
    overflow: hidden;
    isolation: isolate;
}

/* ტიკერი მთელი სიგანის ზოლია — ჩარჩო მას ბანერად აქცევს */
.ad-band .ad-card-wrapper.ad-type-ticker {
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
}

/* კედლის განათება — თავად კრეატივის ფერები, ღია ფონისთვის აწეული სიკაშკაშით */
.ad-band .ad-card-wrapper::before {
    content: "";
    position: absolute;
    inset: -14%;
    z-index: 0;
    pointer-events: none;
    background-image: var(--ad-img, none);
    background-size: cover;
    background-position: center;
    filter: blur(58px) saturate(1.2) brightness(1.06);
    opacity: 0.3;
}

/* ნაპირებში განათება ქრება, თორემ ტექსტიან ბანერს ფერადი ლაქა მიუდგება */
.ad-band .ad-card-wrapper::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(90deg,
        var(--ad-band-ground) 0%,
        rgba(255, 255, 255, 0) 28%,
        rgba(255, 255, 255, 0) 72%,
        var(--ad-band-ground) 100%);
}

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

.ad-band .ad-link-block,
.ad-band .ad-video-wrapper {
    display: block;
    position: relative;
    width: auto;
    max-width: 100%;
    text-decoration: none;
}

.ad-band .ad-image,
.ad-band .ad-video {
    display: block;
    width: auto;
    height: auto;
    max-height: var(--ad-band-h);
    max-width: 100%;
    margin: 0 auto;
    border-radius: 8px;
    box-shadow: 0 10px 24px -12px rgba(16, 24, 40, 0.28), 0 2px 6px -2px rgba(16, 24, 40, 0.12);
}

/* „Sponsored" — ზოლის კუთხეში მიკრული ფირფიტა. ბეჯი `.ad-card-wrapper`-ზეა
   მიბმული, ის კი მთელ რიგს იკავებს — ამიტომ კრეატივზე ვერ დაჯდება; სამაგიეროდ
   ზოლს ჩარჩო აქვს, ე.ი. ფირფიტა ხილულ ერთეულს აწერია და არა სიცარიელეს.
   ფონი გაუმჭვირვალეა: ნახევრად გამჭვირვალეზე კონტრასტი ბანერის ფერებზე
   იქნებოდა დამოკიდებული. */
.ad-band .ad-badge {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 3;
    padding: 4px 9px;
    background: #1a202c;
    color: #ffffff;
    border-radius: 0 var(--ad-band-radius) 0 6px;
    font-family: 'FiraGO', 'Noto Sans Georgian', system-ui, sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    line-height: 1;
    pointer-events: none;
}

.ad-band .ad-card-wrapper.ad-type-ticker .ad-badge { display: none; }

.ad-band .ad-link-block:focus-visible,
.ad-band .ad-video-clickable-layer:focus-visible {
    outline: 2px solid #b40000;
    outline-offset: 3px;
    border-radius: var(--ad-band-radius);
}

/* ---- ვიწრო ეკრანი: კრეატივი თავად ავსებს სიგანეს, კედელი აღარ რჩება ----
   `--m` მოდიფიკატორი იმავეს აკეთებს ნებისმიერ სიგანეზე — მობილური
   შაბლონები UA-ზე ირჩევა, არა breakpoint-ზე. */
.ad-band--m .ad-card-wrapper {
    padding: 0;
}

.ad-band--m .ad-card-wrapper::before,
.ad-band--m .ad-card-wrapper::after { display: none; }

.ad-band--m .ad-media-container,
.ad-band--m .ad-link-block { width: 100%; }

.ad-band--m .ad-image,
.ad-band--m .ad-video {
    width: 100%;
    max-height: none;
    border-radius: 0;
    box-shadow: none;
}

.ad-band--m .ad-badge {
    top: 0;
    right: 0;
    border-radius: 0 var(--ad-band-radius) 0 6px;
}

@media (max-width: 767.98px) {
    .ad-band .ad-card-wrapper { padding: 0; }
    .ad-band .ad-card-wrapper::before,
    .ad-band .ad-card-wrapper::after { display: none; }
    .ad-band .ad-media-container,
    .ad-band .ad-link-block { width: 100%; }
    .ad-band .ad-image,
    .ad-band .ad-video {
        width: 100%;
        max-height: none;
        border-radius: 0;
        box-shadow: none;
    }
    .ad-band .ad-badge { top: 0; right: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .ad-band .ad-card-wrapper { transition: none; }
}