/*
Theme Name: ProMotors Child
Theme URI: http://demo.bravisthemes.com/promotors/
Author: Bravis-Themes
Author URI: https://themeforest.net/user/bravis-themes/
Description: Promotors is a Car Repair Service WordPress Theme. This Template can be used for Auto Mechanic, Car Repair Shops, Garages, Mechanic Workshops, Auto Painting and other Auto and Car related services. Promotors theme has a beautiful and unique design that will be best suited for your business.
Version: 1.0.5
License: ThemeForest
License URI: https://themeforest.net/licenses
Template: promotors
Text Domain: promotors-child
Tags: automotive, bike, car, car service, dark, detailing, elementor, engineering, motorcycle, repair, repair service, technics, template, vehicle.
Use it to make something cool, have fun, and share what you've learned with others.
*/

/*--------------------------------------------------------------
# Сітка послуг: картки однакової висоти
--------------------------------------------------------------*/

/*
 * ct_service_grid за замовчуванням розкладає картки masonry-скриптом, який
 * ставить .grid-item через position:absolute — звідси різна висота карток
 * і «драбинка». На головній віджет переведено в режим layout_type=grid
 * (звичайний Bootstrap-рядок), і тут лишається дотягнути саму картку до
 * висоти колонки.
 */
.ct-service-grid1 .ct-grid-inner > .grid-item {
    display: flex;
}

.ct-service-grid1 .ct-grid-inner > .grid-item > .grid-item-inner {
    display: flex;
    width: 100%;
    height: 100%;
}

