/* ==========================================================================
   MGC Lightbox  —  gemeinsame Overlay-Basis
   Version 1.0.0  ·  2026-09-02

   Wird von mygc-lightbox.js erzeugt und von jedem Aufrufer geteilt:
   Foto-Galerie (photos.js) und ab Paket 2 auch die Webcam-Lightbox.

   Bewusst KLASSENBASIERT statt an einer ID: Auf einer Seite koennen
   grundsaetzlich mehrere Dialoge existieren, und eine doppelte ID waere
   ungueltiges HTML. Die frueheren Regeln unter #mygc-webcam-dialog und
   #dlg-img sind hier auf .mygc-lightbox und .dlg-img umgezogen.

   Groessensteuerung: Das JS reicht die nativen Pixelmasse des jeweiligen
   Bildes als --lb-w/--lb-h herein. Sie deckeln nach oben, der Viewport
   deckelt nach aussen. Weil max-width und max-height gemeinsam das
   Seitenverhaeltnis wahren und niemals vergroessern, bleibt ein kleines
   Bild in Originalgroesse, waehrend ein grosses so weit waechst, wie das
   Fenster es zulaesst.

   Inhalt
     1  Dialog + Backdrop
     2  Schliessen-Knopf
     3  Bildflaeche
     4  Fussleiste (Pfeile, Titel, Zaehler)
     5  Bewegungsreduktion
   ========================================================================== */


/* ==========================================================================
   1.  DIALOG + BACKDROP
   ========================================================================== */

.mygc-lightbox {
	/* Fallback, solange keine Masse bekannt sind: dann begrenzt allein der
	   Viewport. Das JS zieht echte Werte nach dem Laden nach. */
	--lb-w: 100vw;
	--lb-h: 100vh;

	/* Alles, was im Dialog nicht Bild ist: Polster plus Fussleiste. */
	--lb-chrome: 5rem;

	padding:       0;
	border:        none;
	border-radius: 6px;
	background:    #1a1a1a;
	color:         #e0e0e0;
	width:         fit-content;
	min-width:     min(92vw, 380px);
	max-width:     96vw;
	max-height:    96vh;
	overflow:      hidden;
	box-shadow:    0 8px 40px rgba(0, 0, 0, 0.7);
}

.mygc-lightbox::backdrop {
	background: rgba(0, 0, 0, 0.85);
}


/* ==========================================================================
   2.  SCHLIESSEN-KNOPF
   ========================================================================== */

.mygc-lightbox .dlg-close {
	position:        absolute;
	top:             8px;
	right:           8px;
	z-index:         1;
	width:           28px;
	height:          28px;
	display:         flex;
	align-items:     center;
	justify-content: center;
	border-radius:   50%;
	border:          none;
	background:      rgba(0, 0, 0, 0.55);
	color:           #fff;
	font-size:       0.875rem;
	line-height:     1;
	cursor:          pointer;
	transition:      background 0.15s ease;
}

.mygc-lightbox .dlg-close:hover {
	background: rgba(255, 255, 255, 0.35);
}


/* ==========================================================================
   3.  BILDFLAECHE
   ========================================================================== */

.mygc-lightbox .dlg-img-wrap {
	display:         flex;
	align-items:     center;
	justify-content: center;
	padding:         1rem;
	min-height:      120px;
}

.mygc-lightbox .dlg-img {
	display:       block;
	width:         auto;
	height:        auto;
	max-width:     min(96vw - 2rem, var(--lb-w));
	max-height:    min(96vh - var(--lb-chrome), var(--lb-h));
	border-radius: 2px;
	transition:    opacity 0.2s ease;
}

.mygc-lightbox .dlg-img.is-loading {
	opacity: 0.25;
}


/* ==========================================================================
   4.  FUSSLEISTE
   ========================================================================== */

.mygc-lightbox .dlg-bar {
	display:     flex;
	align-items: center;
	gap:         0.5rem;
	padding:     0.5rem 0.75rem;
	border-top:  1px solid #333;
	background:  #111;
}

.mygc-lightbox .dlg-prev,
.mygc-lightbox .dlg-next {
	flex-shrink:     0;
	width:           32px;
	height:          32px;
	display:         flex;
	align-items:     center;
	justify-content: center;
	border:          1px solid #444;
	border-radius:   50%;
	background:      transparent;
	color:           #e0e0e0;
	font-size:       1.25rem;
	line-height:     1;
	cursor:          pointer;
	transition:      background 0.15s ease, color 0.15s ease;
}

.mygc-lightbox .dlg-prev:hover:not(:disabled),
.mygc-lightbox .dlg-next:hover:not(:disabled) {
	background: rgba(255, 255, 255, 0.12);
	color:      #fff;
}

.mygc-lightbox .dlg-prev:disabled,
.mygc-lightbox .dlg-next:disabled {
	opacity: 0.3;
	cursor:  default;
}

.mygc-lightbox .dlg-info {
	flex:        1;
	text-align:  center;
	font-size:   0.8125rem;
	line-height: 1.35;
	/* Lange Bildunterschriften duerfen umbrechen, statt die Pfeile zu
	   verdraengen. Drei Zeilen sind die Grenze; darueber wird gekuerzt. */
	overflow:           hidden;
	display:            -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp:         3;
}

.mygc-lightbox .dlg-title {
	font-weight: 600;
}

/* Leere Bildunterschrift: keine Luecke, kein Platzhalter. */
.mygc-lightbox .dlg-title:empty {
	display: none;
}

.mygc-lightbox .dlg-counter {
	margin-left: 0.4rem;
	opacity:     0.55;
	font-size:   0.75rem;
	white-space: nowrap;
}

/* Sichtbarer Tastaturfokus auf dunklem Grund. */
.mygc-lightbox .dlg-close:focus-visible,
.mygc-lightbox .dlg-prev:focus-visible,
.mygc-lightbox .dlg-next:focus-visible {
	outline:        2px solid #ffffff;
	outline-offset: 2px;
}


/* ==========================================================================
   5.  BEWEGUNGSREDUKTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

	.mygc-lightbox .dlg-img,
	.mygc-lightbox .dlg-close,
	.mygc-lightbox .dlg-prev,
	.mygc-lightbox .dlg-next {
		transition: none;
	}
}