/* excursion-image.css - Стили для картинки экскурсии на доске объявлений: обёртка, изображение, заглушка с логотипом, бейдж цены, адаптив | экскурсия, картинка, доска объявлений, изображение, заглушка, логотип, цена, бейдж, адаптив, дизайн */

/**
 * excursion-image.css - Стили для картинки экскурсии на доске объявлений
 * 
 * 📌 НАЗНАЧЕНИЕ:
 * Оформляет блок с изображением экскурсии на карточках объявлений на доске объявлений
 * (каталог туристов/гидов). Включает стили для самой картинки, заглушки с логотипом
 * и городом, а также бейджа с ценой в правом нижнем углу.
 * 
 * 🔧 ОСНОВНЫЕ КОМПОНЕНТЫ:
 * - .excursion-image-wrapper – контейнер изображения (фиксированная высота, скрытие переполнения)
 * - .excursion-card-image – само изображение (object-fit: cover)
 * - .excursion-placeholder – заглушка при отсутствии картинки: градиентный фон, логотип, название города, подсказка
 * - .excursion-price-badge – бейдж с ценой поверх изображения (position: absolute, нижний правый угол)
 * - Адаптивность: уменьшение высоты и размеров на мобильных устройствах (768px, 480px)
 * 
 * ⚠️ ОСОБЕННОСТИ:
 * - Использует позиционирование (position: relative/absolute) для наложения бейджа поверх картинки
 * - Заглушка с градиентом и логотипом (логотип – отдельный файл, передаваемый через img src)
 * - Бейдж цены с полупрозрачным фоном и блюром (backdrop-filter)
 * - Адаптивные высоты и размеры шрифтов для мобильных устройств
 * - Сохранение пропорций изображения через object-fit: cover
 * 
 * 📁 СВЯЗАННЫЕ ФАЙЛЫ:
 * - Доска объявлений (главная страница каталога): 01_main_ads.php или аналоги
 * - Карточки объявлений (ad-card) в основном CSS (ad-list.css)
 * - Файлы с иконкой/логотипом для заглушки (например, logo-placeholder.svg)
 * 
 * 🏷️ КЛЮЧЕВЫЕ СЛОВА ДЛЯ ПОИСКА:
 * экскурсия, картинка, доска объявлений, изображение, заглушка, логотип, цена,
 * бейдж, адаптив, дизайн, обложка, placeholder, price-badge, card-image
 */

.excursion-image-wrapper {
    width: 100%;
    height: 180px;
    overflow: hidden;
    border-radius: 10px;
    margin: 10px 0 12px;
    background: #e8edf5;
    position: relative;
    flex-shrink: 0;
}

.excursion-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ===== ЗАГЛУШКА С ЛОГОТИПОМ ===== */
.excursion-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1f6392 0%, #0e4a6e 100%);
    color: white;
    padding: 16px;
    text-align: center;
}

.excursion-placeholder img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    margin-bottom: 8px;
    opacity: 0.9;
}

.excursion-placeholder .placeholder-city {
    font-size: 0.95rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

.excursion-placeholder .placeholder-hint {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 4px;
}

/* ===== БЕЙДЖ С ЦЕНОЙ (ПРАВЫЙ НИЖНИЙ УГОЛ) ===== */
.excursion-price-badge {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.3px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 2;
    max-width: 80%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===== АДАПТИВНОСТЬ ===== */
@media (max-width: 768px) {
    .excursion-image-wrapper {
        height: 150px;
    }
    .excursion-placeholder img {
        width: 50px;
        height: 50px;
    }
    .excursion-placeholder .placeholder-city {
        font-size: 0.85rem;
    }
    .excursion-price-badge {
        font-size: 0.75rem;
        padding: 3px 10px;
    }
}

@media (max-width: 480px) {
    .excursion-image-wrapper {
        height: 130px;
    }
    .excursion-placeholder img {
        width: 40px;
        height: 40px;
    }
    .excursion-placeholder .placeholder-city {
        font-size: 0.8rem;
    }
    .excursion-placeholder .placeholder-hint {
        font-size: 0.6rem;
    }
    .excursion-price-badge {
        font-size: 0.7rem;
        padding: 3px 8px;
        bottom: 8px;
        right: 8px;
    }
}