/* Band Gig Listings: minimal image overlay (independent of public.css) */

.tbsgl-overlay {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: grid;
	place-items: center;
}

.tbsgl-overlay[hidden] {
	display: none;
}

.tbsgl-overlay__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.75);
}

.tbsgl-overlay__panel {
	position: relative;
	margin: 0;
	max-width: min(92vw, 1100px);
	max-height: 92vh;
	padding: 0;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 20px 80px rgba(0, 0, 0, 0.35);
	background: #111;
}

.tbsgl-overlay__img {
	display: block;
	max-width: 92vw;
	max-height: 92vh;
	width: auto;
	height: auto;
}

.tbsgl-overlay__close {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	border: 0;
	cursor: pointer;
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	font-size: 26px;
	line-height: 1;
}

.tbsgl-overlay__close:hover {
	background: rgba(255, 255, 255, 0.22);
}

.tbsgl-overlay-open body {
	overflow: hidden;
}

/*
 * Shortcode list + card: inherit typography/colour from parent (e.g. Elementor heading
 * or widget). No fixed font sizes — keeps responsive/typography scale from the builder.
 */
.tbsgl-gig-list {
	font: inherit;
	color: inherit;
}

.tbsgl-gig-card {
	font: inherit;
	color: inherit;
}

/*
 * One row = flex; align-items center = typographic middle with icons.
 * Icon sizes scale with this line’s font-size: camera 1.5em (=24px at 16px), globe 1.875em (=30px at 16px), 1.25× ratio.
 */
.tbsgl-gig-card__primary-line {
	--tbsgl-gig-icon-camera: 1.5em;
	--tbsgl-gig-icon-globe: calc(var(--tbsgl-gig-icon-camera) * 1.25);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 0;
	row-gap: 0.15em;
	margin: 0.15em 0 0.35em;
}

.tbsgl-gig-card__primary-line > .tbsgl-gig-card__when,
.tbsgl-gig-card__primary-line > .tbsgl-gig-card__sep--before-venue {
	align-self: center;
}

/*
 * Camera: <a> inherits theme/Elementor :hover / :focus-visible link colours; overlay JS prevents navigation.
 */
.tbsgl-gig-card__primary-line .tbsgl-gig-card__image-open,
.tbsgl-gig-card__primary-line .tbsgl-gig-card__globe-open {
	margin: 0;
	margin-inline-start: 0.35em;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	font: inherit;
	font-size: inherit;
	line-height: 1;
	letter-spacing: inherit;
	font-weight: inherit;
	font-family: inherit;
	font-style: inherit;
	text-transform: inherit;
	color: inherit;
	text-decoration: none;
	cursor: pointer;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	align-self: center;
	flex-shrink: 0;
	overflow: hidden;
	box-sizing: border-box;
}

.tbsgl-gig-card__primary-line .tbsgl-gig-card__image-open {
	max-width: var(--tbsgl-gig-icon-camera) !important;
	max-height: var(--tbsgl-gig-icon-camera) !important;
}

.tbsgl-gig-card__primary-line .tbsgl-gig-card__globe-open {
	max-width: var(--tbsgl-gig-icon-globe) !important;
	max-height: var(--tbsgl-gig-icon-globe) !important;
}

.tbsgl-gig-card__primary-line .tbsgl-gig-card__image-open:focus-visible,
.tbsgl-gig-card__primary-line .tbsgl-gig-card__globe-open:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Keeps venue + icons on one typographic run; vertical-align via flex center. */
.tbsgl-gig-card__primary-line .tbsgl-gig-card__venue-with-media {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	flex-wrap: wrap;
	gap: 0.35em;
	min-width: 0;
	font: inherit;
	line-height: inherit;
}

.tbsgl-gig-card__primary-line .tbsgl-gig-card__venue-with-media .tbsgl-gig-card__venue {
	display: inline;
	min-width: 0;
}

.tbsgl-gig-card__primary-line .tbsgl-gig-card__venue-line {
	display: inline;
	white-space: normal;
}

/*
 * !important beats theme/Elementor svg rules. Sizes use em vars on .primary-line so they track text (24/30 at 16px).
 */
.tbsgl-gig-card__primary-line .tbsgl-gig-card__image-open-icon {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	line-height: 1;
	width: var(--tbsgl-gig-icon-camera) !important;
	height: var(--tbsgl-gig-icon-camera) !important;
	max-width: var(--tbsgl-gig-icon-camera) !important;
	max-height: var(--tbsgl-gig-icon-camera) !important;
	min-width: 0 !important;
	flex-shrink: 0;
	overflow: hidden;
	box-sizing: border-box;
}

