.se-adaptive-flow {
  --se-adaptive-gap: clamp(28px, 4vw, 56px);
  --se-adaptive-stack-gap: clamp(28px, 4vw, 44px);
  --se-adaptive-content-gap: clamp(20px, 2.2vw, 28px);
  --se-adaptive-stacked-media-max: 35rem;
  --se-adaptive-media-background: transparent;
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  container-name: se-adaptive-flow;
  container-type: inline-size;
}

@supports (width: 1cqw) {
  .se-adaptive-flow {
    --se-adaptive-gap: clamp(28px, 4cqw, 56px);
    --se-adaptive-stack-gap: clamp(28px, 4cqw, 44px);
    --se-adaptive-content-gap: clamp(20px, 2.2cqw, 28px);
  }
}

/* Mobile and the explicit fallback use one calm, semantic stack. The content
   always comes first in the DOM; media position only changes the wide grid. */
.se-adaptive-flow > .se-adaptive-flow__layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-areas:
    "content"
    "media";
  grid-template-columns: minmax(0, 1fr);
  gap: var(--se-adaptive-stack-gap);
  width: 100%;
  min-width: 0;
  align-items: start;
}

.se-adaptive-flow > .se-adaptive-flow__layout > * {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  margin: 0;
}

.se-adaptive-flow > .se-adaptive-flow__layout > .se-adaptive-flow__area--content {
  grid-area: content;
  display: flex;
  width: 100%;
  flex-direction: column;
  align-self: start;
  gap: var(--se-adaptive-content-gap);
}

.se-adaptive-flow > .se-adaptive-flow__layout > .se-adaptive-flow__area--content > * {
  margin-block: 0 !important;
}

.se-adaptive-flow:not(.se-adaptive-flow--editor) > .se-adaptive-flow__layout > .se-adaptive-flow__area--content > p:empty {
  display: none;
}

.se-adaptive-flow > .se-adaptive-flow__layout > .se-adaptive-flow__area--media {
  grid-area: media;
  width: min(100%, var(--se-adaptive-stack-media-w, var(--se-adaptive-stacked-media-max)));
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  justify-self: center;
  align-self: start;
}

.se-adaptive-flow[data-se-media-background] > .se-adaptive-flow__layout > .se-adaptive-flow__area--media {
  background-color: var(--se-adaptive-media-background) !important;
}

/* Kept as a no-JS/old-markup fallback. The new editor has no pool and the
   frontend controller moves every legacy child into the content stack once. */
.se-adaptive-flow > .se-adaptive-flow__layout > .se-adaptive-flow__pool {
  grid-area: pool;
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: var(--se-adaptive-content-gap);
}

.se-adaptive-flow > .se-adaptive-flow__layout > .se-adaptive-flow__pool:empty {
  display: none;
}

.se-adaptive-flow > .se-adaptive-flow__layout:has(> .se-adaptive-flow__pool:not(:empty)) {
  grid-template-areas:
    "content"
    "media"
    "pool";
}

/* Malformed recovery children remain readable on their own full-width row
   instead of overlapping the canonical named grid areas. */
.se-adaptive-flow > .se-adaptive-flow__layout > :not(.se-adaptive-flow__area--content):not(.se-adaptive-flow__area--media):not(.se-adaptive-flow__pool),
.se-adaptive-flow > .se-adaptive-flow__layout > .se-adaptive-flow__area--content ~ .se-adaptive-flow__area--content,
.se-adaptive-flow > .se-adaptive-flow__layout > .se-adaptive-flow__area--media ~ .se-adaptive-flow__area--media {
  grid-area: auto;
  grid-column: 1 / -1;
}

@container se-adaptive-flow (min-width: 768px) {
  .se-adaptive-flow:not([data-se-layout="stacked"]) > .se-adaptive-flow__layout {
    grid-template-areas: "content media";
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, var(--se-adaptive-media-w, 40%));
    row-gap: var(--se-adaptive-content-gap);
    column-gap: var(--se-adaptive-gap);
  }

  .se-adaptive-flow:not([data-se-layout="stacked"])[data-media-position="start"] > .se-adaptive-flow__layout {
    grid-template-areas: "media content";
    grid-template-columns:
      minmax(0, var(--se-adaptive-media-w, 40%))
      minmax(0, 1fr);
  }

  .se-adaptive-flow:not([data-se-layout="stacked"]) > .se-adaptive-flow__layout > .se-adaptive-flow__area--media {
    width: 100%;
    max-width: none;
    justify-self: stretch;
  }

  .se-adaptive-flow:not([data-se-layout="stacked"]) > .se-adaptive-flow__layout:has(> .se-adaptive-flow__pool:not(:empty)) {
    grid-template-areas:
      "content media"
      "pool pool";
  }

  .se-adaptive-flow:not([data-se-layout="stacked"])[data-media-position="start"] > .se-adaptive-flow__layout:has(> .se-adaptive-flow__pool:not(:empty)) {
    grid-template-areas:
      "media content"
      "pool pool";
  }
}

/* JS writes the measured state explicitly, also covering browsers without
   container-query support. */
