/* ==========================================================================
   ФИНАЛЬНЫЙ КОД ДЛЯ КАРТОЧЕК ПРАЗДНИКОВ (JOOMLA 3 + BOOTSTRAP)
   ========================================================================== */

/* 1. ВНЕШНИЙ КОНТЕЙНЕР (КОЛОНКА) */
.katitem {
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: block !important;
    height: auto !important;
    overflow: visible !important; /* Открываем для отображения теней */
    padding: 0 !important;
    margin-bottom: 25px !important;
}

/* 2. ВНУТРЕННИЙ КОНТЕЙНЕР (САМА БЕЛАЯ КАРТОЧКА) */
.katitem .insideitem2 {
    background: #ffffff !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    
    height: 405px !important; /* Немного увеличили высоту под увеличенный нижний отступ */
    padding: 0 !important;
    
    /* Создаем зазоры между карточками и подушку для тени снизу */
    margin-left: 12px !important;   
    margin-right: 12px !important;  
    margin-bottom: 15px !important; 
    
    /* Твоя кастомная тень */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), 
                box-shadow 0.3s ease !important;
}

/* Эффект наведения на карточку */
.katitem:hover .insideitem2 {
    transform: translateY(-5px) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12) !important;
}

/* 3. ИЗОБРАЖЕНИЕ */
.katitem .katitemimage {
    position: relative !important;
    overflow: hidden !important;
    background: #f5f5f5 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    width: 100% !important;
}

.katitem .katitemimage img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.5s ease !important;
}

.katitem:hover .katitemimage img {
    transform: scale(1.03) !important;
}

/* 4. ТЕКСТОВЫЙ БЛОК */
.katitem .katitemtext {
    padding: 18px 18px 30px !important; /* Увеличили нижний отступ до 30px для воздушности */
    background: transparent !important;
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
}

/* 5. ЗАГОЛОВОК КАРТОЧКИ */
.katitem .itemtitle {
    margin-top: 0 !important;
    margin-bottom: 12px !important;
    min-height: 50px !important; 
    display: flex !important;
    align-items: flex-start !important;
}

.katitem .itemtitle a {
    font-size: 19px !important;
    line-height: 1.3 !important;
    font-weight: 500 !important;
    color: #125099 !important; /* Базовый цвет заголовка */
    text-decoration: none !important;
    display: block !important;
    transition: color 0.2s ease !important;
}

.katitem .itemtitle a:hover {
    color: #00A0E3 !important; /* Цвет заголовка при ховере */
}

/* 6. ОПИСАНИЕ С ПЛАВНЫМ ЗАТУХАНИЕМ */
.katitem .plitkadescription {
    color: #666666 !important;
    margin-bottom: 0 !important;
    position: relative !important;
    
    /* Срезаем строго по высоте 3 строк */
    max-height: 63px !important;
    overflow: hidden !important;
}

/* Эффект градиентного затухания третьей строчки (менее явный) */
.katitem .plitkadescription::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 22px !important; 
    /* Плавный переход: читаемость третьей строки стала лучше */
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.85) 100%) !important;
    pointer-events: none !important;
}

/* 7. ИЗБРАННЫЕ МАТЕРИАЛЫ */
.katitem.coloritem .insideitem2 {
    border: 2px solid #125099 !important;
    box-shadow: 0 4px 20px rgba(18, 80, 153, 0.12) !important;
}
.katitem.coloritem .plitkadescription::after {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.85) 100%) !important;
}

/* ==========================================================================
   АДАПТИВНОСТЬ ПОД МОБИЛЬНЫЕ УСТРОЙСТВА
   ========================================================================== */

@media (max-width: 991px) {
    .katitem .insideitem2 {
        height: 385px !important;
    }
    .katitem .katitemtext { padding: 16px 16px 24px !important; }
    .katitem .itemtitle { min-height: 46px !important; }
    .katitem .itemtitle a { font-size: 17px !important; }
}

@media (max-width: 767px) {
    .katitem {
        margin-bottom: 25px !important;
    }
    .katitem .insideitem2 {
        height: auto !important; /* На телефонах карточки идут в 1 колонку, автовысота ок */
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    /* Отключаем сдвиг вверх на тач-экранах для избежания багов с двойным кликом */
    .katitem:hover .insideitem2 { 
        transform: none !important; 
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
    }
    .katitem:hover .katitemimage img { 
        transform: none !important; 
    }
}

/* ==========================================================================
   КЛИКАБЕЛЬНОСТЬ ВСЕЙ ПЛИТКИ ЧЕРЕЗ CSS (БЕЗ ПРАВКИ HTML)
   ========================================================================== */

/* 1. Задаем контекст позиционирования для белой карточки */
.katitem .insideitem2 {
    position: relative !important;
}

/* 2. Растягиваем ссылку из заголовка на всю площадь карточки */
.katitem .itemtitle a::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 10 !important; /* Накрывает собой всю карточку, делая ее кликабельной */
    cursor: pointer !important;
}

/* 3. Опционально: если внутри описания есть другие ссылки, 
   поднимаем их выше, чтобы они оставались кликабельными отдельно */
.katitem .plitkadescription a,
.katitem .countimages {
    position: relative !important;
    z-index: 11 !important;
}