/* ==========================================================
   LMS Course & Trainer Manager — Elementor widget additions
   Purely additive: styles elements that only exist in the
   Elementor widget layer. Does not modify or duplicate the
   rules already defined in lms-style.css.
   ========================================================== */

/* Editor-only placeholder shown while a widget has no resolvable
   Course/Trainer context yet (never rendered on the live frontend). */
.lms-elementor-empty-state {
	padding: 16px 18px;
	border: 1px dashed #c9c9c9;
	border-radius: 8px;
	background: #fafafa;
	color: #888;
	font-size: 13px;
	text-align: center;
}

/* Course/Trainer grid widgets: responsive column count driven by
   Elementor's responsive control system via inline --lms-ctm-cols. */
.lms-ctm-grid {
	display: grid;
	grid-template-columns: repeat(var(--lms-ctm-cols, 3), 1fr);
	gap: var(--lms-ctm-gap, 22px);
}

@media (max-width: 1024px) {
	.lms-ctm-grid {
		grid-template-columns: repeat(var(--lms-ctm-cols-tablet, 2), 1fr);
	}
}

@media (max-width: 600px) {
	.lms-ctm-grid {
		grid-template-columns: repeat(var(--lms-ctm-cols-mobile, 1), 1fr);
	}
}

/* Course Trainer / Course CTA widgets sometimes render inside narrow
   Elementor columns; guard against overflow from long unbroken strings
   (emails, URLs) since Elementor columns can be very narrow. */
.lms-ctm-widget-wrap {
	max-width: 100%;
	overflow-wrap: anywhere;
}

/* ==========================================================
   Course Schedule / Batch widget (v1.6.0)
   Structural scaffolding only, same convention as the rest of this file:
   colors/typography/spacing/borders come from the widget's own Style
   controls (class-course-schedule.php). Reuses the existing .lms-ctm-grid
   responsive column-count pattern (--lms-ctm-cols/--lms-ctm-cols-tablet/
   --lms-ctm-cols-mobile via Elementor's own responsive control breakpoints)
   already used by the Course Grid / Trainer Grid widgets above, rather
   than reimplementing a second responsive grid system.
   ========================================================== */
.lms-ctm-schedule-title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 16px;
}
.lms-ctm-schedule-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.lms-ctm-schedule-icon img {
	display: block;
	width: 1em;
	height: 1em;
	object-fit: contain;
}
.lms-ctm-schedule-item {
	display: flex;
	flex-direction: column;
	border: 1px solid #ececec;
	background: #fafafa;
	border-radius: 10px;
	padding: 16px 18px;
	transition: background-color 0.25s ease, border-color 0.25s ease;
}
.lms-ctm-schedule-row {
	display: flex;
	align-items: baseline;
	gap: 6px;
	flex-wrap: wrap;
}
.lms-ctm-schedule-label {
	font-weight: 600;
	flex-shrink: 0;
}
.lms-ctm-schedule-label::after {
	content: ':';
}
.lms-ctm-schedule-value {
	overflow-wrap: anywhere;
}

/* ==========================================================
   Course Modules / Curriculum widget (v1.4.0)
   Structural/animation scaffolding only — colors, typography,
   spacing, borders and shadows are all injected per-instance by
   Elementor from the widget's own Style controls.
   ========================================================== */

.lms-ctm-curriculum {
	--lms-ctm-duration: 300ms;
}

/* --- Horizontal tabs (default) --- */
.lms-ctm-curriculum[data-layout="horizontal"] {
	display: flex;
	flex-direction: column;
}
.lms-ctm-curriculum[data-layout="horizontal"] > .lms-ctm-curriculum-nav {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

/* --- Vertical tabs --- */
.lms-ctm-curriculum[data-layout="vertical"] {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
}
.lms-ctm-curriculum[data-layout="vertical"] > .lms-ctm-curriculum-nav {
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
}
.lms-ctm-curriculum[data-layout="vertical"].lms-ctm-nav-right {
	flex-direction: row-reverse;
}

/* Shared tab button structure (icon + label) */
.lms-ctm-curriculum-tab {
	display: flex;
	align-items: center;
	cursor: pointer;
	background: none;
	border: 1px solid transparent;
	font: inherit;
	text-align: left;
	transition: background-color var(--lms-ctm-duration) ease, color var(--lms-ctm-duration) ease, border-color var(--lms-ctm-duration) ease;
}
.lms-ctm-curriculum-tab .lms-ctm-curriculum-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: color var(--lms-ctm-duration) ease;
}
.lms-ctm-curriculum-tab .lms-ctm-curriculum-icon img,
.lms-ctm-curriculum-acc-header .lms-ctm-curriculum-icon img {
	display: block;
	width: 1em;
	height: 1em;
	object-fit: contain;
}

