// WordPress uses custom properties with double dashes from theme.json that don't match kebab-case
// stylelint-disable custom-property-pattern, csstools/value-no-unknown-custom-properties
@use '../variables' as *;
@use '../variables/breakpoints' as *;

// Core/media-text block variation styles
.wp-block-media-text {
  gap: var(--wp--custom--spacing--grid-gap);
  padding-inline: var(--wp--custom--spacing--container-padding-inline);

  // Full-width background with constrained content
  &.has-background {
    // Hide original background
    background-color: transparent;
    position: relative;

    // Full-width background via pseudo-element
    &::before {
      background-color: var(--wp--preset--color--light);
      bottom: 0;
      content: '';
      left: 50%;
      position: absolute;
      top: 0;
      transform: translateX(-50%);
      width: 100vw;
      z-index: 0;
    }

    // Ensure content is above background
    > * {
      position: relative;
      z-index: 1;
    }
  }

  .wp-block-heading {
    margin: 0;
  }

  // Media area with aspect ratio constraint
  // Using aspect-ratio instead of fixed height for better responsiveness
  // Images use object-fit: cover to fill the container while maintaining aspect
  .wp-block-media-text__media {
    aspect-ratio: 4 / 3;
    background-color: var(--color-placeholder, #f0f0f0);

    // Ensure images fill container with object-fit cover
    // This prevents portrait images from expanding the block height
    img {
      height: 100%;
      object-fit: cover;
      width: 100%;
    }

    // When image is present, remove placeholder background
    &:has(img),
    &:has(video) {
      background-color: transparent;
    }
  }

  // Override WordPress core height: 100% and min-height: 250px for is-image-fill-element
  // Need higher specificity to override .wp-block-media-text.is-image-fill-element > .wp-block-media-text__media
  &.is-image-fill-element > .wp-block-media-text__media {
    height: auto;
    min-height: 0;
  }

  // Editor-specific: also target the resizable container
  .editor-media-container__resizer {
    aspect-ratio: 4 / 3;

    img {
      height: 100%;
      object-fit: cover;
      width: 100%;
    }
  }

  // Content area spacing
  .wp-block-media-text__content {
    padding: 2rem;

    > *:first-child {
      margin-top: 0;
    }

    > *:last-child {
      margin-bottom: 0;
    }
  }
}

// Editor-specific styles
.editor-styles-wrapper .wp-block-media-text .wp-block-media-text__media {
  // Show placeholder in editor when no media selected
  &:empty,
  &:has(.block-editor-media-placeholder) {
    background-color: var(--color-placeholder, #f0f0f0);
    min-height: 18.75rem;
  }
}