/* ══════════════════════════════════════════════════════════════════════
   ПІДКЛАДКА ГЕРОЯ: фото на всю ширину, текст поверх.

   ⚠️ ОКРЕМИЙ ФАЙЛ НАВМИСНО. assets/css/main.css генерується збіркою
   (_build/build.sh) з прототипу - усе, дописане туди руками, зникне при
   наступному прогоні. Тут стилі в безпеці.

   Вмикається класом body.has-hero-bg, який ставить inc/hero-bg.php.
   Без нього не діє жодне правило нижче: стандартний двоколонковий герой
   лишається недоторканим.

   Картинка приходить змінною --hero-bg із <style> у <head>.
   ══════════════════════════════════════════════════════════════════════ */

.has-hero-bg .hero {
  position: relative;
  isolation: isolate;          /* z-index дітей не тече на решту сторінки */
  /* ⚠️ !important через інлайновий style="padding-top:30px" у шаблонах:
     30px замало, коли зверху фото, а не білий фон. */
  padding-top: 64px !important;
  padding-bottom: 64px;
  color: #fff;
}

/* ⚠️ Фон окремим шаром, а не background на .hero.
   Затемнення мусить лежати МІЖ фото і текстом. Зробити це одним
   background-image не можна: градієнт-накладка домальовувалась би поверх
   тексту теж. Тому фото - ::before, затемнення - ::after, обидва під
   вмістом через z-index. */
.has-hero-bg .hero::before,
.has-hero-bg .hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;                  /* під текстом, але всередині .hero */
  pointer-events: none;
}

.has-hero-bg .hero::before {
  background-image: var(--hero-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* ⚠️ ЛЕГКЕ РОЗМИТТЯ - НЕ ПРИКРАСА.
     У герої два знімки одночасно: підкладка і фото сторінки. Різкі обидва
     вони конкурують, і з-за картки лізуть деталі тла - на фото фургона це
     великий напис «EVERHEAT SOLUTIONS» просто за карткою.
     3px достатньо, щоб тло читалось як тло: сюжет упізнається, дрібний
     текст і контури перестають сперечатися з переднім планом.

     scale(1.03) обовʼязковий: blur розмиває і КРАЇ шару, без запасу по
     периметру зʼявляється світла смужка по контуру героя. */
  filter: blur(3px) saturate(.9);
  transform: scale(1.03);
}

/* ⚠️ Через scale() шар виходить за межі .hero - підрізаємо.
   Радіуса тут немає, тож нічого візуально не змінює. */
.has-hero-bg .hero { overflow: hidden; }

/* Телефонам віддаємо легшу картинку: підкладка - найважчий файл сторінки. */
@media (max-width: 700px) {
  .has-hero-bg .hero::before { background-image: var(--hero-bg-sm, var(--hero-bg)); }
}

/* ⚠️ ЗАТЕМНЕННЯ СПРЯМОВАНЕ, А НЕ РІВНОМІРНЕ.
   Рівномірний шар або замалий для світлих ділянок, або перетворює знімок
   на сіру пляму. Виміряно на фото білого фургона: при 55% рівномірного
   текст ліворуч лежав саме на білому борті й не читався.

   Тому два шари:
     1) горизонтальний - щільний там, де КОЛОНКА ТЕКСТУ, і майже прозорий
        праворуч, де саме зображення й має бути видно;
     2) вертикальний - легкий загальний, щоб низ із кнопками не провалювався.

   Порядок у background має значення: перший шар лежить ЗВЕРХУ. */
.has-hero-bg .hero::after {
  background:
    linear-gradient(
      90deg,
      rgba(8, 22, 40, calc(var(--hero-tint, .62) + .20)) 0%,
      rgba(8, 22, 40, calc(var(--hero-tint, .62) + .10)) 38%,
      rgba(8, 22, 40, calc(var(--hero-tint, .62) * .55)) 72%,
      rgba(8, 22, 40, calc(var(--hero-tint, .62) * .30)) 100%
    ),
    linear-gradient(
      180deg,
      rgba(8, 22, 40, calc(var(--hero-tint, .62) * .30)) 0%,
      rgba(8, 22, 40, calc(var(--hero-tint, .62) * .20)) 45%,
      rgba(8, 22, 40, calc(var(--hero-tint, .62) * .55)) 100%
    );
}

/* На вузьких екранах текст іде на всю ширину, тож горизонтальний градієнт
   лишив би правий край світлим. Там - рівномірний шар. */
@media (max-width: 860px) {
  .has-hero-bg .hero::after {
    background:
      linear-gradient(
        180deg,
        rgba(8, 22, 40, calc(var(--hero-tint, .62) + .06)) 0%,
        rgba(8, 22, 40, calc(var(--hero-tint, .62) + .12)) 100%
      );
  }
}

/* ══════════════════════════════════════════════════════════════════════
   ТЕЛЕФОН: герой був довшим за екран

   Виміряно на 375×812: висота героя 1020px = 126% екрана, і фото
   починалось на 764px - тобто його було видно лише після прокрутки, та й
   то обрізаним краєм вікна. Розклад: відступи 128 + текст 579 +
   проміжок сітки 56 + фото 257.

   Ріжемо те, що не є контентом: власні відступи і проміжок. Текст не
   чіпаємо.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {

  /* ⚠️ Мій же !important на 64px був розрахований на десктоп. На телефоні
     це 128px порожнечі згори й знизу при екрані 812px. */
  .has-hero-bg .hero {
    padding-top: 26px !important;
    padding-bottom: 30px;
  }

  /* 56px - це проміжок МІЖ КОЛОНКАМИ з десктопа. На телефоні колонки
     стають рядками, і той самий проміжок відриває фото від тексту. */
  .has-hero-bg .hero .container {
    gap: 22px;
  }

  /* ⚠️ Пропорція фото - в кінці файлу, а не тут.
     Правило картки (.photo-slot{aspect-ratio:4/3}) стоїть НИЖЧЕ за цей
     блок, і при однаковій специфічності виграє воно, а не медіазапит.
     Перевірено: звідси 16/10 не спрацьовувало. */
}

