/*
 * Front-end styles for the Naver Video block.
 * Goal: match core Embed video behavior (YouTube-style responsive aspect ratio)
 * while respecting alignwide/alignfull and theme content widths.
 */

/* Base wrapper follows theme content width */
.wp-block-ebti-naver-video,
figure.wp-block-embed.is-provider-naver,
figure.wp-block-embed.is-type-video.is-provider-naver,
body:not(.editor-styles-wrapper) .ebti-naver-video {
  width: 100%;
  max-width: var(--wp--style--global--content-size, 720px);
  margin-left: auto;
  margin-right: auto;
}

/* Wide alignment */
.wp-block-ebti-naver-video.alignwide,
figure.wp-block-embed.alignwide.is-provider-naver,
figure.wp-block-embed.alignwide.is-type-video.is-provider-naver,
body:not(.editor-styles-wrapper) .ebti-naver-video.alignwide {
  max-width: var(--wp--style--global--wide-size, 1200px);
}

/* Full width alignment */
.wp-block-ebti-naver-video.alignfull,
figure.wp-block-embed.alignfull.is-provider-naver,
figure.wp-block-embed.alignfull.is-type-video.is-provider-naver,
body:not(.editor-styles-wrapper) .ebti-naver-video.alignfull {
  max-width: 100%;
}

/*
 * Responsive aspect ratio wrapper (defaults to 16:9).
 * We apply this to both:
 *  - core embed markup: .wp-block-embed__wrapper
 *  - our custom markup: .ebti-naver-video__preview
 */
.wp-block-ebti-naver-video .ebti-naver-video__preview,
figure.wp-block-embed.is-provider-naver .wp-block-embed__wrapper,
figure.wp-block-embed.is-type-video.is-provider-naver .wp-block-embed__wrapper {
  position: relative;
  width: 100%;
  max-width: 100%;
  display: block;
  overflow: hidden;
}

.wp-block-ebti-naver-video .ebti-naver-video__preview::before,
figure.wp-block-embed.is-provider-naver .wp-block-embed__wrapper::before,
figure.wp-block-embed.is-type-video.is-provider-naver .wp-block-embed__wrapper::before {
  content: "";
  display: block;
  padding-top: 56.25%; /* 16:9 */
}

/* Make the iframe fill the responsive wrapper (override inline width/height) */
.wp-block-ebti-naver-video iframe,
figure.wp-block-embed.is-provider-naver iframe,
figure.wp-block-embed.is-type-video.is-provider-naver iframe,
.ebti-naver-video__iframe {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  display: block;
  border: 0;
}

/* Front-end caption (follow theme/core caption styling like core Embed/Image) */
body:not(.editor-styles-wrapper) .wp-block-ebti-naver-video figcaption.wp-element-caption,
body:not(.editor-styles-wrapper) .wp-block-ebti-naver-video .ebti-naver-video__caption {
  /* Do not force boxed UI; let theme styles apply. */
  background: transparent;
  border: 0;
  padding: 0;

  /* Provide light, theme-friendly spacing with safe fallbacks. */
  margin-top: calc(0.5 * var(--global--spacing-unit, 1rem));
  margin-bottom: var(--global--spacing-unit, 1rem);

  /* Mirror common theme caption tokens when available. */
  color: currentColor;
  font-size: var(--global--font-size-xs, 13px);
  line-height: var(--global--line-height-body, 1.6);
  text-align: center;
}