/* ==========================================================================
   ROERICH PEAK ARCHITECTURE - UNIFIED CLIMBING GRID
   File: static/css/components/grid.css
   ========================================================================== */

/* 1. ДЕСКТОП (3 колонки с асимметричным сдвигом) */
.roerich-climbing-grid {
    margin-top:4rem;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 3.5rem 2rem;
    align-items: start;
}

.roerich-climbing-grid > :nth-child(3n+1) { grid-column: span 4; }
.roerich-climbing-grid > :nth-child(3n+2) { grid-column: span 4; margin-top: 2.5rem; }
.roerich-climbing-grid > :nth-child(3n+3) { grid-column: span 4; margin-top: -1.5rem; }


/* 2. ПЛАНШЕТЫ (До 992px) — 2 ровные колонки */
@media (max-width: 992px) {
    .roerich-climbing-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem 1.25rem;
    }

    .roerich-climbing-grid > * {
        grid-column: span 1 !important;
        margin-top: 0 !important;
    }
}


/* 3. МОБИЛЬНЫЕ (До 640px) — Режим по умолчанию: 1 колонка */
@media (max-width: 640px) {
    .roerich-climbing-grid {
        display: flex;
        flex-direction: column;
        gap: 1.75rem; /* Вертикальный зазор между карточками в 1 ряд */
        width: 100%;
    }

    .roerich-climbing-grid > * {
        width: 100% !important;
        margin-top: 0 !important;
        box-sizing: border-box;
    }
}


/* 4. ПЕРЕКЛЮЧАТЕЛЬ 1 / 2 В РЯД НА МОБИЛЬНЫХ */
.roerich-grid-view-toggle {
    display: none;
}

@media (max-width: 640px) {
    .roerich-grid-view-toggle {

        display: inline-flex;
        align-items: center;
        background: rgba(0, 80, 136, 0.06);
        border: 1px solid rgba(0, 80, 136, 0.12);
        padding: 3px;
        border-radius: 50px;
        gap: 2px;
    }

    .roerich-grid-view-toggle .grid-toggle-btn {
        min-height:34px;
        background: transparent;
        border: none;
        color: var(--color-roerich-ultramarine);
        padding: 0.25rem 0.5rem; /* 🔥 Уменьшили отступы */
        border-radius: 50px;
        font-family: var(--font-utility);
        font-size: 0.75rem;
        font-weight: 800;
        display: flex;
        align-items: center;
        gap: 0.3rem;
        cursor: pointer;
        transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
        opacity: 0.6;
    }

    .roerich-grid-view-toggle .grid-toggle-btn.active {
        background: var(--color-snow-summit);
        color: var(--color-roerich-ultramarine);
        opacity: 1;
        box-shadow: var(--elevation-layer-1);
    }

    .roerich-climbing-grid.cols-mobile-2 {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        column-gap: 1.25rem !important; /* Увеличенный горизонтальный зазор */
        row-gap: 1.75rem !important;    /* Увеличенный вертикальный зазор (чтобы карточки не прилипали) */
    }

    .roerich-climbing-grid.cols-mobile-2 > * {
        width: 100% !important;
    }
}