/* Styling for admin-placed media blocks.
   Kept in its own file so the admin's generated theme stylesheet and these
   layout rules never overwrite one another. */

.owa-blk{
  margin: 2.5rem auto;
  padding: 0 1.25rem;
  max-width: 72rem;
  display: block;
}
.owa-blk > img,
.owa-blk > video{
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  background: #f1f5ee;
}
/* A video with preload="none" and no poster reports no intrinsic size, so the
   browser falls back to a squat default box until it is played. Give it a
   sensible shape up front; a poster, once set, overrides this naturally. */
.owa-blk > video{ aspect-ratio: 16 / 9; object-fit: cover; }
.owa-blk-round > img,
.owa-blk-round > video{ border-radius: 1rem; }

/* widths */
.owa-blk-full{ max-width: 72rem; }
.owa-blk-wide{ max-width: 56rem; }
.owa-blk-medium{ max-width: 40rem; }
.owa-blk-small{ max-width: 24rem; }

/* alignment within the page */
.owa-blk-left{ margin-left: 0; margin-right: auto; }
.owa-blk-right{ margin-left: auto; margin-right: 0; }
.owa-blk-center{ margin-left: auto; margin-right: auto; }

.owa-blk > figcaption{
  margin-top: .6rem;
  font-size: .9rem;
  line-height: 1.5;
  color: color-mix(in oklab, currentColor 60%, transparent);
  text-align: center;
}
.owa-blk-left > figcaption{ text-align: left; }
.owa-blk-right > figcaption{ text-align: right; }

@media (max-width: 640px){
  .owa-blk{ margin: 1.75rem auto; padding: 0 1rem; }
}

/* In the admin preview, make placed blocks obvious. */
html[data-owa-editing] .owa-blk{
  outline: 2px dashed var(--primary, #81a749);
  outline-offset: 4px;
}