/* ── Текст поверх фото ────────────────────────────────────────────────
   Колір задаємо явно кожному елементу, а не сподіваємось на успадкування:
   у main.css заголовки й підписи мають власні кольори, і вони виграють. */
.has-hero-bg .hero h1,
.has-hero-bg .hero h2,
.has-hero-bg .hero .hero-title,
.has-hero-bg .hero .hero-sub,
.has-hero-bg .hero p {
  color: #fff;
}

/* ⚠️ .eyebrow («Heating Installation» над заголовком) я спершу пропустив.
   У main.css він має color: var(--color-blue-dark) - темно-синій, і на
   світлій ділянці знімка зникає повністю. Саме на це поскаржились.

   Беремо не чистий білий, а світло-блакитний: підпис має лишатись
   акцентом, як у дизайні, а не зливатись із заголовком. */
.has-hero-bg .hero .eyebrow {
  color: #bcdcff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
}

/* ⚠️ Градієнтний текст робиться через background-clip:text і
   color:transparent. На фото він зникає повністю - літери стають
   прозорими. Повертаємо звичайний білий. */
.has-hero-bg .hero h1,
.has-hero-bg .hero h2,
.has-hero-bg .hero .hero-title {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}

.has-hero-bg .hero .hero-sub,
.has-hero-bg .hero p {
  text-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}

/* Бейджі. ⚠️ У дизайні це ПРОСТО ТЕКСТ, без плашки (main.css: колір плюс
   flex, жодного background). Тому не додаємо плашок і тут - лише
   перефарбовуємо: власний колір --color-text-secondary на фото не читається,
   а вигаданий скляний чіп змінив би дизайн сильніше, ніж треба. */
.has-hero-bg .hero .hero-badge,
.has-hero-bg .hero .hero-badge b {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}

/* Друга кнопка на фото має бути видимою, але не сперечатись із головною. */
.has-hero-bg .hero .btn-secondary,
.has-hero-bg .hero .btn-ghost {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .55);
  color: #fff;
}
.has-hero-bg .hero .btn-secondary:hover,
.has-hero-bg .hero .btn-ghost:hover {
  background: rgba(255, 255, 255, .22);
}

/* ── Бічний слот ──────────────────────────────────────────────────────
   ⚠️ ХОВАЄМО ЛИШЕ ЗА ОКРЕМИМ КЛАСОМ.
   Спершу тут стояло `.has-hero-bg .hero .photo-slot{display:none}` - тобто
   підкладка ЗАВЖДИ з'їдала фото сторінки. Це неправильно: підкладка і фото
   сторінки, як правило, різні знімки. Клас hero-hide-slot ставить PHP -
   або за галочкою, або коли це фізично той самий файл. */
