/* =====================================================================
   CIBOR — Картки з hover-ефектом (.wij-oplossen-box__col)
   ---------------------------------------------------------------------
   Блок "Onze expertise" на сторінках послуг: фото + заголовок + список,
   список виїжджає при hover. У main.css заголовок і список абсолютно
   позиціоновані знизу, а зсув заголовка при hover — фіксовані пікселі
   (-100 / -120 / -190px). Коли список довший, він налазить на заголовок.
   Тут: контейнер картки — grid із трьома рядками: фото займає всі рядки
   (фон), заголовок — рядок 2, список — рядок 3. Список згортається
   через grid-template-rows 0fr → 1fr, тому заголовок завжди стоїть
   рівно над списком, незалежно від його довжини. Фото задає висоту
   картки (aspect-ratio з редактора) і розтягується, якщо тексту більше.
   Клас підключається після main.css (functions.php), правила з
   !important — бо в main.css і Stackable теж !important.
   ===================================================================== */

.wij-oplossen-box__col {
    position: relative;
    overflow: hidden;
}
.wij-oplossen-box__col > .stk-block-column__content { padding: 0 !important; }

/* ── Сітка картки: фото на всі рядки, заголовок і список знизу ─────── */
.wij-oplossen-box__col .stk-inner-blocks {
    position: relative;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto auto;
    gap: 0 !important;
    align-items: stretch;
}

/* фото — фон картки */
.wij-oplossen-box__col .stk-inner-blocks > .wp-block-stackable-image {
    position: relative;
    grid-column: 1;
    grid-row: 1 / -1;
    z-index: 0;
    margin: 0 !important;
    min-height: 100%;
}
.wij-oplossen-box__col .wp-block-stackable-image figure,
.wij-oplossen-box__col .wp-block-stackable-image .stk-img-wrapper {
    display: block;
    min-height: 100%;
    margin: 0 !important;
}
.wij-oplossen-box__col .wp-block-stackable-image img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}
/* затемнення знизу для читабельності тексту (сильніше при hover) */
.wij-oplossen-box__col .wp-block-stackable-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, 0) 55%);
    opacity: .7;
    transition: opacity .9s ease;
    pointer-events: none;
}
.wij-oplossen-box__col:hover .wp-block-stackable-image::after { opacity: 1; }

/* заголовок — рядок 2, без абсолюту й без translate */
.wij-oplossen-box__col .stk-inner-blocks > .wp-block-stackable-heading {
    position: static !important;
    grid-column: 1;
    grid-row: 2;
    z-index: 2;
    margin: 0 !important;
    padding: 20px 40px 22px;
}
.wij-oplossen-box__col .wp-block-stackable-heading h3,
.wij-oplossen-box__col:hover .wp-block-stackable-heading h3 {
    margin: 0;
    transform: none !important;
}
/* фото: зріз, наближення й затемнення повільніше, ніж у main.css (.5–.6s) */
.wij-oplossen-box__col figure,
.wij-oplossen-box__col:hover figure {
    transition: clip-path .9s cubic-bezier(.25, .8, .25, 1) !important;
}
.wij-oplossen-box__col figure img {
    transition: scale .9s cubic-bezier(.25, .8, .25, 1), filter .9s ease !important;
}

/* список — рядок 3, згорнутий; при hover розгортається */
.wij-oplossen-box__col .stk-inner-blocks > .wp-block-stackable-icon-list {
    position: static !important;
    grid-column: 1;
    grid-row: 3;
    z-index: 2;
    display: grid;
    grid-template-rows: 0fr;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    transition: grid-template-rows .9s cubic-bezier(.25, .8, .25, 1);
}
.wij-oplossen-box__col .wp-block-stackable-icon-list > ul {
    min-height: 0;
    margin: 0 !important;
    padding: 0 40px !important; /* нижній відступ — через ::after, щоб згорнутий рядок був 0 */
    overflow: hidden;
    opacity: 0;
    transform: translateY(14px) !important;
    transition: opacity .6s ease .15s, transform .9s cubic-bezier(.25, .8, .25, 1) !important;
}
.wij-oplossen-box__col:hover .stk-inner-blocks > .wp-block-stackable-icon-list {
    grid-template-rows: 1fr;
}
.wij-oplossen-box__col:hover .wp-block-stackable-icon-list > ul {
    opacity: 1;
    transform: none !important;
}
.wij-oplossen-box__col .wp-block-stackable-icon-list > ul::after { content: ""; display: block; height: 28px; }
.wij-oplossen-box__col .wp-block-stackable-icon-list li { margin: 0; }
.wij-oplossen-box__col .wp-block-stackable-icon-list li + li { margin-top: 6px; }

/* ── Адаптив (ті самі відступи, що були в main.css) ────────────────── */
@media (max-width: 1100px) {
    .wij-oplossen-box__col .stk-inner-blocks > .wp-block-stackable-heading { padding: 16px 30px 18px; }
    .wij-oplossen-box__col .wp-block-stackable-icon-list > ul { padding: 0 30px !important; }
    .wij-oplossen-box__col .wp-block-stackable-icon-list > ul::after { height: 26px; }
}
@media (max-width: 991px) {
    .wij-oplossen-box__col .stk-inner-blocks > .wp-block-stackable-heading { padding: 14px 20px 16px; }
    .wij-oplossen-box__col .wp-block-stackable-icon-list > ul { padding: 0 20px !important; }
    .wij-oplossen-box__col .wp-block-stackable-icon-list > ul::after { height: 22px; }
}

/* на сенсорних екранах hover немає — список показуємо одразу */
@media (hover: none) {
    .wij-oplossen-box__col .stk-inner-blocks > .wp-block-stackable-icon-list { grid-template-rows: 1fr; }
    .wij-oplossen-box__col .wp-block-stackable-icon-list > ul { opacity: 1; transform: none !important; }
    .wij-oplossen-box__col .wp-block-stackable-image::after { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .wij-oplossen-box__col .stk-inner-blocks > .wp-block-stackable-icon-list,
    .wij-oplossen-box__col .wp-block-stackable-icon-list > ul { transition: none !important; }
}