/*
 * CLS FIX
 * Skelbimo nuotrauku galerija
 * Laravel 5.2 + Slick
 *
 * Tikslai:
 * - Stabili galerija pries Slick inicializacija
 * - Pirma nuotrauka matoma be JavaScript
 * - Mazesne CLS rizika
 * - Vienodas Mobile ir Desktop veikimas
 */

/* Pagrindine galerija */
.advert__single--gallery {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    margin-bottom: 20px;
    overflow: hidden;
}

/* Nuotraukos */
.advert__single--gallery img {
    display: block;
    width: 100%;
    height: auto;
}

/* Picture elementai */
.advert__single--gallery picture {
    display: block;
}

/*
 * Pries Slick inicializacija
 * Rodoma tik pirma nuotrauka
 */
.advert__single--gallery:not(.slick-initialized) > figure {
    width: 100%;
    aspect-ratio: 4 / 3;
    margin: 0;
}

.advert__single--gallery:not(.slick-initialized)
    > figure:not(:first-child) {
    display: none;
}

/*
 * Po Slick inicializacijos
 * Slick pats valdo skaidriu isdestyma
 */
.advert__single--gallery.slick-initialized .slick-list {
    width: 100%;
}

.advert__single--gallery.slick-initialized .slick-slide {
    margin: 0;
}

/*
 * Miniatiuru proporcijos
 */
.advert__single--thumbs img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 154 / 116;
    object-fit: contain;
}

/*
 * Miniatiuros pries Slick inicializacija
 */
.advert__single--thumbs ul:not(.slick-initialized) {
    display: flex;
    flex-wrap: nowrap;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Rodomos tik pirmos trys miniatiuros */
.advert__single--thumbs ul:not(.slick-initialized)
    > li:nth-child(n+4) {
    display: none;
}

/* Trys miniatiuros vienoje eileje */
.advert__single--thumbs ul:not(.slick-initialized) > li {
    float: none;
    flex: 0 0 33.333333%;
    width: 33.333333%;
    min-width: 0;
}