/* Aardvark Fotogalerie — mřížky, wall, lightbox, upload zóna. Prefix gal- (veřejný web i admin). */

/* ---------- Hlavička alba (Google Photos: titulek na střed, datum pod ním) ---------- */

.gal-breadcrumb {
    text-align: center;
    margin-bottom: 0.25rem;
}

.gal-album-head {
    text-align: center;
    padding: 1.5rem 0 1.75rem;
}

.gal-album-heading {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 700;
    letter-spacing: 0.01em;
    margin: 0;
}

.gal-album-date {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: #78829d;
}

.gal-album-desc {
    max-width: 48rem;
    margin: 0.75rem auto 0;
    color: #4b5675;
}

.gal-pager {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin: 1.25rem 0;
}

/* JS převzal stránkování: místo odkazu nenápadný indikátor načítání */
.gal-pager.gal-pager-auto a {
    display: none;
}

.gal-pager.gal-pager-auto::after {
    content: "";
    width: 22px;
    height: 22px;
    border: 2px solid #cfd6e4;
    border-top-color: #78829d;
    border-radius: 50%;
    animation: gal-spin 0.8s linear infinite;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.gal-pager.gal-pager-auto.loading::after {
    opacity: 1;
}

@keyframes gal-spin {
    to { transform: rotate(360deg); }
}

/* ---------- Mřížka alb ---------- */

.gal-albums {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}

.gal-album-card {
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: 0.75rem;
    overflow: hidden;
    background: #f4f6f9;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.gal-album-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(76, 87, 125, 0.15);
    color: inherit;
}

.gal-album-cover {
    aspect-ratio: 3 / 2;
    width: 100%;
    object-fit: cover;
    display: block;
    background: #e6e9f0;
}

.gal-album-cover-empty {
    aspect-ratio: 3 / 2;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #99a1b7;
    font-size: 2rem;
    background: #e6e9f0;
}

.gal-album-meta {
    padding: 0.65rem 0.85rem;
}

.gal-album-title {
    font-weight: 600;
    line-height: 1.3;
}

.gal-album-count {
    font-size: 0.8rem;
    color: #78829d;
}

/* ---------- Wall fotek (justified řádky, poměr stran zachovaný) ----------
   Každá položka má --r = šířka/výška. flex-basis dává cílovou šířku pro řádek
   výšky --gal-row, flex-grow (úměrný poměru) dorovná řádek na plnou šířku,
   aspect-ratio drží výšku. Poslední řádek dorazí neviditelný ::after,
   aby se pár fotek neroztáhlo přes celou šířku. */

.gal-wall {
    --gal-row: 260px;
    --gal-gap: 4px;
    display: flex;
    flex-wrap: wrap;
    gap: var(--gal-gap);
}

.gal-wall::after {
    content: "";
    flex-grow: 1e6;
    flex-basis: 0;
}

.gal-item {
    --r: 1.5;
    display: block;
    flex-grow: calc(var(--r) * 100);
    flex-basis: calc(var(--r) * var(--gal-row));
    aspect-ratio: var(--r);
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    background: #e6e9f0;
    position: relative;
}

.gal-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: filter 0.15s ease;
}

.gal-item:hover img {
    filter: brightness(0.92);
}

.gal-item:focus-visible {
    outline: 3px solid var(--aav-primary, #1b6ec2);
    outline-offset: -3px;
}

@media (max-width: 991px) {
    .gal-wall { --gal-row: 200px; }
}

@media (max-width: 575px) {
    .gal-wall { --gal-row: 120px; --gal-gap: 3px; }
    .gal-album-head { padding: 1rem 0 1.25rem; }
}

/* ---------- Lightbox (Google Photos) ---------- */

html.gal-lb-locked {
    overflow: hidden;
}

.gal-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    background: #000;
    color: #fff;
    -webkit-user-select: none;
    user-select: none;
}

.gal-lightbox.open {
    display: block;
}

/* horní lišta: zpět vlevo, nástroje vpravo; gradient místo plného pruhu */
.gal-lb-top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 0.75rem;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
    transition: opacity 0.25s ease;
}

.gal-lb-top .gal-lb-spacer {
    flex: 1;
}

.gal-lb-counter {
    font-size: 0.8rem;
    opacity: 0.7;
    margin-left: 0.5rem;
}

.gal-lightbox.idle .gal-lb-top,
.gal-lightbox.idle .gal-lb-prev,
.gal-lightbox.idle .gal-lb-next,
.gal-lightbox.idle .gal-lb-caption {
    opacity: 0;
    pointer-events: none;
}

.gal-lb-btn {
    appearance: none;
    border: 0;
    background: transparent;
    color: #fff;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    text-decoration: none;
    transition: background-color 0.15s ease;
    flex: 0 0 auto;
}

.gal-lb-btn:hover,
.gal-lb-btn:focus-visible {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    outline: none;
}

.gal-lb-btn.active {
    background: rgba(255, 255, 255, 0.22);
}

.gal-lb-btn svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

.gal-lb-btn[hidden] {
    display: none;
}

/* stage s obrázkem; při otevřeném info panelu se zúží */
.gal-lb-stage {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: right 0.2s ease;
}

.gal-lightbox.info-open .gal-lb-stage {
    right: 360px;
}

.gal-lb-stage img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    transition: opacity 0.15s ease;
}

.gal-lb-stage img.loading {
    opacity: 0.4;
}

.gal-lb-prev,
.gal-lb-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 56px;
    height: 56px;
    background: rgba(0, 0, 0, 0.35);
    transition: background-color 0.15s ease, opacity 0.25s ease;
}

.gal-lb-prev { left: 0.75rem; }
.gal-lb-next { right: 0.75rem; }

.gal-lb-prev svg,
.gal-lb-next svg {
    width: 32px;
    height: 32px;
}

