/* Eventit Events - frontend styling
   ------------------------------------------------------------------
   Everything configurable lives in CSS variables on #eventdetaillist.
   flex.css sets the defaults; the plugin prints an inline block (generated
   from the admin "Shortcode tilpasning" settings) after this file that
   overrides them. Layout variants are toggled by classes on the same
   container (eventit-date-*, eventit-tag-*, eventit-btn-*, eventit-desc-*).
   Inherits the site theme's font. */

#eventdetaillist {
	/* colours */
	--eventit-accent: #126666;
	--eventit-accent-soft: #e0eaea;
	--eventit-card-bg: #f7fbfe;
	--eventit-text: #1f2933;
	--eventit-muted: #5b6470;
	--eventit-title-color: #1f2933;
	--eventit-border: #e4e7ec;
	--eventit-border-width: 1px;
	/* shape */
	--eventit-radius: 0px;
	--eventit-shadow: 0 1px 2px rgba(16, 24, 40, .06);
	--eventit-shadow-hover: 0 6px 16px rgba(16, 24, 40, .10);
	--eventit-hover-lift: -1px;
	--eventit-gap: 16px;
	--eventit-pad: 20px;
	/* type */
	--eventit-title-size: 19px;
	--eventit-title-weight: 700;
	/* buttons */
	--eventit-btn-radius: 8px;
	--eventit-btn-pad: 8px 14px;
	--eventit-btn-font: 14px;
	--eventit-btn-info-bg: #effeff;
	--eventit-btn-info-fg: #262628;
	--eventit-btn-buy-bg: #effeff;
	--eventit-btn-buy-fg: #262628;

	font-family: inherit;
	color: var(--eventit-text);
}

#eventdetaillist .eventit-compact-wrap,
#eventdetaillist .eventit-box-wrapper {
	color: var(--eventit-text);
}

.no-x-margin, .eventit-compact-wrap {
	margin-left: 0!important;
	margin-right: 0!important;
}

.eventit-compact-wrap a {
	text-decoration: none;
}

/* ------------------------------------------------------------------
   Category palette
   Each class only defines variables; the structural rules below read them.
   Index 0 = "no palette" (neutral / custom accent / dark) -> accent vars.
   ------------------------------------------------------------------ */
.cat-color-acc-0  { --eventit-stripe: var(--eventit-accent); }
.cat-color-bg-0   { --eventit-date-bg: var(--eventit-accent-soft); }
.cat-color-span-0 { --eventit-tag: var(--eventit-accent); }
.border-acc-0     { --eventit-card-border-color: var(--eventit-accent-soft); }

