/* Thành Phát Auto — responsive authored media normalization v0.2.39
 * Scope only editor-authored content. Theme-owned hero/card/gallery/map media keep
 * their component-specific sizing rules.
 */

:is(
  .tpa-prose,
  .tpa-category-content-body,
  .woocommerce div.product .woocommerce-tabs .panel,
  .tpa-product-intro
) {
  min-width: 0;
}

/* Images authored inside editorial content use the full active content column.
 * This intentionally scales both down AND up, while height:auto preserves the
 * original aspect ratio. It fixes mixed-width legacy TinyMCE images where a
 * 600px source sat beside a 900px source inside the same layout. */
:is(
  .tpa-prose,
  .tpa-category-content-body,
  .woocommerce div.product .woocommerce-tabs .panel,
  .tpa-product-intro
) img:not(.emoji):not(.wp-smiley) {
  display: block;
  inline-size: 100% !important;
  width: 100% !important;
  max-inline-size: 100% !important;
  max-width: 100% !important;
  block-size: auto !important;
  height: auto !important;
  margin-inline: auto;
  object-fit: contain;
}

/* Image-only links are common in Classic Editor content. Make the link itself
 * span the text column so its child image can truly become full-width. */
:is(
  .tpa-prose,
  .tpa-category-content-body,
  .woocommerce div.product .woocommerce-tabs .panel,
  .tpa-product-intro
) :is(p, figure) > a:only-child {
  display: block;
  inline-size: 100%;
  max-inline-size: 100%;
}

/* WordPress/TinyMCE wrappers must not retain historical pixel widths. */
:is(
  .tpa-prose,
  .tpa-category-content-body,
  .woocommerce div.product .woocommerce-tabs .panel,
  .tpa-product-intro
) :is(figure, .wp-caption, .wp-block-image) {
  inline-size: 100% !important;
  width: 100% !important;
  max-inline-size: 100% !important;
  max-width: 100% !important;
  margin-inline: auto;
}

/* Gallery containers stay fluid, but their own grid/crop rules remain intact. */
:is(
  .tpa-prose,
  .tpa-category-content-body,
  .woocommerce div.product .woocommerce-tabs .panel,
  .tpa-product-intro
) :is(.wp-block-gallery, .blocks-gallery-grid) {
  inline-size: 100%;
  max-inline-size: 100% !important;
}

/* Native videos keep their intrinsic aspect ratio and scale to the content width. */
:is(
  .tpa-prose,
  .tpa-category-content-body,
  .woocommerce div.product .woocommerce-tabs .panel,
  .tpa-product-intro
) :is(video, .wp-video, .wp-video-shortcode, .wp-block-video, .mejs-container) {
  inline-size: 100% !important;
  width: 100% !important;
  max-inline-size: 100% !important;
  max-width: 100% !important;
}

:is(
  .tpa-prose,
  .tpa-category-content-body,
  .woocommerce div.product .woocommerce-tabs .panel,
  .tpa-product-intro
) video {
  display: block;
  inline-size: 100% !important;
  width: 100% !important;
  block-size: auto !important;
  height: auto !important;
  margin-inline: auto;
  object-fit: contain;
  background: #111;
}

/* Authored iframe/oEmbed media. JS supplies --tpa-media-ratio from the original
 * width/height attributes when available; otherwise a 16:9 safe fallback is used. */
:is(
  .tpa-prose,
  .tpa-category-content-body,
  .woocommerce div.product .woocommerce-tabs .panel,
  .tpa-product-intro
) iframe {
  display: block;
  inline-size: 100% !important;
  width: 100% !important;
  max-inline-size: 100% !important;
  max-width: 100% !important;
  min-inline-size: 0;
  block-size: auto !important;
  height: auto !important;
  aspect-ratio: var(--tpa-media-ratio, 16 / 9);
  margin-inline: auto;
  border: 0;
}

:is(
  .tpa-prose,
  .tpa-category-content-body,
  .woocommerce div.product .woocommerce-tabs .panel,
  .tpa-product-intro
) :is(.wp-block-embed, .wp-block-embed__wrapper, .tpa-category-youtube) {
  inline-size: 100%;
  width: 100%;
  max-inline-size: 100% !important;
  max-width: 100% !important;
  min-width: 0;
}

/* Legacy object/embed media cannot widen the layout. */
:is(
  .tpa-prose,
  .tpa-category-content-body,
  .woocommerce div.product .woocommerce-tabs .panel,
  .tpa-product-intro
) :is(object, embed) {
  display: block;
  inline-size: 100% !important;
  max-inline-size: 100% !important;
  block-size: auto !important;
  margin-inline: auto;
}

/* Old editor tables are another frequent source of horizontal overflow. */
:is(
  .tpa-prose,
  .tpa-category-content-body,
  .woocommerce div.product .woocommerce-tabs .panel,
  .tpa-product-intro
) table {
  max-inline-size: 100% !important;
}

@media (max-width: 700px) {
  :is(
    .tpa-prose,
    .tpa-category-content-body,
    .woocommerce div.product .woocommerce-tabs .panel,
    .tpa-product-intro
  ) :is(iframe, video) {
    border-radius: 12px;
  }
}