/* WebP / AVIF background fallback через CSS Variables.
 *
 * Stage P1 WebP backgrounds (2026-05-18, Alexander).
 * Stage AVIF backgrounds (2026-05-18) — extended for AVIF support.
 *
 * Используется в комбинации с JS-detect в header.php:
 *   class="webp" — если браузер поддерживает WebP
 *   class="avif" — если браузер поддерживает AVIF
 *
 * В шаблонах PHP вместо:
 *     style="background: url(<?= $image ?>);"
 * пишется:
 *     style="<?= gd_bg_webp($image) ?>"
 * что разворачивается в:
 *     style="--bg-img: url('/path.png'); --bg-img-webp: url('/path.png.webp'); --bg-img-avif: url('/path.png.webp');"
 * (если соответствующего файла нет — переменная не добавляется).
 *
 * Каскад: AVIF (если есть) → WebP (если есть) → original PNG/JPG.
 *
 * Specificity:
 *  - [style*="--bg-img:"]                  -> (0,1,0)
 *  - html.webp [style*="--bg-img-webp:"]   -> (0,2,1) > (0,1,0)
 *  - html.avif [style*="--bg-img-avif:"]   -> (0,2,1) > предыдущие в порядке источника
 * AVIF идёт последним в файле — при равной specificity выигрывает по cascade order.
 * Inline style передаёт значение CSS variable, но не background-image напрямую,
 * поэтому правило background-image: var(...) выигрывает без !important.
 */

/* Базовый PNG/JPG fallback */
[style*="--bg-img:"] {
    background-image: var(--bg-img);
}

/* WebP override если браузер поддерживает */
html.webp [style*="--bg-img-webp:"] {
    background-image: var(--bg-img-webp);
}

/* AVIF override — приоритет выше WebP (идёт позже в каскаде) */
html.avif [style*="--bg-img-avif:"] {
    background-image: var(--bg-img-avif);
}

/* ============================================================
 * Stage 6.6 (T4 PSI): hardcoded service-боксы на главной — AVIF/WebP fallback
 * ----------------------------------------------------------------
 * Эти CSS-правила переопределяют PNG-фоны из redisign/css/img.css
 * для service2/3/4/13/20 и gradient overlay, БЕЗ изменения HTML
 * (img.css правят и для прода, и для теста — лезть туда рискованно).
 *
 * Браузеры:
 *   - без html.webp и без html.avif → загружают .png (старый поведение, fallback)
 *   - html.webp                     → загружают .png.webp (-60..75%)
 *   - html.avif                     → загружают .png.webp (-77..85%)
 *
 * Ожидаемая экономия PSI mobile main: ~275 KiB (AVIF) или ~150 KiB (WebP).
 * Файлы уже на FTP: /redisign/img/service/serviceN.png.{webp,avif}
 * ============================================================ */
html.webp .service2  { background-image: url('/redisign/img/service/service2.png.webp');  }
html.avif .service2  { background-image: url('/redisign/img/service/service2.png.webp');  }
html.webp .service3  { background-image: url('/redisign/img/service/service3.png.webp');  }
html.avif .service3  { background-image: url('/redisign/img/service/service3.png.webp');  }
html.webp .service4  { background-image: url('/redisign/img/service/service4.png.webp');  }
html.avif .service4  { background-image: url('/redisign/img/service/service4.png.webp');  }
html.webp .service13 { background-image: url('/redisign/img/service/service13.png.webp'); }
html.avif .service13 { background-image: url('/redisign/img/service/service13.png.webp'); }
html.webp .service20 { background-image: url('/redisign/img/service/service20.png.webp'); }
html.avif .service20 { background-image: url('/redisign/img/service/service20.png.webp'); }
html.webp .service-box__item:before { background-image: url('/redisign/img/service/gradient.png.webp'); }
html.avif .service-box__item:before { background-image: url('/redisign/img/service/gradient.png.webp'); }