/*
 * Almagzal polish for the Tutor LMS learning area (the lesson "player").
 * Loaded only inside the learning area (see functions.php ->
 * tutor_utils()->is_learning_area()). Scoped to Almagzal-added classes so it
 * never restyles Tutor's own components. RTL-safe (logical properties).
 */

/* ------------------------------------------------------------------ *
 * Issue 4 — "العودة إلى المغزل" link back to the Learning Hub.
 * Its own dedicated row at the top of the Tutor player sidebar, kept
 * clear of the course title, lesson title, progress bar and topic
 * navigation. The text label is ALWAYS visible — never collapsed to an
 * icon — on both desktop and mobile. RTL-safe (logical properties).
 * ------------------------------------------------------------------ */
.tutor-learning-sidebar > .almagzal-return-link {
	flex: none;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0.625rem 0.75rem;
	border-block-end: 1px solid rgba( 224, 161, 132, 0.28 );
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.35;
	text-decoration: none;
	/* Brand terracotta, lightened for legible contrast on the dark sidebar. */
	color: #e0a184;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.tutor-learning-sidebar > .almagzal-return-link:hover,
.tutor-learning-sidebar > .almagzal-return-link:focus-visible {
	color: #f4ccb8;
	background-color: rgba( 224, 161, 132, 0.14 );
}

.tutor-learning-sidebar > .almagzal-return-link .almagzal-return-link__icon {
	display: inline-flex;
	flex: none;
}

.tutor-learning-sidebar > .almagzal-return-link .almagzal-return-link__label {
	flex: 1 1 auto;
	min-width: 0;
}

/* ------------------------------------------------------------------ *
 * Issue 3 — image "support files" render as previews, not raw-filename
 * download cards. Documents (PDF, etc.) are untouched by this file.
 * ------------------------------------------------------------------ */
.almagzal-attachment-card--image {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0;
	overflow: hidden;
	padding: 0;
}

.almagzal-attachment-preview {
	display: block;
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	background-color: var( --wp--preset--color--beige, #dacbb8 );
}

.almagzal-attachment-preview__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.almagzal-attachment-card--image .almagzal-attachment-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	padding: 0.75rem 1rem;
	min-width: 0;
	/* This stylesheet only loads inside the dark learning-area player, so the
	   caption is set light to match Tutor's own card text there. */
	color: #f0f1f1;
}

.almagzal-attachment-card--image .almagzal-attachment-card__title {
	font-size: 0.875rem;
	font-weight: 600;
	color: #f0f1f1;
}

.almagzal-attachment-card--image .almagzal-attachment-card__actions {
	position: absolute;
	inset-block-start: 0.5rem;
	inset-inline-end: 0.5rem;
	background-color: rgba( 255, 255, 255, 0.92 );
	border-radius: 999px;
	box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.16 );
}