/* ==================================================================
   ABA Pathways — "Our process" section
   Requires: the outer Group block carries the CSS class  our-process
   ================================================================== */

/* WordPress core sets `word-break: break-word` on every .wp-block-column
   (the legacy alias for overflow-wrap: anywhere), which permits splitting
   a word mid-word. Switch it off inside this section only. */
.our-process .wp-block-column,
.our-process .wp-block-column * {
  word-break: normal;
}


/* ---- Desktop: five across ----------------------------------------
   Subgrid ties image / title / description into three shared rows, so
   they line up across all five columns whatever the copy length. */
@media (min-width: 1025px) {

  .our-process .wp-block-columns {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: auto auto auto;
    gap: 24px;
  }

  .our-process .wp-block-column {
    display: grid;
    grid-row: 1 / -1;
    grid-template-rows: subgrid;
  }

  .our-process .wp-block-column > .wp-block-group {
    display: grid;
    grid-row: 1 / -1;
    grid-template-rows: subgrid;
    justify-items: center;
    align-items: start;   /* top-align inside each row, not centre */
  }
}


/* ---- Tablet and below: one step per row, image left --------------- */
@media (max-width: 1024px) {

  .our-process .wp-block-columns {
    display: flex;
    flex-direction: column;
    gap: 32px;
  }

  .our-process .wp-block-column {
    flex: 1 1 auto;
  }

  .our-process .wp-block-column > .wp-block-group {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;  /* without this the short title shrink-wraps
                              and re-centres itself */
    gap: 8px;
    min-height: 110px;
  }

  .our-process .wp-block-column > .wp-block-group > figure {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
  }

  /* !important is needed because the Image block writes width/height
     as an inline style on the img element itself. Clearing the fixed
     size in the editor would let you drop both !importants. */
  .our-process .wp-block-column > .wp-block-group > figure img {
    width: 110px !important;
    height: 110px !important;
  }

  .our-process .wp-block-column > .wp-block-group > p {
    text-align: left;
    margin: 0 0 0 134px;   /* 110px image + 24px gutter */
  }
}


/* ---- Phone: smaller circle, tighter gutter ------------------------ */
@media (max-width: 600px) {

  .our-process .wp-block-column > .wp-block-group {
    min-height: 84px;
  }

  .our-process .wp-block-column > .wp-block-group > figure img {
    width: 84px !important;
    height: 84px !important;
  }

  .our-process .wp-block-column > .wp-block-group > p {
    margin-left: 100px;    /* 84px image + 16px gutter */
  }
}