/* ========================================================================
   1. GLOBAL LAYOUT — ГЛАВНАЯ СЕТКА СТРАНИЦЫ
   Отвечает за расположение:
   - слева: фильтр
   - по центру: карточки
   - справа: пустой сайдбар (будущий контент / отступ)
   А также за адаптив поведения этой сетки.
========================================================================= */
/* === БАЗОВАЯ СЕТКА (ДЕСКТОП) ============================================
   Страница делится на три колонки:
   1) 280px — блок фильтра
   2) 1fr — контент, растягивается
   3) 280px — пустой правый сайдбар (отступ/будущее содержимое)
--------------------------------------------------------------------------- */
.aqv-layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr) 280px;
    gap: 24px;
    /* расстояние между колонками */
}

/* === ПРАВЫЙ САЙДБАР =====================================================
   Пока пустой, но оставлен специально:
   - для баланса дизайна на широких экранах
   - для будущего контента
--------------------------------------------------------------------------- */
.aqv-sidebar-right {
    /* пока ничего не делаем — просто занимает место */
}

/* === АДАПТИВ: СРЕДНИЕ ЭКРАНЫ (max-width:1200px) =========================
   На таких размерах правый сайдбар скрываем, поэтому сетка
   превращается в две колонки: фильтр + контент.
--------------------------------------------------------------------------- */
@media (max-width:1200px) {
    .aqv-layout {
        grid-template-columns: 280px minmax(0, 1fr);
    }

    .aqv-sidebar-right {
        display: none;
        /* скрываем правый блок */
    }
}

/* === АДАПТИВ: МОБИЛЬНЫЕ ЭКРАНЫ (max-width:960px) ========================
   На мобильных оставляем ТОЛЬКО один столбец:
   фильтр сверху (как панель), карточки ниже.
--------------------------------------------------------------------------- */
@media (max-width:960px) {
    .aqv-layout {
        grid-template-columns: 1fr;
    }
}

/* ========================================================================
   2. PAGINATION — НАВИГАЦИЯ ПО СТРАНИЦАМ АРХИВА
   Сюда относятся:
   - большая кнопка "To page X" под карточками
   - стандартные ссылки пагинации (1, 2, 3…)
   - обёртка всего блока пагинации
========================================================================= */
/* === ОБЩИЙ КОНТЕЙНЕР ПАГИНАЦИИ ==========================================
   Управляет отступами сверху/снизу и выравниванием всего блока.
--------------------------------------------------------------------------- */
.aqv-pagination {
    margin: 40px 0;
    /* расстояние над и под пагинацией */
    text-align: center;
    /* выравнивание всего содержимого по центру */
}

/* === ГЛАВНАЯ КНОПКА "To page X" =========================================
   Крупная кнопка, переход на следующую страницу.
   Появляется только если следующая страница существует.
--------------------------------------------------------------------------- */
.aqv-pagination-main-btn {
    display: inline-block;
    padding: 14px 40px;
    /* удобные поля для большой кнопки */
    border-radius: 12px;
    /* мягкие скругления */
    background: #000;
    /* чёрная кнопка */
    color: #fff;
    /* белый текст */
    text-decoration: none;
    /* без подчёркивания */
    font-weight: 600;
    /* жирный текст */
    margin-bottom: 12px;
    /* отступ перед обычной пагинацией */
    transition: background .25s ease;
}

.aqv-pagination-main-btn:hover,
.aqv-pagination-main-btn:focus {
    background: #222;
    /* лёгкий затемнённый hover */
}

/* === СПИСОК С НОМЕРАМИ СТРАНИЦ ==========================================
   Обычный paginate_links(): <ul><li><a> ... </a></li></ul>
--------------------------------------------------------------------------- */
.aqv-pagination-links ul {
    list-style: none;
    /* убираем маркеры списка */
    padding: 0;
    margin: 0;
    display: inline-flex;
    /* располагаем горизонтально */
    gap: 8px;
    /* расстояние между элементами */
    align-items: center;
}

