/* =========================================================================
   Round 14 — the dialog an izba opens. Three variants, one axis: what the
   dialog is for. Loaded only by /_dev/izby-m1..m3, never by the homepage,
   so nothing here can affect the locked page while the round is undecided.
   ========================================================================= */

/* ---- the band's own opener, shared by all three ---- */

.izba-p-btn {
    display: block;
    position: relative;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    border-radius: var(--r-sm);
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
}

.izba-p-btn img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: var(--line-soft);
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* The invitation only appears on a device that can hover; on touch the whole
   frame is obviously tappable and a permanent label is clutter. */
.izba-p-more {
    position: absolute;
    inset: auto 0 0 0;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 2.5rem 1rem 1rem;
    font-size: 1rem;
    color: #fffdf6;
    background: linear-gradient(to top, rgba(13, 33, 28, 0.78), rgba(13, 33, 28, 0) 100%);
    opacity: 0;
    transform: translateY(0.5rem);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) and (pointer: fine) {
    .izba-p-btn:hover img {
        transform: scale(1.04);
    }

    .izba-p-btn:hover .izba-p-more,
    .izba-p-btn:focus-visible .izba-p-more {
        opacity: 1;
        transform: none;
    }
}

.izba-p-btn:focus-visible {
    outline: 3px solid var(--teal);
    outline-offset: 4px;
}

/* ---- shared dialog scaffolding ----

   ENTER AND EXIT. The dialog is display:none until it opens, so the class
   that drives the transition has to land a frame later or there is no
   starting value to move from; izby-modal.js forces that style flush and then
   adds .is-open. On close the class comes off first and the element is only
   hidden once the movement has finished, which is what makes the drawer slide
   out instead of vanishing.

   Easing is cubic-bezier(0.32, 0.72, 0, 1): fast at the start, long settle,
   no overshoot. A drawer that bounces reads as a toy, and this one carries a
   price list. */

.izm[hidden] {
    display: none;
}

.izm {
    position: fixed;
    inset: 0;
    z-index: 10000;
}

.izm-scrim {
    position: absolute;
    inset: 0;
    background: rgba(9, 21, 17, 0.9);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 0.42s ease;
}

.izm.is-open .izm-scrim {
    opacity: 1;
}

.izm-x,
.izm-nav {
    position: absolute;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border: 0;
    border-radius: 999px;
    background: rgba(246, 242, 230, 0.14);
    color: #fffdf6;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.izm-x:hover,
.izm-nav:hover {
    background: rgba(246, 242, 230, 0.28);
}

.izm-x:focus-visible,
.izm-nav:focus-visible,
.izm-step:focus-visible {
    outline: 3px solid var(--mint);
    outline-offset: 3px;
}

.izm-x {
    top: clamp(0.75rem, 2.5vw, 1.75rem);
    right: clamp(0.75rem, 2.5vw, 1.75rem);
}

.izm-nav--prev {
    left: clamp(0.5rem, 2vw, 1.75rem);
    top: 50%;
    transform: translateY(-50%);
}

.izm-nav--next {
    right: clamp(0.5rem, 2vw, 1.75rem);
    top: 50%;
    transform: translateY(-50%);
}

.izm-idx {
    display: block;
    font-family: var(--mono);
    font-size: 1rem;
    letter-spacing: 0.09em;
    color: var(--teal-ink);
}

.izm-h {
    margin: 1.6rem 0 0.9rem;
    font-family: var(--mono);
    font-size: 1rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--sand);
}

.izm-step {
    padding: 0.7rem 1rem;
    border: 0;
    border-radius: 0.6rem;
    background: transparent;
    font-family: var(--sans);
    font-size: 1rem;
    color: var(--ink-soft);
    cursor: pointer;
}

.izm-step:hover {
    background: var(--teal-wash);
    color: var(--teal-ink);
}

/* =========================================================================
   M1 FOTOGRAFIA — the dialog is a picture
   ========================================================================= */

.izm--foto {
    display: grid;
    place-items: center;
    padding: clamp(1rem, 4vw, 3rem);
}

.izm--foto .izm-stage {
    position: relative;
    z-index: 2;
    display: flex;
    max-width: 100%;
    opacity: 0;
    transform: scale(0.975);
    transition:
        opacity 0.42s ease,
        transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
}

.izm--foto.is-open .izm-stage {
    opacity: 1;
    transform: none;
}

.izm--foto .izm-panel {
    position: relative;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.15rem;
    max-width: 100%;
}

.izm--foto .izm-panel[hidden] {
    display: none;
}

.izm--foto img {
    display: block;
    max-width: min(100%, 74rem);
    max-height: 74svh;
    width: auto;
    height: auto;
    border-radius: var(--r-sm);
    box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.8);
}

