/* Base wrapper - useful for targeting specific carousels if needed */
.husky-greed-afisha-wrapper {
    width: 100%;
    margin-bottom: 20px; /* Example spacing */
}

.afisha-carousel-container {
    width: 100%;
    overflow: hidden;
    position: relative; /* For positioning controls */
}

.afisha-carousel {
    display: flex;
    height: 400px; /* Fixed height for calculations */
    overflow-x: hidden; /* Hide scrollbar, JS will handle scroll */
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth; /* Smooth scrolling via JS */
    margin: 0;
    padding: 0;
    list-style: none;
}

.afisha-carousel-item {
    flex-shrink: 0; /* Prevent item from shrinking */
    height: 100%; /* Fill the container height */
    /* width is set inline via PHP */
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    margin-right: 20px;
    border: 1px solid #eee;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    background-color: #fff; /* White background for the item */
    overflow: hidden;
}
.afisha-carousel-item:last-child {
    margin-right: 0;
}

/* Styles for the link wrapping the image */
.afisha-carousel-image-link {
    display: block; /* Ensure it takes up space */
    height: 70%; /* Adjust percentage for image area */
    width: 100%;
    text-decoration: none; /* Remove underline */
    position: relative; /* Optional: for potential overlays */
    border-top-left-radius: 8px; /* Match item radius */
    border-top-right-radius: 8px; /* Match item radius */
    overflow: hidden; /* Ensure background image respects radius */
}

.afisha-carousel-image {
    height: 100%; /* Fill the link wrapper */
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    box-sizing: border-box;
    background-color: #e0e0e0; /* Placeholder background */
    transition: transform 0.3s ease; /* Optional: zoom effect on hover */
}

/* Optional: Zoom effect on image hover */
.afisha-carousel-image-link:hover .afisha-carousel-image {
    transform: scale(1.05);
}

/* Style for items without thumbnails */
.afisha-carousel-item--no-thumb .afisha-carousel-image-link {
    /* Styles for placeholder */
    background-color: #f0f0f0;
}
.afisha-carousel-item--no-thumb .afisha-carousel-image {
    background-image: none; /* Ensure no background image is set */
    /* Maybe add an icon here using ::before or another method */
}

/* Wrapper for title and meta */
.afisha-carousel-item-content-wrapper {
    /* background-color: #fff; -- Moved background to item */
    height: 30%; /* Adjust percentage for content area */
    width: 100%;
    display: flex;
    flex-direction: column; /* Stack title and meta vertically */
    justify-content: center; /* Vertically center the content block */
    align-items: flex-start; /* Left-align the content block */
    padding: 10px 15px; /* Add padding */
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    box-sizing: border-box;
    border-top: 1px solid #eee;
}

.afisha-carousel-item-title {
    font-size: 17px; /* Slightly larger */
    line-height: 1.3;
    margin: 0 0 5px 0; /* Add margin below title */
    text-align: left; /* Align title text left */
    box-sizing: border-box;
    /* Limit text lines */
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Show max 2 lines */
    -webkit-box-orient: vertical;
    width: 100%; /* Ensure it takes full width for alignment */
}

.afisha-carousel-item-title a {
    text-decoration: none;
    color: #333;
    box-sizing: border-box;
}
.afisha-carousel-item-title a:hover {
    text-decoration: underline;
    color: #000;
}

/* Meta information (date, category) */
.afisha-carousel-item-meta {
    font-size: 13px; /* Smaller font size */
    color: #666; /* Grey color */
    line-height: 1.4;
    width: 100%; /* Ensure it takes full width */
    text-align: left; /* Ensure text aligns left */
    overflow: hidden; /* Prevent overflow */
    white-space: nowrap; /* Keep meta on one line */
    text-overflow: ellipsis; /* Add ellipsis if it overflows */
}

.afisha-item-date {
    /* Specific styles for date if needed */
}

.afisha-item-separator {
    margin: 0 5px; /* Space around separator */
}

.afisha-item-category {
    color: #555; /* Slightly darker than meta text */
    text-decoration: none;
}

.afisha-item-category:hover {
    color: #000;
    text-decoration: underline;
}


/* Hide scrollbar */
.afisha-carousel::-webkit-scrollbar { display: none; }
.afisha-carousel { -ms-overflow-style: none; scrollbar-width: none; }

/* Control buttons */
.afisha-carousel-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 45px;
    height: 45px;
    background-color: rgba(0, 0, 0, 0.6);
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 24px;
    line-height: 45px;
    text-align: center;
    cursor: pointer;
    z-index: 10;
    opacity: 0.7;
    transition: opacity 0.2s ease-in-out, background-color 0.2s ease-in-out;
    padding: 0;
}
.afisha-carousel-control:hover { opacity: 1; background-color: rgba(0, 0, 0, 0.8); }
.afisha-carousel-control.prev { left: 15px; }
.afisha-carousel-control.next { right: 15px; }

/* --- Стилизация Тега в карточке Афиши --- */

/* Убираем стандартный цвет ссылки и подчеркивание для тега */
.afisha-carousel-item-meta a.afisha-item-tag { /* Делаем селектор точнее */
    text-decoration: none;
    color: inherit; /* Наследуем цвет от родителя по умолчанию */
}

/* Основные стили для тега */
.afisha-item-tag {
    display: inline-block; /* Чтобы применились padding и background */
    background-color: rgba(220, 53, 69, 0.7); /* Красный цвет (DC3545) с 70% прозрачностью */
    color: #ffffff !important; /* Белый цвет текста для контраста */
    padding: 3px 8px; /* Небольшие отступы внутри прямоугольника (верх/низ право/лево) */
    border-radius: 4px; /* Скругление углов */
    font-size: 12px; /* Можно сделать шрифт чуть меньше */
    line-height: 1.2; /* Выравнивание текста по вертикали */
    margin-left: 5px; /* Небольшой отступ слева от разделителя */
    vertical-align: middle; /* Выравнивание по вертикали с датой/разделителем */
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; /* Плавный переход для hover-эффекта */
}

/* Эффект при наведении мыши */
.afisha-item-tag:hover {
    background-color: rgba(220, 53, 69, 0.9); /* Делаем фон менее прозрачным (90%) */
    color: #ffffff !important; /* Убедимся, что текст остается белым */
    text-decoration: none; /* Убедимся, что подчеркивание не появляется */
}

/* Опционально: можно немного изменить стиль разделителя, если нужно */
/*
.afisha-item-separator {
    margin: 0 3px 0 5px;  Adjust spacing if needed
    vertical-align: middle;
}
*/

/* Опционально: можно немного изменить стиль даты, если нужно */
/*
.afisha-item-date {
    vertical-align: middle;
}
*/

/* Inline Meta Styles */
.afisha-carousel-item-meta.inline-meta {
    display: flex; /* Или inline-flex, в зависимости от желаемого поведения */
    align-items: center; /* Выравнивание по вертикали */
}

.afisha-carousel-item-meta.inline-meta .afisha-item-date,
.afisha-carousel-item-meta.inline-meta .post-views-inline,
.afisha-carousel-item-meta.inline-meta .afisha-item-separator {
    display: inline-block; /* Важно, чтобы элементы отображались в строку */
    vertical-align: middle; /* Выравнивание по вертикали */
    margin-right: 5px; /* Небольшой отступ между элементами */
}

.afisha-carousel-item-meta.inline-meta .afisha-item-tag {
    margin-left: 5px; /* Отступ слева от тега */
}