/* Specifické nastavení barvy textu a maximální šířky */
:root {
    --max-width: 550px;
    --fotky-width: 550px;
    --fgap-width: 5px;
}

/* Menu – dvousloupcový grid */
ul.menu {
    list-style: none;
    padding: 0;
    max-width: 100%;
    margin: 6ex auto 3ex auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5ex 0.5em;
    container-type: inline-size; /* lze se odkazovat na šířku tohoto elementu */
}

ul.menu > li {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 1ex;
    padding: 1ex 0.5em;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

ul.menu > li:hover {
    transform: translateY(-2px);
    border-color: #0056b3;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

/* Odkazy v menu */
ul.menu a { font-weight: 500; }
ul.menu a:visited { color: var(--link-color); }

/* zkracování odkazu */
.text-short { display: none; }
.text-long { display: inline; }

@container (max-width: 465px) {
  .text-short { display: inline; }
  .text-long { display: none; }
}


/* Modifikace pro tisk */
@media print {
    ul.menu > li {
        border: none;
        background: none;
        padding: 0;
        margin-bottom: 0.5ex;
    }
}

/* Hlavní kontejner fotek */
div.fotky {
    display: flex;
    margin : 0 auto;
    flex-direction: column;
    align-items: center;
    max-width: var(--fotky-width);
    gap: var(--fgap-width);
    margin-top: 4ex;
    margin-bottom: 3ex;
}

/* řádka fotek, defaultně stejně široké a vysoké jako dominatní obrázek */
div.fotka-row {
    display: flex;
    gap: var(--fgap-width);
    width: 100%;
    align-items: stretch; /* všechny prvky v řadě budou stejně vysoké jako ten dominantní */
}

div.fotka-row a  {
    display: block;
    flex: 1; /* výchozí stav: všechny volné položky si rovnoměrně dělí prostor */
    }

div.fotka-row img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;  /* oříznutí obrázku, pokud nesedí do flex položky */
}

/* dominantní obrázek - zruší flex: 1 a dá obrázku pevnou šířku 1/3 */
div.fotka-row a.dominantni {
    flex: 0 0 calc((100% - 2*var(--fgap-width)) / 3); 
}

div.fotka-row a.dominantni img {
    height: auto; /* použije se nativní poměr dominantního obrázku */
}

div.galerie-container {
    position: relative;
    max-width: var(--fotky-width);
    /* overflow: hidden; */
    width: 100%;
}

div.galerie-viewport {
    width: 100%; 
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth; 
    scrollbar-width: none;
}

div.galerie-viewport::-webkit-scrollbar {
    display: none;
}

div.galerie {
    display: flex;
    gap: var(--fgap-width);
}

div.galerie a {
    /* 100% šířky minus dvě mezery, děleno 3 */
    flex: 0 0 calc((100% - 2*var(--fgap-width)) / 3);
    display: block;
    scroll-snap-align: start;
}

div.galerie img {
    width: 100%;
    height: auto; /*předpokládá se stejný nativní poměr obrázků */
    display: block;
}

button.galerie-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    font-size: 20px;
    padding: 10px 12px;
    cursor: pointer;
    z-index: 10;
    border-radius: 4px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, background 0.2s;
}

div.galerie-container:hover button.galerie-btn {
    opacity: 1;
    visibility: visible;
}

button.galerie-btn:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

button.galerie-btn.left {
    /* left: calc( -1 * var(--body-padding) ); */
    left : -18px;
}

button.galerie-btn.right {
    /* right: calc( -1 * var(--body-padding) ); */
    right : -18px;
}

#STRimg:hover {
    content: url('imgs/PK-v_2021-STR-tbl.jpg');
}

#KEDimg:hover {
    content: url('imgs/PK-v_2025-KED-all.jpg');
}