.izm--foto figcaption {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 0.5rem 1.1rem;
    text-align: center;
}

.izm--foto .izm-idx {
    color: var(--mint);
}

.izm--foto .izm-n {
    font-family: var(--serif);
    font-size: clamp(1.3rem, 2.2vw, 1.7rem);
    letter-spacing: -0.015em;
    color: #fffdf6;
}

.izm--foto .izm-k {
    font-size: 1.0625rem;
    color: #cfd8d2;
}

/* =========================================================================
   M2 LIST — the dialog is a document that slides in from the edge
   ========================================================================= */

.izm--list .izm-scrim {
    background: rgba(9, 21, 17, 0.5);
}

/* The drawer. transform only, so the whole slide runs on the compositor and
   never touches layout: animating `right` or `width` here would relayout a
   sheet full of photographs on every frame. */
.izm--list .izm-sheet {
    position: absolute;
    inset: 0 0 0 auto;
    width: min(100%, 36rem);
    display: flex;
    flex-direction: column;
    background: var(--sheet);
    box-shadow: -30px 0 80px -30px rgba(9, 21, 17, 0.5);
    padding: clamp(1.25rem, 3vw, 2rem) clamp(1.25rem, 3.5vw, 2.5rem) 0;
    transform: translate3d(100%, 0, 0);
    transition: transform 0.52s cubic-bezier(0.32, 0.72, 0, 1);
    will-change: transform;
}

.izm--list.is-open .izm-sheet {
    transform: translate3d(0, 0, 0);
}

/* Scrolling belongs to the body, not the drawer: a scroll container that is
   also the thing being transformed stutters on the first frame in Safari. */
.izm--list .izm-sheet-body {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    margin-inline: calc(clamp(1.25rem, 3.5vw, 2.5rem) * -1);
    padding-inline: clamp(1.25rem, 3.5vw, 2.5rem);
}

/* Photographs down the sheet, full width, each captioned for what it is. */
.izm-stack {
    display: grid;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.izm-stack figure {
    margin: 0;
}

.izm-stack img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--r-sm);
    background: var(--line-soft);
}

.izm-stack figcaption {
    margin-top: 0.5rem;
    font-family: var(--mono);
    font-size: 1rem;
    letter-spacing: 0.03em;
    color: var(--ink-faint);
}

.izm--list .izm-sheet-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1.25rem;
}

.izm-x--inline {
    position: static;
    width: 2.6rem;
    height: 2.6rem;
    background: var(--teal-wash);
    color: var(--teal-ink);
}

.izm-x--inline:hover {
    background: #d3e8e0;
}

.izm--list .izm-panel[hidden] {
    display: none;
}

.izm-thumb {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--r-sm);
    background: var(--line-soft);
}

.izm--list .izm-n {
    margin: 1.35rem 0 0;
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(1.5rem, 3vw, 1.9rem);
    line-height: 1.14;
    letter-spacing: -0.018em;
    color: var(--ink);
}

/* The record. dt and dd on one row, ruled, the way the cenník band sets its
   figures: this is the half of the dialog a person is taking notes from. */
.izm-rec {
    margin: 1.35rem 0 0;
}

.izm-rec > div {
    display: grid;
    grid-template-columns: 8rem 1fr;
    gap: 1rem;
    align-items: baseline;
    padding-block: 0.85rem;
    border-top: 1px solid var(--line-soft);
}

.izm-rec dt {
    font-family: var(--mono);
    font-size: 1rem;
    letter-spacing: 0.04em;
    color: var(--ink-faint);
}

.izm-rec dd {
    margin: 0;
    font-size: 1.0625rem;
    line-height: 1.45;
    color: var(--ink);
}

.izm--list .izm-cap {
    margin: 0.9rem 0 0;
    font-size: 1rem;
    font-style: italic;
    color: var(--ink-faint);
}

/* One column. .ticks is two by default, which is right on a full-width band
   and cramped inside a 34rem sheet where every item wraps to three lines. */
.izm--list .ticks,
.izm--dvoj .ticks {
    grid-template-columns: 1fr;
}

.izm-cta {
    margin-top: 1.75rem;
}

.izm--list .izm-sheet-foot {
    position: sticky;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: auto;
    padding-block: 1rem;
    background: linear-gradient(to top, var(--sheet) 70%, rgba(253, 251, 244, 0));
}

@media (max-width: 34rem) {
    .izm-rec > div {
        grid-template-columns: 1fr;
        gap: 0.2rem;
    }
}

/* =========================================================================
   M3 DVOJICA — photograph and record side by side
   ========================================================================= */

/* The outer padding is what actually caps how wide the dialog can get on a
   laptop, so it comes down along with the width going up: at clamp(...2.5rem)
   a 1440px window lost 80px to gutter before the box was measured. */
