/* Title Hover Image List — Frontend Styles */

.thiw-wrapper {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	align-content: flex-start;
	width: 100%;
	height: auto;
	min-height: 0;
	gap: 30px; /* overridden by the "Space Between Titles & Image" control */
}

/* Some themes / Elementor "stretch" column settings force the widget wrapper
   to fill the full column height, which leaves empty space below shorter
   content. These resets keep the widget sized to its own content only. */
.elementor-widget-thiw-title-hover-image,
.elementor-widget-thiw-title-hover-image > .elementor-widget-container {
	height: auto !important;
	min-height: 0 !important;
	align-self: flex-start !important;
}

.thiw-wrapper.thiw-image-left {
	flex-direction: row-reverse;
}

.thiw-titles-col {
	width: 55%;
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	align-self: flex-start;
	height: auto;
	gap: 40px; /* overridden by the "Spacing Between Rows/Groups" control */
}

.thiw-wrapper.thiw-layout-stacked .thiw-titles-col {
	flex-direction: column;
}

.thiw-wrapper.thiw-layout-columns .thiw-titles-col {
	flex-direction: row;
}

.thiw-row-group {
	display: flex;
	flex-direction: column;
	gap: 14px; /* overridden by the "Spacing Between Titles" control */
}

.thiw-wrapper.thiw-layout-stacked .thiw-row-group {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
}

.thiw-title-item {
	cursor: pointer;
	margin: 0;
}

.thiw-title-item a {
	display: inline-block;
	text-decoration: none;
	color: inherit;
	transition: color 0.25s ease;
	letter-spacing: 0.5px;
}

.thiw-title-item.thiw-active a,
.thiw-title-item a:hover {
	color: #c1440e;
}

.thiw-image-col {
	position: relative;
	flex: 1;
	min-width: 260px;
	height: 420px;
	overflow: hidden;
	background: #f3f1ee;
}

.thiw-image-col .thiw-image-link {
	display: block;
	width: 100%;
	height: 100%;
	text-decoration: none;
}

.thiw-image-col img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	opacity: 1;
	transition: opacity 0.3s ease;
}

.thiw-image-col img.thiw-fading {
	opacity: 0;
}

@media (max-width: 767px) {
	.thiw-wrapper,
	.thiw-wrapper.thiw-image-left {
		flex-direction: column;
	}
	.thiw-titles-col,
	.thiw-image-col {
		width: 100% !important;
	}
	.thiw-image-col {
		height: 280px;
	}
}