.brxe-event-classic-pro {
	width: 100%;
}
.brxe-recurring-event-pro {
	width: 100%;
}
.brxe-event_ticket_form {
	width: 100%;
}

/*
 * Starter "Template One" sidebar: the organizer block renders a multi-column
 * grid whose column count is driven by the viewport width, not the container
 * width, so it overflows the narrow (33%) sidebar. Force a single column and
 * prevent grid children from overflowing inside the sidebar.
 */
.etn-bricks-sidebar .etn-organizer-style-1 .etn-organizer-wrap {
	grid-template-columns: 1fr;
}
.etn-bricks-sidebar .etn-organizer-wrap .etn-organaizer-item {
	min-width: 0;
}

/*
 * Event Logo (Field) element: the logo block renders the raw event logo image at
 * full width. Constrain it to a small, brand-mark size in the Bricks element.
 */
.etn-event-field-logo .etn-event-logo-img {
	max-height: 64px;
	max-width: 200px;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* ------------------------------------------------------------------ *
 * Starter Template Two & Three hero: event banner with overlaid content.
 * The banner element defines the hero height; an absolutely-positioned
 * overlay sits on top with a dark scrim so the (white) text stays legible.
 * ------------------------------------------------------------------ */
.etn-hero {
	position: relative;
}
.etn-hero .etn-hero-bg,
.etn-hero .etn-hero-bg .etn-event-field-banner,
.etn-hero .etn-hero-bg img {
	width: 100%;
	display: block;
}

.etn-hero-overlay {
	position: absolute !important;
	inset: 0 !important;
	display: flex !important;
	padding: 48px;
	box-sizing: border-box;
	background: linear-gradient( to bottom, rgba(10, 15, 30, 0.45), rgba(10, 15, 30, 0.7) );
}
.etn-hero--left {
	flex-direction: row !important;
	align-items: center;
	justify-content: flex-start;
}
.etn-hero--center {
	flex-direction: column !important;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 14px;
}

/* Force overlay text white for contrast over the photo. */
.etn-hero-overlay,
.etn-hero-overlay h1,
.etn-hero-overlay h2,
.etn-hero-overlay h3,
.etn-hero-overlay h4,
.etn-hero-overlay p,
.etn-hero-overlay span,
.etn-hero-overlay a,
.etn-hero-overlay .etn-event-entry-title {
	color: #fff !important;
}

/* Template Two hero: logo card + [tags, title] column, left-aligned. */
.etn-hero-row {
	flex-direction: row !important;
	align-items: center;
	gap: 24px;
}
.etn-hero-col {
	flex-direction: column !important;
	gap: 10px;
}
.etn-hero-logo {
	background: #fff;
	border-radius: 14px;
	padding: 18px;
	flex: 0 0 auto;
}
.etn-hero-logo .etn-event-logo-img {
	max-height: 90px;
	max-width: 150px;
}

/* Template Two meta strip: date/time on the left, countdown on the right. */
.etn-hero-meta {
	flex-direction: row !important;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 18px 0;
	border-bottom: 1px solid #e5e7eb;
}

/*
 * Related Events (Field) element: cards are wrapped in Eventin's grid columns
 * (.etn-col-lg-4 = 33%), so inside the ~65% main column they become too narrow —
 * titles wrap awkwardly and the "Attend" button / date clip. Let the columns
 * auto-fit (min 260px, wrap) so cards stay wide enough for their content.
 */
.brxe-related_event .etn-row {
	flex-wrap: wrap;
	gap: 24px;
}
.brxe-related_event [class*="etn-col-"] {
	flex: 1 1 260px !important;
	max-width: 100% !important;
	min-width: 0 !important;
	padding: 0;
}