/* ==========================================================================
   graphics.css — графічні утиліти «Мотаночка»
   Власник: front-end graphics. НЕ дублює токени з tokens.css/style.css.
   Підключається в header.ejs після style.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Зірковий рейтинг (sprite #icon-star замість emoji ⭐)
   Розмітка:
     <div class="stars" role="img" aria-label="Оцінка 5 з 5">
       <svg class="star" width="16" height="16"><use href="#icon-star"/></svg> …
     </div>
   -------------------------------------------------------------------------- */
.stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  line-height: 1;
  /* Золотий акцент бренду; перекривається кольором контексту за потреби */
  color: var(--color-gold, #DAA520);
}
.star {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  /* Заповнюємо контур, щоб зірка читалась як «заповнена» оцінка */
  fill: currentColor;
  stroke: currentColor;
}

/* --------------------------------------------------------------------------
   2. Бренд-лого (компактний знак #logo-mark у шапці та футері)
   Розмітка: <span class="logo__icon"><svg class="logo__mark"><use href="#logo-mark"/></svg></span>
   currentColor успадковується від .logo / .logo__icon кольору.
   -------------------------------------------------------------------------- */
.logo__mark {
  display: block;
  width: 36px;
  height: 36px;
  /* Тонке заокруглення опційного фону, якщо .logo__icon має підкладку */
  color: var(--color-primary, #A52A2A);
}
.logo--footer .logo__mark {
  /* У футері лого зазвичай світле — успадковує колір тексту футера */
  color: currentColor;
}
@media (max-width: 480px) {
  .logo__mark { width: 30px; height: 30px; }
}

/* --------------------------------------------------------------------------
   3. LQIP / blur-up + aspect-ratio box (проти CLS і різкого «pop-in» lazy-load)
   Контейнер тримає місце через aspect-ratio і показує колір-плейсхолдер;
   зображення стартує розмитим/прозорим і плавно проявляється, коли завантажилось.

   РОЗМІТКА:
     <div class="media-box" style="--ar: 1/1">
       <img class="img-blurup" loading="lazy" decoding="async"
            src="/images/photo.jpg" alt="..."
            onload="this.classList.add('loaded')">
     </div>

   Опційно для справжнього blur-up можна задати мініатюру як фон:
     <div class="media-box" style="--ar:1/1; background-image:url('data:image/...base64,...')">
   -------------------------------------------------------------------------- */
.media-box {
  position: relative;
  display: block;
  width: 100%;
  /* За замовчуванням 1:1 (пакшот); перевизначається через --ar */
  aspect-ratio: var(--ar, 1 / 1);
  overflow: hidden;
  /* Колір-плейсхолдер запобігає «спалаху» порожнечі */
  background-color: var(--color-bg-soft, #FFF8DC);
  background-size: cover;
  background-position: center;
}
.media-box > img,
img.img-blurup {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Стан до завантаження: легке розмиття + знебарвлення, нульова непрозорість */
img.img-blurup {
  opacity: 0;
  filter: blur(12px);
  transform: scale(1.02); /* приховує «бахрому» від blur по краях */
  transition: opacity .5s ease, filter .6s ease, transform .6s ease;
  will-change: opacity, filter;
}
img.img-blurup.loaded {
  opacity: 1;
  filter: blur(0);
  transform: none;
}
/* Якщо JS вимкнено — показуємо зображення одразу (без onload) */
.no-js img.img-blurup { opacity: 1; filter: none; transform: none; }
@media (prefers-reduced-motion: reduce) {
  img.img-blurup { transition: opacity .2s ease; filter: none; transform: none; }
}

/* Lifestyle-кадр 3:4 — допоміжний модифікатор (див. photography-guideline.md) */
.media-box--lifestyle { aspect-ratio: 3 / 4; }