/* ==========================================================================
   Chowdiah Utsava 2026 page (utsava-2026.html) — loaded after style.css.
   One carousel (banner + 8 e-invite pages), one slim action row, and a
   full-screen viewer. No boxes, tints or card frames: the artwork sits on
   the page background. Mobile-first; every media query is min-width.
   ========================================================================== */

.ut { padding-block: clamp(0.75rem, 0.4rem + 1.5vw, 1.75rem) 0; }
.ut-gallery { --gap: clamp(0.75rem, 2vw, 1.5rem); padding-block: 0 var(--section-y); overflow-x: clip; }
/* Stage height drives everything: a page is stage-h tall and 0.6572 x that wide. */
.ut-gallery { --stage-h: min(75svh, calc(78vw * 1.52)); }
@media (min-width: 56rem) { .ut-gallery { --stage-h: min(80vh, 900px); } }
.ut-gallery { --slide-w: calc(var(--stage-h) * 0.6572); }

.ut-carousel { position: relative; }
.ut-carousel:focus-visible { outline-offset: 4px; }

.ut-track {
    display: flex;
    gap: var(--gap);
    height: var(--stage-h);
    margin: 0;
    padding: 0 calc(50% - var(--slide-w) / 2);
    list-style: none;
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}
.ut-track::-webkit-scrollbar { display: none; }
.ut-slide {
    flex: 0 0 var(--slide-w); height: 100%;
    scroll-snap-align: center; scroll-snap-stop: always;
    transform: scale(0.84); opacity: 0.5;
    transition: transform 0.35s var(--ease), opacity 0.35s var(--ease);
}
.ut-slide.is-current { transform: none; opacity: 1; }
.ut-slide:not(.is-current) .ut-zoom { cursor: pointer; }

.ut-zoom {
    display: block; width: 100%; height: 100%;
    margin: 0; padding: 0; border: 0; background: none;
    color: inherit; font: inherit; cursor: zoom-in;
    -webkit-tap-highlight-color: transparent;
}
.ut-zoom:focus-visible { outline-offset: -3px; }
/* Pages: the picture is sized to its own box (not the stage), so the rounded
   corners sit on the artwork itself. Radius echoes the curved card inside each sheet. */
.ut-slide .ut-zoom { display: grid; place-items: center; }
.ut-slide .ut-zoom img {
    display: block; width: auto; height: auto;
    max-width: 100%; max-height: 100%;
    border-radius: 6% / 3.9%;
}

/* Banner (static, on top) ------------------------------------------------------ */
.ut-banner { max-width: 64rem; margin-inline: auto; }
.ut-banner .ut-zoom { height: auto; }
.ut-banner .ut-zoom img { display: block; width: 100%; height: auto; border-radius: 1.6% / 2.4%; }

/* Arrows ------------------------------------------------------------------ */
.ut-arrow {
    position: absolute; top: 50%;
    width: var(--tap); height: var(--tap);
    display: grid; place-items: center; padding: 0;
    border: 1px solid var(--btn-border); border-radius: 50%;
    background: var(--btn-bg); color: var(--btn-text);
    cursor: pointer; opacity: 0.9;
    transform: translateY(-50%);
    transition: opacity 0.2s var(--ease), filter 0.2s var(--ease);
}
.ut-arrow svg { width: 1.3rem; height: 1.3rem; }
.ut-arrow:hover { filter: brightness(1.12); }
.ut-arrow--prev { left: 0.25rem; }
.ut-arrow--next { right: 0.25rem; }
.ut-arrow[disabled] { opacity: 0; pointer-events: none; }
@media (min-width: 56rem) { .ut-arrow--prev { left: 1.25rem; } .ut-arrow--next { right: 1.25rem; } }

/* Counter + dots ------------------------------------------------------------ */
.ut-nav { display: flex; flex-direction: column; align-items: center; gap: 0.1rem; margin-top: 0.6rem; }
.ut-count { margin: 0; font-size: var(--step--1); font-variant-numeric: tabular-nums lining-nums; color: var(--text-2); letter-spacing: 0.04em; }
.ut-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.1rem; }
.ut-dot {
    width: 2rem; height: var(--tap);
    display: grid; place-items: center; padding: 0;
    border: 0; background: none; cursor: pointer;
}
.ut-dot::before {
    content: ""; width: 0.62rem; height: 0.62rem; border-radius: 50%;
    background: var(--border); box-shadow: inset 0 0 0 1px var(--text); opacity: 0.55;
    transition: transform 0.2s var(--ease), background 0.2s var(--ease), opacity 0.2s var(--ease);
}
.ut-dot[aria-current="true"]::before { background: var(--accent); box-shadow: none; opacity: 1; transform: scale(1.35); }

/* Action row (one removable block) ------------------------------------------ */
.ut-actions { display: flex; flex-direction: column; align-items: stretch; gap: 0.6rem; margin-block: 1rem clamp(1.25rem, 0.8rem + 2vw, 2.25rem); }
@media (min-width: 36rem) { .ut-actions { flex-direction: row; flex-wrap: wrap; justify-content: center; } }

/* Full-screen viewer ---------------------------------------------------------- */
html.ut-lock { overflow: hidden; }
.ut-viewer {
    position: fixed; inset: 0;
    width: 100vw; height: 100vh; height: 100dvh;
    max-width: none; max-height: none;
    margin: 0; padding: 0; border: 0;
    background: rgba(8, 8, 8, 0.97); color: #fff;
    overflow: hidden;
}
.ut-viewer:not([open]) { display: none; }
.ut-viewer::backdrop { background: #080808; }
.ut-v-scroll {
    position: absolute; inset: 0;
    display: flex;                       /* child margin:auto centres it yet stays scrollable */
    overflow: auto;
    touch-action: pan-x pan-y pinch-zoom;
    -webkit-overflow-scrolling: touch;
}
.ut-v-img {
    display: block; flex: none; margin: auto;
    max-width: none; user-select: none; -webkit-user-select: none;
    cursor: zoom-in;
}
.ut-viewer.is-zoomed .ut-v-img { cursor: zoom-out; }
.ut-v-btn {
    position: absolute;
    width: var(--tap); height: var(--tap);
    display: grid; place-items: center; padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 50%;
    background: rgba(0, 0, 0, 0.55); color: #fff;
    font-size: 1.7rem; line-height: 1; cursor: pointer;
}
.ut-v-btn:hover { background: rgba(0, 0, 0, 0.8); }
.ut-v-btn svg { width: 1.3rem; height: 1.3rem; }
.ut-v-close { top: max(0.75rem, env(safe-area-inset-top)); right: 0.75rem; }
.ut-v-prev, .ut-v-next { top: 50%; transform: translateY(-50%); }
.ut-v-prev { left: 0.5rem; }
.ut-v-next { right: 0.5rem; }
.ut-v-count {
    position: absolute; left: 50%; bottom: max(0.6rem, env(safe-area-inset-bottom)); transform: translateX(-50%);
    margin: 0; padding: 0.2rem 0.7rem; border-radius: 1rem;
    background: rgba(0, 0, 0, 0.55); font-size: 0.85rem; font-variant-numeric: tabular-nums lining-nums;
}
.ut-viewer.is-zoomed .ut-v-prev, .ut-viewer.is-zoomed .ut-v-next { opacity: 0.5; }
.ut-viewer.is-single .ut-v-prev, .ut-viewer.is-single .ut-v-next, .ut-viewer.is-single .ut-v-count { display: none; }

@media (prefers-reduced-motion: reduce) { .ut-arrow, .ut-dot::before, .ut-slide { transition: none; } }