.lms-ctm-curriculum-panels {
	flex: 1;
	min-width: 0;
}
.lms-ctm-curriculum-panel {
	display: none;
	opacity: 0;
}
.lms-ctm-curriculum-panel.active {
	display: block;
	animation: lmsCtmFadeIn var(--lms-ctm-duration) ease forwards;
}
@keyframes lmsCtmFadeIn {
	from { opacity: 0; transform: translateY(4px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* --- Accordion --- */
.lms-ctm-curriculum-accordion {
	display: flex;
	flex-direction: column;
}
.lms-ctm-curriculum-acc-header {
	display: flex;
	align-items: center;
	width: 100%;
	cursor: pointer;
	background: none;
	border: 1px solid transparent;
	font: inherit;
	text-align: left;
	transition: background-color var(--lms-ctm-duration) ease, color var(--lms-ctm-duration) ease, border-color var(--lms-ctm-duration) ease;
}
.lms-ctm-curriculum-acc-header .lms-ctm-curriculum-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
/* Open/Close (toggle) icon: both the Closed and Open icon spans are always
   present in the markup (see render_toggle_icon() in
   class-course-modules.php); only one is visible at a time, swapped purely
   with CSS based on the accordion item's .active state, so both icons can
   be fully independent (different icon, size, spacing) while still
   occupying the same slot in the header. Horizontal placement is driven by
   the widget's "Icon Alignment" control (Left/Center/Right), applied via
   a lms-ctm-toggle-align-* class on the widget wrapper so both the Closed
   and Open icon spans are positioned identically and consistently. */
.lms-ctm-curriculum-toggle-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: color var(--lms-ctm-duration) ease;
}
.lms-ctm-curriculum-toggle-icon-open {
	display: none;
}
.lms-ctm-curriculum-acc-item.active .lms-ctm-curriculum-toggle-icon-closed {
	display: none;
}
.lms-ctm-curriculum-acc-item.active .lms-ctm-curriculum-toggle-icon-open {
	display: inline-flex;
}

/* Icon Alignment (default = Right, matches the widget's original
   always-at-the-end chevron placement). Applies equally to whichever of
   the two icon spans (Closed/Open) is currently visible. */
.lms-ctm-toggle-align-right .lms-ctm-curriculum-acc-header .lms-ctm-curriculum-toggle-icon {
	margin-left: auto;
}
.lms-ctm-toggle-align-left .lms-ctm-curriculum-acc-header .lms-ctm-curriculum-toggle-icon {
	order: -1;
	margin-right: auto;
	margin-left: 0;
}
.lms-ctm-toggle-align-center .lms-ctm-curriculum-acc-header {
	position: relative;
}
.lms-ctm-toggle-align-center .lms-ctm-curriculum-acc-header .lms-ctm-curriculum-toggle-icon {
	position: absolute;
	left: 50%;
	top: 50%;
	margin: 0;
	transform: translate(-50%, -50%);
}
.lms-ctm-curriculum-acc-panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--lms-ctm-duration) ease;
	overflow: hidden;
}
.lms-ctm-curriculum-acc-item.active .lms-ctm-curriculum-acc-panel {
	grid-template-rows: 1fr;
}
.lms-ctm-curriculum-acc-panel-inner {
	/*
	 * This is the CSS Grid item whose row track is animated between 0fr
	 * (closed) and 1fr (open) by the rules above. min-height:0 lets it
	 * shrink all the way to 0 instead of stopping at its content's
	 * intrinsic height, and overflow:hidden clips anything still taller
	 * than the current track size during the transition.
	 *
	 * Deliberately no padding/border/background here: a box can never be
	 * rendered smaller than its own padding+border no matter what (that
	 * isn't a box-sizing issue — box-sizing only changes how a declared
	 * width/height relates to padding/border, it never removes them), so
	 * if the Content style controls' padding/border landed on this exact
	 * element the accordion would always stop a fixed amount short of
	 * fully closed. That styling is intentionally applied one level
	 * deeper, to .lms-ctm-curriculum-acc-panel-pad below, which sits
	 * fully inside this overflow:hidden box and therefore disappears
	 * completely — padding, border and all — once the row track reaches
	 * 0fr.
	 */
	min-height: 0;
	overflow: hidden;
}
/* Course FAQ widget (v1.6.0) — content classes only; the surrounding
   accordion structure/animation/JS is fully reused from above (see the
   architecture note in class-course-faq.php). */
