/* ════════════════════════════════════════════════════════════════
   TEMPLATE — Vertical image gallery column
   ────────────────────────────────────────────────────────────────
   File:   .obsidian/plugins/slides-extended/css/template-gallery.css
   Requires: base.css, fonts.css, typography.css loaded first
   ════════════════════════════════════════════════════════════════ */

/* -- Tokens ---------------------------------------------------------
 *   --gallery-gap       uniform gap between images              (default: 20px)
 *   --gallery-radius    image corner radius                     (default: 4px)
 *   --gallery-bg        letterbox/background of frames, state 1 (default: transparent)
 *   --overlay-bg        cover color of the fragment overlay     (default: rgba(0,0,0,0.95))
 *                       set to match your slide column color
 *   --caption-h         reserved height for caption row         (default: 40px)
 *   --caption-pad       horizontal padding of caption           (default: 24px)
 *   --caption-color     caption text color                      (default: rgba(255,255,255,0.70))
 *   --caption-bg        caption bar background                  (default: transparent)
 *
 * Usage:
 *   <div class="mag-gallery-wrap">
 *     <div class="mag-gallery" style="--gallery-gap: 20px;">
 *       <div class="mag-gallery-frame"><img src="...state1a..."></div>
 *       <div class="mag-gallery-frame"><img src="...state1b..."></div>
 *       <div class="mag-gallery-overlay fragment" data-fragment-index="1"
 *            style="--overlay-bg: #333333;">
 *         <div class="mag-gallery-frame"><img src="...state2a..."></div>
 *         <div class="mag-gallery-frame"><img src="...state2b..."></div>
 *       </div>
 *     </div>
 *     <div class="mag-gallery-caption" style="--caption-color: #ffffff;">
 *       <span class="fragment fade-out" data-fragment-index="1">First caption</span>
 *       <span class="fragment"          data-fragment-index="1">Second caption</span>
 *     </div>
 *   </div>
 */
:root {
	--gallery-gap:    20px;
	--gallery-radius: 4px;
	--gallery-bg:     transparent;
	--overlay-bg:     rgba(0, 0, 0, 0.95);
	--caption-h:      40px;
	--caption-pad:    24px;
	--caption-color:  rgba(255, 255, 255, 0.70);
	--caption-bg:     transparent;
}

/* -- Gallery wrap ---------------------------------------------------
 * position: absolute; inset: 0 bypasses .col-* padding entirely,
 * filling the column from edge to edge.
 * Requires: .col-* inside .slide-sidebar has position: relative
 * (set via base.css: .reveal section.slide-sidebar .split > div)
 */
.mag-gallery-wrap {
	position:       absolute;
	inset:          0;
	display:        flex;
	flex-direction: column;
}

/* -- Gallery container ----------------------------------------------
 * flex: 1 — fills all height above the caption row.
 * position: relative — anchors the overlay.
 */
.mag-gallery {
	flex:           1;
	min-height:     0;
	display:        flex;
	flex-direction: column;
	gap:            var(--gallery-gap);
	width:          100%;
	position:       relative;
	background:     var(--gallery-bg);
}

/* -- Gallery frame --------------------------------------------------
 * object-fit: contain — full image, no crop.
 * Letterbox areas show --gallery-bg (default: transparent → slide bg).
 */
.mag-gallery-frame {
	flex:          1;
	min-height:    0;
	background:    var(--gallery-bg);
	border-radius: var(--gallery-radius);
	overflow:      hidden;
}
.mag-gallery-frame img {
	width:      100%;
	height:     100%;
	object-fit: contain;
	display:    block;
}

/* -- Bordered frame -------------------------------------------------
 * Removes object-fit so the img sizes to its natural ratio,
 * then the border sits exactly on the visible image edge.
 * Usage: <div class="mag-gallery-frame img-bordered"
 *              style="--border-w: 2px; --border-color: #ffffff;">
 */
.mag-gallery-frame.img-bordered {
	display:         flex;
	align-items:     center;
	justify-content: center;
}
.mag-gallery-frame.img-bordered img,
.mag-gallery-frame.img-bordered video {
	object-fit: unset;
	width:      auto;
	height:     auto;
	max-width:  100%;
	max-height: 100%;
	display:    block;
	border:     var(--border-w, 2px) solid var(--border-color, #ffffff);
}

/* -- Fragment overlay -----------------------------------------------
 * Covers state-1 images with --overlay-bg, then shows state-2 images.
 * Direct child of .mag-gallery (position: relative).
 * Set --overlay-bg inline to match your slide column color.
 * Default: nearly opaque black — safe for any background.
 */
.reveal .mag-gallery-overlay {
	position:         absolute;
	inset:            0;
	background-color: var(--overlay-bg) !important;
	display:          flex;
	flex-direction:   column;
	gap:              var(--gallery-gap);
}

/* -- Letterbox fill inside overlay ----------------------------------
 * Frames inside the overlay use the overlay's background color
 * so object-fit letterbox areas match the cover color, not black.
 */
.reveal .mag-gallery-overlay .mag-gallery-frame {
	background: var(--overlay-bg);
}

/* -- Caption row ----------------------------------------------------
 * Fixed height below the gallery. Transparent by default so the
 * slide background (SVG or color) shows through.
 * Two <span> children handle text switching via fragment fade-out/in.
 */
.mag-gallery-caption {
	flex-shrink:  0;
	height:       var(--caption-h);
	box-sizing:   border-box;
	display:      flex;
	align-items:  center;
	background:   var(--caption-bg);
	position:     relative;
	font-size:    var(--fs-caption);
	color:        var(--caption-color);
}
.mag-gallery-caption span {
	position: absolute;
	left:     var(--caption-pad);
	right:    var(--caption-pad);
}

.mag-gallery-frame video {
	width:      100%;
	height:     100%;
	object-fit: contain;
	display:    block;
}

/* -- Cycling gallery pair -------------------------------------------
 * Shows one .mag-gallery at a time, crossfading between them.
 * Use inside .mag-gallery-wrap (takes flex: 1 from the wrap).
 * data-cycle-delay on the wrapper controls interval in ms.
 *
 * Usage:
 *   <div class="mag-gallery-wrap">
 *     <div class="gallery-cycle" data-cycle-delay="2000">
 *       <div class="mag-gallery">...</div>
 *       <div class="mag-gallery">...</div>
 *     </div>
 *     <div class="mag-gallery-caption">...</div>
 *   </div>
 */
.gallery-cycle {
	flex:      1;
	min-height: 0;
	position:  relative;
}
.gallery-cycle > .mag-gallery {
	position:   absolute;
	inset:      0;
	height:     100%;
	opacity:    0;
	transition: opacity var(--gallery-cycle-transition, 0.6s) ease;
	pointer-events: none;
}
.gallery-cycle > .mag-gallery.gallery-active {
	opacity:       1;
	pointer-events: auto;
}