:root {
  /* ---------- Colors ---------- */
  --lesson-meta-title-color: #1e3a8a; /* rich blue */
  --lesson-meta-title-hover-color: #4f46e5; /* purple on hover */
  --lesson-meta-date-color: #475569; /* grayish blue */
  --lesson-meta-date-bg: #e0f2fe; /* light background */
  --lesson-meta-date-border: #93c5fd;
  
  /* ---------- Font Sizes ---------- */
  --lesson-meta-title-size: 2.25rem;
  --lesson-meta-title-size-mobile: 1.5rem;
  --lesson-meta-date-size: 0.95rem;
  --lesson-meta-date-size-mobile: 0.9rem;

  /* ---------- Spacing ---------- */
  --lesson-meta-gap: 10px;
  --lesson-meta-date-padding: 4px 10px;
  --lesson-meta-border-radius: 8px;

  /* ---------- Shadow ---------- */
  --lesson-meta-date-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);

  /* ---------- Breakpoints ---------- */
  --lesson-meta-mobile-breakpoint: 600px;
}

/* -----------------------
   Lesson Meta Container
-------------------------*/
.lesson_meta {
  display: grid; /* use grid layout */
  grid-template-columns: 1fr 1fr; 
  align-items: center; 
  gap: var(--lesson-meta-gap);
}

/* -----------------------
   Lesson Title
-------------------------*/
.lesson_meta_title {
  justify-self: start; 
  margin: 0;
  font-size: var(--lesson-meta-title-size); 
  font-weight: 600;
  color: var(--lesson-meta-title-color);
  transition: color 0.3s ease, transform 0.2s ease;
}

.lesson_meta_title:hover {
  color: var(--lesson-meta-title-hover-color);
  transform: translateX(4px);
}

/* -----------------------
   Lesson Date
-------------------------*/
.lesson_meta_date {
  justify-self: center;
  margin: 0;
  font-size: var(--lesson-meta-date-size);
  color: var(--lesson-meta-date-color);
  background: var(--lesson-meta-date-bg);
  padding: var(--lesson-meta-date-padding);
  border-radius: var(--lesson-meta-border-radius);
  border: 1px solid var(--lesson-meta-date-border);
  box-shadow: var(--lesson-meta-date-shadow);
}

/* -----------------------
   Responsive Styles
   for screens <= 600px
-------------------------*/
@media (max-width: 600px) {
  .lesson_meta {
    text-align: center;
  }

  .lesson_meta_title {
    justify-self: center;
    font-size: var(--lesson-meta-title-size-mobile);
    margin-bottom: 5px;
  }

  .lesson_meta_date {
    justify-self: center;
    font-size: var(--lesson-meta-date-size-mobile);
    margin-bottom: 10px;
  }
}