/* ============================================
   CSS Responsive — Lesson-specific overrides
   Extends base/styles-base.css
   ============================================ */

/* Viewport simulator iframe */
.viewport-sim-iframe {
  border: none;
  display: block;
  transition: width 0.1s ease;
  max-width: 100%;
}

/* Slide images */
.slide-content img,
.slide-content video {
  max-width: 100%;
  border-radius: 6px;
  display: block;
  margin: 1rem auto;
}

/* Side-by-side image pairs */
.img-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: flex-start;
  margin: 1rem 0;
}

.img-pair img {
  flex: 1;
  margin: 0;
}

/* Inline table (non-recap) */
.slide-content table:not(.recap-table) {
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: 0.95rem;
}

.slide-content table:not(.recap-table) th,
.slide-content table:not(.recap-table) td {
  border: 1px solid #e2e8f0;
  padding: 0.5rem 0.75rem;
  text-align: left;
}

.slide-content table:not(.recap-table) thead th {
  background: #f8fafc;
  font-weight: 600;
}