/* === ЛИЧНЫЕ ЭЛЕМЕНТЫ ПАГИНАЦИИ ==========================================
   Стиль для обычных ссылок и для текущего номера страницы.
--------------------------------------------------------------------------- */
.aqv-pagination-links li a,
.aqv-pagination-links li span {
    display: inline-block;
    min-width: 28px;
    /* чтобы все элементы были ровными */
    padding: 4px 8px;
    border-radius: 12px;
    /* скругления как у основных кнопок */
    text-decoration: none;
}

/* === ТЕКУЩАЯ СТРАНИЦА ===================================================
   Подсвечиваем активный номер страницы (выбор пользователя).
--------------------------------------------------------------------------- */
.aqv-pagination-links li span.current {
    background: #000;
    /* чёрный фон */
    color: #fff;
    /* белый текст */
}

/* ============================================================
   3. GRID (контейнер сетки карточек)
   aq-grid
   — отвечает за количество колонок, отступы и адаптацию сетки
     карточек под разные ширины экрана.
============================================================ */
/* === БАЗОВАЯ СЕТКА (ДЕСКТОП) =================================
   3 колонки карточек, большие промежутки между ними.
   Работает на широких экранах, пока не срабатывают @media.
---------------------------------------------------------------- */
.aq-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    /* 3 равные колонки */
    gap: 32px;
    /* расстояние между карточками */
}

/* === БРЕЙКПОИНТ ДО 1024px =====================================
   При сужении окна до ~планшета пробуем перейти к 2 колонкам.
   ⚠️ ВАЖНО: ниже есть правило до 1200px, которое переопределяет
   это поведение и делает 1 колонку — текущее поведение оставить.
---------------------------------------------------------------- */
@media (max-width:1024px) {
    .aq-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        /* 2 колонки (перекрывается ниже) */
    }
}


/* === МОБИЛЬНЫЙ: УМЕНЬШАЕМ РАССТОЯНИЕ МЕЖДУ КАРТОЧКАМИ =========
   На телефонах делаем сетку более плотной: меньше gap между
   карточками, чтобы они не расползались.
---------------------------------------------------------------- */
@media (max-width:960px) {

    /* уменьшаем расстояние между карточками (было 32px) */
    .aq-grid {
        gap: 10px !important;
    }
}

/* === МОБИЛЬНЫЙ: ОТСТУПЫ ОТ КРАЁВ ЭКРАНА =======================
   Добавляем внутренние отступы слева/справа, чтобы карточки
   не прилипали к самому краю экрана на телефоне.
---------------------------------------------------------------- */
@media (max-width:960px) {

    .aq-grid {
        padding-left: 10px !important;
        padding-right: 10px !important;
        box-sizing: border-box;
        /* учитываем padding внутри ширины */
    }
}

/* ============================================================
   4. CARD — BASE DESKTOP VIEW (карточка аквавита)
   aq-card, aq-imgcol, aq-imgpair, aq-bottle, aq-cap, aq-body, aq-meta
   — базовый вид карточек на широких экранах (десктоп):
     отступы, рамки, фото, текст, структура и визуальные элементы.
============================================================ */
/* === ОСНОВНОЙ КОНТЕЙНЕР КАРТОЧКИ (ДЕСКТОП, 4 КОЛОНКИ) =========
   Внутри .aq-card теперь грид из 4 колонок:
   1) узкая слева — под иконки/бейджи (aq-badges)
   2) колонка под фото бутылок (aq-imgcol)
   3) колонка под текст (aq-body)
   4) узкое поле справа — «воздух» / будущий функционал
---------------------------------------------------------------- */
.aq-card {
    display: grid;
    grid-template-columns:
        5px
        /* 1: узкая колонка под иконки */
        120px
        /* 2: колонка для фото */
        minmax(0, 1fr)
        /* 3: колонка для текста */
        5px;
    /* 4: правое небольшое поле */
    gap: 24px;
    /* расстояние между колонками */
    padding: 10px;
    /* внутренние отступы */
    border: 1px solid #ddd;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.07);
    align-items: flex-start;  /* контент прижимается к верху карточки */
        transition: transform 0.3s cubic-bezier(.15,.75,.35,1.25),
                box-shadow 0.3s ease;
    cursor: pointer;
    }

    .aq-card:hover {
    transform: translateY(-3px) scale(1.008); /* ← уменьшили подъём и масштаб */
    box-shadow: 0 8px 18px rgba(0,0,0,0.15);   /* чуть мягче тень */
}

