@layer pages {
/* ============================================================
   JENNIQUE BEAUTY – pages/gallery.css
   pages/galerie.php + pages/vorher-nachher.php: Filter-Grid, Vorher/Nachher-
   Grid, Instagram-Sektion. Die mit der Startseite GETEILTEN Bausteine
   (.ba-pair/.ba-half/.ba-label*, Lightbox) liegen in components.css.
   Wird zusätzlich zu base.css + layout.css + components.css geladen.
   ============================================================ */

/* ============================================================
   GALERIE-SEITE
   ============================================================ */
#images,
#pairs {
    padding-top: clamp(2.5rem, 5vw, 3.5rem);
}

.gallery-filter {
    display: flex;
    gap: 0.45rem;
    flex-wrap: nowrap;
    max-width: 100%;
    margin: 0 -0.15rem 2.5rem;
    padding: 0.15rem;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.gallery-filter::-webkit-scrollbar { display: none; }
.filter-btn {
    flex: 0 0 auto;
    min-height: 44px;
    background: rgba(253,246,243,0.72);
    border: 1px solid var(--color-border);
    color: var(--color-text-light);
    padding: 0.65rem 1rem;
    font-size: 0.84rem;
    font-family: var(--font-body);
    font-weight: 600;
    line-height: 1;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.filter-btn.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}
.filter-btn:not(.active):hover {
    background: #fff;
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.filter-btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
}

/* 4 Spalten auf Desktop, 3 auf Mobil (s. @media max-width:768px weiter unten;
   auf Wunsch 2026-07-26 - war zuvor immer 2 Spalten, davor 3 auf Desktop).
   Gilt NUR fuer die Galerie-Seite (.gallery-grid); .ba-grid (Vorher/Nachher-
   Seite) bleibt bewusst unveraendert (eigene Spaltenzahl, s. dort). */
.gallery-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 0.85rem 0.68rem; }
/* Abstand zwischen letzter Bilderreihe und "Mehr anzeigen"-Button (Nutzerwunsch) */
.gallery-load-more-wrap { margin-top: 1.75rem; }
/* .btn (assets/css/components.css, @layer components) setzt display:inline-flex
   und macht das hidden-Attribut des "Mehr anzeigen"-Buttons dadurch sonst
   wirkungslos: [hidden] ist Teil des User-Agent-Stylesheets, .btn ist Autoren-
   CSS mit hoeherer Spezifitaet als der Selektor "[hidden]" allein - JS setzt
   btn.hidden zwar korrekt, sichtbar bleibt der Button aber trotzdem. Diese
   Regel liegt in @layer pages (s. includes/head.php: "base, components,
   layout, pages"), der letzten/staerksten Layer, und gewinnt daher unabhaengig
   von der eigenen Spezifitaet gegen .btn in @layer components. */
.gallery-load-more-wrap .btn[hidden] { display: none; }
.gallery-item {
    /* Hochformat 3:4 -> 4:5 umgestellt (2026-07-12, auf Wunsch, D-129) */
    aspect-ratio: 4/5;
    overflow: hidden;
    border-radius: 3px;
    background: var(--color-border);
    cursor: pointer;
    position: relative;
}
.gallery-item img { width:100%; height:100%; object-fit:cover; transition: transform 0.4s; }
.gallery-item:hover img { transform: scale(1.04); }

@media (min-width: 769px) and (hover: hover) and (pointer: fine) {
    .gallery-grid .gallery-item,
    #pairs .ba-grid .gallery-item {
        transform: translateZ(0) scale(1);
        transition:
            transform 500ms cubic-bezier(0.2, 0, 0.2, 1),
            box-shadow 500ms cubic-bezier(0.2, 0, 0.2, 1);
        transform-origin: center;
        will-change: transform, box-shadow;
    }
    .gallery-grid .gallery-item.is-hovered,
    #pairs .ba-grid .gallery-item.is-hovered {
        transform: scale(var(--gallery-hover-scale, 1.06));
        box-shadow: 0 16px 36px rgba(43, 24, 30, 0.18);
        z-index: 2;
    }
    .gallery-grid .gallery-item img,
    #pairs .ba-grid .gallery-item img {
        transition:
            transform 500ms cubic-bezier(0.2, 0, 0.2, 1),
            filter 500ms cubic-bezier(0.2, 0, 0.2, 1);
    }
    .gallery-grid .gallery-item:hover img,
    .gallery-grid .gallery-item.is-hovered img,
    #pairs .ba-grid .gallery-item:hover img,
    #pairs .ba-grid .gallery-item.is-hovered img {
        transform: none;
    }
    .gallery-grid .gallery-item.is-hovered img,
    #pairs .ba-grid .gallery-item.is-hovered img {
        filter: brightness(1.035) contrast(1.025) saturate(1.02);
    }
}

