/* ==========================================================================
   MGC Photos  —  Hero-Bild und Thumbnail-Reihe
   Version 1.0.1  ·  2026-09-02

   Inhalt
     1  Rahmen
     2  Hero  (Quer- und Hochformat, Bildunterschrift)
     3  Thumbnail-Reihe
     4  Bewegungsreduktion
     5  Druck
   ========================================================================== */

.mygc-photos {
	/* Maximale Anzeigehoehe des Hero-Bildes. */
	--photo-hero-max-h: 450px;

	/* Hoehe der Thumbnail-Reihe. Die Breite ergibt sich je Bild aus dem
	   Seitenverhaeltnis. */
	--photo-thumb-h: 90px;

	/* Fuellfarbe hinter Hochformat-Bildern. Hell genug, um auf weissem Grund
	   nicht als Block zu wirken, dunkel genug, um den Bildrand zu zeigen. */
	--photo-fill: #ebebeb;

	/* MGC-Primaerfarbe. */
	--photo-accent: #1282aa;
}


/* ==========================================================================
   2.  HERO
   ========================================================================== */

.mygc-photos .mygc-photo-hero {
	margin: 0;
}

/* Der Knopf ist reiner Traeger fuer den Klick. */
.mygc-photos .mygc-photo-open {
	display:    block;
	width:      100%;
	padding:    0;
	border:     none;
	background: none;
	cursor:     zoom-in;
	line-height: 0;
}

.mygc-photos .mygc-photo-open:focus-visible {
	outline:        3px solid var(--photo-accent);
	outline-offset: 2px;
}

/* -- Querformat -- */

.mygc-photos .mygc-photo-hero-img {
	display:    block;
	width:      100%;
	height:     auto;
	max-height: var(--photo-hero-max-h);
	object-fit: cover;
}

/* -- Hochformat -- */

.mygc-photos .mygc-photo-hero.is-portrait .mygc-photo-open {
	display:         flex;
	align-items:     center;
	justify-content: center;
	height:          var(--photo-hero-max-h);
	background:      var(--photo-fill);
}

.mygc-photos .mygc-photo-hero.is-portrait .mygc-photo-hero-img {
	width:      auto;
	height:     100%;
	max-width:  100%;
	max-height: none;
	object-fit: contain;
}


/* -- Bildunterschrift -- */

.mygc-photos .mygc-photo-caption {
	margin-top:  0.4rem;
	font-size:   var(--wp--preset--font-size--small);
	line-height: 1.45;
	color:       #555555;
}


/* ==========================================================================
   3.  THUMBNAIL-REIHE
   ========================================================================== */

.mygc-photos .mygc-photo-strip-wrap {
	display:     flex;
	align-items: center;
	gap:         0.375rem;
	margin-top:  0.5rem;
}

.mygc-photos .mygc-photo-strip {
	position:    relative;
	flex:        1;
	display:     flex;
	gap:         0.375rem;
	margin:      0;
	padding:     0;
	list-style:  none;
	overflow-x:  auto;
	overflow-y:  hidden;
	scroll-behavior: smooth;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}

.mygc-photos .mygc-photo-strip::-webkit-scrollbar {
	height: 6px;
}

.mygc-photos .mygc-photo-strip::-webkit-scrollbar-thumb {
	background:    rgba(0, 0, 0, 0.25);
	border-radius: 3px;
}

.mygc-photos .mygc-photo-strip > li {
	flex:   0 0 auto;
	margin: 0;
}

.mygc-photos .mygc-photo-thumb {
	display:     block;
	padding:     0;
	border:      none;
	background:  none;
	cursor:      zoom-in;
	line-height: 0;
}

.mygc-photos .mygc-photo-thumb img {
	display: block;
	height:  var(--photo-thumb-h);
	width:   auto;
}

/* outline statt border: laesst das Layout in Ruhe. */
.mygc-photos .mygc-photo-thumb.is-active {
	outline:        3px solid var(--photo-accent);
	outline-offset: -3px;
}

.mygc-photos .mygc-photo-thumb:focus-visible {
	outline:        3px solid #000000;
	outline-offset: -3px;
}

/* -- Pfeile -- */

.mygc-photos .mygc-photo-nav {
	flex-shrink:     0;
	width:           28px;
	height:          var(--photo-thumb-h);
	display:         flex;
	align-items:     center;
	justify-content: center;
	padding:         0;
	border:          1px solid #cccccc;
	border-radius:   3px;
	background:      #f7f7f7;
	color:           #333333;
	font-size:       1.25rem;
	line-height:     1;
	cursor:          pointer;
	transition:      background 0.15s ease, border-color 0.15s ease;
}

.mygc-photos .mygc-photo-nav:hover {
	background:   #ececec;
	border-color: #b0b0b0;
}

.mygc-photos .mygc-photo-nav:focus-visible {
	outline:        2px solid var(--photo-accent);
	outline-offset: 1px;
}


/* ==========================================================================
   4.  BEWEGUNGSREDUKTION
   ========================================================================== */

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

	.mygc-photos .mygc-photo-strip {
		scroll-behavior: auto;
	}

	.mygc-photos .mygc-photo-nav {
		transition: none;
	}
}


/* ==========================================================================
   5.  DRUCK
   ========================================================================== */

@media print {

	.mygc-photos .mygc-photo-strip-wrap {
		display: none;
	}

	.mygc-photos .mygc-photo-hero.is-portrait .mygc-photo-open {
		height:     auto;
		background: none;
	}

	.mygc-photos .mygc-photo-hero-img {
		max-height: 12cm;
	}

	/* Die Nennung des Fotografen gehoert auch aufs Papier. */
	.mygc-photos .mygc-photo-caption {
		color: #000000;
	}
}