/* =========================================
   SERVIS / PŘEDPRODEJ – zoznam galérií (page.latte)
   ========================================= */
.gal-section {margin: 2rem 0 2.5rem;}
.gal-section__title {
    font-size: 1.35rem; margin: 0 0 1.25rem; padding-bottom: .6rem;
    border-bottom: 2px solid #eef0ea; position: relative;
}
.gal-section__title::after {
    content: ""; position: absolute; left: 0; bottom: -2px;
    width: 60px; height: 2px; background: #3E471D;
}

.gal-card {
    display: flex; flex-direction: column; height: 100%;
    background: #fff; border: 1px solid #e6e8e1; border-radius: 10px; overflow: hidden;
    box-shadow: 0 4px 14px rgba(0,0,0,.06);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.gal-card__img {display: block; position: relative; aspect-ratio: 4 / 3; background: #f1f2ee; overflow: hidden;}
.gal-card__img img {width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s ease;}
.gal-card__empty {position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #b5bba8;}
.gal-card__count {
    position: absolute; top: 10px; right: 10px;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px; border-radius: 20px;
    background: rgba(29,29,29,.7); color: #fff; font-size: .8rem; font-weight: 600;
}
.gal-card__title {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 12px 16px; border-top: 1px solid #eef0ea;
    font-weight: 700; font-size: 1rem; line-height: 1.3; color: #1d1d1d; background: #f7f8f4;
    transition: background-color .25s ease, color .25s ease; flex: 1 1 auto;
}
.gal-card__title svg {flex: 0 0 auto; color: #3E471D; transition: transform .25s ease, color .25s ease;}

.gal-card:hover {transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0,0,0,.12); border-color: #3E471D;}
.gal-card:hover .gal-card__img img {transform: scale(1.06);}
.gal-card:hover .gal-card__title {background: #3E471D; color: #fff;}
.gal-card:hover .gal-card__title svg {color: #fff; transform: translateX(4px);}


/* =========================================
   DETAIL GALÉRIE (gallery.latte)
   ========================================= */
.gal-back {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .9rem; font-weight: 600; color: #3E471D; margin: .5rem 0 1rem;
}
.gal-back:hover {opacity: .7; color: #3E471D;}
.gal-type {
    display: inline-block; margin-bottom: .4rem; padding: 3px 10px; border-radius: 20px;
    background: #eef0ea; color: #3E471D; font-size: .8rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .5px;
}
.page .gal-type + h1 {margin-top: .25rem;}
.gal-content {margin-bottom: 2rem;}

.servis-gallery {margin: 1.5rem 0;}
.servis-gallery__item {
    position: relative; display: block; overflow: hidden;
    aspect-ratio: 1 / 1; border-radius: 8px; background: #f1f1f1;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.servis-gallery__item img {width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease;}
.servis-gallery__item::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(62,71,29,.85) 0%, rgba(62,71,29,0) 55%);
    opacity: 0; transition: opacity .3s ease;
}
.servis-gallery__zoom {
    position: absolute; top: 50%; left: 50%; z-index: 2;
    width: 48px; height: 48px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.95); color: #3E471D;
    transform: translate(-50%, -50%) scale(.6); opacity: 0;
    transition: all .3s ease;
}
.servis-gallery__caption {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
    padding: .75rem; color: #fff; font-weight: 600; font-size: .9rem;
    transform: translateY(100%); transition: transform .3s ease;
}
.servis-gallery__item:hover img {transform: scale(1.08);}
.servis-gallery__item:hover::after,
.servis-gallery__item:hover .servis-gallery__zoom {opacity: 1;}
.servis-gallery__item:hover .servis-gallery__zoom {transform: translate(-50%, -50%) scale(1);}
.servis-gallery__item:hover .servis-gallery__caption {transform: translateY(0);}

@media (max-width: 768px) {
    .gal-card__title {font-size: .95rem; padding: 10px 12px;}
}