/* BAR Theme — Modal / lightbox overlay styles */

/* ---------------------------------------------------------------------------
 * Shared modal backdrop
 * --------------------------------------------------------------------------- */
.bar-modal-backdrop {
	position: fixed;
	inset: 0;
	z-index: 1000;
	background-color: rgba(0, 0, 0, 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.bar-modal-backdrop[hidden] {
	display: none;
}

/* ---------------------------------------------------------------------------
 * Modal dialog
 * --------------------------------------------------------------------------- */
.bar-modal {
	position: relative;
	background-color: #fff;
	border-radius: var(--bar-radius-modal); /* 80 8 80 8 */
	box-shadow: var(--bar-shadow-modal);
	max-width: 860px;
	width: 100%;
	max-height: 90vh;
	overflow-y: auto;
	padding: 48px;
}

.bar-modal__close {
	position: absolute;
	top: 20px;
	right: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--wp--preset--color--primary);
	border-radius: var(--bar-radius-base);
	transition: background-color 0.18s ease;
}

.bar-modal__close:hover {
	background-color: var(--wp--preset--color--accent-soft);
}

.bar-modal__close svg {
	width: 20px;
	height: 20px;
	fill: currentcolor;
}

/* ---------------------------------------------------------------------------
 * Team member modal (Figma "Frame 1321317501")
 * Top row: photo + name/role, with close top-right. Bio full width below.
 * --------------------------------------------------------------------------- */
#bar-team-modal {
	display: flex;
	flex-direction: column;
	gap: 38px;
	max-width: 890px;
	padding: 40px;
}

#bar-team-modal .bar-modal__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 34px;
	width: 100%;
}

#bar-team-modal .bar-modal__head {
	display: flex;
	align-items: center;
	gap: 34px;
	flex: 1 1 auto;
	min-width: 0;
}

#bar-team-modal .bar-modal__photo {
	flex: 0 0 auto;
	width: 301px;
	max-width: 46%;
	height: 257px;
	object-fit: cover;
	border-radius: var(--bar-radius-base) var(--bar-radius-base) 0 0;
	background: #fff;
}

#bar-team-modal .bar-modal__meta {
	min-width: 0;
	padding-inline: 20px;
}

#bar-team-modal .bar-modal__name {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: clamp(24px, 3vw, 30px);
	line-height: 1.5;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--secondary, #397767);
	margin: 0;
}

#bar-team-modal .bar-modal__role {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: clamp(18px, 2.5vw, 24px);
	line-height: 1.5;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--primary, #104246);
	margin: 4px 0 0;
}

/* Close sits in the top row (not absolute) for this modal */
#bar-team-modal .bar-modal__close {
	position: static;
	flex: 0 0 auto;
}

#bar-team-modal .bar-modal__bio {
	font-family: var(--wp--preset--font-family--body);
	font-size: clamp(16px, 2.5vw, 20px);
	line-height: 1.5;
	color: var(--wp--preset--color--primary, #104246);
	margin: 0;
}

/* ---------------------------------------------------------------------------
 * Demographics lightbox modal (Figma "Frame 1321317501")
 * Layout: prev arrow | image | next arrow.
 * --------------------------------------------------------------------------- */
#bar-demographics-modal {
	max-width: 1040px;
	padding: 40px;
}

#bar-demographics-modal .bar-modal__demo-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
	width: 100%;
}

#bar-demographics-modal .bar-modal__image {
	flex: 1 1 auto;
	min-width: 0;
	max-height: 70vh;
	width: auto;
	max-width: 910px;
	height: auto;
	object-fit: contain;
	border-radius: var(--bar-radius-base) var(--bar-radius-base) 0 0;
}

/* Icon-only prev/next arrows flanking the image */
.bar-modal__nav-btn {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--wp--preset--color--primary);
	border-radius: var(--bar-radius-base);
	transition: color 0.18s ease, background-color 0.18s ease, opacity 0.18s ease;
}

.bar-modal__nav-btn:hover:not(:disabled) {
	color: var(--wp--preset--color--accent);
	background-color: var(--wp--preset--color--accent-soft);
}

.bar-modal__nav-btn:disabled {
	opacity: 0.3;
	cursor: default;
}

.bar-modal__nav-btn svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentcolor;
	stroke-width: 2.5;
}

.bar-modal__nav-btn--prev svg {
	transform: rotate(180deg);
}

/* ---------------------------------------------------------------------------
 * Scroll lock (applied to body by JS when a modal is open)
 * --------------------------------------------------------------------------- */
body.bar-modal-open {
	overflow: hidden;
}

/* ---------------------------------------------------------------------------
 * Responsive
 * --------------------------------------------------------------------------- */
@media (max-width: 640px) {
	.bar-modal {
		padding: 32px 20px;
		border-radius: 40px 8px 40px 8px;
	}

	#bar-team-modal {
		padding: 32px 20px;
		gap: 24px;
	}

	/* Stack the photo above the name/role on mobile */
	#bar-team-modal .bar-modal__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}

	#bar-team-modal .bar-modal__photo {
		width: 100%;
		max-width: 100%;
		height: 240px;
	}

	#bar-team-modal .bar-modal__meta {
		padding-inline: 0;
	}
}