.lms-ctm-faq-question {
	cursor: pointer;
}
.lms-ctm-faq-answer {
	margin: 0;
}
.lms-ctm-faq-answer > *:first-child {
	margin-top: 0;
}
.lms-ctm-faq-answer > *:last-child {
	margin-bottom: 0;
}

.lms-ctm-curriculum-acc-panel-pad {
	/* Receives the widget's Content Padding/Border/Background/Shadow/
	   Radius style controls (see class-course-modules.php). Kept as a
	   separate element from .lms-ctm-curriculum-acc-panel-inner above —
	   see the comment there for why. */
}

/* Common inner content elements (duration/topics/video/resource/assignment) */
.lms-ctm-curriculum-content > * + * {
	margin-top: 0.6em;
}
/* Topics list: list-style removed in favor of the dedicated, fully
   customizable .lms-ctm-topic-icon bullet (see the "Topics Icon" content
   and style controls in class-course-modules.php). Each .lms-ctm-topic-item
   is its own flex row so the icon and text can be independently spaced,
   aligned, sized and colored without affecting each other. */
.lms-ctm-curriculum-content .lms-ctm-topic-list {
	list-style: none;
	padding-left: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
}
.lms-ctm-curriculum-content .lms-ctm-topic-item {
	display: flex;
	flex-direction: row;
	align-items: center;
}
.lms-ctm-curriculum-content .lms-ctm-topic-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: color var(--lms-ctm-duration) ease;
}
.lms-ctm-curriculum-content .lms-ctm-topic-icon svg {
	width: 1em;
	height: 1em;
}
.lms-ctm-curriculum-content .lms-ctm-video-embed {
	position: relative;
}
.lms-ctm-curriculum-content .lms-ctm-video-embed iframe {
	max-width: 100%;
}

/* Responsive fallback: force vertical-tab layouts to stack on narrow
   screens even if the user's own responsive controls didn't override it,
   preventing an unusably squeezed sidebar nav on phones. */
@media (max-width: 480px) {
	.lms-ctm-curriculum[data-layout="vertical"] {
		flex-direction: column;
	}
	.lms-ctm-curriculum[data-layout="vertical"] > .lms-ctm-curriculum-nav {
		flex-direction: row;
		flex-wrap: wrap;
	}
}

/* ==========================================================
   Course Grid / Trainer Grid — Premium Layouts (v1.5.0)
   Structural + sensible-default cosmetic styling only. Every
   color, font, spacing, border, shadow and hover-state value
   set here is fully overridable per-instance from the widget's
   own Style controls in Elementor (which render with higher
   specificity via the {{WRAPPER}} unique-ID selector).
   Classes are scoped to these two widgets only
   (.lms-ctm-ccard* / .lms-ctm-tcard*) and do not touch the
   generic .lms-ctm-card classes used by other widgets
   (Trainer Courses, Course Trainer, etc.).
   ========================================================== */

/* Horizontal layout always shows one card per row, regardless
   of the (hidden, in that mode) Columns control. */
.lms-ctm-cgrid.lms-ctm-layout-horizontal,
.lms-ctm-tgrid.lms-ctm-layout-horizontal {
	grid-template-columns: 1fr;
}