/* Verweis-Hinweis zwischen Galerie und Vorher/Nachher-Seite, bewusst oberhalb
   der Filter platziert. */
.gallery-ba-hint {
    margin: 0 0 0.95rem;
    font-size: 0.92rem;
    color: var(--color-text-light);
}
.gallery-ba-hint a { color: var(--color-primary); font-weight: 600; text-decoration: underline; }

/* Hinweistext, wenn (noch) keine echten lokalen Bilder vorhanden sind (D-131) */
.gallery-empty-hint {
    text-align: center;
    color: var(--color-text-light);
    font-size: 0.95rem;
    padding: 2.5rem 1rem;
    border: 1px dashed var(--color-border);
    border-radius: 8px;
}


/* ============================================================
   VORHER/NACHHER-SEITE
   ============================================================ */
.ba-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 0.53rem 0.85rem; }
.ba-grid:not(.is-filter-all) .gallery-service-label { display: none; }
/* .ba-item.gallery-item behaelt Cursor/Hover-Zoom der Basis-.gallery-item-Regel
   (frueher hier deaktiviert, weil der alte Ziehregler eine eigene Klick-/Drag-Logik
   hatte - jetzt Seite-an-Seite-Bilder, die wie normale Galerie-Bilder anklickbar
   sein sollen, s. .ai/context/decisions.md). */
.ba-item.gallery-item { aspect-ratio: auto; background: transparent; overflow: visible; }

/* ============================================================
   INSTAGRAM
   ============================================================ */
.instagram-section { padding: 5rem 0; }
.insta-handle { color: var(--color-primary); text-decoration: none; margin-left: 0.4rem; font-size: 0.95rem; }
.insta-handle:hover { text-decoration: underline; }

.instagram-grid {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 0.5rem;
    margin-top: 2rem;
}
.insta-item { aspect-ratio: 1; overflow: hidden; border-radius: 3px; background: var(--color-border); position: relative; display: block; }
.insta-item img { width:100%; height:100%; object-fit:cover; transition: transform 0.4s; }
.insta-item:hover img { transform: scale(1.06); }
.insta-overlay {
    position: absolute; inset: 0;
    background: rgba(44,26,34,0.38);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.25s;
}
.insta-item:hover .insta-overlay { opacity: 1; }
.instagram-placeholder { text-align: center; padding: 3rem; border: 1px dashed var(--color-border); border-radius: 5px; margin-top: 2rem; }
.instagram-placeholder p { color: var(--color-text-light); margin-bottom: 1.5rem; }
.btn-instagram {
    background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);
    color: #fff; border-color: transparent;
}
.btn-instagram:hover { opacity: 0.9; }


/* ============================================================
   RESPONSIVE (verschoben aus der ehemals zentralen RESPONSIVE-Sektion in
   style.css, zusammengefuehrt mit der jeweiligen Basisregel in dieser Datei)
   ============================================================ */
@media (max-width: 1024px) {
    .instagram-grid { grid-template-columns: repeat(3,1fr); }
}

@media (max-width: 768px) {
    .gallery-filter {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.55rem;
        margin: 0 0 2rem;
        padding: 0;
        overflow: visible;
    }
    .filter-btn {
        width: 100%;
        min-height: 46px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.7rem 0.65rem;
        line-height: 1.15;
        text-align: center;
        white-space: normal;
    }
    /* Auf Wunsch (2026-07-26): 2 Spalten auf Mobil (Desktop bleibt 4; war
       zwischenzeitlich 3). */
    .gallery-grid   { grid-template-columns: repeat(2,1fr); }
    .ba-grid        { grid-template-columns: repeat(2,1fr); }
    .instagram-grid { grid-template-columns: repeat(3,1fr); }
}

@media (max-width: 480px) {
    .ba-grid        { grid-template-columns: 1fr; }
    .instagram-grid { grid-template-columns: repeat(2,1fr); }
}
} /* Ende @layer pages */