/**
 * 2Funky What's On
 *
 * Deliberately thin. Anything a person might want to change -- colours,
 * typography, spacing, image size -- is an Elementor control and arrives as
 * generated CSS, so it can be changed without touching this file.
 */

.tfwo-list {
	display: flex;
	flex-direction: column;
	gap: 48px; /* Overridden by the Elementor "Space between events" control. */
}

.tfwo-card {
	display: flex;
	align-items: flex-start;
	gap: 28px; /* Overridden by "Space between image and text". */
}

.tfwo-card__media {
	/* Width arrives as a custom property from the Elementor control. */
	flex: 0 0 var(--tfwo-media-width, 190px);
	width: var(--tfwo-media-width, 190px);
	max-width: 100%;
	line-height: 0; /* Kills the descender gap under an inline image. */
}

.tfwo-card__img {
	display: block;
	width: 100%;
	height: auto;
}

.tfwo-card__body {
	flex: 1 1 auto;
	min-width: 0; /* Lets a long unbroken word wrap instead of stretching the row. */
}

.tfwo-card__title {
	margin: 0 0 0.15em;
	line-height: 1.15;
}

.tfwo-card__date,
.tfwo-card__blurb {
	margin: 0 0 0.2em;
	line-height: 1.4;
}

/* Bold, so the date reads as the first thing under the event name.
   Family and size are left to inherit, as on the button -- only the weight
   is being stated, and the Elementor typography control still overrides it. */
.tfwo-card__date {
	font-weight: 700;
}

.tfwo-card__btn {
	display: inline-block;
	margin-top: 14px;
	padding: 12px 26px;
	border: 0;
	border-radius: 8px;
	background-color: #1863DC;
	color: #FFFFFF;
	text-decoration: none;
	/* Font family is deliberately NOT set: inheriting keeps the button on
	   whatever the theme uses for its own buttons (Poppins today), so it
	   follows a future theme change instead of drifting away from it.
	   Weight matches the theme's buttons; the size is larger, as the
	   design asks. Both are overridden by the Elementor typography control
	   the moment anyone touches it. */
	font-weight: 700;
	font-size: 21px;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.tfwo-card__btn:hover,
.tfwo-card__btn:focus-visible {
	background-color: #0056A7;
	color: #FFFFFF;
	text-decoration: none;
}

/* Keyboard users need to see where they are; the hover colour alone is not
   enough of a signal when there is no pointer. */
.tfwo-card__btn:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 3px;
}

.tfwo-empty {
	margin: 0;
}

.tfwo-empty--editor {
	padding: 20px;
	border: 1px dashed #c3c4c7;
	border-radius: 6px;
	color: #646970;
	text-align: center;
}

/* Stacking.
   Redefining --tfwo-media-width ON the element beats the value Elementor
   sets on the wrapper, without a specificity contest: an element's own
   custom property always wins over one it merely inherits. An ordinary
   width declaration here would not -- Elementor's per-page stylesheet
   loads after this file and takes any tie. */
@media (max-width: 1024px) {
	.tfwo-list--stack-tablet .tfwo-card {
		flex-direction: column;
	}
	.tfwo-list--stack-tablet .tfwo-card__media {
		--tfwo-media-width: 100%;
	}
}

@media (max-width: 767px) {
	.tfwo-list--stack-mobile .tfwo-card {
		flex-direction: column;
	}
	.tfwo-list--stack-mobile .tfwo-card__media {
		--tfwo-media-width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tfwo-card__btn {
		transition: none;
	}
}