/* popisek dole přes obrázek */
.gal-lb-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 2rem 1rem 1rem;
    text-align: center;
    font-size: 0.9rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
    transition: opacity 0.25s ease, right 0.2s ease;
}

.gal-lb-caption:empty {
    display: none;
}

.gal-lightbox.info-open .gal-lb-caption {
    right: 360px;
}

/* info panel zprava */
.gal-lb-info {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 360px;
    max-width: 100%;
    z-index: 4;
    background: #fff;
    color: #1b1c1d;
    transform: translateX(100%);
    transition: transform 0.2s ease;
    overflow-y: auto;
    -webkit-user-select: text;
    user-select: text;
}

.gal-lightbox.info-open .gal-lb-info {
    transform: none;
}

.gal-lb-info-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0.5rem 0.75rem 1.25rem;
    font-weight: 600;
    font-size: 1.05rem;
}

.gal-lb-info-head .gal-lb-btn {
    color: #444;
}

.gal-lb-info-head .gal-lb-btn:hover {
    background: rgba(0, 0, 0, 0.07);
    color: #000;
}

.gal-lb-info-body {
    padding: 0 1.25rem 1.5rem;
}

.gal-lb-info-caption {
    margin: 0 0 1rem;
    font-size: 0.95rem;
    line-height: 1.5;
}

.gal-lb-info-row {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 0 0.75rem;
    padding: 0.6rem 0;
    align-items: start;
}

.gal-lb-info-row svg {
    width: 22px;
    height: 22px;
    fill: #5f6368;
    margin-top: 1px;
}

.gal-lb-info-main {
    font-size: 0.95rem;
    word-break: break-word;
}

.gal-lb-info-sub {
    font-size: 0.8rem;
    color: #5f6368;
    margin-top: 0.15rem;
}

/* dialog (přesun do alba) a toast */
.gal-lb-dialog {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
}

.gal-lb-dialog.open {
    display: flex;
}

.gal-lb-dialog-box {
    background: #fff;
    color: #1b1c1d;
    border-radius: 0.75rem;
    width: min(420px, calc(100vw - 2rem));
    max-height: min(70vh, 560px);
    display: flex;
    flex-direction: column;
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.4);
    -webkit-user-select: text;
    user-select: text;
}

.gal-lb-dialog-title {
    padding: 1rem 1.25rem 0.5rem;
    font-weight: 600;
    font-size: 1.05rem;
}

.gal-lb-dialog-list {
    overflow-y: auto;
    padding: 0.25rem 0.5rem;
}

.gal-lb-dialog-list button {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    padding: 0.55rem 0.75rem;
    border-radius: 0.5rem;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.gal-lb-dialog-list button:hover {
    background: #f1f3f4;
}

.gal-lb-dialog-list .gal-lb-dialog-path {
    display: block;
    font-size: 0.78rem;
    color: #5f6368;
}

.gal-lb-dialog-empty {
    padding: 0.75rem;
    color: #5f6368;
    font-size: 0.9rem;
}

.gal-lb-dialog-foot {
    padding: 0.5rem 0.75rem 0.75rem;
    text-align: right;
}

.gal-lb-dialog-foot button {
    border: 0;
    background: transparent;
    color: #1a73e8;
    font: inherit;
    font-weight: 600;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    cursor: pointer;
}

.gal-lb-dialog-foot button:hover {
    background: #e8f0fe;
}

.gal-lb-toast {
    position: absolute;
    left: 50%;
    bottom: 1.5rem;
    transform: translateX(-50%) translateY(10px);
    z-index: 6;
    background: #323232;
    color: #fff;
    padding: 0.6rem 1rem;
    border-radius: 0.4rem;
    font-size: 0.9rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    max-width: calc(100vw - 2rem);
}

.gal-lb-toast.show {
    opacity: 1;
    transform: translateX(-50%);
}

@media (max-width: 767px) {
    .gal-lb-prev, .gal-lb-next { display: none; } /* na mobilu swipe */
    .gal-lightbox.info-open .gal-lb-stage,
    .gal-lightbox.info-open .gal-lb-caption { right: 0; }
    .gal-lb-info { width: 100%; }
    .gal-lb-counter { display: none; }
}

/* ---------- Upload zóna ---------- */

.gal-upload {
    border: 2px dashed #cfd6e4;
    border-radius: 0.75rem;
    padding: 1.25rem;
    text-align: center;
    color: #78829d;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.gal-upload.dragging {
    border-color: var(--aav-primary, #1b6ec2);
    background: color-mix(in srgb, var(--aav-primary, #1b6ec2) 6%, #fff);
}

.gal-upload input[type=file] {
    display: none;
}

.gal-upload-list {
    margin-top: 0.5rem;
    text-align: left;
    font-size: 0.85rem;
}

.gal-upload-summary {
    font-weight: 600;
    padding: 0.35rem 0;
    color: #4b5675;
}

.gal-upload-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.2rem 0;
}

.gal-upload-row.ok .gal-upload-state { color: #17c653; }
.gal-upload-row.err .gal-upload-state { color: #f8285a; }
.gal-upload-row.wait .gal-upload-state { color: #f6b100; }

.gal-upload-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gal-upload-state {
    flex: 0 0 auto;
}

/* ---------- Admin: fotky v albu ---------- */

.gal-admin-photos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 1rem;
}

.gal-admin-photo {
    border: 1px solid #eff2f5;
    border-radius: 0.75rem;
    overflow: hidden;
}

.gal-admin-photo > img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    display: block;
}

.gal-admin-photo-body {
    padding: 0.75rem;
}

.gal-admin-photo-meta {
    font-size: 0.75rem;
    color: #99a1b7;
    margin-bottom: 0.5rem;
}