/* ===== sl-flow: image left, What's New floated right, text wraps ===== */

/* The body wrapper's .clearfix sets overflow:auto, which clips the What's New shadow.
   .sl-flow contains its own float (flow-root), so that clipping is not needed here. */
.text-content.clearfix:has(> .sl-flow),
#block-olivero-topimage .text-content.clearfix {
  overflow: visible;
}

.sl-flow {
  --sl-news-w: 38%;
  --sl-gap: 1.5rem;
  /* Side inset matching following blocks (.hilight1 8px, .sl-2col-grid 6px) */
  --sl-inset: 8px;
  /* Space above What's New when stacked: same as the page's block rhythm (sl_rhythm) */
  --sl-block-space: var(--sl-rhythm, 3rem);
  /* Desktop: minimum gap below What's New = theme's image-to-caption gap (36px) */
  --sl-v-gap: 2.25rem;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding-left: var(--sl-inset);
  padding-right: var(--sl-inset);
}

/* Mobile first: stacked, order set explicitly */
.sl-flow__image     { order: 1; }
.sl-flow__question  { order: 2; }
.sl-flow__challenge { order: 3; }
.sl-flow__news      { order: 4; }

.sl-flow__image figure {
  margin: 0;
}
.sl-flow__image img {
  display: block;
  max-width: 100%;
  height: auto;
}

.sl-flow__question {
  font-size: 1.5em;
  margin: 0 0 0.5em;
}

.sl-flow__news {
  box-sizing: border-box;
  font-size: 0.8em;
  line-height: 1.3;
  margin: 0;
  padding: 0;
}

/* Panel's own margins replaced by the layout spacing */
.sl-flow .sl-flow__news .sl-new {
  margin: 0;
}

/* Mobile: rhythm space below the Challenge <hr>; lighter shadow so it does not run off the screen edge */
@media (max-width: 767.98px) {
  .sl-flow__news {
    margin-top: var(--sl-block-space);
  }
  .sl-flow .sl-flow__news .sl-new {
    box-shadow:
      0.5px 1px 0.8px rgba(0, 0, 0, 0.05),
      2px 4px 3px rgba(0, 0, 0, 0.06);
  }
}

.sl-flow__challenge hr {
  margin-bottom: 0;
}
.sl-flow__challenge hr:first-child {
  margin-top: 2em;
}
.sl-flow__challenge p {
  font-size: 1.125em;
  line-height: 1.3;
}

/* Wide: float layout so caption and text flow around What's New */
@media (min-width: 768px) {
  .sl-flow {
    display: flow-root;
  }
  .sl-flow__news {
    float: right;
    width: var(--sl-news-w);
    /* bottom margin = image-to-caption gap, so wrapped text is never closer than the caption */
    margin: 0 0 var(--sl-v-gap) var(--sl-gap);
  }

  /* Neutralize theme rules (e.g. .center-image) that push the image below the float */
  .sl-flow .sl-flow__image,
  .sl-flow .sl-flow__image .view,
  .sl-flow .sl-flow__image .view-content,
  .sl-flow .sl-flow__image .views-row,
  .sl-flow .sl-flow__image .views-field,
  .sl-flow .sl-flow__image .field-content {
    display: block;
    float: none;
    clear: none;
    overflow: visible;
    width: auto;
    max-width: none;
    margin-top: 0;
    padding-top: 0;
    text-align: left;
  }

  /* Level the What's New panel top with the image top (panel keeps its inner padding) */
  .sl-flow .sl-flow__news .view-header,
  .sl-flow .sl-flow__news #new,
  .sl-flow .sl-flow__news h2 {
    margin-top: 0;
    padding-top: 0;
  }
  .sl-flow .sl-flow__news h2 {
    line-height: 1.1;
  }

  /* Image width derived from float width and gap so it always fits beside it */
  .sl-flow .sl-flow__image img {
    float: none;
    clear: none;
    width: auto;
    max-width: calc(100% - var(--sl-news-w) - var(--sl-gap) - 2px);
    margin: 0;
  }

  /* Caption wraps around the float instead of dropping below it (theme margin and line spacing untouched) */
  .sl-flow .sl-flow__image .image-field-caption {
    clear: none;
    overflow: visible;
    display: block;
  }

  .sl-flow hr {
    overflow: hidden;
  }
}