/* ============================================================
   Sportium Gallery — Frontend styles
   ============================================================

   Contents:
   1. Gallery grid (CSS-columns masonry)
   2. Gallery items & images
   3. Lazy-load states
   4. Modal overlay
   5. Modal toolbar (download + close)
   6. Modal body (image + nav arrows)
   7. Responsive overrides
   ============================================================ */

/* ── 1. Gallery grid ──────────────────────────────────────── */

.sportium-gallery-wrapper {
	width: 100%;
}

.sportium-gallery-grid {
	column-count: var( --sg-columns, 3 );
	column-gap:   14px;
	orphans: 1;
	widows:  1;
}

/* Hard-coded fallbacks for browsers without CSS custom properties */
.sportium-columns-1 { column-count: 1; }
.sportium-columns-2 { column-count: 2; }
.sportium-columns-3 { column-count: 3; }
.sportium-columns-4 { column-count: 4; }
.sportium-columns-5 { column-count: 5; }
.sportium-columns-6 { column-count: 6; }

/* ── 2. Gallery items & images ───────────────────────────── */

.sportium-gallery-item {
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	margin-bottom: 14px;
	overflow:      hidden;
	border-radius: 3px;
	line-height:   0; /* remove inline gap below <img> */
	position:      relative;
}

.sportium-gallery-item[role="button"] {
	cursor: pointer;
}

.sportium-gallery-item img {
	display:    block;
	width:      100%;
	height:     auto;
	opacity:    0;
	transition: transform .35s ease, opacity .4s ease;
}

.sportium-gallery-item[role="button"]:hover img,
.sportium-gallery-item[role="button"]:focus img {
	transform: scale( 1.04 );
}

.sportium-gallery-item[role="button"]:focus-visible {
	outline:        3px solid #005fcc;
	outline-offset: 2px;
}

/* ── 3. Lazy-load states ─────────────────────────────────── */

.sportium-gallery-item img.sportium-lazy {
	background: #e8eaed;
	min-height: 80px;
}

.sportium-gallery-item img.sportium-loaded {
	opacity: 1;
}

/* Empty-state paragraph */
.sportium-gallery-empty {
	color:      #888;
	font-style: italic;
}

/* ── 4. Modal overlay ────────────────────────────────────── */

.sportium-modal {
	display:         none;
	position:        fixed;
	inset:           0;
	z-index:         99999;
	align-items:     center;
	justify-content: center;
}

.sportium-modal.is-open {
	display: flex;
}

/* Prevent body scroll while modal is open */
body.sportium-modal-open {
	overflow: hidden;
}

.sportium-modal-overlay {
	position:   absolute;
	inset:      0;
	background: rgba( 0, 0, 0, 0.92 );
	cursor:     pointer;
}

.sportium-modal-container {
	position:        relative;
	z-index:         1;
	display:         flex;
	flex-direction:  column;
	width:           100%;
	height:          100%;
	max-width:       1600px;
	margin:          0 auto;
}

/* ── 5. Modal toolbar ────────────────────────────────────── */

.sportium-modal-toolbar {
	display:         flex;
	align-items:     center;
	justify-content: flex-end;
	gap:             12px;
	padding:         14px 20px;
	flex-shrink:     0;
	background:      rgba( 0, 0, 0, 0.55 );
	backdrop-filter: blur( 4px );
}

/* Download button */
.sportium-modal-download {
	display:         inline-flex;
	align-items:     center;
	gap:             7px;
	padding:         7px 16px;
	color:           #fff;
	font-size:       13px;
	font-weight:     500;
	line-height:     1;
	text-decoration: none;
	border:          1px solid rgba( 255, 255, 255, 0.45 );
	border-radius:   4px;
	transition:      background .2s, border-color .2s;
	white-space:     nowrap;

	
	text-decoration: none !important;
    text-transform: uppercase;
}

.sportium-modal-download:hover,
.sportium-modal-download:focus {
	background:   rgba( 255, 255, 255, 0.18 );
	border-color: rgba( 255, 255, 255, 0.9 );
	color:        #fff;
}

.sportium-modal-download:focus-visible {
	outline:        3px solid #fff;
	outline-offset: 2px;
}

/* Close button */
.sportium-modal-close {
	display:         flex;
	align-items:     center;
	justify-content: center;
	padding:         6px;
	background:      transparent;
	border:          none;
	color:           #fff;
	cursor:          pointer;
	opacity:         0.75;
	transition:      opacity .2s;
	border-radius:   4px;
}

.sportium-modal-close:hover,
.sportium-modal-close:focus {
	opacity: 1;
}

.sportium-modal-close:focus-visible {
	outline:        2px solid #fff;
	outline-offset: 2px;
}

/* ── 6. Modal body — image + nav arrows ──────────────────── */

.sportium-modal-body {
	display:         flex;
	flex:            1;
	align-items:     center;
	justify-content: center;
	gap:             10px;
	padding:         12px 16px;
	overflow:        hidden;
	min-height:      0;
}

/* Image wrapper */
.sportium-modal-img-wrap {
	flex:            1;
	display:         flex;
	align-items:     center;
	justify-content: center;
	overflow:        hidden;
	max-height:      100%;
}

.sportium-modal-img {
	max-width:    100%;
	max-height:   calc( 100vh - 120px );
	object-fit:   contain;
	border-radius: 2px;
	display:       block;
	transition:    opacity .25s ease;
}

/* Nav arrows */
.sportium-modal-prev,
.sportium-modal-next {
	flex-shrink:     0;
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           56px;
	height:          56px;
	background:      rgba( 255, 255, 255, 0.15 );
	border:          1px solid rgba( 255, 255, 255, 0.40 );
	border-radius:   50%;
	color:           #fff;
	cursor:          pointer;
	transition:      background .2s, transform .15s;
	padding:		 0;
}

.sportium-modal-prev svg,
.sportium-modal-next svg {
	display:      block;
	fill:         none !important;
	stroke:       #fff !important;
	overflow:     visible;
}

.sportium-modal-prev:hover,
.sportium-modal-next:hover {
	background: rgba( 255, 255, 255, 0.32 );
	transform:  scale( 1.06 );
}

.sportium-modal-prev:focus-visible,
.sportium-modal-next:focus-visible {
	outline:        3px solid #fff;
	outline-offset: 2px;
}

/* ── Modal footer (copyright) ────────────────────────────── */

.sportium-modal-footer {
	text-align:      center;
	padding:         8px 20px;
	color:           rgba( 255, 255, 255, 0.60 );
	font-size:       12px;
	line-height:     1.4;
	flex-shrink:     0;
	background:      rgba( 0, 0, 0, 0.50 );
	letter-spacing:  0.02em;
}

/* ── 7. Responsive ───────────────────────────────────────── */

/* Tablet: 2 or fewer columns */
@media ( max-width: 900px ) {
	.sportium-gallery-grid {
		column-count: min( var( --sg-columns, 3 ), 2 ) !important;
	}
	/* Fallback classes */
	.sportium-columns-4,
	.sportium-columns-5,
	.sportium-columns-6 {
		column-count: 2 !important;
	}
}

/* Mobile: always 1 column */
@media ( max-width: 600px ) {
	.sportium-gallery-grid {
		column-count: 1 !important;
	}

	.sportium-modal-prev,
	.sportium-modal-next {
		width:  44px;
		height: 44px;
	}

	.sportium-modal-body {
		padding: 8px;
		gap:     6px;
	}
}