/**
 * Events (grb_event) – archive and single. Mobile-first (docs/styles refactor.md).
 * Breakpoints: base | ≥540px | ≥992px. Uses theme vars from style.css.
 */

/* Archive: section titles – larger */
.grb-events-archive .grb-events-section-title {
	font-family: var(--font-headline);
	font-weight: 600;
	font-size: 1.75rem;
	margin-bottom: 1rem;
	color: var(--black-faded);
}
.archive-locations-head .grb-header-title {
    font-size: clamp(1.25rem, 10vw, 7.75rem) !important;
}

.grb-events-empty {
	font-family: var(--font-body);
}

/* Venue back link (when filtered) */
.grb-events-venue-back-link {
	color: var(--blue-vibrant);
	text-decoration: none;
}

.grb-events-venue-back-link:hover {
	color: var(--blue-faded);
}

.grb-events-archive-title {
	font-family: var(--font-headline);
	font-weight: 600;
	font-size: 2.25rem;
	color: var(--black-faded);
}

@media (min-width: 576px) {
	.grb-events-archive-title {
		font-size: 2.5rem;
	}
}

@media (min-width: 992px) {
	.grb-events-archive-title {
		font-size: 2.75rem;
	}
}

/* Content below brick: filter and list on yellow – gap from brick, filter pushes content down */
.grb-events-below-header {
	background-color: var(--background);
	padding-top: 1.5rem; /* Gap from brick so yellow section is clearly separate */
	padding-bottom: 0.5rem;
	min-height: 0;
}

/* Filter by location: label above dropdown on yellow; section has room and does not extend header */
.grb-events-filters-section {
	margin-top: 0;
	margin-bottom: 0;
}
.grb-events-filters-section .row {
	align-items: flex-start;
}
.grb-events-filters-section .grb-events-filter {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-top: 0;
	padding: 0 0 1rem;
	width: 100%;
}

.grb-events-filters-section .form-label {
	font-size: 1.1rem;
	margin-bottom: 0;
	color: var(--black-vibrant);
}

.grb-events-filters-section .grb-events-select-wrap {
	position: relative;
	max-width: 100%;
	width: 100%;
}

/* Venue select: same height as search bar (overrides style.css font-size so filter isn’t oversized) */
.grb-events-filters-section .grb-events-select-wrap .grb-events-venue-select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	box-sizing: border-box;
	height: 2.5rem;
	min-height: 2.5rem;
	max-height: 2.5rem;
	line-height: 1.25;
	background-color: var(--white-vibrant);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2300b7df' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.5rem center;
	background-size: 0.75rem;
	border: 2px solid var(--grb-charcoal);
	border-radius: 4px;
	box-shadow: 3px 3px 0 var(--grb-charcoal);
	color: var(--blue-vibrant);
	cursor: pointer;
	font-family: var(--font-headline);
	font-size: 0.9375rem !important;
	font-weight: 600;
	padding: 0 2rem 0 0.75rem;
	width: 100%;
	text-align: left;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.grb-events-filters-section .grb-events-select-wrap .grb-events-venue-select:hover {
	background-color: var(--white-faded);
	border-color: var(--blue-vibrant);
	transform: translate(-2px, -2px);
	box-shadow: 4px 4px 0 var(--blue-vibrant);
}

.grb-events-filters-section .grb-events-select-wrap .grb-events-venue-select:focus {
	border-color: var(--blue-vibrant);
	outline: none;
}

/* Search events: form with input + button; control height matches venue select.
   #grb-events-filters ensures these override Bootstrap .form-control and .btn / .btn-primary. */