/* ЛЕВАЯ УЗКАЯ КОЛОНКА — ПОД БЕЙДЖИ / ИКОНКИ
   Пока иконок может не быть, но класс зарезервирован.
   Когда добавим <div class="aq-badges">…</div>, он встанет сюда. */
.aq-badges {
    grid-column: 1;
    /* первая колонка грида .aq-card */
    align-self: flex-start;
    /* прижимаем к верху карточки */
    display: flex;
    flex-direction: column;
    gap: 6px;
    /* расстояние между иконками */
}

.aq-badges img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    display: block;
}

/* КОЛОНКА С ФОТО / БУТЫЛКАМИ
   Любой блок с классом .aq-imgcol встанет во вторую колонку
   и аккуратно выровняется по центру. */
.aq-imgcol {
    grid-column: 2;
    /* вторая колонка карточки */
    min-width: 0;
    /* не выталкивает соседние колонки */

    display: flex;
    /* центрируем содержимое внутри колонки */
    justify-content: flex-start;
    /* по горизонтали по центру */
    align-items: center;
    /* по вертикали по центру */
}

/* === ТЕКСТОВАЯ КОЛОНКА (ОБЩЕЕ ВЫРАВНИВАНИЕ) ===================
   Делаем правую колонку вертикальным столбиком:
   сверху — заголовок, ниже — блок мета-данных.
---------------------------------------------------------------- */
.aq-body {
    grid-column: 3 / 5;
    /* третья колонка карточки */
    min-width: 0;
    /* позволяет тексту сжиматься, не ломая сетку */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* контент прижимается к верху карточки */
    gap: 6px;
    /* небольшой вертикальный зазор между блоками */
    align-self: stretch;
   }

/* === ЗАГОЛОВОК КАРТОЧКИ ========================================
   Название аквавита — главный визуальный акцент.
---------------------------------------------------------------- */
.aq-body h3 {
    margin: 2px 0 4px;
    /* меньше отступ сверху, чтобы тайтл был ближе к верху */
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    color: #222;
    font-size: clamp(18px, 2.1vw, 21px);
    line-height: 1.25;
    text-align: left;
}
/* ссылка внутри заголовка — берёт цвет у заголовка */
.aq-body h3 a {
    text-decoration: none;
    color: inherit;
}

.aq-body h3 a:hover,
.aq-body h3 a:focus {
    text-decoration: underline;
}

/* === КОНТЕЙНЕР ДЛЯ ОДНОЙ ИЛИ ДВУХ БУТЫЛОК =====================
   Гибкое расположение: две бутылки выводятся рядом.
---------------------------------------------------------------- */
.aq-imgpair {
    display: flex;
    gap: 16px;
    /* расстояние между бутылками */
    align-items: flex-end;
    /* бутылки прижимаются к низу */
    justify-content: flex-start;
}

