/* ====== Cormens • Image – Bleed ===========================================
   Image breaks out of the grid to the viewport edge and stays fully visible.
   JS (cormens-bleed-image.js) sets --c-off-l / --c-off-r (distance from the
   column to the viewport edge) and adds .is-ready. Without JS: stays in grid.
   Replaces cormens-left-bleed.css (2026-09-24).
   ========================================================================== */

.c-bleed {
  position: relative;
}

.c-bleed__inner {
  display: flex;
  align-items: var(--c-align-y, center);
  justify-content: flex-start;
}

.c-bleed__media {
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
}

.c-bleed__img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
}

/* Breakout – desktop and mobile "edge" */
.c-bleed.is-ready.c-bleed--left .c-bleed__media {
  margin-left: calc(-1 * var(--c-off-l, 0px));
  width: calc(100% + var(--c-off-l, 0px));
}

.c-bleed.is-ready.c-bleed--right .c-bleed__media {
  width: calc(100% + var(--c-off-r, 0px));
}

/* Mobile overrides */
@media (max-width: 767.98px) {
  .c-bleed.is-ready.c-bleed--m-grid .c-bleed__media {
    margin-left: 0;
    width: 100%;
  }

  .c-bleed.is-ready.c-bleed--m-full .c-bleed__media {
    margin-left: calc(-1 * var(--c-off-l, 0px));
    width: calc(100% + var(--c-off-l, 0px) + var(--c-off-r, 0px));
  }
}

/* Carried over from cormens-left-bleed.css: rows/columns must not clip the
   breakout. Kept global on purpose – other layouts may rely on it. */
.vc_row,
.wpb_column {
  overflow: visible;
}