.lms-ctm-ccard,
.lms-ctm-tcard {
	position: relative;
	display: flex;
	flex-direction: column;
	max-width: 100%;
	height: 100%;
	background: #fff;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.06);
	text-decoration: none;
	color: inherit;
	box-sizing: border-box;
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.lms-ctm-ccard *,
.lms-ctm-tcard * {
	box-sizing: border-box;
}
.lms-ctm-ccard a {
	text-decoration: none;
}

.lms-ctm-card-hover-lift:hover {
	transform: translateY(-6px);
	box-shadow: 0 20px 40px rgba(16, 24, 40, 0.14), 0 4px 10px rgba(16, 24, 40, 0.08);
}
.lms-ctm-card-hover-glow:hover {
	box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.25), 0 10px 24px rgba(16, 24, 40, 0.12);
}

/* --- Media / image --- */
.lms-ctm-ccard-media,
.lms-ctm-tcard-media {
	position: relative;
	overflow: hidden;
	display: block;
	width: 100%;
}
.lms-ctm-ccard-media {
	aspect-ratio: 16 / 10;
}
.lms-ctm-tcard-media {
	aspect-ratio: 1 / 1;
}
.lms-ctm-ccard-img,
.lms-ctm-tcard-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.lms-ctm-ccard-img-placeholder,
.lms-ctm-tcard-img-placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #eef1f5, #e2e6ec);
}
.lms-ctm-tcard-media-wrap {
	display: flex;
}

/* Image hover effects — triggered by hovering the whole card so the
   effect reads as one cohesive interaction, not just the photo. */
.lms-ctm-img-hover-zoom img {
	transition: transform 0.5s ease;
}
.lms-ctm-ccard:hover .lms-ctm-img-hover-zoom img,
.lms-ctm-tcard:hover .lms-ctm-img-hover-zoom img {
	transform: scale(1.08);
}
.lms-ctm-img-hover-fade img {
	transition: opacity 0.35s ease;
}
.lms-ctm-ccard:hover .lms-ctm-img-hover-fade img,
.lms-ctm-tcard:hover .lms-ctm-img-hover-fade img {
	opacity: 0.82;
}
.lms-ctm-img-hover-grayscale img {
	filter: grayscale(100%);
	transition: filter 0.4s ease;
}
.lms-ctm-ccard:hover .lms-ctm-img-hover-grayscale img,
.lms-ctm-tcard:hover .lms-ctm-img-hover-grayscale img {
	filter: grayscale(0%);
}

/* --- Body / text --- */
.lms-ctm-ccard-body,
.lms-ctm-tcard-body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 20px;
	gap: 10px;
}
.lms-ctm-tcard-body {
	align-items: center;
	text-align: center;
}
.lms-ctm-ccard-category {
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #1565c0;
}
.lms-ctm-ccard-title,
.lms-ctm-tcard-title {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.35;
	color: #1e1e1e;
}
.lms-ctm-tcard-designation {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	color: #1565c0;
}
.lms-ctm-ccard-desc,
.lms-ctm-tcard-bio {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: #666666;
}

/* --- Meta row (duration / lessons / students) --- */
.lms-ctm-ccard-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin: 2px 0;
}
.lms-ctm-tcard-body .lms-ctm-tcard-stats {
	justify-content: center;
}
.lms-ctm-ccard-meta-item,
.lms-ctm-tcard-stats-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: #888888;
}
.lms-ctm-ccard-meta-icon,
.lms-ctm-tcard-stats-icon {
	font-size: 13px;
	color: #1565c0;
}
.lms-ctm-tcard-stats {
	display: flex;
	gap: 14px;
}
.lms-ctm-ccard-instructor {
	margin: 0;
	font-size: 13px;
	color: #888888;
}

/* --- Rating --- */
.lms-ctm-ccard-rating {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	font-size: 13px;
}
.lms-ctm-ccard-star {
	font-size: 13px;
	color: #e0e0e0;
}
.lms-ctm-ccard-star-full {
	color: #f5a623;
}
.lms-ctm-ccard-rating-value {
	margin-left: 6px;
	font-size: 13px;
	font-weight: 600;
	color: #666666;
}

/* --- Trainer Card Rating (v1.6.0) — same base rules as the Course Card
   rating above, kept separate/namespaced (.lms-ctm-tcard-*) so the two
   widgets' Style controls never collide. */
