/**
 * Jonny B GmbH – Galerie CSS
 * Bildergitter + Lightbox-Platzhalter
 */

/* Galerie-Grid ist in responsive.css definiert (Mobile First) */

/* --------------------------------------------------------
 * Galerie-Kachel
 * -------------------------------------------------------- */
.gallery-item {
    position:       relative;
    overflow:       hidden;
    border-radius:  var(--radius-md);
    background:     var(--color-white);
    cursor:         pointer;
    box-shadow:     var(--shadow-sm);
    transition:     box-shadow var(--transition-base), transform var(--transition-base);
}
.gallery-item:hover {
    box-shadow:     var(--shadow-md);
    transform:      translateY(-2px);
}

/* Seitenverhältnis 4:3 erzwingen */
.gallery-item::before {
    content:        '';
    display:        block;
    padding-top:    75%;  /* 4:3 = 75% */
}

.gallery-item__img {
    position:   absolute;
    inset:      0;
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}
.gallery-item:hover .gallery-item__img {
    transform: scale(1.04);
}

/* Bildunterschrift (erscheint beim Hover) */
.gallery-item__caption {
    position:   absolute;
    bottom:     0;
    left:       0;
    right:      0;
    padding:    var(--space-4) var(--space-4) var(--space-3);
    background: linear-gradient(transparent, rgba(0,0,0,0.65));
    color:      var(--color-white);
    font-size:  var(--font-size-sm);
    opacity:    0;
    transition: opacity var(--transition-base);
    transform:  translateY(4px);
}
.gallery-item:hover .gallery-item__caption {
    opacity:    1;
    transform:  translateY(0);
}

/* --------------------------------------------------------
 * Lightbox (Vanilla JS – wird in gallery.js implementiert)
 * -------------------------------------------------------- */
.lightbox-overlay {
    display:        none;
    position:       fixed;
    inset:          0;
    z-index:        500;
    background:     rgba(0,0,0,0.92);
    align-items:    center;
    justify-content: center;
}
.lightbox-overlay.is-open {
    display: flex;
}

.lightbox-content {
    position:   relative;
    max-width:  90vw;
    max-height: 90vh;
}
.lightbox-content img {
    max-width:  90vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: var(--radius-sm);
}

.lightbox-caption {
    text-align: center;
    color:      var(--color-gray-300);
    font-size:  var(--font-size-sm);
    margin-top: var(--space-3);
}

.lightbox-close,
.lightbox-prev,
.lightbox-next {
    position:   absolute;
    background: rgba(255,255,255,0.15);
    border:     none;
    color:      var(--color-white);
    font-size:  1.5rem;
    width:      44px;
    height:     44px;
    border-radius: 50%;
    cursor:     pointer;
    display:    flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-fast);
}
.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover {
    background: rgba(255,255,255,0.30);
}

.lightbox-close { top: -22px; right: -22px; }
.lightbox-prev  { left: -22px; top: 50%; transform: translateY(-50%); }
.lightbox-next  { right: -22px; top: 50%; transform: translateY(-50%); }

/* ============================================================
 * Galerie-Blöcke (page_blocks – Layout-Templates)
 * Sechs Layout-Typen: text-full, img-full, img-left, img-right,
 * 3-images, img-tall
 * ============================================================ */

/* Hintergrund des gesamten Galerie-Bereichs */
.gallery-blocks {
    background: var(--color-gray-100);
    padding:    var(--space-4) 0;
    display:    flex;
    flex-direction: column;
    gap:        var(--space-4);
}

/* Jeder Block = weiße Kachel */
.gallery-block {
    background: var(--color-white);
}

.gallery-blocks__empty {
    padding:    var(--space-10) var(--container-pad);
    text-align: center;
    color:      var(--color-gray-500);
}

/* --------------------------------------------------------
 * text-full – Überschrift + Text volle Breite
 * -------------------------------------------------------- */