#grb-events-filters .grb-events-search-wrap .grb-events-search-form {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: stretch;
}
#grb-events-filters .grb-events-search-wrap .grb-events-search-input,
#grb-events-filters .grb-events-search-wrap input.grb-events-search-input.form-control {
	flex: 1 1 12rem;
	min-width: 0;
	min-height: 2.5rem;
	height: auto;
	border: 2px solid var(--grb-charcoal) !important;
	border-radius: 4px !important;
	box-shadow: 3px 3px 0 var(--grb-charcoal) !important;
	font-family: var(--font-headline) !important;
	font-size: 0.9375rem !important;
	padding: 0.5rem 1rem !important;
	background-color: var(--white-vibrant);
	color: var(--black-faded);
}
#grb-events-filters .grb-events-search-wrap .grb-events-search-input:focus,
#grb-events-filters .grb-events-search-wrap input.grb-events-search-input.form-control:focus {
	border-color: var(--blue-vibrant) !important;
	outline: none !important;
	box-shadow: 3px 3px 0 var(--blue-vibrant) !important;
}
/* Search button: sky blue, white bold uppercase, black border (like SELECT OPTIONS), compact width */
#grb-events-filters .grb-events-search-wrap .grb-events-search-submit,
#grb-events-filters .grb-events-search-wrap button.grb-events-search-submit.btn-primary {
	flex: 0 0 auto;
	min-height: 2.5rem;
	padding: 0.5rem 1rem !important;
	background-color: #4dbbe3 !important;
	color: var(--white-vibrant) !important;
	border: 2px solid var(--grb-charcoal) !important;
	border-radius: 4px !important;
	box-shadow: 3px 3px 0 var(--grb-charcoal) !important;
	font-family: var(--font-headline) !important;
	font-size: 0.9375rem !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.02em;
	transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
#grb-events-filters .grb-events-search-wrap .grb-events-search-submit:hover,
#grb-events-filters .grb-events-search-wrap button.grb-events-search-submit.btn-primary:hover {
	background-color: #3aa9d1 !important;
	color: var(--white-vibrant) !important;
	border-color: var(--grb-charcoal) !important;
	transform: translate(-2px, -2px);
	box-shadow: 4px 4px 0 var(--grb-charcoal) !important;
}
#grb-events-filters .grb-events-search-wrap .grb-events-search-submit:focus,
#grb-events-filters .grb-events-search-wrap button.grb-events-search-submit.btn-primary:focus {
	outline: none !important;
	border-color: var(--grb-charcoal) !important;
	box-shadow: 3px 3px 0 var(--grb-charcoal) !important;
}
.grb-events-search-no-results,
.grb-events-search-results-for {
	font-family: var(--font-body);
	color: var(--grey-dark);
}

/* ≥992px: filter column is 50% (col-lg-6); allow dropdown to use ~2× previous width */
@media (min-width: 992px) {
	.grb-events-filters-section .grb-events-select-wrap {
		max-width: 600px;
	}
}

/* Jump to past events – anchor link for external hyperlinking (#past-events) */
.grb-events-jump {
	font-family: var(--font-body);
	transition: opacity 0.2s ease, height 0.2s ease, margin 0.2s ease;
}

.grb-events-jump.is-past-visible {
	opacity: 0;
	height: 0;
	margin: 0;
	padding: 0;
	overflow: hidden;
	pointer-events: none;
}

.grb-events-jump-link {
	text-decoration: none;
}

.grb-events-jump-link:hover {
	color: var(--blue-vibrant);
	border-color: var(--blue-vibrant);
}

/* Scroll-margin so anchor isn’t hidden under fixed nav */
#past-events {
	scroll-margin-top: 5rem;
}

/* Event cards (archive) – ensure readable text on card body */
.grb-event-card .card-body {
	color: var(--black-faded);
	background-color: var(--white-vibrant);
}

.grb-event-card-date {
	color: var(--grey-dark);
}

.grb-event-card-venue,
.grb-event-card-cost {
	color: var(--black-faded);
}

.grb-event-card-inner {
	border-radius: 0.375rem;
	border: 1px solid var(--border);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	background-color: var(--white-vibrant);
}

.grb-event-card-link:hover .grb-event-card-inner {
	border-color: var(--blue-faded);
	box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
}

