/* Event pages (/stay-for/, /stay-near/).
   The hero is the THEME's header-hero section (see class-hero.php) and the
   page renders inside the theme's .container, so no widths are imposed here
   beyond what the platform already uses. */

/* Readability scrim, EVENT-PAGE HEROES ONLY: the image library is graded
   without a baked scrim, so bright images need this overlay behind the white
   title. Left-biased to sit under the text and leave the photo visible. */
.header-hero.bkbl-evp-hero {
	position: relative;
}

.header-hero.bkbl-evp-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.28) 55%, rgba(0, 0, 0, 0.05) 100%);
	pointer-events: none;
}

.header-hero.bkbl-evp-hero .header-hero__content {
	position: relative;
}

.header-hero.bkbl-evp-hero h1,
.header-hero.bkbl-evp-hero .wp-block-paragraph {
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.bkbl-evp__body {
	padding: 8px 0 40px;
}

.bkbl-evp__passage {
	font-size: 18px;
	line-height: 1.6;
	margin: 22px 0;
}

.bkbl-evp h2 {
	font-size: 22px;
	margin: 28px 0 12px;
}

/* ---- Series fixtures: date badge + theme button per row ---- */

.bkbl-evp__fixture {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 12px 0;
	border-bottom: 1px solid #edf0f2;
}

.bkbl-evp__fixture:last-child {
	border-bottom: 0;
}

.bkbl-evp__date {
	flex: 0 0 auto;
	width: 54px;
	text-align: center;
	border: 1px solid #d5e9f2;
	border-radius: 8px;
	background: #f2f9fc;
	padding: 6px 0;
	line-height: 1.1;
}

.bkbl-evp__date-day {
	display: block;
	font-size: 20px;
	font-weight: 700;
	color: #0d7fa8;
}

.bkbl-evp__date-month {
	display: block;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #0d7fa8;
}

.bkbl-evp__fixture-name {
	flex: 1 1 auto;
	font-size: 16px;
}

.bkbl-evp__fixture-btn {
	flex: 0 0 auto;
	padding: 8px 18px;
	font-size: 14px;
	white-space: nowrap;
}

/* ---- Listing grid: equal-height cards ---- */

.bkbl-evp__grid {
	margin-top: 12px;
}

.bkbl-evp__grid .hp-row {
	align-items: stretch;
}

.bkbl-evp__grid .hp-grid__item {
	display: flex;
}

.bkbl-evp__grid .hp-listing {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	width: 100%;
}

.bkbl-evp__grid .hp-listing__content {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.bkbl-evp__grid .hp-listing__footer {
	margin-top: auto;
}

/* ---- Map: HivePress map component in a contained band ---- */

.bkbl-evp__map {
	margin: 26px 0;
}

.bkbl-evp__map .hp-map {
	border-radius: 8px;
	overflow: hidden;
}

/* The VENUE is always marker 1 (rendered first): recolour it to the brand
   amber-gold so it stands apart from the standard listing pins. */
.bkbl-evp__map .mapboxgl-marker:first-of-type path[fill="#3FB1CE"] {
	fill: #f1bd6c;
}

/* ---- Event tiles (venue what's-on + city cross-links) ---- */

.bkbl-evp__eventgrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 20px;
	margin: 8px 0 26px;
}

.bkbl-evp__eventcard {
	display: block;
	border: 1px solid #edf0f2;
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
	transition: box-shadow 0.15s ease;
}

.bkbl-evp__eventcard:hover {
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}

.bkbl-evp__eventcard-img {
	display: block;
	aspect-ratio: 3 / 2;
	background: linear-gradient(135deg, #0d7fa8 0%, #1097c5 55%, #35b4dd 100%);
}

.bkbl-evp__eventcard-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bkbl-evp__eventcard-name {
	display: block;
	padding: 10px 12px 2px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	color: #1d2327;
}

.bkbl-evp__eventcard .bkbl-evp__when {
	display: block;
	padding: 0 12px 12px;
}

.bkbl-evp__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.bkbl-evp__when {
	color: #646970;
	font-size: 14px;
	white-space: nowrap;
}

/* The single call to action: centred, with real breathing room, so it reads as
   a destination rather than a footnote under the map. Size and colour come from
   the theme's own button--primary / button--large modifiers; only the placement
   is ours. Scoped under .bkbl-evp because the theme sets a 16px bottom margin on
   paragraphs that beats a bare class selector. */
.bkbl-evp .bkbl-evp__all {
	margin: 36px 0 44px;
	text-align: center;
}

@media (max-width: 600px) {
	.bkbl-evp .bkbl-evp__all {
		margin: 28px 0 32px;
	}

	/* Full width on a phone: the label carries a long venue name and looks
	   stranded as a narrow pill. */
	.bkbl-evp__all-btn {
		display: block;
	}
}

.bkbl-evp__prose {
	margin: 20px 0;
	line-height: 1.6;
}

.bkbl-evp__facts {
	margin: 18px 0;
}

@media (max-width: 600px) {
	.bkbl-evp__passage {
		font-size: 16px;
	}

	.bkbl-evp__fixture {
		flex-wrap: wrap;
	}

	.bkbl-evp__fixture-btn {
		margin-left: 70px;
	}
}