/* ==========================================================================
   Custom CSS for przyjaciele4lap.pl
   Loaded automatically by Helix3 (plugins/system/helix3/core/helix3.php:272).
   Not part of the Rhino package, so template updates should leave it alone.
   ========================================================================== */


/* --------------------------------------------------------------------------
   SP Page Builder "Gallery" addon — fixed number of thumbnails per row
   --------------------------------------------------------------------------
   Why this is needed:

   .sppb-gallery is display:flex / flex-wrap:wrap, and each <li> is sized by
   its content. The image carries .sppb-img-responsive, which SPPB defines as
   { display:block; max-width:100%; height:auto }. That max-width is relative
   to the <li>, so the image cannot grow past whatever width the flex layout
   allots it — around 200px in Rhino's content column.

   The addon's Height value has no equivalent cap, so raising Width past that
   point stretches the image vertically instead of widening it. That is the
   "elongated thumbnails" effect.

   Fix: give the <li> an explicit percentage width and let the image fill it.

   Usage: put one of these in the addon's Advanced -> CSS Class field:
     gallery-2up  gallery-3up  gallery-4up  gallery-5up
   Optionally add  gallery-tiles  for uniform, cropped tiles.

   Also set the addon's "Item Gap" to 0 — it renders as margin on the <li>,
   which sits outside the percentage width and would break the row.
   Leave "Height" empty.
   -------------------------------------------------------------------------- */

.gallery-2up .sppb-gallery,
.gallery-3up .sppb-gallery,
.gallery-4up .sppb-gallery,
.gallery-5up .sppb-gallery {
    margin: 0 !important;
}

.gallery-2up .sppb-gallery > li { width: 50%; }
.gallery-3up .sppb-gallery > li { width: 33.3333%; }
.gallery-4up .sppb-gallery > li { width: 25%; }
.gallery-5up .sppb-gallery > li { width: 20%; }

/* padding rather than margin: the <li> is already box-sizing:border-box,
   so the gutter is absorbed inside the percentage instead of overflowing it */
.gallery-2up .sppb-gallery > li,
.gallery-3up .sppb-gallery > li,
.gallery-4up .sppb-gallery > li,
.gallery-5up .sppb-gallery > li {
    margin: 0 !important;
    padding: 6px;
    float: none;
}

.gallery-2up .sppb-gallery img,
.gallery-3up .sppb-gallery img,
.gallery-4up .sppb-gallery img,
.gallery-5up .sppb-gallery img {
    width: 100% !important;
    height: auto !important;
    max-width: 100%;
    display: block;
}

/* Optional: uniform tiles. Crops to fill rather than distorting, which is
   what you want when the source photos have mixed aspect ratios. */
.gallery-tiles .sppb-gallery img {
    height: 200px !important;
    object-fit: cover;
}

/* Fewer columns on smaller screens so thumbnails stay usable */
@media (max-width: 991px) {
    .gallery-4up .sppb-gallery > li,
    .gallery-5up .sppb-gallery > li { width: 33.3333%; }
}

@media (max-width: 767px) {
    .gallery-3up .sppb-gallery > li,
    .gallery-4up .sppb-gallery > li,
    .gallery-5up .sppb-gallery > li { width: 50%; }
}