.has-hero-bg.hero-hide-slot .hero .photo-slot { display: none; }

/* ⚠️ СІТКУ ТРЕБА ЗГОРНУТИ В ОДНУ КОЛОНКУ.
   main.css: .hero .container{ grid-template-columns: 1.05fr .95fr }. Самого
   display:none на фото замало - друга колонка лишається в сітці порожньою,
   і текст стоїть на 52% ширини, а праворуч діра.

   ⚠️ max-width самого .container НЕ чіпаємо: він тримає текст на одній
   вертикалі з рештою сторінки. Повноширинна тут ПІДКЛАДКА, а не текст -
   інакше рядки впиралися б у край екрана. */
.has-hero-bg.hero-hide-slot .hero .container {
  grid-template-columns: 1fr;
  gap: 0;
}

/* Довгий рядок на всю ширину контейнера читати важко: тримаємо міру. */
.has-hero-bg.hero-hide-slot .hero .container > div:first-child {
  max-width: 760px;
}

/* ── Картка бічного фото ──────────────────────────────────────────────
   Без цього знімок просто лежить на підкладці: жодної межі, жодної тіні,
   і читається як випадково вставлений прямокутник, а не як частина макета.

   ⚠️ ОДНАКОВА ФОРМА ВАЖЛИВІША ЗА «РІДНІ» ПРОПОРЦІЇ.
   Фото сторінок мають різні співвідношення, і без aspect-ratio висота
   героя стрибала б від сторінки до сторінки. 4:3 - те, у що вкладаються
   і горизонтальні, і майже квадратні кадри; object-fit:cover доріже. */
.has-hero-bg .hero .photo-slot {
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  overflow: hidden;
}

.has-hero-bg .hero .photo-slot .eh-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Тінь і світлий кант лише під СПРАВЖНІМ фото: вони відривають картку від
   тла. Заглушці вони не потрібні - у неї свій скляний вигляд нижче. */
.has-hero-bg .hero .photo-slot:has(.eh-photo) {
  box-shadow:
    0 26px 60px -20px rgba(0, 0, 0, .65),
    0 0 0 1px rgba(255, 255, 255, .20);
}

/* ⚠️ Коли бічне фото ЛИШАЄТЬСЯ, заглушку треба пригасити.
   Її рамка й підпис намальовані під світлий фон; на знімку біла картка
   виглядає латкою поверх фотографії. Реального фото це не стосується -
   правило адресне, лише для слота без .eh-photo усередині. */
.has-hero-bg:not(.hero-hide-slot) .hero .photo-slot:not(:has(.eh-photo)) {
  background: rgba(255, 255, 255, .10);
  border-color: rgba(255, 255, 255, .30);
  color: #fff;
  backdrop-filter: blur(2px);
}
.has-hero-bg:not(.hero-hide-slot) .hero .photo-slot:not(:has(.eh-photo)) .ps-inner,
.has-hero-bg:not(.hero-hide-slot) .hero .photo-slot:not(:has(.eh-photo)) svg {
  color: #fff;
  opacity: .85;
}

/* ⚠️ Контраст важливіший за ефект. Якщо людина попросила менше руху
   чи більше контрасту - прибираємо розмиття і згущуємо підкладку. */
@media (prefers-contrast: more) {
  .has-hero-bg .hero::after { --hero-tint: .78; }
  .has-hero-bg .hero .hero-badge { backdrop-filter: none; background: rgba(0, 0, 0, .55); }
}

