.fg-grid {
     display: grid;
     gap: 24px;
     grid-template-columns: repeat(var(--fg-cols, 3), 1fr);
}

/* Mapování tříd na CSS proměnnou */
.fg-grid.fg-cols-1 {
     --fg-cols: 1;
}

.fg-grid.fg-cols-2 {
     --fg-cols: 2;
}

.fg-grid.fg-cols-3 {
     --fg-cols: 3;
}

.fg-grid.fg-cols-4 {
     --fg-cols: 4;
}

.fg-grid.fg-cols-5 {
     --fg-cols: 5;
}

.fg-grid.fg-cols-6 {
     --fg-cols: 6;
}

/* Breakpointy – pořád zůstanou responzivní */
@media (max-width: 1024px) {
     .fg-grid {
          --fg-cols: 2;
     }
}

@media (max-width: 640px) {
     .fg-grid {
          --fg-cols: 1;
     }
}

@media (max-width: 1024px) {
     .fg-grid {
          grid-template-columns: repeat(2, 1fr);
     }
}

@media (max-width: 640px) {
     .fg-grid {
          grid-template-columns: 1fr;
     }
}

.fg-card {
     display: flex;
     flex-direction: column;
}

.fg-thumb {
     display: block;
     width: 100%;
     aspect-ratio: 1 / 1;
     background-size: cover;
     background-position: center;
     border-radius: 8px;
     position: relative;
}

.fg-date-badge {
     position: absolute;
     top: 8px;
     left: 8px;
     background: rgba(0, 0, 0, .7);
     color: #fff;
     font-size: 12px;
     padding: 4px 8px;
     border-radius: 4px;
}

.fg-title {
     margin: 8px 0 0;
     font-size: 16px;
}

.fg-title a {
     text-decoration: none;
}

/* Detailová mřížka */
.fg-detail-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 16px;
}

@media (max-width: 1024px) {
     .fg-detail-grid {
          grid-template-columns: repeat(2, 1fr);
     }
}

@media (max-width: 640px) {
     .fg-detail-grid {
          grid-template-columns: 1fr;
     }
}

.fg-detail-item img {
     display: block;
     width: 100%;
     height: auto;
     border-radius: 6px;
}

/* Select roky */
.fg-year-filter-wrap {
     margin-bottom: 16px;
}

.fg-year-filter {
     min-width: 160px;
     padding: 6px 10px;
}

.fg-cat-list {
     margin: 0 0 1rem;
}

.fg-cat-list ul {
     list-style: none;
     margin: 0;
     padding-left: 1rem;
}

.fg-cat-list .fg-cat-root ul {
     padding-left: 0;
}

.fg-cat-item {
     margin: .25rem 0;
}

.fg-cat-item a {
     text-decoration: none;
}

.fg-cat-item.is-current>a {
     font-weight: 600;
}

.fg-cat-count {
     opacity: .7;
     font-size: .9em;
     margin-left: .25em;
}

/* GRID – stejné výšky (čtverce), responzivní počet sloupců */
.fg-el.fg-el-grid {
     display: grid;
     gap: 16px;
     grid-template-columns: repeat(var(--fg-cols, 3), 1fr);
}

.fg-el.fg-el-grid[data-cols="1"] {
     --fg-cols: 1;
}

.fg-el.fg-el-grid[data-cols="2"] {
     --fg-cols: 2;
}

.fg-el.fg-el-grid[data-cols="3"] {
     --fg-cols: 3;
}

@media (max-width: 1024px) {
     .fg-el.fg-el-grid {
          --fg-cols: 2;
     }
}

@media (max-width: 640px) {
     .fg-el.fg-el-grid {
          --fg-cols: 1;
     }
}

.fg-el.fg-el-grid .fg-el-item {
     aspect-ratio: 1 / 1;
     /* stejné výšky */
     overflow: hidden;
     border-radius: 8px;
}

.fg-el.fg-el-grid .fg-el-item img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     /* vyplní čtverec */
     display: block;
}

/* MASONRY – čisté CSS columns (není potřeba JS) */
/* 1) Kontejner masonry (CSS columns) */
.fg-el.fg-el-masonry {
     --fg-gap: 16px;
     /* nastav si mezeru tady */
     column-gap: var(--fg-gap);
     column-count: var(--fg-cols, 3);
     column-fill: balance;
}

.fg-el.fg-el-masonry[data-cols="1"] {
     --fg-cols: 1;
}

.fg-el.fg-el-masonry[data-cols="2"] {
     --fg-cols: 2;
}

.fg-el.fg-el-masonry[data-cols="3"] {
     --fg-cols: 3;
}

@media (max-width: 1024px) {
     .fg-el.fg-el-masonry {
          --fg-cols: 2;
     }
}

@media (max-width: 640px) {
     .fg-el.fg-el-masonry {
          --fg-cols: 1;
     }
}

/* 2) Položka v masonry – JISTOta mezer a nezalamování */
.fg-el.fg-el-masonry>.fg-el-item {
     display: inline-block;
     /* v columns funguje margin spolehlivěji */
     width: 100%;
     margin: 0 0 8px 0 !important;
     /* vynutíme svislou mezeru */
     break-inside: avoid;
     -webkit-column-break-inside: avoid;
     -moz-column-break-inside: avoid;
     border-radius: 8px;
     overflow: hidden;
}

/* 3) Obrázek uvnitř položky */
.fg-el.fg-el-masonry>.fg-el-item img {
     display: block;
     width: 100%;
     height: auto;
}



/* GRID layout pro seznam galerií (Elementor render) */
.fg-el.fg-el-grid {
     display: grid;
     gap: 16px;
     grid-template-columns: repeat(var(--fg-cols, 3), 1fr);
}

.fg-el.fg-el-grid[data-cols="1"] {
     --fg-cols: 1;
}

.fg-el.fg-el-grid[data-cols="2"] {
     --fg-cols: 2;
}

.fg-el.fg-el-grid[data-cols="3"] {
     --fg-cols: 3;
}

@media (max-width: 1024px) {
     .fg-el.fg-el-grid {
          --fg-cols: 2;
     }
}

@media (max-width: 640px) {
     .fg-el.fg-el-grid {
          --fg-cols: 1;
     }
}

.fg-el.fg-el-grid .fg-el-item {
     position: relative;
     aspect-ratio: 1/1;
     overflow: hidden;
     border-radius: 8px;
}

.fg-el.fg-el-grid .fg-el-item img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
}

/* Datum v levém horním rohu */
.fg-el .fg-el-date {
     position: absolute;
     top: 8px;
     left: 8px;
     background: rgba(0, 0, 0, 0.6);
     color: #fff;
     padding: 2px 6px;
     font-size: 90%;
     border-radius: 4px;
}

/* Název dole přes tmavý overlay */
.fg-el .fg-el-title {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
     color: #fff;
     font-size: 100%;
     padding: 8px;
     text-align: center;
}