/* Použití vlastního fontu pro celý dokument */
body {
    font-family: 'Montserrat', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/*
  Definice animace pro postupné zobrazení prvků při scrollu.
*/
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/*
  Styly pro "Masonry" mřížku galerie.
  Používáme CSS Columns pro dynamické a responzivní rozložení.
*/
.gallery-grid {
    column-count: 3; /* Počet sloupců pro velké obrazovky */
    column-gap: 1.5rem; /* Mezera mezi sloupci */
}

.gallery-item {
    margin-bottom: 1.5rem; /* Vertikální mezera mezi obrázky */
    display: inline-block; /* Nutné pro správné fungování s column-count */
    width: 100%;
    overflow: hidden;
    border-radius: 2px; /* Jemné zaoblení rohů */
}

.gallery-img {
    width: 100%;
    height: auto;
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Jemný efekt zvětšení při najetí myší */
.gallery-img:hover {
    transform: scale(1.03);
}

/*
  Responzivní úpravy pro galerii.
  Měníme počet sloupců podle šířky obrazovky.
*/
@media (max-width: 1024px) {
  .gallery-grid {
    column-count: 2;
  }
}

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

  /* Na mobilu zobrazíme jen první 3 fotky v galerii */
  .gallery-grid .gallery-item:nth-child(n+4) {
    display: none;
  }
}


/*
  Styly pro Lightbox (zobrazení obrázku přes celou obrazovku)
*/
#lightbox.flex {
    display: flex;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}