/* Media Presentation System Styles */

/* Block-level Full-width Media */
figure.media-block {
  margin: 2rem 0;
  max-width: 100%;
}

figure.media-block img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

figure.media-block figcaption {
  margin-top: 0.75rem;
  font-size: 0.9rem;
  color: #666;
  font-style: italic;
  line-height: 1.5;
}

/* Inline/Right-aligned Images */

/* Desktop: float behavior */
img.media-inline-right {
  float: right;
  margin: 0 0 1rem 1.5rem;
  max-width: 400px;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

img.media-inline-left {
  float: left;
  margin: 0 1.5rem 1rem 0;
  max-width: 400px;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

/* Mobile: stack */
@media (max-width: 768px) {
  img.media-inline-right,
  img.media-inline-left {
    float: none;
    margin: 1rem auto;
    display: block;
    max-width: 100%;
  }
}

/* YouTube Responsive Wrapper */
.video-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  margin: 0;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}