/* Lesson artwork only: text and controls stay outside the photograph-like art.
   No fixed overlays, animations, global image rules or navigation changes. */
.lesson-art-frame {
  display: block;
  position: relative;
  width: 100%;
  min-width: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  margin: 0;
  border-radius: 18px;
  background: #edf2f4;
  color: #18344e;
}
.lesson-art-frame > .lesson-subject-image {
  display: block;
  position: static;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  object-position: var(--lesson-art-position, 50% 40%);
  opacity: 1;
  border-radius: inherit;
}
.lesson-card.lesson-subject-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}
.lesson-subject-card .lesson-art-card-media { min-width: 0; }
.lesson-subject-card .lesson-art-frame { border-radius: 18px 18px 0 0; }
.lesson-subject-card .lesson-art-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 16px;
  background: #edf2f4;
  color: #18344e;
  font-size: 13px;
  font-weight: 700;
}
.lesson-art-meta > span { font-size: 20px; }
.lesson-art-meta > i {
  margin-inline-start: auto;
  color: #18344e;
  font-style: normal;
}
.learn-page .language-levels,
.learn-page .language-tracks,
.learn-page .history-filters,
.learn-arabic-page nav {
  flex-wrap: wrap;
  overflow: visible;
  max-width: 100%;
}
.learn-page .language-levels button,
.learn-page .language-tracks button,
.learn-page .history-filters button,
.learn-arabic-page nav button {
  min-height: 44px;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}
.lesson-subject-card .lesson-card-copy { min-width: 0; flex: 1; }
.lesson-subject-card .lesson-card-copy h3,
.lesson-subject-card .lesson-card-copy p { overflow-wrap: anywhere; }
.language-lesson-cover.lesson-subject-cover {
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(18px, 3vw, 28px);
}
.language-lesson-cover.lesson-subject-cover.has-lesson-art {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
}
.lesson-subject-cover > div { min-width: 0; }
.lesson-subject-cover h1,
.lesson-subject-cover h2 { overflow-wrap: anywhere; }
.lesson-subject-cover .lesson-art-detail { aspect-ratio: 4 / 3; }
.living-discovery .living-lesson.lesson-subject-discovery {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.lesson-subject-discovery > div { min-width: 0; }
.lesson-subject-discovery > span { align-self: flex-start; }
.lesson-subject-discovery .lesson-art-frame { aspect-ratio: 16 / 9; }
.arabic-lesson-grid > article.lesson-subject-ar-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 14px;
}
.lesson-subject-ar-card > .lesson-art-frame { flex-shrink: 0; }
.arabic-lesson-grid > .lesson-subject-ar-card > header { align-items: flex-start; }
.arabic-lesson-grid > .lesson-subject-ar-card > header > span { flex-shrink: 0; }
.arabic-lesson-grid > .lesson-subject-ar-card > header > div { min-width: 0; }
.arabic-lesson-grid > .lesson-subject-ar-card h3,
.arabic-lesson-grid > .lesson-subject-ar-card h4 { overflow-wrap: anywhere; }
.arabic-lesson-grid > .lesson-subject-ar-card > .btn { margin-top: auto; }
.arabic-lesson-page > header.lesson-subject-ar-cover {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  min-width: 0;
}
.lesson-subject-ar-cover > .lesson-art-frame { aspect-ratio: 16 / 9; }
.lesson-subject-ar-cover > div { min-width: 0; }
.arabic-lesson-page > .lesson-subject-ar-cover h1 {
  font-size: clamp(1.8rem, 5vw, 2.5rem);
  overflow-wrap: anywhere;
}
.lesson-subject-ar-cover h2 { overflow-wrap: anywhere; }
.arabic-learning-hero > div { min-width: 0; }
.learn-arabic-page .arabic-level-card > header { grid-template-columns: 56px minmax(0, 1fr) auto; }
.learn-arabic-page .arabic-level-card > header > div { min-width: 0; }
.learn-arabic-page .arabic-level-card > header :is(h3,p) { overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .learn-arabic-page .arabic-level-card > header { grid-template-columns: 56px minmax(0, 1fr); }
}
@media (max-width: 390px) {
  .learn-arabic-page .arabic-level-card > header { grid-template-columns: minmax(0, 1fr); }
}
.arabic-learning-hero h1,
.arabic-learning-hero h2,
.arabic-learning-hero p { overflow-wrap: anywhere; }
.arabic-learning-hero .btn {
  max-width: 100%;
  height: auto;
  min-height: 44px;
  white-space: normal;
  overflow-wrap: anywhere;
}
.arabic-lesson-page .arabic-lesson-steps {
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
}
.arabic-lesson-steps > article {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  grid-template-columns: 40px minmax(0, 1fr);
}
.arabic-lesson-steps > article > div { min-width: 0; }
.arabic-lesson-steps h2,
.arabic-lesson-steps p { overflow-wrap: anywhere; }
.lesson-subject-card[role="button"],
.lesson-subject-discovery[role="button"],
.lesson-subject-ar-card button,
.language-lesson-page button,
.arabic-lesson-page button { min-height: 44px; min-width: 44px; }
.lesson-subject-card:focus-visible,
.lesson-subject-discovery:focus-visible,
.lesson-subject-ar-card button:focus-visible,
.language-lesson-page button:focus-visible,
.arabic-lesson-page button:focus-visible {
  outline: 3px solid #176ba6;
  outline-offset: 4px;
}
@media (max-width: 760px) {
  .arabic-learning-hero { grid-template-columns: minmax(0, 1fr); }
  .learn-page .language-tools,
  .learn-page .history-tools { position: static; }
  .language-lesson-cover.lesson-subject-cover.has-lesson-art { grid-template-columns: minmax(0, 1fr); }
  .lesson-subject-cover .lesson-art-detail { aspect-ratio: 16 / 10; }
  .arabic-lesson-page > header.lesson-subject-ar-cover { padding: 20px 16px; }
}
@media (forced-colors: active) {
  .lesson-art-frame,
  .lesson-subject-card .lesson-art-meta { border: 1px solid CanvasText; }
  .lesson-subject-card:focus-visible,
  .lesson-subject-discovery:focus-visible { outline-color: Highlight; }
}
@media (max-width: 520px) {
  .arabic-lesson-steps > article {
    grid-template-columns: minmax(0, 1fr);
    padding: 18px 16px;
  }
}