.se-adaptive-flow[data-se-layout="balanced"] > .se-adaptive-flow__layout {
  grid-template-areas: "content media";
  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, var(--se-adaptive-media-w));
  row-gap: var(--se-adaptive-content-gap);
  column-gap: var(--se-adaptive-gap);
}

.se-adaptive-flow[data-se-layout="balanced"][data-media-position="start"] > .se-adaptive-flow__layout {
  grid-template-areas: "media content";
  grid-template-columns:
    minmax(0, var(--se-adaptive-media-w))
    minmax(0, 1fr);
}

.se-adaptive-flow[data-se-layout="balanced"] > .se-adaptive-flow__layout > .se-adaptive-flow__area--media {
  width: 100%;
  max-width: none;
  justify-self: stretch;
}

/* Very long copy lines make a portrait medium look needlessly small. A
   readable prose measure adds useful content height while KPI grids and all
   other editorial blocks still retain the full available column width. */
.se-adaptive-flow[data-se-layout="balanced"] > .se-adaptive-flow__layout > .se-adaptive-flow__area--content > :where(p, ul, ol, blockquote) {
  max-inline-size: min(100%, 72ch);
  align-self: flex-start;
}

/* On wide canvases portrait media may deliberately be a little taller than
   the copy. Centering the content turns that bounded surplus into a balanced
   composition instead of leaving one conspicuous empty strip below it. */
.se-adaptive-flow[data-se-layout="balanced"][data-se-media-emphasized="true"] > .se-adaptive-flow__layout > .se-adaptive-flow__area--content {
  align-self: center;
}

.se-adaptive-flow[data-se-layout="balanced"] > .se-adaptive-flow__layout:has(> .se-adaptive-flow__pool:not(:empty)) {
  grid-template-areas:
    "content media"
    "pool pool";
}

.se-adaptive-flow[data-se-layout="balanced"][data-media-position="start"] > .se-adaptive-flow__layout:has(> .se-adaptive-flow__pool:not(:empty)) {
  grid-template-areas:
    "media content"
    "pool pool";
}

.se-adaptive-flow[data-se-layout="stacked"] > .se-adaptive-flow__layout {
  grid-template-areas:
    "content"
    "media";
  grid-template-columns: minmax(0, 1fr);
  gap: var(--se-adaptive-stack-gap);
}

.se-adaptive-flow[data-se-layout="stacked"] > .se-adaptive-flow__layout:has(> .se-adaptive-flow__pool:not(:empty)) {
  grid-template-areas:
    "content"
    "media"
    "pool";
}

/* Incomplete legacy instances collapse instead of reserving an empty column. */
.se-adaptive-flow[data-se-has-media="false"] > .se-adaptive-flow__layout > .se-adaptive-flow__area--media,
.se-adaptive-flow[data-se-has-content="false"] > .se-adaptive-flow__layout > .se-adaptive-flow__area--content {
  display: none;
}

.se-adaptive-flow[data-se-has-media="false"][data-se-has-content="true"] > .se-adaptive-flow__layout {
  grid-template-areas: "content";
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.se-adaptive-flow[data-se-has-content="false"][data-se-has-media="true"] > .se-adaptive-flow__layout {
  grid-template-areas: "media";
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.se-adaptive-flow[data-se-has-content="false"][data-se-has-media="false"] {
  display: none;
}

/* A media background may fill its entire balanced side without affecting the
   measured media height. */
.se-adaptive-flow[data-se-layout="balanced"][data-se-media-background]::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset-block: 0;
  inset-inline-end: 0;
  width: var(--se-adaptive-media-background-w, var(--se-adaptive-media-w));
  background: var(--se-adaptive-media-background);
  pointer-events: none;
}

.se-adaptive-flow[data-se-layout="balanced"][data-se-media-background][data-media-position="start"]::before {
  inset-inline: 0 auto;
}

.se-adaptive-flow > .se-adaptive-flow__layout > .se-adaptive-flow__area--media > :first-child {
  margin-block-start: 0;
}

.se-adaptive-flow > .se-adaptive-flow__layout > .se-adaptive-flow__area--media > :last-child {
  margin-block-end: 0;
}

.se-adaptive-flow > .se-adaptive-flow__layout > .se-adaptive-flow__area--media :where(
  .wp-block-image,
  .wp-block-image > a,
  .wp-block-image > .wp-lightbox-container,
  video,
  .wp-block-embed,
  .wp-block-embed__wrapper
) {
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto;
  min-height: 0 !important;
  margin: 0 !important;
}

.se-adaptive-flow > .se-adaptive-flow__layout > .se-adaptive-flow__area--media iframe {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

.se-adaptive-flow > .se-adaptive-flow__layout > .se-adaptive-flow__area--media .wp-has-aspect-ratio iframe {
  height: 100% !important;
}

.se-adaptive-flow > .se-adaptive-flow__layout > .se-adaptive-flow__area--media .wp-block-image img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
}

/* Neutralize only the historic invisible PV-Hybrid border combination. */
.se-adaptive-flow > .se-adaptive-flow__layout > .se-adaptive-flow__area--media .wp-block-image.is-resized.has-custom-border > img.has-white-border-color[style*="border-width:1.8rem"] {
  border-width: 0 !important;
}