.lms-ctm-tcard-rating {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	font-size: 13px;
}
.lms-ctm-tcard-star {
	font-size: 13px;
	color: #e0e0e0;
}
.lms-ctm-tcard-star-full {
	color: #f5a623;
}
.lms-ctm-tcard-rating-value {
	margin-left: 6px;
	font-size: 13px;
	font-weight: 600;
	color: #666666;
}

/* --- Badges --- */
.lms-ctm-ccard-badges {
	position: absolute;
	top: 12px;
	left: 12px;
	right: 12px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	z-index: 2;
	pointer-events: none;
}
.lms-ctm-ccard-badge {
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	padding: 6px 12px;
	border-radius: 20px;
	background: #eeeeee;
	color: #333333;
	pointer-events: auto;
}
.lms-ctm-ccard-badge-custom {
	background: #1e1e1e;
	color: #ffffff;
}
.lms-ctm-ccard-badge-ribbon {
	border-radius: 4px 4px 4px 0;
}

/* --- Hover-reveal overlay (Advanced Grid layout) --- */
.lms-ctm-ccard-overlay-cta,
.lms-ctm-tcard-overlay-cta {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(20, 20, 30, 0.55);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
	z-index: 1;
}
.lms-ctm-ccard-grid:hover .lms-ctm-ccard-overlay-cta,
.lms-ctm-ccard-grid:focus-within .lms-ctm-ccard-overlay-cta,
.lms-ctm-tcard-grid:hover .lms-ctm-tcard-overlay-cta,
.lms-ctm-tcard-grid:focus-within .lms-ctm-tcard-overlay-cta {
	opacity: 1;
	visibility: visible;
}
.lms-ctm-tcard-overlay-cta {
	gap: 10px;
}
.lms-ctm-tcard-overlay-cta .lms-ctm-tcard-social-item {
	background: rgba(255, 255, 255, 0.18);
	color: #ffffff;
}
.lms-ctm-tcard-overlay-cta .lms-ctm-tcard-social-item:hover {
	background: #ffffff;
	color: #1e1e1e;
}

/* --- Button icon wrapper (v1.6.0) ---
   Every button icon rendered via LMS_CTM_Widget_Base::render_icon_in_wrap()
   is wrapped in this span. Sizing/color come entirely from the per-button
   "{$id}_icon_*" Elementor controls (see register_button_style_controls()
   in class-base-widget.php) targeting the more specific .lms-ctm-icon-*
   class added alongside this one — this base rule only provides layout
   (never a fixed size), so it can never re-introduce the old bug of the
   icon being tied to the button's font-size. */
.lms-ctm-btn-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	flex-shrink: 0;
}
.lms-ctm-btn-icon svg {
	display: block;
}

/* --- Buttons --- */
.lms-ctm-ccard-buttons {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}
.lms-ctm-ccard-btn,
.lms-ctm-tcard-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
}
.lms-ctm-ccard-btn-view,
.lms-ctm-tcard-btn-view {
	background: #1565c0;
	color: #ffffff;
}
.lms-ctm-ccard-btn-view:hover,
.lms-ctm-tcard-btn-view:hover {
	background: #0d47a1;
	color: #ffffff;
}
.lms-ctm-ccard-btn-enroll {
	background: transparent;
	color: #1565c0;
	border-color: #1565c0;
}
.lms-ctm-ccard-btn-enroll:hover {
	background: #1565c0;
	color: #ffffff;
}

/* --- Price + footer --- */
.lms-ctm-ccard-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: auto;
	padding-top: 6px;
}
.lms-ctm-ccard-price {
	font-weight: 700;
	font-size: 16px;
}
.lms-ctm-ccard-price-old {
	text-decoration: line-through;
	color: #999999;
	font-size: 13px;
	font-weight: 500;
}
.lms-ctm-ccard-price-now {
	color: #c0392b;
}
.lms-ctm-ccard-price-free {
	color: #1a7f37;
}

/* --- Trainer social icons --- */
.lms-ctm-tcard-social {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	justify-content: center;
}
.lms-ctm-tcard-social-item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #f1f3f6;
	color: #333333;
	text-decoration: none;
	transition: background-color 0.25s ease, color 0.25s ease, transform 0.2s ease;
}
.lms-ctm-tcard-social-item:hover {
	transform: translateY(-2px);
}