.izm--dvoj {
    display: grid;
    place-items: center;
    padding: clamp(0.75rem, 1.6vw, 1.5rem);
}

.izm--dvoj .izm-box {
    opacity: 0;
    transform: translate3d(0, 1.25rem, 0) scale(0.985);
    transition:
        opacity 0.4s ease,
        transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
    position: relative;
    width: min(100%, 78rem);
    /* A floor as well as a ceiling. max-height alone changed nothing: the box
       was only ever as tall as the right column's content, so it sat at 58% of
       the viewport no matter how high the cap went. min-height is what
       actually makes it big, and the photograph (object-fit: cover, out of
       flow) simply fills whatever it gets. */
    min-height: min(86svh, 44rem);
    max-height: 93svh;
    background: var(--sheet);
    border-radius: var(--r);
    overflow: hidden;
    box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.7);
}

.izm--dvoj.is-open .izm-box {
    opacity: 1;
    transform: none;
}

.izm--dvoj .izm-x {
    background: rgba(9, 21, 17, 0.42);
}

.izm--dvoj .izm-panel {
    display: grid;
    /* The photograph takes more of the extra width than the record does: the
       record's measure is set by its longest line and stops improving past
       about 46ch, while the picture keeps getting better. */
    grid-template-columns: 1.25fr 1fr;
    min-height: min(86svh, 44rem);
    max-height: 93svh;
}

.izm--dvoj .izm-panel[hidden] {
    display: none;
}

.izm-ph {
    position: relative;
    margin: 0;
    background: var(--line-soft);
}

.izm-ph img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.izm-ph figcaption {
    position: absolute;
    inset: auto 0 0 0;
    padding: 2.5rem 1.15rem 1rem;
    font-size: 1rem;
    font-style: italic;
    color: #fffdf6;
    background: linear-gradient(to top, rgba(13, 33, 28, 0.8), rgba(13, 33, 28, 0));
}

/* A column, so the actions can be pinned to the bottom of the taller box
   instead of floating wherever the copy happens to end. */
.izm-body {
    display: flex;
    flex-direction: column;
    padding: clamp(1.5rem, 3vw, 2.35rem);

    /* BOTH AXES ARE NAMED, and that is the point. `overflow-y: auto` alone
       does not leave the other axis at `visible`: the spec computes a
       `visible` sibling to `auto`, so this was a scroll container sideways as
       well as vertically. Any child a pixel too wide therefore turned the
       whole record into something a thumb could drag left and right, which is
       exactly what happened on a phone (18 August 2026). The real culprit was
       .izm-foot, fixed below; this line is the guard that stops the next one
       becoming a bug the reader can feel. */
    overflow-x: hidden;
    overflow-y: auto;
}

.izm--dvoj .izm-n {
    margin: 0.7rem 0 0;
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(1.5rem, 2.8vw, 1.95rem);
    line-height: 1.14;
    letter-spacing: -0.018em;
    color: var(--ink);
}

.izm-lead {
    margin: 0.8rem 0 1.2rem;
    font-size: 1.0625rem;
    line-height: 1.55;
    color: var(--ink-soft);
}

.izm-foot {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: auto;
    padding-top: 1.75rem;
    padding-top: 1.35rem;
    border-top: 1px solid var(--line-soft);
}

.izm-foot .btn {
    flex: 1;
    justify-content: center;
    /* Flex items floor at min-content unless told otherwise, and this button's
       label does not wrap, so on a narrow sheet it refused to shrink and
       shoved the next stepper out through the side. */
    min-width: 0;
}

/* THE THREE CONTROLS DO NOT FIT ON ONE LINE ON A PHONE. Measured at 390px:
   the CTA is 238px at min-content, the two steppers are 45px each and the two
   gaps 12px each, which is 352px inside a sheet whose content box is 313px.
   Those 42px were the horizontal overflow that made the record pan sideways.

   The CTA takes the full width and the steppers pair up beneath it, which is
   also the better order of business: on a phone the thing a person wants from
   this dialog is the appointment, not the next room. */
