/**
 * Layout repairs for Eventin blocks rendered as Elementor widgets.
 *
 * Eventin's block CSS is written for its own page templates, where these
 * blocks always get a wide column. Several of them therefore set a fixed
 * min-width on flex or grid children and never wrap. Dropped into an Elementor
 * sidebar — every starter here uses a 34% column — those children cannot fit,
 * so they overflow the widget and get clipped.
 *
 * Every rule is scoped to `.elementor-widget[data-widget_type^="etnadfe-"]`, so Eventin's own
 * Gutenberg pages and shortcodes keep their original sizing untouched. The
 * intent is always "wrap instead of overflow": at full width these blocks look
 * exactly as before, and only a column too narrow for the fixed size stacks.
 *
 * The leading `.elementor-widget` is there for weight, not for matching: each
 * block also prints an inline `<style>` of the same specificity later in the
 * document, which would otherwise win on order.
 */

.elementor-widget[data-widget_type^="etnadfe-"] .elementor-widget-container {
	/* A flex or grid child defaults to min-width:auto and refuses to shrink
	   below its content, which is the other half of every overflow here. */
	min-width: 0;
}

.elementor-widget[data-widget_type^="etnadfe-"] img,
.elementor-widget[data-widget_type^="etnadfe-"] iframe,
.elementor-widget[data-widget_type^="etnadfe-"] video {
	max-width: 100%;
}

/* ------------------------------------------------------- date and time -- */

/*
 * Two cards, each min-width:350px, in a nowrap flex row: 700px of content in
 * whatever the column happens to be. Let them wrap and shrink, so they sit
 * side by side when there is room and stack when there is not.
 */
.elementor-widget[data-widget_type^="etnadfe-"] .etn-datetime-style-2-wrapper {
	flex-wrap: wrap;
}

.elementor-widget[data-widget_type^="etnadfe-"] .etn-datetime-card {
	min-width: 0;
	flex: 1 1 260px;
}

/* ------------------------------------------------------------ organizer -- */

/*
 * Grid items pinned to min-width:200px, which clips the name and email in a
 * narrow column.
 */
.elementor-widget[data-widget_type^="etnadfe-"] .etn-organizer-wrap {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}

.elementor-widget[data-widget_type^="etnadfe-"] .etn-organaizer-item {
	min-width: 0;
}

.elementor-widget[data-widget_type^="etnadfe-"] .etn-organaizer-item > * {
	min-width: 0;
	overflow-wrap: anywhere;
}

/* ------------------------------------------------------------- schedule -- */

/*
 * The block puts the day tabs and the session list side by side in a flex row.
 * In a sidebar the list is squeezed to ~190px, and the session row inside it
 * (a 12-column grid with its own padding) then pushes its toggle button well
 * past the edge. Allow the two halves to wrap so the sessions get the full
 * column width under the tabs.
 */
.elementor-widget[data-widget_type^="etnadfe-"] .schedule-block-wrapper {
	flex-wrap: wrap;
}

.elementor-widget[data-widget_type^="etnadfe-"] .etn-tab-content {
	min-width: 0;
	flex-basis: 100%;
}

.elementor-widget[data-widget_type^="etnadfe-"] .etn-single-schedule-item {
	flex-wrap: wrap;
}

.elementor-widget[data-widget_type^="etnadfe-"] .etn-schedule-content,
.elementor-widget[data-widget_type^="etnadfe-"] .etn-schedule-time {
	min-width: 0;
	box-sizing: border-box;
}

.elementor-widget[data-widget_type^="etnadfe-"] .etn-schedule-item-header {
	min-width: 0;
	gap: 8px;
}

.elementor-widget[data-widget_type^="etnadfe-"] .etn-schedule-toggle {
	flex: none;
}

/* ------------------------------------------------------- related events -- */

/*
 * Cards are pinned to a third of the row each. At sidebar width that is about
 * 160px, which is narrower than the "Attend" button's own padding, so the
 * button hangs outside the card. Let the row wrap and give each card a usable
 * minimum instead of a fixed fraction.
 */
.elementor-widget[data-widget_type^="etnadfe-"] .etn-related-events-grid {
	flex-wrap: wrap;
	/* The row uses negative side margins as a gutter, which assumes matching
	   padding on a parent that Elementor does not provide, so the row renders
	   wider than the widget. The card flex-basis below supplies the gutter. */
	margin-right: 0;
	margin-left: 0;
}

