/* =============================================================
   LOC Product Gallery – gallery.css
   ============================================================= */

/* ---------------------------------------------------------------
   Hauptgalerie (linke Spalte)
   Alle Bilder werden vertikal gestapelt. Das übergeordnete
   FSE-Layout muss dafür sorgen, dass diese Spalte scrollbar ist
   (overflow-y: auto / scroll auf dem Wrapper oder via position:
   sticky auf der Gegenspalte – siehe Doku unten).
   ------------------------------------------------------------- */

.loc-main-gallery {
	display: flex;
	flex-direction: column;
	gap: 0; /* kein Gap – Bilder nahtlos aneinander */
	width: 100%;
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: 900px;
	overflow-y: auto;
	/* Sauberes Scrollverhalten */
	scroll-behavior: smooth;
	overscroll-behavior: contain;
	position: sticky;
	top: 50px;
}

.loc-main-gallery__item {
	margin: 0;
	padding: 0;
	display: block;
	width: 100%;
	/* Trennlinie zwischen Bildern – dezente Linie wie im Screenshot */
	/* border-bottom: 2px solid var(--loc-divider, #e8ecef); */
}

.loc-main-gallery__item:last-child {
	border-bottom: none;
}

.loc-main-gallery__link {
	display: block;
	line-height: 0;
	cursor: zoom-in;
}

.loc-main-gallery__img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	transition: opacity 0.2s ease;
}

.loc-main-gallery__link:hover .loc-main-gallery__img {
	opacity: 0.92;
}

/* Highlight-Rahmen wenn per Thumbnail angesprungen */
.loc-main-gallery__item.is-targeted {
	/* outline: 2px solid var(--loc-accent, #0af);
	outline-offset: -2px; */
}

/* ---------------------------------------------------------------
   Thumbnail-Galerie (rechte Spalte)
   Grid mit konfigurierbarer Spaltenanzahl.
   ------------------------------------------------------------- */

.loc-thumb-gallery {
	display: grid;
	grid-template-columns: repeat( var(--loc-thumb-cols, 5), 1fr );
	gap: 6px;
	width: 100%;
	margin: 0;
	padding: 0;
}

.loc-thumb-gallery__item {
	all: unset;
	display: block !important;
	cursor: pointer;
	aspect-ratio: 4 /3;
	overflow: hidden;
	background: var(--loc-thumb-bg, #f0f0f0);
	border: 2px solid transparent;
	transition:
		border-color 0.15s ease,
		opacity      0.15s ease,
		transform    0.15s ease;
	border-radius: 2px;
}

.loc-thumb-gallery__item:hover {
	opacity: 0.8;
	transform: scale(1.03);
}

.loc-thumb-gallery__item.is-active {
	border-color: var(--loc-accent, #0af);
}

.loc-thumb-gallery__item:focus-visible {
	outline: 2px solid var(--loc-accent, #0af);
	outline-offset: 2px;
}

.loc-thumb-gallery__item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
}

/* ---------------------------------------------------------------
   FSE-Layout-Hinweis (kein eigenes Layout – das erledigt der
   Gutenberg Two-Column-Block):

   Empfohlene FSE-Konfiguration im Site Editor:
   ┌──────────────────────────────────────────────────────────────┐
   │  Columns Block (100% Breite, kein Stack auf Mobile optional) │
   │  ├── Column 1 (~55%)  → [loc_main_gallery]                  │
   │  └── Column 2 (~45%)  → Produkttitel, Meta, WC-Buttons usw. │
   │                           [loc_thumb_gallery]                │
   └──────────────────────────────────────────────────────────────┘

   Damit die rechte Spalte beim Scrollen der Großbilder sticky
   bleibt, dem Column-2-Block folgende Custom CSS-Klasse geben:
       loc-sticky-col
   und den folgenden Regel ins Theme / Additional CSS eintragen
   (oder einen weiteren Style-Block im Site Editor nutzen):

       .loc-sticky-col {
           position: sticky;
           top: var(--wp-admin--admin-bar--height, 32px);
           align-self: flex-start;
           max-height: 100vh;
           overflow-y: auto;
       }

   Alternativ direkt hier definiert (auskommentiert, da es vom
   Theme-Layout abhängt):
   ------------------------------------------------------------- */

/*
.loc-sticky-col {
    position: sticky;
    top: var(--wp-admin--admin-bar--height, 32px);
    align-self: flex-start;
    max-height: calc(100vh - var(--wp-admin--admin-bar--height, 32px));
    overflow-y: auto;
}
*/

/* ---------------------------------------------------------------
   Responsive: auf kleinen Bildschirmen Thumbnails 4-spaltig
   ------------------------------------------------------------- */

@media (max-width: 768px) {
	.loc-thumb-gallery {
		grid-template-columns: repeat( 4, 1fr );
	}
}

@media (max-width: 480px) {
	.loc-thumb-gallery {
		grid-template-columns: repeat( 3, 1fr );
		gap: 4px;
	}
}