/* TruVo presentation embedded above the Resources form */

.truvo-presentation {
  margin-top: 188px;
}

.truvo-presentation .container {
  max-width: unset;
  overflow: visible;
  container-type: inline-size; /* lets .truvo-embed size its height from its width (cqw) */
}

/* Tighten the form's header-clearing gap when the presentation sits above it */
.truvo-presentation + .form-section {
  margin-top: 100px;
}

.truvo-presentation ~ .resource-grid-container {
  margin-top: 100px !important;
}

/* Height = exactly what Carlos's app needs, so it neither crops nor leaves empty bands.
   The app sizes its card to the iframe: width = min(1240px, iframe width - 2 * gutter), gutter = clamp(12px, 3vw, 40px),
   and card height = (card width - 46px) / aspect + 276px of controls (captions, chapters, player bar).
   100cqw = the iframe's width (the container is a size container, see above). */
.truvo-embed {
  position: relative;
  width: 100%;
  margin: 0 auto;
  height: calc((min(1240px, 100cqw - 2 * clamp(12px, 3cqw, 40px)) - 46px) * 0.5625 + 276px);
  /* ...but never taller than the window (minus room for the nav), so the controls stay in view; the app scales to fit */
  max-height: max(560px, 100svh - 140px);
}

.truvo-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 16px;
}

/* Narrow boxes: the app switches to its tall 4:5 layout whenever the iframe is less than 1.05:1, so key this
   off the box's own width (container query), not the window. Below 640px the wide height would drop under 1.05:1.
   Tall card = width - 16px, + 20px padding, 252px controls. */
@container (max-width: 640px) {
  .truvo-embed {
    height: calc((100cqw - 36px) * 1.25 + 252px);
  }
}

@media only screen and (max-width: 991px) {
  /* White page background: navy hamburger, same as the theme does for body.contact */
  body.page-template-archive-resource_document header .hamburger span {
    background-color: #00315C !important;
  }
  .truvo-presentation {
    margin-top: 140px;
  }
  .truvo-presentation + .form-section {
    margin-top: 60px;
  }
}