/* Plain HTML stays fully readable. Enhanced galleries replace the old bare
   horizontal scrollbar with one uncropped figure and explicit controls. */
.lesson-gallery {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  max-width: 100%;
  min-width: 0;
  padding-bottom: 0;
  overflow: visible;
  scroll-snap-type: none;
}
.lesson-gallery > figure { min-width: 0; max-width: 100%; margin: 0; }
.lesson-gallery > figure img { display: block; width: 100%; height: auto; max-height: none; object-fit: contain; border-radius: var(--radius-medium, 12px); }
.lesson-gallery figcaption { color: var(--color-text-gray-light, #475569); padding-top: .75rem; line-height: 1.6; overflow-wrap: anywhere; }

.lesson-gallery.lesson-gallery--ready { display: block; touch-action: pan-y pinch-zoom; }
.lesson-gallery.lesson-gallery--ready > figure[hidden] { display: none !important; }
.lesson-gallery.lesson-gallery--ready > figure img { max-height: min(65vh, 34rem); object-fit: contain; }
.lesson-gallery__controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--color-border-light, #e5e7eb); }
.lesson-gallery .lesson-gallery__status { grid-column: 1 / -1; margin: 0; text-align: center; color: var(--color-text-dark, #2c3e50); font-weight: 600; }
.lesson-gallery__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-width: 0;
  min-height: 44px;
  padding: .4rem .75rem;
  border: 1px solid var(--color-border-light, #e5e7eb);
  border-radius: var(--radius-small, 8px);
  background: var(--color-bg-gray-50, #f8f9fa);
  color: var(--color-text-dark, #2c3e50);
  font: inherit;
  line-height: 1.3;
  cursor: pointer;
}
.lesson-gallery__nav:disabled { opacity: .5; cursor: default; }
.lesson-gallery__arrow { font-family: ui-sans-serif, system-ui, sans-serif; font-size: 2rem; line-height: 1; }
.lesson-gallery__dots { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem; }
.lesson-gallery__dot { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.lesson-gallery__dot span { width: 10px; height: 10px; border: 2px solid var(--color-brand-primary-dark, #357abd); border-radius: 50%; background: transparent; }
.lesson-gallery__dot[aria-current="true"] span { width: 14px; height: 14px; background: var(--color-brand-primary-dark, #357abd); }
.lesson-gallery__nav:focus-visible, .lesson-gallery__dot:focus-visible { outline: 2px solid var(--color-brand-primary-dark, #357abd); outline-offset: 3px; }
@media (hover: hover) { .lesson-gallery__nav:not(:disabled):hover { border-color: var(--color-brand-primary-dark, #357abd); } }
@media (prefers-reduced-motion: reduce) { .lesson-gallery, .lesson-gallery * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
@media (forced-colors: active) {
  .lesson-gallery__nav { border-color: ButtonText; color: ButtonText; background: ButtonFace; }
  .lesson-gallery__dot span { border-color: ButtonText; }
  .lesson-gallery__dot[aria-current="true"] span { background: ButtonText; }
  .lesson-gallery__nav:focus-visible, .lesson-gallery__dot:focus-visible { outline-color: Highlight; }
}

/* Description cards and gallery arrows select the same authored photo. */
.lesson-content .lesson-gallery__card--ready {
  cursor: pointer;
  border: 2px solid transparent;
  min-height: 44px;
}
.lesson-content .lesson-gallery__card--ready[aria-pressed="true"] {
  border-color: var(--color-brand-primary-dark, #357abd);
  background: #e9f3ff;
}
.lesson-content .lesson-gallery__card--ready:focus-visible {
  outline: 3px solid var(--color-brand-primary-dark, #357abd);
  outline-offset: 4px;
}
@media (hover: hover) {
  .lesson-content .lesson-gallery__card--ready:hover { border-color: var(--color-brand-primary-dark, #357abd); }
}
@media (forced-colors: active) {
  .lesson-content .lesson-gallery__card--ready[aria-pressed="true"] { border-color: Highlight; }
}