@media (max-width: 30rem) {
    .izm-foot {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    /* Both rows are stated. Auto-placement alone gave three rows, one control
       each: the full-width CTA cannot share row 1, so the first stepper landed
       above it and the second below. */
    .izm-foot .btn {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .izm-foot .izm-step {
        grid-row: 2;
    }
}

@media (max-width: 52rem) {
    .izm--dvoj .izm-panel {
        grid-template-columns: 1fr;
        grid-template-rows: 15rem 1fr;
    }
}

/* =========================================================================
   THE GALLERY INSIDE A DIALOG — shared by M1 and M3

   One big image at a time with a thumbnail rail under it. Not a scroller:
   inside a dialog a horizontal scroll region competes with the dialog's own
   dismissal gestures, and on a trackpad it steals the swipe that closes it.
   ========================================================================= */

.izm-shots {
    position: relative;
}

.izm-shot[hidden] {
    display: none;
}

.izm-shot {
    margin: 0;
}

/* An even rail, not a row of loose tiles. Equal tracks means the strip lines
   up with the image edges above it whatever the photo count is, which is what
   the flex version could not do: its items were fixed-width and left-packed,
   so the rail ended somewhere arbitrary. */
.izm-thumbs {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 0.5rem;
}

.izm-thumb-b {
    aspect-ratio: 3 / 2;
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0.4rem;
    overflow: hidden;
    background: var(--line-soft);
    cursor: pointer;
    opacity: 0.55;
    transition: opacity 0.3s ease, box-shadow 0.3s ease;
}

.izm-thumb-b img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.izm-thumb-b:hover {
    opacity: 0.85;
}

/* The current photograph, marked with the accent rather than with a border:
   a ring reads as selected, an outline reads as focus. */
.izm-thumb-b[aria-current='true'] {
    opacity: 1;
    box-shadow: 0 0 0 2px var(--teal);
}

.izm-thumb-b:focus-visible {
    outline: 3px solid var(--mint);
    outline-offset: 2px;
}

/* ---- M1: caption bar under the photograph ---- */

.izm--foto .izm-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
    width: 100%;
}

.izm--foto .izm-bar-txt {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem 1.1rem;
}

.izm--foto .izm-shot figcaption {
    justify-content: center;
    margin-top: 0.85rem;
    font-family: var(--mono);
    font-size: 1rem;
    letter-spacing: 0.03em;
    color: #cfd8d2;
}

.izm--foto .izm-thumb-b {
    background: rgba(246, 242, 230, 0.12);
}

/* ---- gallery arrows, on the image ----
   The room steppers live in the footer on the other side of the dialog, so
   position alone tells the two axes apart without either needing a label. */
.izm-ga {
    position: absolute;
    z-index: 2;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    border-radius: 999px;
    background: rgba(9, 21, 17, 0.5);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color: #fffdf6;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s ease, background-color 0.3s ease;
}

/* Shown on hover on a pointer device, always visible on touch where there is
   no hover to reveal them. */
.izm-gal:hover .izm-ga,
.izm-ga:focus-visible {
    opacity: 1;
}

@media (hover: none) {
    .izm-ga {
        opacity: 1;
    }
}

.izm-ga:hover {
    background: rgba(9, 21, 17, 0.72);
}

.izm-ga:focus-visible {
    outline: 3px solid var(--mint);
    outline-offset: 2px;
}

.izm-ga--prev {
    left: 0.85rem;
}

.izm-ga--next {
    right: 0.85rem;
}

/* ---- M3: gallery fills its half of the split ---- */

.izm-gal {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--line-soft);
    min-height: 0;
}

.izm-gal .izm-shots {
    flex: 1;
    min-height: 0;
}

.izm-gal .izm-shot {
    position: absolute;
    inset: 0;
}

.izm-gal .izm-shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.izm-gal .izm-shot figcaption {
    position: absolute;
    inset: auto 0 0 0;
    padding: 2.75rem 1.15rem 1rem;
    font-family: var(--mono);
    font-size: 1rem;
    letter-spacing: 0.03em;
    color: #fffdf6;
    background: linear-gradient(to top, rgba(13, 33, 28, 0.85), rgba(13, 33, 28, 0));
}

.izm-gal .izm-thumbs {
    padding: 0.6rem;
    background: rgba(13, 33, 28, 0.92);
}

.izm-gal .izm-thumb-b {
    background: rgba(246, 242, 230, 0.1);
}

@media (max-width: 46rem) {
    .izm--foto .izm-bar {
        justify-content: center;
    }

    .izm--foto .izm-thumbs {
        order: -1;
    }
}

/* =========================================================================
   REDUCED MOTION

   Nothing slides, nothing scales. The dialog is simply there. Everything
   still works because none of the behaviour depends on a transition running;
   izby-modal.js closes immediately when this is set rather than waiting for
   a transitionend that will never come.
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
    .izm-scrim,
    .izm--list .izm-sheet,
    .izm--dvoj .izm-box,
    .izm--foto .izm-stage {
        transition: none !important;
    }

    .izm--list .izm-sheet {
        transform: none !important;
    }

    .izm--dvoj .izm-box,
    .izm--foto .izm-stage {
        opacity: 1 !important;
        transform: none !important;
    }

    .izm-scrim {
        opacity: 1 !important;
    }
}