@charset "UTF-8";
/* CSS Document */

/* -------- STRANKA GALERIE --------- */

h1.page-gallery-h1 {
    font-size: 50px;
}
h2.page-gallery-h2 {
    font-size: 30px;
    margin-bottom: 40px;
    padding-left: 10px;
}

/* Kontejner stránky */
.gallery-wrapper {
    max-width: 1500px;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
}

/* Masonry layout – základ (desktop) */
.gallery-masonry {
    column-count: 3;
    column-gap: 16px;              /* vodorovná mezera mezi sloupci */
}

/* ⚙️ Responzivita – zmenšujeme počet sloupců */
@media (max-width: 1200px) {
    .gallery-masonry {
        column-count: 2;
    }
}

@media (max-width: 768px) {
    .gallery-masonry {
        column-count: 1;
    }
}

/* Kartička */
.gallery-item {
    display: inline-block;
    width: 100%;
    margin: 0 0 16px;              /* svislá mezera mezi kartičkami */

    /* důležité pro masonry, aby se kartička nerozsekala mezi sloupce */
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;

    box-sizing: border-box;
    background: #f2f2f2;
    border-radius: 4px;            /* menší, decentní zaoblení */
    padding: 7px;                  /* vnitřní rámeček 7px */
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    overflow: hidden;

    /* hover animace */
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.gallery-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 14px rgba(0,0,0,0.12);
}


/* Vnitřní blok – reset marginu + jemné zaoblení */
.gallery-item > * {
    background: #ffffff;
    border-radius: 3px;            /* ještě jemnější zaoblení uvnitř */
    overflow: hidden;
    margin: 0;                     /* DŮLEŽITÉ: žádné vlastní mezery navíc */
    display: block;                /* jistota, že se to chová jako blok */
    text-decoration: none;         /* žádné podtržení u <a> */
}

/* Reset marginu pro typické WP elementy uvnitř */
.gallery-item figure,
.gallery-item p {
    margin: 0;
}

/* Obsah uvnitř – obrázky, videa, iframe */
.gallery-item img,
.gallery-item video,
.gallery-item iframe,
.gallery-item .gallery-video {
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
    border-radius: 3px;
    box-sizing: border-box;
    border: none;                  /* žádný extra border navíc */
}


/* ------ BANNER iframe BGN ------------- */

/* Obal pro responsivní banner */
.html-banner-box {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 1080 / 1920 = 0.5625 → 56.25% */
    overflow: hidden;
    border-radius: 8px; /* volitelné */
}

/* Iframe zabírá celou plochu obalu */
.html-banner-box iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    transform-origin: top left;
}
/* ------ BANNER iframe END---------- */

/* ------ LIGHTBOX overlay BGN --------- */

.lightbox-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    display: none;
    justify-content: center;
    align-items: center;
    padding: 40px;
    z-index: 9999;
}

.lightbox-overlay.is-visible {
    display: flex;
}

.lightbox-content {
    position: relative;
    max-width: 90%;
    max-height: 90%;
}

.lightbox-inner img,
.lightbox-inner video,
.lightbox-inner iframe {
    max-width: 100%;
    max-height: 80vh;
    border-radius: 10px;
    z-index: 1;
}

.lightbox-close {
    position: absolute;
    right: -10px;
    top: -10px;
    width: 40px;
    height: 40px;
    font-size: 32px;
    line-height: 40px;
    cursor: pointer;
    background: white;
    border-radius: 50%;
    border: none;
    z-index: 2;
}

.lightbox-caption {
    text-align: center;
    margin-top: 15px;
    color: white;
}

/* ------ LIGHTBOX overlay END ---------- */