/* Section container for heading + content */
.vimeo-section {
  margin-bottom: 2rem;
}

/* Keep the heading styling consistent */
.vimeo-section h1, .vimeo-section h2, .vimeo-section h3,
.vimeo-section h4, .vimeo-section h5, .vimeo-section h6 {
  margin-bottom: 1rem;
}

/* Vimeo wrapper for side-by-side layout */
.vimeo-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 2rem; /* Gap between text and video */
  margin: 0.5rem 0 1.5rem 0;
  width: 100%;
  clear: both;
}

/* Special case for right-aligned videos */
.vimeo-wrapper.right {
  flex-direction: row-reverse;
  align-items: flex-start; /* Ensure alignment at the top */
}

/* Fix for text alignment with video */
.vimeo-wrapper.right .vimeo-content {
  padding-top: 0; /* Remove any top padding */
  margin-top: 0; /* Remove any top margin */
}

/* Content container */
.vimeo-content {
  flex: 1;
  min-width: 250px; /* Ensure text has some minimum width */
}

/* Remove default margins from paragraphs inside content container */
.vimeo-content p {
  margin-top: 0;
  margin-bottom: 1em;
}

/* First paragraph in content should align with top of video */
.vimeo-content p:first-child {
  margin-top: 0;
}

.vimeo-content > :last-child {
  margin-bottom: 0;
}

/* Video container */
.vimeo-video-container {
  position: relative;
  width: 40%; /* Fixed width percentage */
  padding-bottom: 22.5%; /* Maintain 16:9 aspect ratio (40% * 9/16 = 22.5%) */
  height: 0;
  overflow: hidden;
  min-width: 300px; /* Ensure video has some minimum width */
  flex-shrink: 0; /* Prevent video from shrinking */
  margin-top: 0; /* Ensure no top margin */
}

/* For standalone videos (no text) */
.vimeo-video-container:only-child {
  width: 60%;
  padding-bottom: 33.75%; /* 60% * 9/16 = 33.75% */
  margin: 1.5rem auto;
}

/* Make iframe fill the video container */
.vimeo-video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* Let longer sections continue beside and below their video. */
.vimeo-wrapper--flow {
  display: flow-root;
}

.vimeo-wrapper--flow .vimeo-content {
  display: contents;
}

.vimeo-wrapper--flow .vimeo-video-container {
  aspect-ratio: 16 / 9;
  height: auto;
  padding-bottom: 0;
  float: right;
  margin: 0 0 1rem 2rem;
}

.vimeo-wrapper--flow.right .vimeo-video-container {
  float: left;
  margin: 0 2rem 1rem 0;
}

/* Responsive adjustments for small screens */
@media screen and (max-width: 768px) {
  .vimeo-wrapper, .vimeo-wrapper.right {
    flex-direction: column;
  }
  
  .vimeo-video-container, .vimeo-video-container:only-child {
    width: 100%;
    padding-bottom: 56.25%; /* Standard 16:9 aspect ratio */
    margin-top: 1rem;
  }

  .vimeo-wrapper--flow {
    display: flex;
    gap: 1rem;
  }

  .vimeo-wrapper--flow .vimeo-content {
    display: block;
  }

  .vimeo-wrapper--flow .vimeo-video-container,
  .vimeo-wrapper--flow.right .vimeo-video-container {
    float: none;
    order: 1;
    margin: 0;
  }
}

.md-tooltip {
    top: inherit;
    left: inherit;
    margin-left: 12px;
    margin-top: 7px;
}

/* Maximum space for text block */
/*.md-grid {
/*  max-width: 100%; /* or 100%, if you want to stretch to full-width */
/*}