/* =========================================================================
   /galeria — the photographs, on their own page.

   Third in the cascade, after zahrada-v3.css and new.css. The lightbox is not
   styled here: .glb and its controls live in new.css and are shared with the
   homepage rail, so the dialog a visitor opens is the same object on both
   pages.
   ========================================================================= */

.gl-open {
    padding-top: calc(var(--hdr-h, 4.5rem) + clamp(3rem, 7vh, 5.5rem));
    padding-bottom: clamp(1.5rem, 3vh, 2.5rem);
}

/* The breadcrumb, same object as on the other subpages. When a fourth page
   needs it, it moves to new.css rather than becoming a fourth copy. */
.st-trail {
    margin: 0 0 clamp(2rem, 4vw, 3rem);
    font-family: var(--mono);
    font-size: 0.875rem;
    letter-spacing: 0.08em;
    color: var(--ink-faint);
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.st-trail a {
    color: var(--teal-ink);
    text-decoration: none;
    border-bottom: 1px solid var(--line);
    padding-bottom: 0.1rem;
    transition: border-color 0.28s ease;
}

@media (hover: hover) {
    .st-trail a:hover { border-color: var(--teal); }
}

.gl-grid-sec {
    padding-top: 0;
}


/* --------------------------------------------------------------------------
   THE GRID

   CSS columns, not grid. The set is a mix of landscape and two portraits, and
   a grid of equal cells would have to crop every frame to one ratio — which
   throws away half of each vertical photograph and makes fifteen different
   pictures look like fifteen of the same picture. Columns let each frame keep
   its own aspect and let the browser balance the runs, with no measuring and
   no JavaScript.

   break-inside: avoid is what stops a tile being split across the column
   boundary, and it is the whole reason this technique is usable at all.
   -------------------------------------------------------------------------- */

.gl-grid {
    columns: 3;
    column-gap: clamp(0.85rem, 1.6vw, 1.35rem);
}

.gl-it {
    display: block;
    width: 100%;
    margin: 0 0 clamp(0.85rem, 1.6vw, 1.35rem);
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
    cursor: pointer;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;

    position: relative;
    border-radius: 2px;
    overflow: hidden;
    box-shadow: var(--lift);
    /* The transform is on the tile, the scale on the image inside it, so the
       frame stays put and only the picture grows behind its own edge. A tile
       that scaled as a whole would push its neighbours' shadows around. */
    transition: box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.gl-it img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* The caption rides on the photograph, revealed on hover and always present
   for a screen reader. No permanent label under every frame: fifteen captions
   in a column turn a gallery into a list. */
.gl-cap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 2.5rem 1rem 0.9rem;
    font-family: var(--mono);
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fffdf6;
    /* A gradient rather than a bar: the aid has to be felt, not seen. */
    background: linear-gradient(to top, rgba(13, 33, 28, 0.72), transparent);
    opacity: 0;
    transform: translateY(0.35rem);
    transition: opacity 0.32s ease, transform 0.32s ease;
    pointer-events: none;
}

@media (hover: hover) {
    .gl-it:hover {
        transform: translateY(-3px);
        box-shadow: var(--lift-hi, 0 2px 4px rgba(17, 35, 29, 0.06), 0 24px 48px -16px rgba(17, 35, 29, 0.22));
    }

    .gl-it:hover img {
        transform: scale(1.04);
    }

    .gl-it:hover .gl-cap {
        opacity: 1;
        transform: none;
    }
}

/* Keyboard parity: a visitor tabbing through the grid gets the same caption a
   pointer gets, and a focus ring that is actually visible on cream. */
.gl-it:focus-visible {
    outline: 2px solid var(--teal);
    outline-offset: 3px;
}

.gl-it:focus-visible .gl-cap {
    opacity: 1;
    transform: none;
}

.gl-note {
    margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
    max-width: 54ch;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--ink-faint);
    text-wrap: pretty;
}


@media (max-width: 62rem) {
    .gl-grid { columns: 2; }
}

@media (max-width: 34rem) {
    /* One column on a phone. Two columns of 160px each is a contact sheet,
       and this page exists so somebody can actually look at the room. */
    .gl-grid { columns: 1; }
}