/* === Переопределения после site.css === */

/* 1) GRID-раскладка для каркаса */
body .layout{
    display: grid !important;
    grid-template-columns: 280px 1fr !important;
    grid-template-rows: auto 1fr !important;
    grid-template-areas:
    "sidebar main"
    "banners main" !important;
    gap: 20px !important;
}
body .sidebar-panel { grid-area: sidebar !important; }
body .main-area     { grid-area: main !important; min-width: 0; }
body .banners-panel { grid-area: banners !important; }

/* Мобильный порядок */
@media (max-width: 960px){
    body .layout{
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto auto !important;
        grid-template-areas:
      "sidebar"
      "main"
      "banners" !important;
    }
}

/* 2) HomeSections: 4 → 2 → 1 и высота */
body .service-grid{
    display: grid !important;
    grid-template-columns: repeat(4, minmax(160px, 1fr)) !important;
    gap: 16px !important;
}
body .service-grid-card{ aspect-ratio: 1 / 1 !important; }
@media (max-width: 1065px){
    body .service-grid{ grid-template-columns: repeat(2, 1fr) !important; }
    body .service-grid-card{ aspect-ratio: 4 / 3 !important; }
}
@media (max-width: 640px){
    body .service-grid{ grid-template-columns: 1fr !important; }
    body .service-grid-card{ aspect-ratio: 16 / 9 !important; }
}

/* 3) Кнопки «передать показания»: 4 → 2 → 1 */
body .send-meters-row{
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 15px !important;
}
@media (max-width: 1065px){ body .send-meters-row{ grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 640px){  body .send-meters-row{ grid-template-columns: 1fr !important; } }