.tbsgl-gig-card__primary-line .tbsgl-gig-card__globe-open-icon {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	line-height: 1;
	width: var(--tbsgl-gig-icon-globe) !important;
	height: var(--tbsgl-gig-icon-globe) !important;
	max-width: var(--tbsgl-gig-icon-globe) !important;
	max-height: var(--tbsgl-gig-icon-globe) !important;
	min-width: 0 !important;
	flex-shrink: 0;
	overflow: hidden;
	box-sizing: border-box;
}

.tbsgl-gig-card__primary-line .tbsgl-gig-card__image-open-icon svg,
.tbsgl-gig-card__venue-with-media > a.tbsgl-gig-card__image-open svg {
	display: block !important;
	width: var(--tbsgl-gig-icon-camera) !important;
	height: var(--tbsgl-gig-icon-camera) !important;
	max-width: var(--tbsgl-gig-icon-camera) !important;
	max-height: var(--tbsgl-gig-icon-camera) !important;
	min-width: 0 !important;
	min-height: 0 !important;
	flex-shrink: 0;
	object-fit: contain;
}

.tbsgl-gig-card__primary-line .tbsgl-gig-card__globe-open-icon svg,
.tbsgl-gig-card__venue-with-media > a.tbsgl-gig-card__globe-open svg {
	display: block !important;
	width: var(--tbsgl-gig-icon-globe) !important;
	height: var(--tbsgl-gig-icon-globe) !important;
	max-width: var(--tbsgl-gig-icon-globe) !important;
	max-height: var(--tbsgl-gig-icon-globe) !important;
	min-width: 0 !important;
	min-height: 0 !important;
	flex-shrink: 0;
	object-fit: contain;
}

/*
 * Narrow screens: row 1 = date only, row 2 = venue + camera.
 * Grid forces one column so flex-wrap can’t place date + “ - ” + venue on the same row (Elementor).
 * Multiple roots: list wrapper, or gig item only, or card only.
 */
