/**!
 * @file LessonCard.css
 * @desc Shared horizontal "lesson card" component — image on the left,
 *       title + meta + intro on the right. Used in the curriculum view,
 *       theme view, and anywhere a list of lessons is displayed inline.
 *
 *       Markup contract:
 *
 *       <a class="lesson-card" href="...">
 *         <div class="lesson-card__image"><img/></div>
 *         <!-- or placeholder -->
 *         <div class="lesson-card__image lesson-card__image--placeholder">
 *           <i class="fas fa-book-open"></i>
 *         </div>
 *         <div class="lesson-card__body">
 *           <span class="lesson-card__sequence">Lesson 3</span>
 *           <h3 class="lesson-card__title">Title here</h3>
 *           <div class="lesson-card__meta">
 *             <span class="lesson-card__theme"><i/> Theme name</span>
 *             <span><i/> 2024-04-12</span>
 *           </div>
 *           <p class="lesson-card__intro">Short intro...</p>
 *         </div>
 *       </a>
 *
 *       Use --lc-brand to opt out of var(--sw-brand-color) per page if needed.
 */
/************************************************************************************************************************************/

.lesson-card {
	--lc-brand:      var(--sw-brand-color, #0e6630);
	--lc-brand-dark: #084a22;
	--lc-brand-soft: #e8f3ec;
	--lc-card:       #ffffff;
	--lc-border:     #e0e8e3;
	--lc-ink:        #14211a;
	--lc-ink-soft:   #4a5b51;
	--lc-radius:     10px;
	--lc-shadow:     0 1px 3px rgba(20, 50, 30, 0.05),
	                 0 10px 26px rgba(20, 50, 30, 0.1);

	display: grid;
	grid-template-columns: 200px 1fr;
	background: var(--lc-card);
	border: 1px solid var(--lc-border);
	border-radius: var(--lc-radius);
	overflow: hidden;
	text-decoration: none;
	color: var(--lc-ink);
	transition: transform 0.12s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.lesson-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--lc-shadow);
	border-color: var(--lc-brand);
	color: var(--lc-ink);
	text-decoration: none;
}

.lesson-card__image {
	width: 100%;
	height: 100%;
	min-height: 130px;
	overflow: hidden;
	background: var(--lc-brand-soft);
	position: relative;
}

.lesson-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.lesson-card:hover .lesson-card__image img {
	transform: scale(1.04);
}

.lesson-card__image--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--lc-brand);
	font-size: 2.2rem;
}

/* Modifier for fallback images (e.g. the SW logo) — use contain on a
   brand-tinted background so the logo isn't cropped, but keep padding
   minimal so it fills the slot at roughly the same visual size as the
   photo thumbs that use cover. */
.lesson-card__image--logo {
	padding: 6px;
	background: var(--lc-brand-soft);
}
.lesson-card__image--logo img {
	object-fit: contain;
}
.lesson-card:hover .lesson-card__image--logo img {
	transform: none;
}

.lesson-card__body {
	padding: 16px 20px 18px 20px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.lesson-card__sequence {
	font-size: 0.72rem;
	font-weight: 700;
	color: var(--lc-brand-dark);
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.lesson-card__title {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--lc-ink);
	margin: 0;
	line-height: 1.3;
	word-break: break-word;
}

.lesson-card__meta {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 0.8rem;
	color: var(--lc-ink-soft);
	flex-wrap: wrap;
}

.lesson-card__meta span {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.lesson-card__theme {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 0.78rem;
	color: var(--lc-brand-dark);
	background: var(--lc-brand-soft);
	padding: 2px 10px;
	border-radius: 999px;
	font-weight: 600;
}

.lesson-card__intro {
	font-size: 0.92rem;
	line-height: 1.55;
	color: var(--lc-ink-soft);
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* On narrow viewports, stack the image above the body. */
@media (max-width: 600px) {
	.lesson-card {
		grid-template-columns: 1fr;
	}
	.lesson-card__image {
		min-height: 160px;
		aspect-ratio: 16 / 9;
	}
}