/* ============================================================================
   SEG Gallery component  ->  .seg_gallery
   ----------------------------------------------------------------------------
   Swiper-based gallery. All appearance is driven by --gallery_* tokens so a
   team can re-skin it from includes/custom-ui/<team>/styles.css without
   touching this file, e.g.:

       .seg_gallery {
           --gallery_max_width: 1070px;
           --gallery_radius:    10px;
           --gallery_border:    2px solid var(--color_3);
       }

   Arrows are our OWN elements (Swiper's default nav is not used). Dots use
   Swiper's pagination bullets, restyled via tokens.
   ============================================================================ */

.seg_gallery {
	/* ---- Overridable tokens (defaults match the legacy Galleria look) ---- */
	--gallery_max_width:        1070px;
	--gallery_height:           600px;
	--gallery_height_mobile:    400px;
	--gallery_side_gap:         45px;   /* L/R padding OUTSIDE max-width (matches Galleria)   */
	--gallery_side_gap_mobile:  30px;   /* reduced L/R padding at <=768px (matches Galleria)  */

	--gallery_bg:               transparent;
	--gallery_border:           none;
	--gallery_radius:           10px;

	--gallery_arrow_w:          72px;
	--gallery_arrow_h:          124px;
	--gallery_arrow_opacity:    0.75;
	--gallery_arrow_edge:       40px;  /* distance from image edge when arrows are OVER    */
	--gallery_arrow_edge_mobile: 0px;  /* edge distance at <=768px (Galleria drops to 0)   */
	--gallery_arrow_gutter:     80px;  /* side room reserved for arrows when OUTSIDE       */
	/* Arrow graphic: self-contained copy of the classic arrow sprite (kept in
	   this folder so the component doesn't depend on Galleria's assets). Override
	   these three tokens to use a different arrow image/icon. */
	--gallery_arrow_sprite:     url(classic-map.png);
	--gallery_arrow_pos_prev:   10px 46px;
	--gallery_arrow_pos_next:   -254px 46px;

	--gallery_dot_color:        rgba(255,255,255,0.55);
	--gallery_dot_active:       #fff;
	--gallery_dot_size:         10px;
	--gallery_dot_gap:          6px;

	--gallery_caption_bg:       rgba(0,0,0,0.55);  /* caption band (when captions on) */
	--gallery_caption_color:    #fff;
	--gallery_caption_size:     0.95rem;
	--gallery_caption_offset:   24px;              /* distance up from the image bottom */

	/* ---- Layout ---- */
	/* content-box so --gallery_side_gap padding sits OUTSIDE the max-width: the
	   image stays full width (1070) on desktop, but gains edge spacing on any
	   screen narrower than the max-width - exactly how Galleria behaves. */
	position: relative;
	box-sizing: content-box;
	max-width: var(--gallery_max_width);
	margin: 0 auto;
	padding: 0 var(--gallery_side_gap);
}

/* Arrows OUTSIDE need side room, so the photo doesn't sit under them */
.seg_gallery--arrows-outside {
	padding: 0 var(--gallery_arrow_gutter);
}

/* Optional full-width section background image behind the gallery.
   Rendered only when render_gallery() is passed a 'background_image'. The
   inline background-image is set on the element; size/position/padding here. */
.seg_gallery_section {
	background-size: var(--gallery_section_bg_size, cover);
	background-position: center;
	background-repeat: no-repeat;
	padding: var(--gallery_section_padding, 60px 20px);
}

/* Positioning context for the arrows: this wraps the image + arrows and its
   height equals the image height (dots live OUTSIDE it). So the arrows center
   on the IMAGE, not on image+dots - matching Galleria's vertical centering. */
.seg_gallery__stage {
	position: relative;
}

/* The image (Swiper root). overflow:hidden clips slides + border-radius;
   it does NOT clip the arrows - those are siblings inside the stage. */
.seg_gallery__swiper {
	position: relative;
	height: var(--gallery_height);
	background: var(--gallery_bg);
	border: var(--gallery_border);
	border-radius: var(--gallery_radius);
	overflow: hidden;
}

.seg_gallery .swiper-slide {
	position: relative;
	overflow: hidden;
}

.seg_gallery__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;          /* = Galleria imageCrop:true */
	object-position: center center;
}

/* Captions: off by default (Galleria showInfo:false). Enabled with the
   'captions' option (adds .seg_gallery--captions). Each slide carries its own
   caption, so only the active slide's shows. Positioned bottom-left over the
   image as a dark band, matching the legacy Galleria look. */
.seg_gallery__caption {
	display: none;
}