/* --- Minimal Professional layout --- */
.lms-ctm-ccard-minimal-head,
.lms-ctm-tcard-minimal-head {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px 20px 14px;
	text-align: left;
}
.lms-ctm-ccard-media-sm,
.lms-ctm-tcard-media-sm {
	width: 64px;
	height: 64px;
	flex-shrink: 0;
	border-radius: 10px;
	overflow: hidden;
	aspect-ratio: 1 / 1;
}
.lms-ctm-tcard-media-sm {
	border-radius: 50%;
}
.lms-ctm-ccard-minimal-heading,
.lms-ctm-tcard-minimal-heading {
	flex: 1;
	min-width: 0;
}
.lms-ctm-ccard-minimal-heading .lms-ctm-ccard-title,
.lms-ctm-tcard-minimal-heading .lms-ctm-tcard-title {
	font-size: 16px;
	margin: 2px 0 0;
}
.lms-ctm-tcard-minimal .lms-ctm-tcard-body {
	align-items: stretch;
	text-align: left;
}
.lms-ctm-ccard-divider,
.lms-ctm-tcard-divider {
	height: 1px;
	background: #eeeeee;
	margin: 0 20px;
}

/* --- Advanced Grid layout --- */
.lms-ctm-ccard-grid .lms-ctm-ccard-media,
.lms-ctm-tcard-grid .lms-ctm-tcard-media {
	aspect-ratio: 4 / 3;
}

/* --- Horizontal layout --- */
.lms-ctm-ccard-horizontal,
.lms-ctm-tcard-horizontal {
	flex-direction: row;
	align-items: stretch;
}
.lms-ctm-ccard-horizontal .lms-ctm-ccard-media {
	width: 38%;
	flex-shrink: 0;
	aspect-ratio: auto;
	height: auto;
}
.lms-ctm-tcard-horizontal .lms-ctm-tcard-media-wrap {
	width: 38%;
	flex-shrink: 0;
	align-items: stretch;
}
.lms-ctm-tcard-horizontal .lms-ctm-tcard-media {
	width: 100%;
	aspect-ratio: auto;
}
.lms-ctm-ccard-horizontal .lms-ctm-ccard-body,
.lms-ctm-tcard-horizontal .lms-ctm-tcard-body {
	flex: 1;
	text-align: left;
	align-items: flex-start;
}
@media (max-width: 600px) {
	.lms-ctm-ccard-horizontal,
	.lms-ctm-tcard-horizontal {
		flex-direction: column;
	}
	.lms-ctm-ccard-horizontal .lms-ctm-ccard-media,
	.lms-ctm-tcard-horizontal .lms-ctm-tcard-media-wrap {
		width: 100%;
	}
}

/* --- Featured / Premium layout --- */
.lms-ctm-ccard-featured,
.lms-ctm-tcard-featured {
	border: 1px solid #eeeeee;
}
.lms-ctm-ccard-featured .lms-ctm-ccard-title,
.lms-ctm-tcard-featured .lms-ctm-tcard-title {
	font-size: 22px;
}
.lms-ctm-ccard-statbar,
.lms-ctm-tcard-statbar {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	padding: 10px 0;
	border-top: 1px solid #f0f0f0;
	border-bottom: 1px solid #f0f0f0;
}
.lms-ctm-ccard-footer-featured .lms-ctm-ccard-btn {
	padding: 12px 26px;
}

/* Never let a long unbroken word/URL blow out a narrow Elementor column. */
.lms-ctm-ccard-title,
.lms-ctm-tcard-title,
.lms-ctm-ccard-desc,
.lms-ctm-tcard-bio {
	overflow-wrap: anywhere;
}

/* Title acts as the primary click target for the card (see PHP notes on
   why the whole card is no longer wrapped in a single <a> once it can
   contain more than one button). */
.lms-ctm-ccard-title-link,
.lms-ctm-tcard-title-link {
	color: inherit;
	text-decoration: none;
}
.lms-ctm-ccard-title-link:hover,
.lms-ctm-tcard-title-link:hover {
	text-decoration: underline;
}