/*
 * Core "textpic"/"textmedia" content element (both CTypes render the same ".ce-textpic" wrapper
 * class -- see the header comment below on the video-specific rules for why). Ported from
 * Scss/Content/_ce_textpic.scss (video-in-center rules) + Scss/Content/_scaffolding.scss
 * (clearfix + gallery-position margins -- confirmed live as the most common textpic/textmedia
 * variant: ".ce-textpic.ce-right.ce-intext", ~780 of ~2100 live records).
 *
 * Dead code dropped (confirmed zero usage -- neither in any template nor in any live bodytext
 * content, checked via the dev DB): ".ce-border" (editor-authored border class, never actually
 * used) and "#embedded iframe" (same).
 */
@layer organisms {
  .ce-textpic::after {
    content: "";
    display: block;
    clear: both;
  }
  /* "!important" genuinely still needed here, unlike almost everywhere else in this project's
     cleanup (2026-07-27, [[feedback_avoid_important]]): the rival is NOT Bootstrap, it's TYPO3
     core itself. TYPO3 auto-generates an unlayered default content stylesheet (own comment header
     reads "default styles for extension tx_frontend", served from "typo3temp/assets/css/<hash>.
     css"), not disabled anywhere in this project's TypoScript -- no "config.removeDefaultCss = 1"
     set -- with its own "!important"-free ".ce-intext.ce-left/.ce-right .ce-gallery" margins
     (10px, not this project's --gap-m). Confirmed live (2026-07-27): that stylesheet is still served
     today, unlayered always beats a layered non-important declaration regardless of specificity,
     so this "!important" still has a real job to do. Disabling TYPO3's default CSS globally is a
     much bigger, riskier TypoScript change than this cleanup pass -- out of scope here. */
  .ce-intext.ce-left .ce-gallery {
    margin-right: var(--gap-m) !important;
  }
  .ce-intext.ce-right .ce-gallery {
    margin-left: var(--gap-m) !important;
  }
  .ce-intext.ce-right .ce-gallery,
  .ce-intext.ce-left .ce-gallery,
  .ce-above .ce-gallery {
    margin-bottom: var(--gap-m) !important;
  }
  .ce-textpic {
    container-type: inline-size;
  }
  @media (max-width: 991px) {
    .ce-left .ce-gallery,
    .ce-right .ce-gallery {
      float: none !important;
    }
    .ce-left .ce-gallery figure,
    .ce-right .ce-gallery figure {
      margin: 0 auto;
    }
    .ce-left .ce-gallery .ce-column,
    .ce-right .ce-gallery .ce-column {
      float: none !important;
    }
    .ce-left .ce-gallery iframe.video-embed-item,
    .ce-right .ce-gallery iframe.video-embed-item {
      max-width: 100%;
      height: auto;
      aspect-ratio: 16/9;
    }
  }
  @container (max-width: 699px) {
    .ce-left .ce-gallery,
    .ce-right .ce-gallery {
      float: none !important;
    }
    .ce-left .ce-gallery figure,
    .ce-right .ce-gallery figure {
      margin: 0 auto;
    }
    .ce-left .ce-gallery .ce-column,
    .ce-right .ce-gallery .ce-column {
      float: none !important;
    }
    .ce-left .ce-gallery iframe.video-embed-item,
    .ce-right .ce-gallery iframe.video-embed-item {
      max-width: 100%;
      height: auto;
      aspect-ratio: 16/9;
    }
  }
  /* Video embeds inside a centered ".ce-textpic" (center-aligned media). ".video"/".video-embed"
     markup itself comes from the shared Content/Partials/Media/Type/Video.html +
     Rendering/Video.html partials (also reused by StageMedia.html) -- the rules below only apply
     when that partial is rendered inside a centered textpic/textmedia element specifically; other
     contexts (e.g. the stage) style ".video-embed" separately (out of scope here).
     ".uc-embedding-1" is a Usercentrics CMP placeholder class injected at runtime over blocked
     embeds (consent not yet given), not something rendered by our own templates -- kept as-is,
     same as the original SCSS. */
  /* Same still-active TYPO3-default-CSS rival as the ".ce-gallery" margins above (NOT Bootstrap) --
     that stylesheet's own ".ce-gallery figure { display: table; margin: 0; }" otherwise wins
     regardless of this rule's higher specificity. Confirmed still needed, 2026-07-27. */
  .ce-textpic.ce-center .video {
    display: block !important;
  }
  .ce-textpic.ce-center .video-embed {
    position: relative;
    aspect-ratio: 16/9;
    width: 100%;
  }
  .ce-textpic.ce-center .video-embed > video {
    width: 100%;
  }
  .ce-textpic.ce-center .video-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .ce-textpic.ce-center .video-embed .uc-embedding-1 {
    width: 100%;
    height: 100%;
    max-height: none;
  }
}