.cat-color-acc-1  { --eventit-stripe: #126666; }
.cat-color-bg-1   { --eventit-date-bg: #e0eaea; }
.cat-color-span-1 { --eventit-tag: #126666; }
.border-acc-1     { --eventit-card-border-color: #e0eaea; }

.cat-color-acc-2  { --eventit-stripe: #26526C; }
.cat-color-bg-2   { --eventit-date-bg: #dfe6ea; }
.cat-color-span-2 { --eventit-tag: #26526C; }
.border-acc-2     { --eventit-card-border-color: #dfe6ea; }

.cat-color-acc-3  { --eventit-stripe: #649B1C; }
.cat-color-bg-3   { --eventit-date-bg: #e4e8dd; }
.cat-color-span-3 { --eventit-tag: #649B1C; }
.border-acc-3     { --eventit-card-border-color: #e4e8dd; }

.cat-color-acc-4  { --eventit-stripe: #4a176d; }
.cat-color-bg-4   { --eventit-date-bg: #e6e0ea; }
.cat-color-span-4 { --eventit-tag: #4a176d; }
.border-acc-4     { --eventit-card-border-color: #e6e0ea; }

.cat-color-acc-5  { --eventit-stripe: #700a7b; }
.cat-color-bg-5   { --eventit-date-bg: #eee6ef; }
.cat-color-span-5 { --eventit-tag: #700a7b; }
.border-acc-5     { --eventit-card-border-color: #eee6ef; }

.cat-color-acc-6  { --eventit-stripe: #AA1F1F; }
.cat-color-bg-6   { --eventit-date-bg: #ece3e3; }
.cat-color-span-6 { --eventit-tag: #AA1F1F; }
.border-acc-6     { --eventit-card-border-color: #ece3e3; }

.cat-color-acc-7  { --eventit-stripe: #AAAA1F; }
.cat-color-bg-7   { --eventit-date-bg: #eaeadf; }
.cat-color-span-7 { --eventit-tag: #AAAA1F; }
.border-acc-7     { --eventit-card-border-color: #eaeadf; }

.cat-color-acc-8  { --eventit-stripe: #8A2B5F; }
.cat-color-bg-8   { --eventit-date-bg: #eae0e6; }
.cat-color-span-8 { --eventit-tag: #8A2B5F; }
.border-acc-8     { --eventit-card-border-color: #eae0e6; }

.cat-color-acc-9  { --eventit-stripe: #418F2D; }
.cat-color-bg-9   { --eventit-date-bg: #e5ece3; }
.cat-color-span-9 { --eventit-tag: #418F2D; }
.border-acc-9     { --eventit-card-border-color: #e5ece3; }

.cat-color-acc-10  { --eventit-stripe: #67411c; }
.cat-color-bg-10   { --eventit-date-bg: #e8e2dc; }
.cat-color-span-10 { --eventit-tag: #67411c; }
.border-acc-10     { --eventit-card-border-color: #e8e2dc; }

/* ------------------------------------------------------------------
   LIST VIEW (compact)
   ------------------------------------------------------------------ */
.eventit-compact-wrap.eventdetailpanel {
	margin-bottom: var(--eventit-gap);
	box-shadow: var(--eventit-shadow);
	transition: box-shadow .18s ease, transform .18s ease;
}
.eventit-compact-wrap.eventdetailpanel:hover {
	box-shadow: var(--eventit-shadow-hover);
	transform: translateY(var(--eventit-hover-lift));
}

/* date column cells */
.eventit-compact-wrap .date-wrapper.compact .compact {
	color: var(--eventit-date-fg-custom, var(--eventit-text));
	background: var(--eventit-date-bg-custom, var(--eventit-date-bg, var(--eventit-accent-soft)));
	border-left: 7px solid var(--eventit-stripe, var(--eventit-accent));
	font-weight: 700;
	text-align: center;
	padding: 0;
	height: 33%;
}
.eventit-compact-wrap .time.compact, .eventit-compact-wrap .weekday.compact {
	padding-top: 5px;
}
.eventit-compact-wrap .weekday.compact {
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .06em;
	border-radius: var(--eventit-radius) 0 0 0;
}
.eventit-compact-wrap .time.compact {
	font-size: 15px;
	font-weight: 600;
	border-radius: 0 0 0 var(--eventit-radius);
}
.eventit-compact-wrap .date.compact {
	height: 34%;
	padding-top: 3px;
	font-size: 20px;
}

/* date style variants (list) */
#eventdetaillist.eventit-date-stripe .date-wrapper.compact .compact {
	background: transparent;
}
#eventdetaillist.eventit-date-plain .date-wrapper.compact .compact {
	background: transparent;
	border-left: 0!important;
	border-bottom: 0!important;
}
#eventdetaillist.eventit-date-stripe .right-event-wrapper.compact,
#eventdetaillist.eventit-date-plain .right-event-wrapper.compact,
#eventdetaillist.eventit-date-circle .right-event-wrapper.compact {
	border-radius: var(--eventit-radius);
}

/* For stripe / plain / circle the date column has no block of its own, so the
   whole row becomes the card and the date column sits inside it */
#eventdetaillist.eventit-date-stripe .eventdetailpanel.compact,
#eventdetaillist.eventit-date-plain .eventdetailpanel.compact,
#eventdetaillist.eventit-date-circle .eventdetailpanel.compact {
	background: var(--eventit-card-bg);
	border: var(--eventit-border-width) solid var(--eventit-border-custom, var(--eventit-border));
	border-radius: var(--eventit-radius);
}
#eventdetaillist.eventit-date-stripe .right-event-wrapper.compact,
#eventdetaillist.eventit-date-plain .right-event-wrapper.compact,
#eventdetaillist.eventit-date-circle .right-event-wrapper.compact {
	border: 0;
	border-radius: 0;
	background: transparent;
}
@media (min-width: 992px) {
	/* small inset so the stripe does not sit on the card edge */
	#eventdetaillist.eventit-date-stripe .date-wrapper.compact,
	#eventdetaillist.eventit-date-plain .date-wrapper.compact {
		margin-left: calc(var(--eventit-pad) * .5 - 15px);
	}
}

/* circle badge (list) */
.eventit-compact-wrap .eventit-date-circle-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	min-height: 110px;
	padding: 6px 0;
	text-align: center;
}
.eventit-compact-wrap .eventit-date-circle {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--eventit-date-bg-custom, var(--eventit-stripe, var(--eventit-accent)));
	color: var(--eventit-date-fg-custom, #ffffff);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	line-height: 1;
}
.eventit-compact-wrap .eventit-dc-day {
	font-size: 22px;
	font-weight: 700;
}
.eventit-compact-wrap .eventit-dc-month {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .06em;
	margin-top: 2px;
}
.eventit-compact-wrap .eventit-date-sub {
	margin-top: 6px;
	font-size: 12px;
	color: var(--eventit-muted);
	line-height: 1.4;
}
.eventit-compact-wrap .eventit-date-sub span {
	display: block;
}

/* content column - full rounding when there is no date column beside it */
#eventdetaillist .right-event-wrapper.compact.eventit-no-date {
	border-radius: var(--eventit-radius);
}

.eventit-compact-wrap .right-event-wrapper.compact {
	background: var(--eventit-card-bg);
	border: var(--eventit-border-width) solid var(--eventit-border-custom, var(--eventit-card-border-color, var(--eventit-border)));
	border-radius: 0 var(--eventit-radius) var(--eventit-radius) 0;
	padding: calc(var(--eventit-pad) * .4) var(--eventit-pad);
}

.eventit-compact-wrap .event-title-wrap.compact {
	padding-top: 8px;
	padding-right: 0;
	font-weight: var(--eventit-title-weight);
	font-size: var(--eventit-title-size);
	letter-spacing: -0.01em;
	line-height: 1.3;
	color: var(--eventit-title-color);
}
.eventit-compact-wrap .event-title-wrap.compact p {
	font-weight: 400;
	font-size: 15px;
	letter-spacing: 0;
	margin: 0;
	line-height: 25px;
	color: var(--eventit-muted);
	/* default: single line */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	height: 25px;
}
.eventit-compact-wrap .lower-event-blocks {
	min-height: 50px;
}
.eventit-compact-wrap .category-wrap.compact {
	min-height: 23px;
	padding: 0;
	overflow: hidden;
}
.eventit-compact-wrap .location-wrap.compact {
	min-height: 29px;
	line-height: 20px;
	padding: 0;
	margin-top: 0;
	box-shadow: none;
	border: 0;
}
.eventit-compact-wrap .location-wrap.compact p {
	font-size: 14px;
	color: var(--eventit-muted);
	display: inline-block;
	margin: -2px 0 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 100%;
	line-height: 25px;
}
.eventit-compact-wrap .location-wrap.compact .fa {
	color: var(--eventit-muted);
}
.eventit-compact-wrap .eventit-btn-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: flex-start;
	gap: 8px;
	padding-top: 10px;
	text-align: center;
}

/* ------------------------------------------------------------------
   Category tags
   ------------------------------------------------------------------ */
#eventdetaillist .cat-tag {
	display: inline-block;
	border: none!important;
	border-radius: 999px;
	background: var(--eventit-tag-bg-custom, var(--eventit-tag, var(--eventit-accent)));
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	line-height: 15px;
	padding: 3px 10px;
	margin: 2px 5px 2px 0;
	max-width: 100%;
	overflow-wrap: anywhere;
}
#eventdetaillist.eventit-tag-square .cat-tag {
	border-radius: 3px;
}
#eventdetaillist.eventit-tag-dot .cat-tag {
	background: transparent!important;
	color: var(--eventit-muted);
	padding: 3px 8px 3px 14px;
	position: relative;
}
#eventdetaillist.eventit-tag-dot .cat-tag::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 8px;
	height: 8px;
	margin-top: -4px;
	border-radius: 50%;
	background: var(--eventit-tag-bg-custom, var(--eventit-tag, var(--eventit-accent)));
}
#eventdetaillist.eventit-tags-hidden .cat-tag,
#eventdetaillist.eventit-tags-hidden .eventit-box-tags {
	display: none!important;
}
#eventdetaillist.eventit-tags-hidden .category-wrap.compact {
	min-height: 0;
}

/* ------------------------------------------------------------------
   Buttons (scoped with the id so they beat Bootstrap's .btn rules)
   ------------------------------------------------------------------ */
#eventdetaillist .btn {
	display: inline-block;
	font-size: var(--eventit-btn-font);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: .02em;
	text-decoration: none;
	text-transform: none;
	margin: 0;
	padding: var(--eventit-btn-pad)!important;
	border: 2px solid transparent;
	border-radius: var(--eventit-btn-radius);
	box-shadow: 0 1px 2px rgba(16, 24, 40, .08);
	transition: filter .15s ease, box-shadow .15s ease, transform .15s ease, background .15s ease;
	cursor: pointer;
	/* Labels come from the API and can be long ("UDSOLGT - TILMELD DIG VENTELISTEN"),
	   so buttons wrap inside themselves instead of forcing the card wider. */
	white-space: normal;
	max-width: 100%;
	overflow-wrap: anywhere;
}
#eventdetaillist .btn.button-info { --eventit-b-bg: var(--eventit-btn-info-bg); --eventit-b-fg: var(--eventit-btn-info-fg); }
#eventdetaillist .btn.button-buy  { --eventit-b-bg: var(--eventit-btn-buy-bg);  --eventit-b-fg: var(--eventit-btn-buy-fg); }
/* Sold out but the waiting list is open - own colours, own wording, still clickable */
#eventdetaillist .btn.eventit-state-waitlist { --eventit-b-bg: var(--eventit-btn-wait-bg); --eventit-b-fg: var(--eventit-btn-wait-fg); }

#eventdetaillist.eventit-btn-upper .btn {
	text-transform: uppercase;
}

/* filled */
#eventdetaillist.eventit-btn-filled .btn,
#eventdetaillist.eventit-btn-filled .btn:hover,
#eventdetaillist.eventit-btn-filled .btn:focus {
	background: var(--eventit-b-bg);
	color: var(--eventit-b-fg);
}
/* outline: background colour becomes border + text colour */
#eventdetaillist.eventit-btn-outline .btn,
#eventdetaillist.eventit-btn-outline .btn:hover,
#eventdetaillist.eventit-btn-outline .btn:focus {
	background: transparent;
	color: var(--eventit-b-bg);
	border-color: var(--eventit-b-bg);
	box-shadow: none;
}
#eventdetaillist.eventit-btn-outline .btn:hover {
	background: var(--eventit-b-bg);
	color: var(--eventit-b-fg);
}
/* link */
#eventdetaillist.eventit-btn-link .btn,
#eventdetaillist.eventit-btn-link .btn:hover,
#eventdetaillist.eventit-btn-link .btn:focus {
	background: transparent;
	color: var(--eventit-b-bg);
	border-color: transparent;
	box-shadow: none;
	padding-left: 0!important;
	padding-right: 0!important;
	text-decoration: underline;
	text-underline-offset: 3px;
}
#eventdetaillist.eventit-btn-link .btn:hover {
	text-decoration-thickness: 2px;
}

/* hover effects */
#eventdetaillist.eventit-btn-hover-darken .btn:hover {
	filter: brightness(.92);
	box-shadow: 0 3px 8px rgba(16, 24, 40, .14);
	transform: translateY(-1px);
}
#eventdetaillist.eventit-btn-hover-lighten .btn:hover {
	filter: brightness(1.08);
	box-shadow: 0 3px 8px rgba(16, 24, 40, .14);
	transform: translateY(-1px);
}
#eventdetaillist.eventit-btn-link .btn:hover,
#eventdetaillist.eventit-btn-outline .btn:hover {
	box-shadow: none;
	transform: none;
}

#eventdetaillist .btn.disabled,
#eventdetaillist .btn.disabled:hover {
	opacity: .55;
	cursor: not-allowed;
	pointer-events: none;
	box-shadow: none;
	transform: none;
	filter: none;
}

/* ------------------------------------------------------------------
   Description lines
   ------------------------------------------------------------------ */
#eventdetaillist.eventit-desc-1 .eventit-description {
	display: block!important;
	white-space: nowrap!important;
	overflow: hidden;
	text-overflow: ellipsis;
	height: auto;
}
#eventdetaillist.eventit-desc-2 .eventit-description {
	display: -webkit-box!important;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	white-space: normal!important;
	overflow: hidden;
	height: auto;
	line-height: 1.45;
	max-height: 2.9em;
}
#eventdetaillist.eventit-desc-all .eventit-description {
	white-space: normal!important;
	overflow: visible;
	height: auto;
	line-height: 1.45;
}

/* ------------------------------------------------------------------
   BOXED VIEW
   ------------------------------------------------------------------ */
#eventdetaillist .eventit-box-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--eventit-gap);
	margin: 10px 0;
}
#eventdetaillist .eventit-box-grid.eventit-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#eventdetaillist .eventit-box-grid.eventit-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.eventit-box-wrapper {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.eventit-box-wrapper .eventit-inner {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	padding: var(--eventit-pad);
	background: var(--eventit-card-bg);
	border: var(--eventit-border-width) solid var(--eventit-border);
	border-radius: var(--eventit-radius);
	box-shadow: var(--eventit-shadow);
	transition: box-shadow .18s ease, transform .18s ease;
}
.eventit-box-wrapper .eventit-inner:hover {
	box-shadow: var(--eventit-shadow-hover);
	transform: translateY(var(--eventit-hover-lift));
}
#eventdetaillist.eventit-date-stripe .eventit-box-wrapper .eventit-inner {
	border-left: 6px solid var(--eventit-stripe, var(--eventit-accent));
}

.eventit-box-wrapper .eventit-box-head {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}
.eventit-box-wrapper .eventit-box-body {
	min-width: 0;
	flex: 1 1 auto;
}

/* date badge */
.eventit-box-wrapper .eventit-box-date {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	line-height: 1;
	min-width: 44px;
}
.eventit-box-wrapper em {
	font-style: normal;
	display: block;
}
.eventit-box-wrapper em.date {
	font-weight: 700;
	font-size: 28px;
	line-height: 1;
	color: var(--eventit-date-fg-custom, var(--eventit-text));
}
.eventit-box-wrapper em.month {
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--eventit-muted);
	margin-top: 4px;
}
/* block: soft square */
#eventdetaillist.eventit-date-block .eventit-box-wrapper .eventit-box-date {
	width: 56px;
	height: 56px;
	border-radius: max(6px, calc(var(--eventit-radius) * .5));
	background: var(--eventit-date-bg-custom, var(--eventit-date-bg, var(--eventit-accent-soft)));
}
#eventdetaillist.eventit-date-block .eventit-box-wrapper em.date {
	font-size: 22px;
	color: var(--eventit-date-fg-custom, var(--eventit-stripe, var(--eventit-accent)));
}
#eventdetaillist.eventit-date-block .eventit-box-wrapper em.month {
	font-size: 11px;
	margin-top: 2px;
	color: var(--eventit-date-fg-custom, var(--eventit-text));
}
#eventdetaillist.eventit-date-block .eventit-box-wrapper .eventit-date-dot { display: none; }
/* circle: solid accent */
#eventdetaillist.eventit-date-circle .eventit-box-wrapper .eventit-box-date {
	width: 58px;
	height: 58px;
	border-radius: 50%;
	background: var(--eventit-date-bg-custom, var(--eventit-stripe, var(--eventit-accent)));
}
#eventdetaillist.eventit-date-circle .eventit-box-wrapper em.date,
#eventdetaillist.eventit-date-circle .eventit-box-wrapper em.month {
	color: var(--eventit-date-fg-custom, #ffffff);
}
#eventdetaillist.eventit-date-circle .eventit-box-wrapper em.date { font-size: 22px; }
#eventdetaillist.eventit-date-circle .eventit-box-wrapper em.month { font-size: 11px; margin-top: 2px; }
#eventdetaillist.eventit-date-circle .eventit-box-wrapper .eventit-date-dot { display: none; }

.eventit-box-wrapper .eventit-title,
.eventit-box-wrapper .eventit-description,
.eventit-compact-wrap .event-title-wrap.compact {
	overflow-wrap: anywhere;
	word-break: break-word;
}
.eventit-box-wrapper .eventit-title {
	font-weight: var(--eventit-title-weight);
	font-size: calc(var(--eventit-title-size) - 1px);
	letter-spacing: -0.01em;
	line-height: 1.3;
	margin: 2px 0 4px;
	color: var(--eventit-title-color);
}
.eventit-box-wrapper .eventit-description {
	font-size: 15px;
	line-height: 1.45;
	color: var(--eventit-muted);
	margin: 0 0 10px;
}

.eventit-box-wrapper .eventit-box-foot {
	margin-top: auto;
	padding-top: 8px;
}
.eventit-box-wrapper .eventit-box-tags {
	display: flex;
	flex-wrap: wrap;
}
.eventit-box-wrapper p.location {
	font-size: 12px;
	line-height: 17px;
	color: var(--eventit-muted);
	margin: 6px 0 10px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.eventit-box-wrapper p.location .fa {
	color: var(--eventit-muted);
	margin-right: 2px;
}
.eventit-box-wrapper .eventit-box-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 8px;
}
/* Narrow boxes (e.g. 4 columns): let the buttons share the row instead of
   stacking right-aligned. Container queries degrade gracefully. */
.eventit-box-wrapper .eventit-inner {
	container-type: inline-size;
}
@container (max-width: 300px) {
	#eventdetaillist.eventit-btn-filled .eventit-box-actions .btn,
	#eventdetaillist.eventit-btn-outline .eventit-box-actions .btn {
		flex: 1 1 auto;
		text-align: center;
	}
}
#eventdetaillist.eventit-btn-link .eventit-btn-row {
	gap: 8px 18px;
}

/* ------------------------------------------------------------------
   Empty state
   ------------------------------------------------------------------ */
#eventdetaillist .no-loaded-events {
	padding: 24px 0;
	color: var(--eventit-muted);
}
#eventdetaillist .no-loaded-events h3 {
	color: var(--eventit-title-color);
	margin: 0 0 6px;
}

