/* HONOKO Pro · responsive video block */
.honoko-video {
  width: 100%;
}

.honoko-video__frame {
  position: relative;
  width: min(100%, var(--honoko-video-size, 100%));
  max-width: 100%;
  margin-inline: auto;
  overflow: hidden;
  background: #000;
  border-radius: inherit;
  aspect-ratio: 16 / 9;
}

.honoko-video__frame--16-9 { aspect-ratio: 16 / 9; }
.honoko-video__frame--4-3  { aspect-ratio: 4 / 3; }
.honoko-video__frame--1-1  { aspect-ratio: 1 / 1; }
.honoko-video__frame--9-16 {
  aspect-ratio: 9 / 16;
  /* Scale the vertical cap as well as the column width.
     Without this, 100%, 75% and 50% could all resolve to the same 520px cap
     inside a wide column, making the size selector barely noticeable. */
  width: min(var(--honoko-video-size, 100%), var(--honoko-video-vertical-max, 520px));
  margin-inline: auto;
}

.honoko-video__frame > iframe,
.honoko-video__frame > video,
.honoko-video__frame > .wp-video,
.honoko-video__frame > .wp-video-shortcode {
  position: absolute !important;
  inset: 0;
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  border: 0;
}

.honoko-video__frame iframe {
  background: #000;
}

.honoko-video__native {
  object-fit: contain;
  background: #000;
}

.honoko-video__frame > blockquote,
.honoko-video__frame > div,
.honoko-video__frame > figure {
  max-width: 100% !important;
}

.honoko-video__fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  color: #fff;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* Instagram clean presentation
 * Instagram does not expose a chrome-free public player endpoint. HONOKO keeps
 * the official embed interactive, but presents only the media viewport by
 * clipping the profile/header and social footer inside our own frame. */
.honoko-video--instagram .honoko-video__frame > iframe {
  inset: auto !important;
  top: -58px !important;
  left: 50% !important;
  width: 100% !important;
  max-width: none !important;
  height: calc(100% + 520px) !important;
  transform: translateX(-50%);
  border: 0 !important;
}

/* A 9:16 HONOKO frame is taller than Instagram's embedded media viewport for
 * many feed posts. Enlarge the official embed and let the HONOKO frame crop it
 * like object-fit: cover, so footer/comments never enter the visible area. */
.honoko-video--instagram .honoko-video__frame--9-16 > iframe {
  width: 146% !important;
  height: calc(146% + 560px) !important;
}

@media (max-width: 640px) {
  .honoko-video--instagram .honoko-video__frame > iframe {
    top: -54px !important;
    height: calc(100% + 460px) !important;
  }

  .honoko-video--instagram .honoko-video__frame--9-16 > iframe {
    width: 150% !important;
    height: calc(150% + 500px) !important;
  }
}

@media (max-width: 640px) {
  .honoko-video__frame--9-16 {
    width: min(var(--honoko-video-size, 100%), var(--honoko-video-vertical-mobile-max, 420px));
  }
}