/* ==========================================
   GRID SYSTEM (v1 LOCKED - CLEAN)
========================================== */

/* Базов клас за всяка решетка */
.grid {
    display: grid; /* Активира Grid Layout */
    gap: 1.5rem; /* Стандартно разстояние от 24px между всички елементи */
}

/* ================================
   GENERIC LAYOUTS - Общи подредби
=============================== */

/* Решетка 2 колони с лек акцент върху лявата (за Hero секции) */
.grid-2 {
    grid-template-columns: 1.2fr 1fr;
}

/* Две напълно еднакви колони (50/50) */
.grid-2-equal {
    grid-template-columns: repeat(2, 1fr);
}

/* ================================
   CARD GRIDS - Решетки за карти
================================ */

/* Решетка с 4 малки колони (за картини или малки обекти) */
.grid-cards-sm {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

/* Решетка с 3 средни колони (за планове или табла с инструменти) */
.grid-cards-md {
    grid-template-columns: repeat(3, 1fr);
}

/* Решетка с 2 големи колони (за акцентирани секции) */
.grid-cards-lg {
    grid-template-columns: repeat(2, 1fr);
}

.grid-exhibitions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    justify-content: start;
    gap: 1.2rem;
    margin-bottom: 2.5rem;
}



/* ================================
   RESPONSIVE - Адаптивност
================================ */


/* За големи таблети и лаптопи (до 1200px) */
@media (max-width: 1200px) {
    .grid-cards-sm {
        grid-template-columns: repeat(3, 1fr); /* 4 стават на 3 колони */
    }

    .grid-cards-md {
        grid-template-columns: repeat(2, 1fr); /* 3 стават на 2 колони */
    }

    .grid-2 {
        grid-template-columns: 1fr; /* Hero секцията става на 1 колона */
    }
}

/* За малки таблети (до 900px) */
@media (max-width: 900px) {
    .grid-cards-sm {
        grid-template-columns: repeat(2, 1fr); /* Малките карти стават на 2 колони */
    }
}

/* За мобилни телефони (до 600px) */
@media (max-width: 600px) {
    /* Всички типове решетки стават на 1 единствена колона */
    .grid-cards-sm,
    .grid-cards-md,
    .grid-cards-lg {
        grid-template-columns: 1fr;
    }
}