/* Друк: підкладка з'їдає тонер і робить текст нечитабельним на папері. */
@media print {
  .has-hero-bg .hero { color: #000; padding-top: 0 !important; }
  .has-hero-bg .hero::before,
  .has-hero-bg .hero::after { display: none; }
  .has-hero-bg .hero h1,
  .has-hero-bg .hero h2,
  .has-hero-bg .hero .hero-title { -webkit-text-fill-color: #000; text-shadow: none; }
  .has-hero-bg .hero .hero-sub,
  .has-hero-bg .hero p { color: #000; text-shadow: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   ПРОПОРЦІЯ ФОТО НА ТЕЛЕФОНІ - НАПРИКІНЦІ ФАЙЛУ НАВМИСНО

   Правило картки вище задає 4:3. Специфічність тут така сама, тому
   вирішує ПОРЯДОК: медіазапит мусить стояти після нього, інакше не діє.
   Перевірено вимірюванням - зі старого місця 16/10 не застосовувалось.

   На 375px 4:3 дає 257px висоти: вертикальний блок, який не влазить у
   залишок екрана під текстом і кнопками. 16:10 дає ~214px - той самий
   сюжет читається як банер.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
  .has-hero-bg .hero .photo-slot { aspect-ratio: 16 / 10; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ГЕРОЙСЬКИЙ БЛОК: МОНОШИРИННИЙ
   ТЗ everheat-typography-tz-v4, розд. 8. Контент НЕ ЗМІНЮЄТЬСЯ:
   компенсація йде кеглем і шириною колонки, а не скороченням текстів.

   Відтворення вигляду попередньої версії сайту (Tilda): моно стояв на
   ВСЬОМУ блоці - заголовок, підзаголовок, рядки з емодзі.

   ⚠️ СЕЛЕКТОР СКОПОВАНИЙ ДО .hero, І ЦЕ НЕ ПРИКРАСА.
   Клас .hero-sub існує у ДВОХ незалежних контекстах:
     .hero .hero-sub          - короткий підзаголовок на фото (тут);
     .services-hero .hero-sub - центрований вступний абзац під H1.
   Нескопований селектор редакції 3 ставив моно на другий.
   Виміряно на живому сайті ДО правки: /instant-estimate/ 276 символів
   моно в 19 рядкових прямокутниках, /about/team/ 238 символів у 8,
   /pricing/ 186 у 4. Усього таких шаблонів 24 з 37 сторінок.

   ⚠️ ЧОМУ В ЦЬОМУ ФАЙЛІ. hero-bg.css підключається ПІСЛЯ extras.css.
   Правило .has-hero-bg .hero .hero-title має специфічність 0,3,0 - таку саму,
   як правила вище в цьому файлі.

   ⚠️ Перелічені конкретні елементи, а НЕ .hero: у темі 11 контролів
   із `font: inherit`, і правило на контейнері перефарбувало б їх усі.
   ═══════════════════════════════════════════════════════════════════════ */
.hero .hero-title,
.hero .hero-sub,
.hero .hero-badge,
.hero .hero-offer{
  font-family: var(--font-mono);
}

/* Розрядка 0, а не від'ємна: на референсі видно саме вільну, природну
   для моно проводку - вона й дає той інженерний характер. */
.hero .hero-title{ letter-spacing:0; text-wrap:balance; }

/* ⚠️ КОМПЕНСАЦІЯ КЕГЛЕМ, А НЕ ТЕКСТОМ. Контент не міняється.
   Заголовок 56 символів. 7.4vw = 27.8px при 375px → ≈20.5 символів у рядку
   → 3 рядки. line-height 1.15 замість 1.2: у моно висоти літер рівніші,
   щільніший інтерліньяж виглядає краще.

   Десктопний clamp(2rem, 4vw, 2.85rem) із main.css не чіпаємо. */
@media (max-width:640px){
  .hero .hero-title{ font-size:clamp(1.6rem, 7.4vw, 1.9rem); line-height:1.15; }
}

/* 46ch рахується від ширини «0» у шрифті САМОГО елемента, тож на моно
   блок мовчки розширився б. 520px при 1.08rem = ≈42 символи в рядку:
   підзаголовок на 91 символ лягає у 2 рядки. (440px із редакції 3
   рахувались під скорочений текст і дали б 3 рядки.) */
.hero .hero-sub{ max-width:520px; }

/* Бейджі й рядок акції у моно ширші - зменшуємо кегль на крок,
   щоб кількість рядів у flex-wrap не зросла. */
.hero .hero-badge{ font-size:.88rem; }
.hero .hero-offer{ font-size:.92rem; }

/* Текст героя білий на фото, а світле на темному оптично важче за темне
   на світлому: 800 тут було б перебором. */
.has-hero-bg .hero .hero-title{ font-weight:700; }

/* Кнопки героя лишаються на Sans: «Book Your Free In-Home Assessment» -
   32 символи, у моно це два рядки, а скоротити підпис не можна
   (ТЗ v4, розд. 5.4). */