/* === ОБЁРТКА ОДНОЙ БУТЫЛКИ =====================================
   Центрирование и вертикальное расположение подписей.
---------------------------------------------------------------- */
.aq-bottle {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* === ИЗОБРАЖЕНИЕ БУТЫЛКИ (ДЕСКТОП) =============================
   Базовые размеры + плавное увеличение при наведении.
---------------------------------------------------------------- */
.aq-bottle img {
    height: 220px;
    /* нормальная высота фото на ПК */
    width: auto;
    object-fit: contain;
    /* сохраняем пропорции */
    cursor: zoom-in;
    /* курсор "увеличить" */
    transition: transform .25s ease;
    /* анимация на hover */
}

.aq-bottle img:hover {
    transform: scale(1.05);
    /* лёгкое увеличение */
}

/* === ПОДПИСЬ ПОД ФОТО ==========================================
   Нейтральный серый текст, небольшой размер.
---------------------------------------------------------------- */
.aq-cap {
    font-size: 16px;
    color: #555;
    margin-top: 10px;
}

/* === МЕТА-ДАННЫЕ ===============================================
   ABV, производитель, локация — компактный, ровный столбик.
---------------------------------------------------------------- */
.aq-meta {
    font-size: 15px;
    line-height: 1.5;
    color: #333;
}

/* Каждая строка мета-блока — плотный аккуратный список */
.aq-meta p {
    margin: 2px 0;
}

/* Усиливаем подписи (ABV, иконки и т.п.) */
.aq-meta strong {
    font-weight: 600;
    color: #111;
}

/* ============================================================
   8. LIGHTBOX (увеличение изображений)
   aq-lightbox, aq-lightbox img, .close
   — отвечает за отображение модального окна,
     затемнение фона и управление увеличенной фотографией.
============================================================ */

/* === ОСНОВНОЙ КОНТЕЙНЕР ЛАЙТБОКСА =============================
   - перекрывает весь экран,
   - затемняет фон,
   - по центру выводит увеличенное изображение.
---------------------------------------------------------------- */
.aq-lightbox {
    position: fixed;
    /* висит поверх всего сайта */
    inset: 0;
    /* занимает весь экран */
    background: rgba(0, 0, 0, .9);
    /* тёмное полупрозрачное затемнение */
    display: none;
    /* скрыт до открытия */
    align-items: center;
    /* центрируем изображение по вертикали */
    justify-content: center;
    /* и по горизонтали */
    z-index: 9999;
    /* поверх всех элементов */
    padding: 20px;
    /* небольшой внутренний отступ */
}

/* Когда лайтбокс открыт */
.aq-lightbox.open {
    display: flex;
}

/* === ИЗОБРАЖЕНИЕ В ЛАЙТБОКСЕ (ДЕСКТОП) =========================
   Ограничения размеров, чтобы картинка всегда влезала в экран.
---------------------------------------------------------------- */
.aq-lightbox img {
    max-width: 92vw;
    /* ограничиваем ширину */
    max-height: 92vh;
    /* и высоту */
    width: auto;
    height: auto;
    object-fit: contain;
    /* не обрезать изображение */
}

/* === КНОПКА ЗАКРЫТИЯ ===========================================
   Массивная кнопка-крестик в правом верхнем углу.
---------------------------------------------------------------- */
.aq-lightbox .close {
    position: absolute;
    top: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: #111;
    /* чёрная кнопка */
    color: #fff;
    /* белый крестик */
    border: 2px solid #fff;
    /* белая окантовка */
    border-radius: 12px;
    /* скругление */
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
    /* лёгкая тень */
    transition: background .25s ease,
        transform .25s ease;
}

/* Наведение на кнопку закрытия */
.aq-lightbox .close:hover {
    background: #333;
    transform: translateY(-2px);
}

/* Доступность: фокусируемая кнопка */
.aq-lightbox .close:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* === МОБИЛЬНАЯ ВЕРСИЯ ЛАЙТБОКСА ===============================
   Делает фото почти на весь экран по высоте.
---------------------------------------------------------------- */
@media (max-width:1200px) {

    .aq-lightbox {
        padding: 0 !important;
        /* фото максимально крупное */
    }

    .aq-lightbox img {
        height: 96vh !important;
        /* почти весь экран */
        width: auto !important;
        max-width: 98vw !important;
        /* слегка ограничиваем по ширине */
        object-fit: contain !important;
    }

    .aq-lightbox .close {
        top: 10px !important;
        right: 10px !important;
        font-size: 22px !important;
    }
}

/* === ДЕСКТОП: СТАБИЛЬНЫЕ РАЗМЕРЫ ИЗОБРАЖЕНИЯ ==================
   Для больших экранов задаём более точные ограничения.
---------------------------------------------------------------- */
@media (min-width:1201px) {
    .aq-lightbox {
        padding: 0 24px;
    }

    .aq-lightbox img {
        height: 82vh !important;
        max-height: 82vh !important;
        width: auto !important;
        max-width: 72vw !important;
        object-fit: contain !important;
    }
}



/* ============================================================
   11. MISC (прочее)
   body.aq-no-scroll, .aq-card--focus
   — сюда входят небольшие служебные стили, не подходящие
     ни к одной из больших секций.
     1) блокировка прокрутки фона при открытом лайтбоксе
     2) подсветка карточки после возврата из увеличения
============================================================ */

/* ——— Блокировка прокрутки страницы ————————————————
   Когда открыт лайтбокс, мы добавляем класc .aq-no-scroll к <body>.
   Это предотвращает прокручивание в фоне. */
body.aq-no-scroll {
    overflow: hidden;
}

/* ——— Подсветка карточки после закрытия лайтбокса ————————
   Используется, когда пользователь увеличил фото, закрыл его
   и возвращается в точку списка — нужная карточка подсвечивается
   мягкой жёлтой рамкой на короткое время. */
.aq-card--focus {
    outline: 3px solid #ffd34d;
    /* жёлтая внешняя рамка */
    outline-offset: 2px;
    /* небольшой отступ рамки */
    transition: outline-color .8s ease;
    /* плавное исчезновение */
}

/* ============================================================
   FLAGS — размер и выравнивание флажков в карточке
   ============================================================ */

/* Строчка с локацией + флаг */
.aquavit-location {
    display: flex;
    align-items: center;
    gap: 4px;              /* расстояние между флагом и текстом */
    font-size: 0.95rem;
}

/* Обёртка под флаг */
.aquavit-location .aquavit-flag {
    display: inline-flex;
    align-items: center;
}

/* Само изображение флага */
.aquavit-location .aq-flag {
    width: 24px;           /* ← размер флажка на десктопе */
    height: auto;
    display: block;
    border-radius: 3px;
    vertical-align: middle;
}

/* ============================================
   Нижняя строка с ABV и объёмом
   ============================================ */

/* Блок, который прижимается к низу текстовой колонки */
.aq-card-bottom-meta {
    margin-top: auto;
    /* толкает блок к низу .aq-body */
    padding-top: 6px;
}

/* Строка вида: 40% | 750 ml */
.aq-card-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    /* небольшой зазор */
    font-size: 1.08rem;
    /* чуть крупнее обычного текста */
    font-weight: 600;
    /* делает надпись «крепкой» */
    color: #222;
}

.aq-card-meta-row .meta-item {
    position: relative;
}

/* Серый разделитель | между элементами */
.aq-card-meta-row .meta-item+.meta-item::before {
    content: "|";
    margin: 0 6px 0 2px;
    /* отступы вокруг разделителя */
    color: #bbb;
    /* мягкий серый, чтобы не кричал */
    font-weight: 400;
}
.aq-card-meta-row .aq-volume-separator {
    margin: 0 6px 0 2px;  /* те же отступы, что у | */
    color: #bbb;          /* тот же мягкий серый */
    font-weight: 400;     /* потоньше, чем основной текст */
}

.aq-body,
.aq-card-bottom-meta {
  cursor: pointer;
}
/* Две и более бутылки: прижать влево */
@media (min-width: 961px) {
    .aq-imgcol:has(.aq-imgpair .aq-bottle:nth-child(2)) {
        justify-content: flex-start !important;
    }
}