/* RECRE-561 (рішення ПВ 2026-09-16) — ПУБЛІЧНИЙ ПІДПИС АВТОРА ФОТО.

   До тікета Політика прямо обіцяла протилежне: «Опубліковане фото
   показується без імені автора». Рішення реверснуте — автор сам обирає
   підпис у формі заявки, і цей підпис видно кожному, хто дивиться фото
   в галереї парку чи точки.

   ОДИН КЛАС .photo-credit на всі поверхні (hero парку, лайтбокс парку,
   історична галерея, карусель і док точки, плитка каталогу РОІ) — саме
   тому, що це ОДИН факт, поданий однаково: «Автор: Ім'я» (префікс саме
   «Автор:», а не «Фото:» — у імпортованих знімків caption уже
   починається з «Фото: ‹джерело›, CC BY-SA…», і два рядки з однаковим
   початком читались би як дубль; див. photoCreditText в alpine-data.js).
   Модифікатори міняють лише спосіб посадки в кадр, не типографіку
   й не колір.

   Окремий css-файл, а не main.css — за прецедентом усіх суфіксів у
   base.html (poi-gallery.css, poi-owner-badge.css, route-card.css…):
   main.css під паралельним незакоміченим WIP. Лише нові класи, жодного
   перевизначення наявних, тож перенесення в main.css буде механічним.

   ПРАВИЛО ПОРОЖНЕЧІ. Порожній підпис не рендериться взагалі: шаблони
   Alpine тримають x-show на самому тексті, а вузли, які будуються з JS
   (карусель/лайтбокс точки), лишаються в DOM порожніми — їх ховає
   :empty нижче. «Автор невідомий» ніде не пишемо: фото, залиті до
   тікета, атрибуції не мають і вигадувати її заднім числом нема з чого. */

.photo-credit {
    font-family: 'Mulish', system-ui, sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: .2px;
    /* Підпис — службовий рядок, а не частина опису кадру: тон
       приглушений навмисно, щоб ім'я читалось, але не конкурувало з
       назвою об'єкта й самим фото */
    color: var(--muted-3);
}

/* Порожній вузол не займає ані рядка, ані відступу. Потрібно саме для
   поверхонь точки: там пілюля/рядок будуються рядковим білдером і
   лишаються в DOM між кадрами (вставляти й виймати вузол на кожне
   гортання дорожче й помітніше, ніж міняти його текст). */
.photo-credit:empty { display: none !important; }

/* --- Пілюля в кутку кадру: hero парку і фото-зона точки ------------
   Форма й фон — зменшене відлуння .ov-media-zoom (кремове коло-плашка
   поверх фото); другого візуального словника для плашок поверх знімка
   в проєкті бути не повинно. */
.photo-credit--pill,
.photo-credit--hero {
    position: absolute;
    z-index: 2;
    max-width: calc(100% - 28px);
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--green);
    background: rgba(251, 245, 233, 0.92);
    border-radius: 30px;
    box-shadow: 0 8px 18px -10px rgba(36, 52, 38, 0.5);
    /* Підпис — не ціль кліку: під ним лежить сам кадр, який відкриває
       лайтбокс, і «мертва зона» в кутку фото була б дефектом */
    pointer-events: none;
}

/* Hero парку: top-LEFT — єдиний вільний кут. Праворуч угорі стоїть
   бейдж «Галерея» (.ov-media-zoom, right/top 14px), знизу — заголовок
   і стрічка мініатюр. */
.photo-credit--hero {
    left: 14px;
    top: 14px;
    font-size: 11px;
    padding: 7px 12px;
}

/* Фото-зона точки (картка каталогу, док Атласу): кадр тут у рази
   менший за hero, тож і пілюля дрібніша. Кут теж top-left: bottom-left
   зайнятий пілюлею годин роботи, bottom-right — лічильником «1/3»
   каруселі, top-right — × докованого стану (RECRE-553). */
.photo-credit--pill {
    left: 6px;
    top: 6px;
    font-size: 10px;
    padding: 4px 8px;
    max-width: calc(100% - 12px);
}

/* --- Рядок під підписом кадру в лайтбоксі --------------------------
   Лайтбокс — темне тло, тому muted-3 тут нечитний; беремо той самий
   приглушений кремовий, що .ov-lightbox__caption, лише слабший. */
.photo-credit--lightbox {
    margin-top: 6px;
    text-align: center;
    color: rgba(251, 245, 233, 0.72);
}

/* --- Рядок під <figure> історичної галереї парку -------------------
   Формула .pdh-photo__caption, лише ще на пів тону тихіше: під кадром
   уже стоїть опис, і підпис автора йде другим рядком. */
.photo-credit--figure {
    margin: 2px 2px 0;
    font-weight: 600;
    opacity: .85;
}