/* Helper for arranging a single row of two visual assets (images/videos)
   side-by-side with equal heights. Keep this file minimal and focused on
   the `row-assets` helper. */

:root {
  --row-asset-height: 320px; /* override as needed per page */
}

.row-assets {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
  width: 100%;
  box-sizing: border-box;
}

.row-assets > .asset {
  flex: 1 1 50%;
  max-width: 50%;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  /* fixed row height so both assets match vertically */
  height: var(--row-asset-height);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.row-assets .asset > img,
.row-assets .asset > video,
.row-assets .asset > figure {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* preserve coverage while matching heights */
  display: block !important;
}

/* Sphinx-safe stronger selectors */
.bd-content .row-assets,
.page .row-assets,
.document .row-assets,
.content .row-assets,
body .row-assets {
  display: flex !important;
  gap: 0.5rem !important;
}

.bd-content .row-assets > .asset,
.page .row-assets > .asset,
.document .row-assets > .asset,
.content .row-assets > .asset,
body .row-assets > .asset {
  flex: 1 1 50% !important;
  max-width: 50% !important;
  height: var(--row-asset-height) !important;
}

@media (max-width: 900px) {
  .row-assets,
  .bd-content .row-assets,
  .page .row-assets,
  .document .row-assets,
  .content .row-assets,
  body .row-assets {
    flex-direction: column !important;
  }
  .row-assets > .asset,
  .bd-content .row-assets > .asset,
  .page .row-assets > .asset,
  .document .row-assets > .asset,
  .content .row-assets > .asset,
  body .row-assets > .asset {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important; /* let media determine height when stacked */
  }
}