/**
 * Product Inserts styles.
 *
 * Frontend: a light accent on top of the shared .tutor-card styles so an
 * insert reads as a featured/promotional card without looking foreign.
 * Admin: layout for the Product Inserts management screen.
 */

/* ------------------------------------------------------------------ */
/* Frontend insert card                                                */
/* ------------------------------------------------------------------ */
.tutor-card--insert {
	position: relative;
}

/* Optional highlight border (toggled per insert). */
.tutor-card--insert.tm-insert-orange {
	border: 2px solid var(--accent, #e56e43);
	box-shadow: 0 10px 15px -3px rgba(229, 110, 67, 0.18);
}

.tutor-card--insert.tm-insert-blue {
	border: 2px solid var(--primary, #107896);
	box-shadow: 0 10px 15px -3px rgba(16, 120, 150, 0.18);
}

/* Instructor name: clean centered text below the avatar. */
.tutor-card--insert .tm-insert-name {
	font-weight: 600;
	text-align: center;
	color: var(--text, #1a1a2e);
}

.tutor-card--insert .tm-insert-name--spaced {
	margin-bottom: 1rem;
}

.tutor-card--insert .feature-list .feature-icon i {
	color: var(--accent, #e56e43);
}

/* Headline block: optional responsive sizing. The title sets the base size
   from --pi-fs-d (desktop) / --pi-fs-m (mobile); subtitles scale with it so
   the block resizes as one unit. Without the --sized class the lines keep
   their default theme sizes. */
.tutor-card--insert .tm-insert-headline--sized .tm-insert-title {
	font-size: var(--pi-fs-d, 24px);
	line-height: 1.2;
}

.tutor-card--insert .tm-insert-headline--sized .tm-insert-sub {
	font-size: calc(var(--pi-fs-d, 24px) * 0.65);
}

.tutor-card--insert .tm-insert-headline--sized .tm-insert-sub2 {
	font-size: calc(var(--pi-fs-d, 24px) * 0.55);
}

@media (max-width: 575.98px) {
	.tutor-card--insert .tm-insert-headline--sized .tm-insert-title {
		font-size: var(--pi-fs-m, 18px);
	}
	.tutor-card--insert .tm-insert-headline--sized .tm-insert-sub {
		font-size: calc(var(--pi-fs-m, 18px) * 0.65);
	}
	.tutor-card--insert .tm-insert-headline--sized .tm-insert-sub2 {
		font-size: calc(var(--pi-fs-m, 18px) * 0.55);
	}
}

/* ------------------------------------------------------------------ */
/* Admin screen                                                        */
/* ------------------------------------------------------------------ */
.tm-pi-layout {
	display: block;
	margin-top: 16px;
}

.tm-pi-list-col {
	width: 100%;
	margin-bottom: 24px;
}

.tm-pi-form-col {
	width: 100%;
	box-sizing: border-box;
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 6px;
	padding: 16px 20px;
}

.tm-pi-form p {
	margin: 0 0 14px;
}

.tm-pi-form label {
	display: block;
	margin-bottom: 4px;
}

.tm-pi-req {
	color: #d63638;
}

.tm-pi-avatar-thumb {
	display: block;
	margin-top: 8px;
	max-width: 96px;
	height: auto;
	border-radius: 6px;
	border: 1px solid #dcdcde;
}

.tm-pi-actions {
	display: flex;
	align-items: center;
	gap: 10px;
}

.tm-pi-feedback.tm-pi-ok {
	color: #00794f;
}

.tm-pi-feedback.tm-pi-err {
	color: #d63638;
}