/* ==========================================================================
   ARTWORKS MASONRY — FLEXIBLE SYSTEM (v3 FINAL)
   ========================================================================== */

/* 1. КОНТЕЙНЕР — Отключваме ширината до 1900px за големи екрани */
.container--wide {
    width: 100% !important;
    max-width: 1900px !important; /* Дава свобода на големи резолюции */
    margin: 0 auto !important;
    padding: 0 4% !important;    /* "Луксозен" падинг в краищата */
}

/* 2. ГРИД — Умното разпределяне на колоните */
.artworks-masonry {
    display: grid !important;
    /* Магията: Минимум 340px на карта.
       На твоя Mac ще са 4 колони, на голям монитор автоматично ще станат 5. */
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)) !important;
    grid-auto-flow: dense; /* Запълва дупките автоматично */
    gap: 32px;            /* Увеличено разстояние за по-професионален вид */
    width: 100%;
}

/* 3. КАРТАТА — База (Синхрон с card.css) */
.artworks-masonry .card {
    height: 100%;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    /* Стилът (background, border, shadow) идва директно от card.css */
}

/* 4. МЕДИЯ — Пропорции според ориентацията */
.artworks-masonry .card-media {
    aspect-ratio: auto !important;
    height: auto !important;
    position: relative;
    overflow: hidden;
}

/* --- ВЕРТИКАЛНИ (Portrait) --- */
.card--v {
    grid-row: span 2; /* Заема 2 реда височина */
}
.card--v .card-media {
    aspect-ratio: 3 / 4.5 !important; /* Твоята златна пропорция */
}

/* --- ХОРИЗОНТАЛНИ (Landscape) --- */
.card--h {
    grid-row: span 1; /* Заема 1 ред височина */
}
.card--h .card-media {
    aspect-ratio: 16 / 10 !important; /* Пропорцията, която "подпира" колоната */
}

/* 5. ТЯЛО — Подравняване на съдържанието */
.artworks-masonry .card-body {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Бута мета данните най-долу */
    padding: 1.25rem;               /* Малко повече въздух вътре в картата */
}

/* 6. ИЗОБРАЖЕНИЕ — Пълно запълване */
.artworks-masonry .card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}



/*==================================================================
   ARTWORKS EXHIBITION — SIGNATURE STYLE (FINAL VERSION)
   ========================================================================== */

.card-exhibition {
    position: relative;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.exhibition-media {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    background: var(--card-media-bg);
    overflow: hidden;
}

.exhibition-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

/* Овърлей с плавен градиент за четливост */
.exhibition-overlay {
    position: absolute;
    inset: 0;
    /* По-висок градиент за по-добра четливост на светли снимки */
    background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 50%);
    display: flex;
    align-items: flex-end;
    padding: 1.5rem 1.25rem;
    opacity: 0.92;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

/* Контейнер за подписа */
.exhibition-signature {
    display: flex;
    flex-direction: column; /* Слага ги един под друг за сигурност при дълги текстове */
    align-items: flex-start;
    gap: 4px;
    max-width: 95%;
}

.exhibition-title {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    color: #ffffff;
    margin: 0;
    font-weight: 500;
    line-height: 1.2;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);

    /* 🔥 Справяне с дълги заглавия (ограничава до 2 реда с ...) */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 🔥 Името на артиста - нежен наклонен подпис */
.exhibition-artist {
    font-family: var(--font-sans);
    font-style: italic; /* Наклонът, който искаше */
    font-weight: 300;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: 0.05em;
    text-transform: none; /* Махаме uppercase за по-естествен вид */
}

/* --- Интеракция (Hover) --- */

.card-exhibition:hover {
    transform: translateY(-8px);
}

.card-exhibition:hover .exhibition-image {
    transform: scale(1.04);
}

.card-exhibition:hover .exhibition-overlay {
    opacity: 1;
}

.card-exhibition:hover .exhibition-media {
    box-shadow: var(--card-shadow-hover);
}

/* --- Мобилна достъпност --- */

/* ==========================================================================
   RESPONSIVE — Оптимизация за по-малки екрани
   ========================================================================== */
/* --- 1. ГОЛЕМИ ЛАПТОПИ (под 1550px) --- */
@media (max-width: 1550px) {
    .container--wide {
        padding: 0 3% !important;
    }
    .artworks-masonry {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
        gap: 24px;
    }
}

/* --- 2. ТАБЛЕТИ И МАЛКИ ЛАПТОПИ (под 1024px) --- */
@media (max-width: 1024px) {
    /* Оптимизация на текста върху снимката */
    .exhibition-overlay {
        opacity: 1; /* Винаги видим на тъч устройства */
        padding: 1rem;
    }
    .exhibition-title {
        font-size: 1rem;
    }

    /* Филтрите почват да се свиват */
    .filters-form {
        gap: 1.2rem;
    }
}

/* --- 3. МАЛКИ ТАБЛЕТИ И ГОЛЕМИ ТЕЛЕФОНИ (под 850px) --- */
@media (max-width: 850px) {
    .artworks-masonry {
        grid-template-columns: repeat(2, 1fr) !important; /* Минаваме на 2 колони */
        gap: 16px;
    }

    /* Спираме сложния Masonry, за да е по-прегледно на тясно */
    .card--v, .card--h {
        grid-row: span 1 !important;
    }
    .card--v .card-media, .card--h .card-media {
        aspect-ratio: 1 / 1 !important;
    }
}

/* --- 4. ТЕЛЕФОНИ (под 550px) --- */
@media (max-width: 550px) {
    .artworks-masonry {
        grid-template-columns: 1fr !important; /* Една колона */
    }

    .filters-form {
        flex-direction: column; /* Вертикални филтри */
        align-items: stretch;
    }

    .category-subnav {
        /* Тук е добре да имаш overflow-x: auto, за да се скролват жанровете */
        display: flex;
        overflow-x: auto;
        white-space: nowrap;
        padding-bottom: 10px;
    }
}