.grb-event-card-image {
	overflow: hidden;
	border-radius: 0.375rem 0.375rem 0 0;
}

.grb-event-card-img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	object-position: center center;
	display: block;
}

.grb-event-card-no-img .grb-event-card-img {
	min-height: 180px;
}

.grb-event-card-title {
	font-family: var(--font-headline);
	font-weight: 600;
	color: var(--black-faded);
}

.grb-event-card-link:hover .grb-event-card-title {
	color: var(--blue-vibrant);
}

.grb-event-card-date,
.grb-event-card-venue {
	font-family: var(--font-body);
	color: var(--black-faded);
}

.grb-event-card-cost {
	font-family: var(--font-body);
	font-weight: 600;
	color: var(--grey-dark);
}

/* Responsive: section titles */
@media (min-width: 576px) {
	.grb-events-archive .grb-events-section-title {
		font-size: 2rem;
	}
}

@media (min-width: 992px) {
	.grb-events-archive .grb-events-section-title {
		font-size: 2.25rem;
		margin-bottom: 1.25rem;
	}
}

/* Responsive: archive container and sections */
.grb-events-archive {
	padding-left: 1rem;
	padding-right: 1rem;
}

@media (min-width: 576px) {
	.grb-events-archive {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}
}

@media (min-width: 992px) {
	.grb-events-archive .grb-events-section {
		margin-bottom: 2.5rem;
	}
}

/* Responsive: event cards grid (Bootstrap cols handle layout; ensure spacing) */
.grb-events-archive .grb-event-cards {
	row-gap: var(--space-5);
}

.grb-event-card {
	margin-bottom: 0;
}

@media (min-width: 992px) {
	.grb-events-archive .grb-event-cards {
		row-gap: var(--space-6);
	}
}

/* Responsive: card body and typography */
.grb-event-card .card-body {
	padding: var(--space-4);
}

.grb-event-card-title {
	font-size: 1.1rem;
}

@media (min-width: 576px) {
	.grb-event-card .card-body {
		padding: var(--space-5);
	}
	.grb-event-card-title {
		font-size: 1.2rem;
	}
}

@media (min-width: 992px) {
	.grb-event-card-title {
		font-size: 1.25rem;
	}
}

/* Responsive: jump button */
.grb-events-jump .btn {
	font-size: 0.95rem;
	padding: 0.5rem 1rem;
}

@media (min-width: 576px) {
	.grb-events-jump .btn {
		font-size: 1rem;
		padding: 0.5rem 1.25rem;
	}
}

/* ========== Single event page ========== */
/* Single event header: constrain hero image to container width (do not stretch beyond) */
.single-grb_event .archive-header .archive-image-wrap {
	position: absolute;
	inset: 0;
	z-index: -1;
	display: flex;
	justify-content: center;
	overflow: hidden;
}
.single-grb_event .archive-header .archive-image-wrap .archive-image {
	width: 100%;
	max-width: 1140px;
	height: 100%;
	min-height: 40vh;
	object-fit: cover;
	object-position: top center;
	display: block;
}

/* Section uses yellow background; brick is only in the header above */
.grb-event-single {
	background-color: var(--background);
	padding-left: 1rem;
	padding-right: 1rem;
}

.grb-event-single-inner {
	color: var(--black-faded);
	font-family: var(--font-body);
}

.grb-event-single-title {
	font-family: var(--font-headline);
	font-weight: 600;
	font-size: 1.75rem;
	color: var(--black-faded);
	margin-bottom: 0.5rem;
}

.grb-event-single-date {
	font-family: var(--font-body);
	color: var(--grey-dark);
	font-size: 1rem;
	margin-bottom: 0.25rem;
}

.grb-event-single-venue {
	font-family: var(--font-body);
	color: var(--black-faded);
	font-weight: 600;
}

.grb-event-single-address {
	color: var(--grey-dark);
}

.grb-event-single-cost {
	font-family: var(--font-body);
	font-weight: 600;
	color: var(--grey-dark);
}

