/* Responsive video wrapper for manual use */
.video-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
  margin: 0 auto; /* Center the wrapper */
}

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

/* Make all iframes and videos responsive (for TinyMCE embeds) */
iframe, video {
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  display: block;
  margin: 0 auto;
  border: none;
}

/* Optional: Make images responsive */
img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Optional: Add some padding to content on mobile */
@media (max-width: 576px) {
  .container {
    padding-left: 8px;
    padding-right: 8px;
  }
  .card {
    margin-bottom: 1rem;
  }
  .btn-lg {
    font-size: 1.1rem;
    padding: 0.75rem 1rem;
  }
}