.gb-text {
    width:      100%;
    box-sizing: border-box;
    max-width:  var(--container-max);
    margin:     0 auto;
    padding:    var(--container-pad);
}
.gb-text h2 {
    margin-bottom: var(--space-4);
    color:         var(--color-gray-900);
}
.gb-text__content p  { margin-bottom: var(--space-3); color: var(--color-gray-700); line-height: var(--line-height-base); }
.gb-text__content ul,
.gb-text__content ol { margin-bottom: var(--space-3); padding-left: var(--space-6); }
.gb-text__content li { margin-bottom: var(--space-1); color: var(--color-gray-700); }
.gb-text__content a  { color: var(--color-primary); text-decoration: underline; }

/* --------------------------------------------------------
 * img-full – Bild über volle Breite
 * -------------------------------------------------------- */
.gb-img-full {
    width:     100%;
    max-width: var(--container-max);
    margin:    0 auto;
    overflow:  hidden;
}
.gb-img-full .gallery-item--full {
    border-radius: var(--radius-md);
    display:       block;
}
/* Seitenverhältnis Vollbild: 16:5 Desktop, 4:3 Mobil */
.gb-img-full .gallery-item--full::before {
    padding-top: 75%; /* 4:3 */
}
@media (min-width: 600px) {
    .gb-img-full .gallery-item--full::before { padding-top: 45%; }
}
@media (min-width: 900px) {
    .gb-img-full .gallery-item--full::before { padding-top: 31.25%; /* 16:5 */ }
}

/* --------------------------------------------------------
 * img-left / img-right – Split-Layout
 * Bild 40% + Text 60% (oder umgekehrt)
 * -------------------------------------------------------- */
.gb-split {
    width:     100%; /* Verhindert Flex-Schrumpfung bei margin: auto ohne Text-Inhalt */
    display:   grid;
    grid-template-columns: 1fr;
    min-height: 320px;
    max-width: var(--container-max);
    margin:    0 auto;
    box-sizing: border-box;
}
@media (min-width: 900px) {
    .gb-split--left  { grid-template-columns: 7fr 13fr; }  /* Bild 35% | Text 65% → Bild = 400px bei container-max */
    .gb-split--right { grid-template-columns: 13fr 7fr; }  /* Text 65% | Bild 35% */
}

/* Bild-Spalte: Bild mit festem 4:3-Verhältnis + abgerundeten Ecken.
   align-self: start verhindert Grid-Stretch (Bild skaliert nicht mit Texthöhe).
   ::before-Padding-Trick erzwingt 4:3 zuverlässig (aspect-ratio kämpft im Grid). */
.gb-split__img {
    padding:    var(--container-pad);
    align-self: start;
}
.gb-split__img .gallery-item--block {
    border-radius: var(--radius-md);
    /* aspect-ratio entfernt – ::before übernimmt die Höhe */
}
/* ::before-Override entfernt → base .gallery-item::before { padding-top: 75% } greift */

/* Video-Spalte (video-right) */
.gb-split__video {
    display: flex;
    align-items: center;
}
.gb-video {
    width:         100%;
    height:        auto;
    display:       block;
    aspect-ratio:  4 / 3;
    border-radius: var(--radius-md);
    object-fit:    contain;
    background:    #000;
}

/* Text-Spalte */
.gb-split__text {
    padding:        var(--container-pad);
    display:        flex;
    flex-direction: column;
    justify-content: center;
    gap:            var(--space-4);
}
.gb-split__text h2     { color: var(--color-gray-900); }
.gb-split__body p      { margin-bottom: var(--space-3); color: var(--color-gray-700); line-height: var(--line-height-base); }
.gb-split__body a      { color: var(--color-primary); text-decoration: underline; }
.gb-split__body b,
.gb-split__body strong { font-weight: var(--font-weight-semibold); }
.gb-split__link        { align-self: flex-start; }

/* --------------------------------------------------------
 * 3-images – Drei Bilder nebeneinander
 * -------------------------------------------------------- */