@media (max-width: 782px) {
	.tbsgl-gig-list .tbsgl-gig-card__primary-line,
	.tbsgl-gig-item .tbsgl-gig-card .tbsgl-gig-card__primary-line,
	article.tbsgl-gig-card > .tbsgl-gig-card__primary-line {
		position: relative;
		display: grid !important;
		grid-template-columns: minmax(0, 1fr);
		row-gap: 0.35em;
		column-gap: 0;
		justify-items: center;
		align-items: center;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		text-align: center;
		box-sizing: border-box !important;
	}

	.tbsgl-gig-list .tbsgl-gig-card__primary-line > .tbsgl-gig-card__when,
	.tbsgl-gig-item .tbsgl-gig-card .tbsgl-gig-card__primary-line > .tbsgl-gig-card__when,
	article.tbsgl-gig-card > .tbsgl-gig-card__primary-line > .tbsgl-gig-card__when {
		grid-column: 1;
		width: 100%;
		max-width: 100%;
		min-width: 0;
		display: block !important;
		text-align: center;
		box-sizing: border-box;
	}

	.tbsgl-gig-list .tbsgl-gig-card__primary-line > .tbsgl-gig-card__sep--before-venue,
	.tbsgl-gig-item .tbsgl-gig-card .tbsgl-gig-card__primary-line > .tbsgl-gig-card__sep--before-venue,
	article.tbsgl-gig-card > .tbsgl-gig-card__primary-line > .tbsgl-gig-card__sep--before-venue {
		display: none !important;
		position: absolute !important;
		width: 0 !important;
		height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		overflow: hidden !important;
		clip: rect(0, 0, 0, 0) !important;
		border: 0 !important;
		visibility: hidden !important;
		pointer-events: none !important;
	}

	.tbsgl-gig-list .tbsgl-gig-card__primary-line > .tbsgl-gig-card__venue-with-media,
	.tbsgl-gig-item .tbsgl-gig-card .tbsgl-gig-card__primary-line > .tbsgl-gig-card__venue-with-media,
	article.tbsgl-gig-card > .tbsgl-gig-card__primary-line > .tbsgl-gig-card__venue-with-media {
		grid-column: 1;
		width: 100%;
		max-width: 100%;
		min-width: 0;
		display: inline-flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		justify-content: center !important;
		align-items: center !important;
		gap: 0.35em;
		box-sizing: border-box;
	}

	.tbsgl-gig-list .tbsgl-gig-card__venue-line,
	.tbsgl-gig-item .tbsgl-gig-card .tbsgl-gig-card__venue-line,
	article.tbsgl-gig-card .tbsgl-gig-card__venue-line {
		white-space: nowrap;
		max-width: 100%;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.tbsgl-gig-list .tbsgl-gig-card__primary-line .tbsgl-gig-card__image-open,
	.tbsgl-gig-item .tbsgl-gig-card .tbsgl-gig-card__primary-line .tbsgl-gig-card__image-open,
	article.tbsgl-gig-card .tbsgl-gig-card__primary-line .tbsgl-gig-card__image-open {
		margin-inline-start: 0 !important;
		flex: 0 0 auto !important;
		max-width: var(--tbsgl-gig-icon-camera) !important;
		max-height: var(--tbsgl-gig-icon-camera) !important;
	}

	.tbsgl-gig-list .tbsgl-gig-card__primary-line .tbsgl-gig-card__globe-open,
	.tbsgl-gig-item .tbsgl-gig-card .tbsgl-gig-card__primary-line .tbsgl-gig-card__globe-open,
	article.tbsgl-gig-card .tbsgl-gig-card__primary-line .tbsgl-gig-card__globe-open {
		margin-inline-start: 0 !important;
		flex: 0 0 auto !important;
		max-width: var(--tbsgl-gig-icon-globe) !important;
		max-height: var(--tbsgl-gig-icon-globe) !important;
	}

	.tbsgl-gig-list .tbsgl-gig-card__primary-line .tbsgl-gig-card__image-open-icon,
	.tbsgl-gig-item .tbsgl-gig-card .tbsgl-gig-card__primary-line .tbsgl-gig-card__image-open-icon,
	article.tbsgl-gig-card .tbsgl-gig-card__primary-line .tbsgl-gig-card__image-open-icon {
		width: var(--tbsgl-gig-icon-camera) !important;
		height: var(--tbsgl-gig-icon-camera) !important;
		max-width: var(--tbsgl-gig-icon-camera) !important;
		max-height: var(--tbsgl-gig-icon-camera) !important;
	}

	.tbsgl-gig-list .tbsgl-gig-card__primary-line .tbsgl-gig-card__globe-open-icon,
	.tbsgl-gig-item .tbsgl-gig-card .tbsgl-gig-card__primary-line .tbsgl-gig-card__globe-open-icon,
	article.tbsgl-gig-card .tbsgl-gig-card__primary-line .tbsgl-gig-card__globe-open-icon {
		width: var(--tbsgl-gig-icon-globe) !important;
		height: var(--tbsgl-gig-icon-globe) !important;
		max-width: var(--tbsgl-gig-icon-globe) !important;
		max-height: var(--tbsgl-gig-icon-globe) !important;
	}

	.tbsgl-gig-list .tbsgl-gig-card__primary-line .tbsgl-gig-card__image-open-icon svg,
	.tbsgl-gig-item .tbsgl-gig-card .tbsgl-gig-card__primary-line .tbsgl-gig-card__image-open-icon svg,
	article.tbsgl-gig-card .tbsgl-gig-card__primary-line .tbsgl-gig-card__image-open-icon svg {
		display: block !important;
		width: var(--tbsgl-gig-icon-camera) !important;
		height: var(--tbsgl-gig-icon-camera) !important;
		max-width: var(--tbsgl-gig-icon-camera) !important;
		max-height: var(--tbsgl-gig-icon-camera) !important;
		min-width: 0 !important;
		min-height: 0 !important;
	}

	.tbsgl-gig-list .tbsgl-gig-card__primary-line .tbsgl-gig-card__globe-open-icon svg,
	.tbsgl-gig-item .tbsgl-gig-card .tbsgl-gig-card__primary-line .tbsgl-gig-card__globe-open-icon svg,
	article.tbsgl-gig-card .tbsgl-gig-card__primary-line .tbsgl-gig-card__globe-open-icon svg {
		display: block !important;
		width: var(--tbsgl-gig-icon-globe) !important;
		height: var(--tbsgl-gig-icon-globe) !important;
		max-width: var(--tbsgl-gig-icon-globe) !important;
		max-height: var(--tbsgl-gig-icon-globe) !important;
		min-width: 0 !important;
		min-height: 0 !important;
	}
}