/*
 * Card width, which has to survive both a full-width row and a sidebar.
 *
 * Eventin sizes these cards with `flex: 0 0 calc(33.333% - 24px)` plus a
 * matching `max-width`, and steps down to 50% and then 100% at its own
 * breakpoints. Those breakpoints are viewport media queries, so a widget in a
 * 357px Elementor column on a desktop screen still gets the three-across rule
 * and every card is capped at about 95px.
 *
 * `max-width` is the half that matters and the half that was missing here
 * before: without overriding it, the min-width floor below pinned every card
 * at exactly 200px, leaving the rest of the column empty — cards too narrow
 * for their own content next to 157px of nothing.
 *
 * Keeping the basis at Eventin's own calc() means a wide row still lays out
 * three across exactly as it does on Eventin's own templates; the floor and
 * `flex-grow` only take over once the column is too narrow for that.
 *
 * `flex-grow` is what fills the column, and its one cost is that a
 * partly-filled last row stretches to fill the width rather than leaving a gap
 * — five cards across a wide row render 356/356/356 then 555/555. Container
 * queries would size the cards off the widget and avoid even that, but
 * `container-type: inline-size` on the widget container collapses the whole
 * widget to zero width here: size containment stops the contents sizing the
 * widget, and nothing in an Elementor container gives it a width to fall back
 * on. Measured, not assumed — the widget reported 0px wide.
 */
.elementor-widget[data-widget_type^="etnadfe-"] .etn-related-event-card {
	min-width: min(100%, 200px);
	max-width: 100%;
	flex: 1 1 calc(33.333% - 24px);
}

/* Event titles are links with no spaces to break on. */
.elementor-widget[data-widget_type^="etnadfe-"] .etn-event-title,
.elementor-widget[data-widget_type^="etnadfe-"] .etn-event-title a {
	overflow-wrap: anywhere;
}

.elementor-widget[data-widget_type^="etnadfe-"] .etn-event-item,
.elementor-widget[data-widget_type^="etnadfe-"] .etn-event-item * {
	min-width: 0;
}

/*
 * The card footer is a flex row, and the Attend button's wrapper shrinks to
 * about 50px while the button itself needs ~130px for its label plus padding,
 * so it hangs outside the card. Let the footer wrap and stop the wrapper
 * shrinking; the button then keeps its natural size and drops to its own line
 * when the card is narrow.
 */
.elementor-widget[data-widget_type^="etnadfe-"] .etn-event-footer {
	flex-wrap: wrap;
	gap: 8px;
}

.elementor-widget[data-widget_type^="etnadfe-"] .etn-atend-btn {
	max-width: 100%;
	flex: none;
}

/* ----------------------------------------------------------------- venue -- */

/*
 * Details and map sit in a nowrap flex row, both free to shrink. In a sidebar
 * neither overflows — they just keep getting narrower, until the map is a
 * useless vertical sliver a few pixels wide. Wrapping puts the map under the
 * details at full width instead; side by side returns once the column is wide
 * enough for both.
 */
.elementor-widget[data-widget_type^="etnadfe-"] .etn-venue-info-wrapper {
	flex-wrap: wrap;
}

.elementor-widget[data-widget_type^="etnadfe-"] .etn-venue-info-content,
.elementor-widget[data-widget_type^="etnadfe-"] .etn-venue-map-container {
	min-width: 0;
	flex: 1 1 280px;
}

/* The map itself is sized by the embed, so it needs telling to fill the space
   it has once it is on its own row. */
.elementor-widget[data-widget_type^="etnadfe-"] .etn-venue-map-container > * {
	width: 100%;
}

/*
 * The block's generated CSS sets width:100% and then adds horizontal margins,
 * so the container sits exactly its own margin past the widget on every
 * template. width:auto fills the same space with the margins accounted for.
 */
.elementor-widget[data-widget_type^="etnadfe-"] .eventin-block-container {
	box-sizing: border-box;
	width: auto;
	max-width: 100%;
}

.elementor-widget[data-widget_type^="etnadfe-"] .eventin-venue-value {
	overflow-wrap: anywhere;
}

/*
 * Editor-only placement notices printed by Context_Guard::notice(). Styled
 * here rather than inline so a theme can restyle or hide them.
 */
.etnadfe-notice {
	border: 1px dashed #c3c4c7;
	border-radius: 4px;
	padding: 16px;
	color: #50575e;
	font-size: 13px;
	line-height: 1.5;
}