.gb-3images-wrap {
    width:     100%; /* Verhindert Flex-Schrumpfung bei margin: auto ohne Text-Inhalt */
    padding: var(--container-pad);
    max-width: var(--container-max);
    margin:    0 auto;
    box-sizing: border-box;
}
.gb-3images-wrap__heading {
    margin-bottom: var(--space-5);
}
.gb-3images {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}
@media (min-width: 600px) {
    .gb-3images { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
    .gb-3images { grid-template-columns: 1fr 1fr 1fr; }
}
/* Das ::before-Padding-Trick funktioniert nicht zuverlässig in CSS Grid.
   aspect-ratio übernimmt die Höhensteuerung. */
.gb-3images .gallery-item {
    aspect-ratio: 4 / 3;
}
.gb-3images .gallery-item::before {
    display: none;
}

/* --------------------------------------------------------
 * img-tall – Bild links (816px = 2×3images-Spalte), Textblock rechts (400px = 1×3images-Spalte)
 * Gleiche Rasterlogik wie 3-images: 3 Spalten à 400px, Bild überspannt Spalten 1+2.
 * -------------------------------------------------------- */
.gb-img-tall {
    width:      100%; /* Verhindert Flex-Schrumpfung bei margin: auto ohne Text-Inhalt */
    display:    grid;
    grid-template-columns: 1fr;
    max-width:  var(--container-max);
    margin:     0 auto;
    padding:    var(--container-pad);
    box-sizing: border-box;
}
@media (min-width: 900px) {
    .gb-img-tall {
        grid-template-columns: 1fr 1fr 1fr;  /* 3 Spalten à 400px (wie 3-images) */
        gap: var(--space-4);
    }
    .gb-img-tall__img { grid-column: 1 / 3; }  /* überspannt 2 Spalten = 816px */
}

/* Bild: 4:3-Verhältnis + abgerundete Ecken */
.gb-img-tall__img .gallery-item--block {
    aspect-ratio:  4 / 3;
    border-radius: var(--radius-md);
}
.gb-img-tall__img .gallery-item--block::before {
    display: none; /* aspect-ratio übernimmt die Höhe */
}

/* Text-Bereich: Überschrift oben, Text mittig, Button unten */
.gb-img-tall__text {
    display:         flex;
    flex-direction:  column;
    justify-content: space-between;
    padding:         var(--space-4) 0;
    gap:             var(--space-4);
}
.gb-img-tall__text h2  { color: var(--color-gray-900); }
.gb-img-tall__body p   { margin-bottom: var(--space-3); color: var(--color-gray-700); line-height: var(--line-height-base); }
.gb-img-tall__body a   { color: var(--color-primary); text-decoration: underline; }
.gb-img-tall__body     { margin-top: auto; }
.gb-img-tall__link     { align-self: flex-start; }

/* --------------------------------------------------------
 * img-2left – Zwei Bilder links (400px = 1×3images-Spalte), Textblock rechts (816px = 2×3images-Spalten)
 * Gleiche Rasterlogik wie img-tall, nur gespiegelt.
 * -------------------------------------------------------- */
.gb-img-2left {
    width:      100%; /* Verhindert Flex-Schrumpfung */
    display:    grid;
    grid-template-columns: 1fr;
    max-width:  var(--container-max);
    margin:     0 auto;
    padding:    var(--container-pad);
    box-sizing: border-box;
}
@media (min-width: 900px) {
    .gb-img-2left {
        grid-template-columns: 1fr 1fr 1fr;  /* 3 Spalten à 400px (wie 3-images) */
        gap: var(--space-4);
    }
    .gb-img-2left__imgs { grid-column: 1; }      /* Spalte 1 = 400px */
    .gb-img-2left__text { grid-column: 2 / 4; }  /* Spalten 2+3 = 816px */
}

/* Bilder-Spalte: zwei Bilder übereinander mit Abstand */
.gb-img-2left__imgs {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-4);
}
.gb-img-2left__imgs .gallery-item--block {
    aspect-ratio:  4 / 3;
    border-radius: var(--radius-md);
}
.gb-img-2left__imgs .gallery-item--block::before {
    display: none; /* aspect-ratio übernimmt die Höhe */
}

/* Text-Bereich: von oben, 16px Abstand links/rechts */
.gb-img-2left__text {
    display:         flex;
    flex-direction:  column;
    justify-content: flex-start;
    padding:         var(--space-4);
    gap:             var(--space-4);
}
.gb-img-2left__text h2  { color: var(--color-gray-900); }
.gb-img-2left__body p   { margin-bottom: var(--space-3); color: var(--color-gray-700); line-height: var(--line-height-base); }
.gb-img-2left__body a   { color: var(--color-primary); text-decoration: underline; }
.gb-img-2left__link     { align-self: flex-start; }