/* margines strony */
body {
    margin: 0 10px 10px 10px;
}


/* moduł z wyborem języka - ustawiony jako pływający u góry strony */
div.mod-languages {
  position: fixed;
  left: 10px;
  width: 100%;
  margin: 5px;
    
}
div.mod-languages ul {
  padding: 0px;
  list-style: none;
  z-index: 1000;
  background-color: white;
  opacity: 0.9;
}

img {
  margin-right: 8px;
}
/* tytuły artykułów */
div.page-header {
  background: #E9E9E9;
  background: rgba(233, 233, 233, 0.8);
  margin: 0 auto;
    margin-bottom: 0px;
  position: unset;
  z-index: 1;
  padding: 2px;
  margin-bottom: 5px;
  font-size: 15px;
  font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
  font-weight: normal;
  font-style: normal
}

/*wyświetlanie nagłówków newsów*/
.blog-item {
  display: block;
}

div.page-header a {
    text-decoration: none; /* Usuwa podkreślenie z linków tytułów newsów*/
}

/* nagłówki artykułów na stronie gł. i podstronach */
h1 {
  font-size: 20px;
}

h2 {
  font-size: 20px;
}

h3 {
  font-size: 20px;
}



/*rozmiary obrazkow Intro oraz Full Text*/
figure.left.item-image img {
    width: 360px; /* szerokość obrazka */
    height: auto; /* wysokość obrazka */
}

/*strzalka powrotu do gory strony*/
#back-top, 
.back-to-top-link.visible {
    position: fixed;
    right: 10px;
    bottom: 45px;
}

/* pasek na dole strony, z numerami kolejnych stron z tytułami artykółów "<< < 1,2,3... > >>" */
.pagination {
    display: flex;
    flex-wrap: wrap;
}

/* xxxxxxxxxxxxxxxxxxxxxxxxxxx
Zmiana kolejności wyświetlania modułów, zależnie od urządzenia.
*/
.site-grid {
    display: flex;
    flex-wrap: wrap;
}

.grid-child.container-top-a {
    order: -2;
}

/* Na urządzeniach o szerokości do 767px */
@media (max-width: 767px) {
    .grid-child.container-sidebar-left {
        order: -1;
        width: 100%;
    }
    .grid-child.container-component {
        order: 0;
        width: 100%;
    }
}

/* Na ekranach większych niż 767px */
@media (min-width:768px) {
    .grid-child.container-sidebar-left {
        order: 0;
        width: 25%; /* Ustawienie szerokości na 25% dla dużych ekranów */
        max-width: 25%; /* Upewniamy się, że nie przekroczy 25%, nawet jeśli zawartość byłaby większa */
    }
    .grid-child.container-component {
        order: 1;
        width: auto;
        flex: 1; /* Pozwala na dynamiczne dostosowanie reszty dostępnej przestrzeni */
    }
}