/**
 * @file
 * Styles for config-driven link-to-modal modals.
 *
 * The shared Wingsuit modal component (.modal) sizes iframes for video embeds
 * (min-width: 800px; min-height: 600px), which overflows narrow viewports and
 * is taller than some embeds (e.g. the ONT Radio player) need. These rules
 * retarget the frame sizing for modals injected by link-modal-trigger.js.
 *
 * Uses the stable 'link-modal-trigger__modal' class so styling works
 * regardless of what the editor enters as the Modal title.
 *
 * The title <h2> and __inner wrapper are rendered by JS (from the Modal title
 * config field), so editors only paste the body content (iframe, text, etc.)
 * in the rich-text field.
 */

.link-modal-trigger__modal .modal__content {
  width: 100%;
  max-width: 42rem;
}

.link-modal-trigger__inner {
  padding: 1.5rem 1rem 1rem;
}

.link-modal-trigger__title {
  margin-bottom: 1rem;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.4;
  color: rgb(33 65 139 / var(--tw-text-opacity, 1));
}

/* Close button — bigger and brighter than the shared Wingsuit default
   (h-5 w-5 / !bg-secondary-90). The injected modal uses a text "×" glyph
   rather than the SVG sprite, so size the font and circle to match the
   screenshot the editor approved. */
.link-modal-trigger__modal .modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
  color: #fff;
  background-color: rgb(33 65 139 / var(--tw-text-opacity, 1));
}

.link-modal-trigger__modal .modal__close:hover {
  background-color: rgb(23 48 100 / var(--tw-text-opacity, 1));
}

/* Specificity has to beat `.modal--fade .modal__content iframe` (0,2,1) and
   its max-width: 768px override, both from the shared component.

   The player has no way to report its height across origins, so the frame is
   given the height the player actually renders at: 548px once the frame is at
   least 432px wide, 644px below that where the player stacks its controls.
   No max-height — the modal itself scrolls, so a short window never clips the
   play button. */
.link-modal-trigger__modal.modal--fade .ont-radio-modal__frame {
  display: block;
  width: 100%;
  min-width: 0;
  height: 35rem;
  min-height: 0;
  border: 0;
}

/* Below ~480px of viewport the frame drops under 432px and the player
   switches to its stacked layout. */
@media (max-width: 479px) {
  .link-modal-trigger__modal.modal--fade .ont-radio-modal__frame {
    height: 42rem;
  }
}