﻿/* Kontener główny siatki (widoczny na screenie jako div class="umb-block-grid") */
.umb-block-grid {
    display: grid !important;
    /* Pobiera wartość 12 ze stylu inline wstrzykniętego przez Umbraco */
    grid-template-columns: repeat(var(--umb-block-grid--grid-columns, 12), minmax(0, 1fr)) !important;
    column-gap: 20px; /* Odstęp między przyciskami */
    row-gap: 20px; /* Odstęp między wierszami */
    width: 100%;
}

/* Kontener wewnątrz (widoczny na screenie jako div class="umb-block-grid__layout-container") */
.umb-block-grid__layout-container {
    display: grid !important;
    grid-template-columns: subgrid; /* Powoduje dziedziczenie 12 kolumn */
    grid-column: 1 / -1;
    column-gap: 20px;
    row-gap: 20px;
}

/* Kontener wygenerowany przez Umbraco (kolumna) */
.umb-block-grid__layout-item {
    grid-column: span var(--umb-block-grid--item-column-span, 1) / span var(--umb-block-grid--item-column-span, 1) !important;
    /* DODAJEMY TO: Sprawi, że kontener kolumny nie będzie zmuszał przycisku do rozciągania się */
    display: flex !important;
    flex-direction: column;
    align-items: flex-start; /* Przycisk wyrówna się do lewej i przyjmie automatyczną szerokość */
}

.umb-block-grid__layout-item .auto-width-button {
    width: auto !important;
    max-width: 100% !important;
    display: inline-block !important;
    box-sizing: border-box;
}