.seg_gallery--captions .seg_gallery__caption {
	display: inline-block;
	position: absolute;
	left: 0;
	bottom: var(--gallery_caption_offset);
	max-width: 90%;
	padding: 8px 16px;
	color: var(--gallery_caption_color);
	background: var(--gallery_caption_bg);
	font-size: var(--gallery_caption_size);
	line-height: 1.2;
	text-align: left;
	z-index: 6;
	pointer-events: none;
}

/* ----------------------------------------------------------------------------
   Custom arrows
   ---------------------------------------------------------------------------- */
.seg_gallery__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	width: var(--gallery_arrow_w);
	height: var(--gallery_arrow_h);
	padding: 0;
	margin: 0;
	/* Full reset - kill native <button> chrome so no bg/border shows on hover/focus */
	-webkit-appearance: none;
	appearance: none;
	border: 0;
	outline: 0;
	box-shadow: none;
	font-size: 0;                       /* hide the a11y text / fallback glyph */
	cursor: pointer;
	/* Arrow graphic = Galleria's own classic sprite, so the two galleries match
	   exactly. Path is relative to this file (…/ui-components/gallery/). */
	background-color: transparent;
	background-repeat: no-repeat;
	background-image: var(--gallery_arrow_sprite);
	transition: opacity 0.2s ease;
}

button.seg_gallery__nav:hover, button.seg_gallery__nav:focus {
	opacity: var(--gallery_arrow_opacity);
	background-color: transparent;
}

.seg_gallery__nav > i {
	display: none;                      /* sprite is used instead of the font glyph */
}

.seg_gallery__prev { background-position: var(--gallery_arrow_pos_prev); }
.seg_gallery__next { background-position: var(--gallery_arrow_pos_next); }

.seg_gallery__nav:hover,
.seg_gallery__nav:focus,
.seg_gallery__nav:active {
	outline: 0;
	opacity: 1;
}

/* Swiper marks a disabled arrow (non-loop, at an end) */
.seg_gallery__nav.swiper-button-disabled {
	opacity: 0.15;
	cursor: default;
}

/* Arrows OVER the image (default) - overlay the photo near its edges.
   Positioned relative to the stage (= image), so the edge inset is symmetric. */
.seg_gallery--arrows-over .seg_gallery__prev {
	left: var(--gallery_arrow_edge);
}
.seg_gallery--arrows-over .seg_gallery__next {
	right: var(--gallery_arrow_edge);
}

/* Arrows OUTSIDE the image - pushed fully off the photo into the side gutter
   (the gutter is reserved by --gallery_arrow_gutter padding on .seg_gallery). */
.seg_gallery--arrows-outside .seg_gallery__prev {
	left: 0;
	transform: translate(-100%, -50%);
}
.seg_gallery--arrows-outside .seg_gallery__next {
	right: 0;
	transform: translate(100%, -50%);
}

/* ----------------------------------------------------------------------------
   Dots (Swiper pagination bullets, restyled)
   ---------------------------------------------------------------------------- */
.seg_gallery__dots {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--gallery_dot_gap);
	width: 100%;
	z-index: 10;
}

.seg_gallery__dots .swiper-pagination-bullet {
	width: var(--gallery_dot_size);
	height: var(--gallery_dot_size);
	margin: 0 !important;       /* spacing handled by flex gap */
	background: var(--gallery_dot_color);
	opacity: 1;
	border-radius: 999px;
	transition: background 0.2s ease, transform 0.2s ease;
}

.seg_gallery__dots .swiper-pagination-bullet-active {
	background: var(--gallery_dot_active);
	transform: scale(1.15);
}

/* Dots BELOW the gallery (in normal flow, under the image) */
.seg_gallery--dots-below .seg_gallery__dots {
	position: static;
	margin-top: 16px;
}

/* Dots OVER the image, near the bottom */
.seg_gallery--dots-over .seg_gallery__dots {
	position: absolute;
	left: 0;
	bottom: 16px;
}

/* ----------------------------------------------------------------------------
   Single image - no controls
   ---------------------------------------------------------------------------- */
.seg_gallery--single .seg_gallery__nav,
.seg_gallery--single .seg_gallery__dots {
	display: none;
}

/* ----------------------------------------------------------------------------
   Responsive
   ---------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
	.seg_gallery {
		padding: 0 var(--gallery_side_gap_mobile);   /* 45px -> 30px, like Galleria */
	}
	.seg_gallery__swiper {
		height: var(--gallery_height_mobile);
	}
	/* Arrows move to the image edge on mobile, like Galleria (which drops its margin) */
	.seg_gallery--arrows-over .seg_gallery__prev {
		left: var(--gallery_arrow_edge_mobile);
	}
	.seg_gallery--arrows-over .seg_gallery__next {
		right: var(--gallery_arrow_edge_mobile);
	}
	.seg_gallery--arrows-outside {
		padding: 0 36px;
	}
}