/**
 * Personalitopia Modular Block Styles: Core Embed Block (core/embed) & Assigned Video
 * Theme: twentytwentyfour-child
 */

@layer theme-blocks {
  .wp-block-embed,
  .wp-block-embed-youtube,
  figure.wp-block-embed,
  .personalitopia-assigned-video,
  figure.personalitopia-assigned-video {
    margin: var(--wp--preset--spacing--30, 24px) 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    clear: both;
    overflow: hidden;
    border-radius: var(--wp--custom--radius--card, 16px);
  }

  /* Card Containment: Lock video firmly inside parent cards */
  .wsf-pt-card .wp-block-embed,
  .wsf-pt-card .personalitopia-assigned-video,
  .wp-block-group.is-style-card .wp-block-embed,
  .wp-block-group.is-style-card .personalitopia-assigned-video,
  .wp-block-group[class*="card"] .wp-block-embed,
  .wp-block-group[class*="card"] .personalitopia-assigned-video,
  [data-ai-role*="card"] .wp-block-embed,
  [data-ai-role*="card"] .personalitopia-assigned-video {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Prevent overflow out of card boundaries */
  .wsf-pt-card,
  .wp-block-group[class*="card"] {
    overflow: hidden;
    box-sizing: border-box;
  }

  .wp-block-embed__wrapper {
    position: relative;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--wp--custom--radius--card, 14px);
    background-color: var(--wp--preset--color--ink, #2C1F15);
    box-shadow: var(--wp--preset--shadow--card, 0 8px 24px rgba(44, 31, 21, 0.08));
    border: 1px solid var(--wp--preset--color--sand-border, rgba(44, 31, 21, 0.08));
    box-sizing: border-box;
  }

  /* Fallback for embeds without native aspect-ratio */
  @supports not (aspect-ratio: 16 / 9) {
    .wp-block-embed__wrapper {
      padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
      height: 0;
    }
  }

  .wp-block-embed__wrapper iframe,
  .wp-block-embed__wrapper object,
  .wp-block-embed__wrapper embed,
  .personalitopia-assigned-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    border: 0;
    margin: 0;
    padding: 0;
    display: block;
    border-radius: inherit;
    box-sizing: border-box;
  }

  /* Vertical Shorts & Reels (9:16 Aspect Ratio) */
  .wp-block-embed.wp-embed-aspect-9-16,
  .wp-block-embed.is-style-vertical-short,
  .wp-block-embed.is-style-short,
  figure.is-style-vertical-short {
    max-width: 380px;
    width: 100%;
    margin: var(--wp--preset--spacing--30, 24px) auto;
  }

  .wp-block-embed.wp-embed-aspect-9-16 .wp-block-embed__wrapper,
  .wp-block-embed.is-style-vertical-short .wp-block-embed__wrapper,
  .wp-block-embed.is-style-short .wp-block-embed__wrapper,
  figure.is-style-vertical-short .wp-block-embed__wrapper {
    aspect-ratio: 9 / 16;
  }

  @supports not (aspect-ratio: 9 / 16) {
    .wp-block-embed.wp-embed-aspect-9-16 .wp-block-embed__wrapper:before,
    .wp-block-embed.is-style-vertical-short .wp-block-embed__wrapper:before,
    .wp-block-embed.is-style-short .wp-block-embed__wrapper:before,
    figure.is-style-vertical-short .wp-block-embed__wrapper:before {
      content: "";
      display: block;
      padding-top: 177.78%; /* 9:16 Aspect Ratio */
    }
  }

  @media (max-width: 768px) {
    .wp-block-embed,
    .wp-block-embed-youtube,
    figure.wp-block-embed,
    .personalitopia-assigned-video,
    figure.personalitopia-assigned-video {
      margin-top: var(--wp--preset--spacing--20, 16px);
      margin-bottom: var(--wp--preset--spacing--20, 16px);
      border-radius: var(--wp--custom--radius--md, 12px);
    }
    .wp-block-embed__wrapper {
      border-radius: var(--wp--custom--radius--md, 12px);
    }
  }
}