.ct-service-grid1 .ct-grid-inner > .grid-item > .grid-item-inner > .item-body {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* опис різної довжини не має розсовувати кнопку — притискаємо її донизу */
.ct-service-grid1 .ct-grid-inner .item-body > .item-readmore {
    margin-top: auto;
}

/*
 * Страховка: якщо віджет колись збережуть із редактора Elementor, він може
 * повернутися в masonry (layout_type не має UI-контролу й не переживе збереження).
 * Ці правила нейтралізують інлайнові стилі скрипта — !important у таблиці стилів
 * перебиває інлайновий style без !important.
 */
.ct-service-grid1 .ct-grid-masonry {
    position: static !important;
    height: auto !important;
    display: flex;
    flex-wrap: wrap;
}

.ct-service-grid1 .ct-grid-masonry > .grid-item {
    position: static !important;
    top: auto !important;
    left: auto !important;
}

.ct-service-grid1 .ct-grid-masonry > .grid-sizer {
    display: none;
}

/*--------------------------------------------------------------
# Таблиця робіт без колонки цін
--------------------------------------------------------------*/

/*
 * ct_fancy_box layout 3 верстає перелік як CSS-таблицю (display: table-cell).
 * Коли ціни вимкнено (SHOW_PRICES у _dev/build-service.php), шаблон теми все одно
 * друкує порожній <span class="td"></span> — а порожня комірка в CSS-таблиці
 * лишається видимою і забирає половину ширини.
 *
 * Ховаємо саме порожні комірки. Заголовок таблиці в цьому режимі теж має лише
 * одну комірку, тож таблиця стає одноколонковою і назва роботи займає всю ширину.
 * Коли ціни ввімкнуть назад, комірки перестануть бути порожніми — правило
 * саме собою вимкнеться, нічого міняти не треба.
 */
.ct-fancy-box-layout3 .td:empty {
    display: none;
}

/*--------------------------------------------------------------
# Мобільні: довгі українські слова не мають вилазити за екран
--------------------------------------------------------------*/

/*
 * Заголовок хіро-слайдера. Тема ставить 35px на екранах до 575px — цей розмір
 * підбирали під Chakra Petch, а наш TT Octosquares ширший приблизно на 20%
 * (виміряно при заміні шрифту). Через це слово «ОБСЛУГОВУВАННЯ» — 14 літер —
 * перестає вміщатися по ширині телефона й обрізається праворуч.
 * Зменшуємо кегль на два кроки; break-word лишається як страховка
 * для ще довших слів.
 */
.ct-slider-carousel1 .item--title {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

@media screen and (max-width: 575px) {
    .ct-slider-carousel1 .item--title {
        font-size: 30px;
    }
}

@media screen and (max-width: 430px) {
    .ct-slider-carousel1 .item--title {
        font-size: 26px;
    }
}

/*
 * Блок «ОБСЛУГОВУЄМО ВСІ ПОПУЛЯРНІ МАРКИ АВТО».
 * Секція з логотипами розтягнута на всю ширину екрана й не має бічних відступів
 * (так задумано — карусель логотипів має йти від краю до краю). Але заголовок
 * усередині лежить у flex-контейнері з justify-content: center, а його блок
 * .wp-meta має ширину за вмістом. Коли текст ширший за екран, блок вилазить
 * за обидва краї — і напис, і фонове слово «БРЕНДИ» (воно position: absolute
 * відносно .wp-meta) з'їжджають ліворуч і обрізаються.
 *
 * Даємо контейнеру бічні відступи, а блоку — повну ширину: тоді текст
 * переноситься всередині екрана, а фонове слово стає на місце.
 */
@media screen and (max-width: 991px) {
    .ct-client1 .container-custom {
        padding-left: 20px;
        padding-right: 20px;
    }

    .ct-client1 .container-custom .wp-meta {
        width: 100%;
        max-width: 100%;
    }
}

/*--------------------------------------------------------------
# Сітка робіт у звичайному (не masonry) режимі: однакові кадри
--------------------------------------------------------------*/

/*
 * Фото робіт мають різні пропорції — є і портретні, і вузькі. Тема ріже
 * зображення до заданого розміру лише коли оригінал більший, тож у ряду
 * виходили картки різної висоти.
 *
 * Задаємо всім кадрам однакову пропорцію 10:7 і object-fit: cover.
 * Правило навмисно обмежене сіткою в режимі grid (data-layout="grid"):
 * на сторінці «Наші роботи» сітка працює в режимі masonry, де різна висота
 * карток — це задум, і туди правило не дістає.
 */
.ct-portfolio[data-layout="grid"] .item--featured {
    position: relative;
    padding-top: 70%;
    overflow: hidden;
}

.ct-portfolio[data-layout="grid"] .item--featured img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*--------------------------------------------------------------
# Липка шапка: меню не має переноситись на другий рядок
--------------------------------------------------------------*/

/*
 * Проблема була в двох речах одразу.
 *
 * 1) Розмітка теми (template-parts/header-layout-elementor.php).
 *    Звичайна шапка:  .ct-header-elementor-main   > .container > .row > .col-12 > .elementor
 *    Липка:           .ct-header-elementor-sticky > .container > .row >           .elementor
 *    У липкої немає .col-12, а .row — це flex-контейнер. Нащадок без класу .col-*
 *    не отримує flex-basis: 100% і стискається по вмісту. Відтворюємо .col-12.
 *
 * 2) Зайві бічні відступи в самій секції липкої шапки — їх прибрано
 *    скриптом _dev/fix-sticky-header.php, там же й перелік відмінностей.
 *
 * Фон переносимо на обгортку: секція більше не «розтягнута» (stretch_section
 * рахується скриптом Elementor ще до того, як липка шапка стане видимою),
 * а обгортка й так position: fixed; left: 0; right: 0 — тобто на всю ширину.
 */
.ct-header-elementor-sticky > .container > .row > .elementor {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

#ct-header-elementor .ct-header-elementor-sticky {
    background-color: #121212;
}

/*--------------------------------------------------------------
# Нижній відступ області вмісту
--------------------------------------------------------------*/

/*
 * Тема задає обгортці вмісту `.site-content { padding: 160px 0 160px; }`.
 * Верхній відступ на головній уже знято опцією сторінки (Redux друкує
 * `#content{padding-top:0px}` інлайном), тут знімаємо нижній — на всіх сторінках.
 *
 * Селектор з id — не примха. Дочірній style.css підключається ДО theme.css
 * (див. порядок: fonts.css → parent style.css → child style.css → … → theme.css),
 * тож при однаковій вазі виграв би не він, а тема. Одного `.site-content`
 * (0,0,1,0) не вистачить проти шорткату теми, а `!important` тут зайвий —
 * достатньо додати id, який на елементі й так є: <div id="content" class="site-content">.
 */
#content.site-content {
    padding-bottom: 0;
}