/* Content Cards Widget Styles */
.cc-content-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	width: 100%;
	box-sizing: border-box;
}

.cc-content-card *,
.cc-content-card *::before,
.cc-content-card *::after {
	box-sizing: border-box;
}

/* Top row: image + optional relative title beside it */
.cc-card-top {
	display: flex;
	flex-direction: row;
	width: 100%;
	position: relative;
}

.cc-card-image-wrapper {
	position: relative;
	flex-shrink: 0;
	overflow: hidden;
}

.cc-card-image-wrapper::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 1;
}

.cc-card-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.cc-card-content {
	position: relative;
	flex: 1;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.cc-card-title {
	margin: 0;
	padding: 0;
	word-wrap: break-word;
}

.cc-card-subtitle {
	margin: 0;
	padding: 0;
	word-wrap: break-word;
	width: 100%;
}

/* Absolute title/subtitle sit on the whole card (including over the image) */
.cc-card-title.cc-pos-absolute,
.cc-card-subtitle.cc-pos-absolute {
	position: absolute;
	z-index: 5;
}

/* Layout: image left (default) */
.cc-layout-image-left .cc-card-top {
	flex-direction: row;
}

.cc-layout-image-left .cc-card-image-wrapper {
	order: 1;
}

.cc-layout-image-left .cc-title-relative {
	order: 2;
}

/* Layout: image right */
.cc-layout-image-right .cc-card-top {
	flex-direction: row-reverse;
}

/* Layout: image top */
.cc-layout-image-top .cc-card-top {
	flex-direction: column;
}

.cc-layout-image-top .cc-card-image-wrapper {
	width: 100% !important;
}

/* Layout: image bottom */
.cc-layout-image-bottom {
	flex-direction: column-reverse;
}

.cc-layout-image-bottom .cc-card-top {
	flex-direction: column;
}

.cc-layout-image-bottom .cc-card-image-wrapper {
	width: 100% !important;
}

/* Overlay mode */
.cc-layout-overlay .cc-card-top {
	position: relative;
	min-height: inherit;
}

.cc-layout-overlay .cc-card-image-wrapper {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	z-index: 0;
}

.cc-layout-overlay .cc-card-content {
	position: relative;
	z-index: 1;
	width: 100%;
}

/* Subtitle relative always full width below the top row */
.cc-subtitle-relative {
	width: 100%;
}

/* RTL / LTR */
.cc-content-card.rtl {
	direction: rtl;
}

.cc-content-card.ltr {
	direction: ltr;
}