/* ------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------ */
@media (max-width: 1199px) {
	#eventdetaillist .eventit-box-grid.eventit-cols-3,
	#eventdetaillist .eventit-box-grid.eventit-cols-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 767px) {
	#eventdetaillist .eventit-box-grid,
	#eventdetaillist .eventit-box-grid.eventit-cols-2,
	#eventdetaillist .eventit-box-grid.eventit-cols-3,
	#eventdetaillist .eventit-box-grid.eventit-cols-4 {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 991px) {
	/* list: date cells become a horizontal strip above the content */
	.eventit-compact-wrap .date-wrapper.compact {
		display: flex;
		flex-wrap: nowrap;
	}
	.eventit-compact-wrap .date-wrapper.compact .compact {
		flex: 1 1 0;
		min-height: 50px;
		line-height: 30px;
		border-left: none!important;
		border-bottom: 7px solid var(--eventit-stripe, var(--eventit-accent));
		border-radius: 0;
	}
	.eventit-date-plain .date-wrapper.compact .compact {
		border-bottom: 0!important;
	}
	.eventit-compact-wrap .weekday.compact {
		border-radius: var(--eventit-radius) 0 0 0;
	}
	.eventit-compact-wrap .time.compact {
		border-radius: 0 var(--eventit-radius) 0 0;
	}
	.eventit-compact-wrap .date.compact {
		line-height: 35px;
		flex: 1.6 1 0;
		white-space: nowrap;
		font-size: 18px;
	}
	.eventit-compact-wrap .weekday.compact,
	.eventit-compact-wrap .time.compact {
		white-space: nowrap;
	}
	.eventit-compact-wrap .right-event-wrapper.compact {
		border-radius: 0 0 var(--eventit-radius) var(--eventit-radius);
		padding-top: 10px;
		padding-bottom: 10px;
	}
	.eventit-compact-wrap .eventit-date-circle-wrap {
		flex-direction: row;
		gap: 12px;
		min-height: 0;
		padding: 8px 0;
	}
	.eventit-compact-wrap .eventit-date-sub {
		margin-top: 0;
		text-align: left;
	}
	.eventit-compact-wrap .eventit-btn-row {
		justify-content: flex-start;
	}
}

@media (min-width: 992px) {
	/* Fill the full card height so the date block aligns flush with the content bar */
	.eventit-compact-wrap .date-wrapper.compact {
		height: 100%;
		min-height: 110px;
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
	}
	.eventit-compact-wrap .date-wrapper.compact .compact {
		flex: 1 1 0;
		height: auto;
		display: flex;
		align-items: center;
		justify-content: center;
		padding-top: 0;
		border-bottom: none!important;
	}
}