/* Header row: time/address + add-to-calendar; at 768px side-by-side, top-aligned, button right; wraps when narrow */
.grb-event-single-header-row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 1rem;
}
.grb-event-single-header-details {
	flex: 1 1 auto;
	min-width: 12rem; /* allow row to wrap before button and time overlap */
}
.grb-event-single-header-row .grb-event-add-to-calendar {
	flex: 0 0 auto;
}

@media (min-width: 768px) {
	.grb-event-single-header-row {
		justify-content: space-between;
	}
	.grb-event-single-header-row .grb-event-add-to-calendar {
		margin-left: auto;
	}
}

/* When row wraps (e.g. narrow 768px): button sits below details, no overlap */
@media (max-width: 767px) {
	.grb-event-single-header-row .grb-event-add-to-calendar {
		width: 100%;
	}
}

.grb-event-single-image {
	overflow: hidden;
	border-radius: 0.375rem;
}

.grb-event-single-img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
	object-position: center center;
}

.grb-event-single-content {
	color: var(--black-faded);
}

.grb-event-single-content a {
	color: var(--blue-vibrant);
}

.grb-event-single-content a:hover {
	color: var(--blue-faded);
}

/* Ticket link: uses .grb-cta-button (style.css) */
.grb-event-single-ticket {
	margin-top: 1rem;
}

/* Add to calendar: one button with dropdown (Google / ICS) */
.grb-event-add-to-calendar {
	display: inline-block;
}
.grb-event-add-to-calendar-btn {
	font-family: var(--font-headline);
	font-weight: 600;
	text-transform: uppercase;
	background-color: var(--white-vibrant);
	color: var(--blue-vibrant);
	border: 2px solid var(--grey-dark);
	border-radius: 4px;
	box-shadow: 3px 3px 0 var(--grey-dark);
	padding: 0.65rem 1.25rem;
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.grb-event-add-to-calendar-btn:hover {
	border-color: var(--blue-vibrant);
	transform: translate(-2px, -2px);
	box-shadow: 4px 4px 0 var(--blue-vibrant);
	color: var(--blue-vibrant);
}
.grb-event-add-to-calendar-btn:focus,
.grb-event-add-to-calendar-btn:active,
.grb-event-add-to-calendar.dropdown.show .grb-event-add-to-calendar-btn {
	background-color: var(--white-vibrant) !important;
}
.grb-event-add-to-calendar .dropdown-menu {
	background-color: var(--white-vibrant);
	border: 2px solid var(--grey-dark);
	box-shadow: 3px 3px 0 var(--grey-dark);
}
.grb-event-add-to-calendar .dropdown-item.grb-event-calendar-google,
.grb-event-add-to-calendar .dropdown-item.grb-event-calendar-ics {
	color: var(--blue-vibrant);
	font-weight: 600;
}
.grb-event-add-to-calendar .dropdown-item:hover {
	background-color: var(--white-faded);
	color: var(--blue-faded);
}

/* Venue + map (Open in maps is on the map embed) */
.grb-event-venue-map-details {
	color: var(--black-faded);
	font-family: var(--font-body);
}
.grb-event-map-embed {
	background: var(--white-faded);
	border-radius: 0.375rem;
	overflow: hidden;
}
.grb-event-map-embed iframe {
	width: 100%;
	height: 100%;
	border: 0;
}

/* Back to Events link: visual style from .grb-cta-button (style.css) */

@media (min-width: 576px) {
	.grb-event-single {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}
	.grb-event-single-title {
		font-size: 2rem;
	}
	.grb-event-single-date {
		font-size: 1.05rem;
	}
}

@media (min-width: 992px) {
	.grb-event-single-title {
		font-size: 2.25rem;
		margin-bottom: 0.75rem;
	}
	.grb-event-single-header {
		margin-bottom: 1.5rem;
	}
	.grb-event-single-content {
		font-size: 1.05rem;
		line-height: 1.6;
	}
}