/* =========================================================================
   S-Line Steps — styles (scoped under .sline so they won't touch your theme)
   Recolour / resize the block by overriding the --sline-* variables below.
   ========================================================================= */

.sline {
  --sline-ink: #005b73; /* the drawn line + nib */
  --sline-card: #ffffff; /* text-cell background */
  --sline-card-border: #e5e7eb; /* text-cell edge */
  --sline-badge: #005b73; /* number badge background */
  --sline-badge-text: #ffffff; /* number badge text */
  --sline-text: #005b73; /* default text colour */
  --sline-muted: #6b7280; /* secondary text */

  --sline-line-weight: 2.5px;
  --sline-gap: 56px; /* gutter between the two columns */
  --sline-max: 1200px;
  --sline-radius: 16px;

  position: relative;
  max-width: var(--sline-max);
  margin-left: auto;
  margin-right: auto;
  padding: 40px 20px;
  color: var(--sline-text);
  box-sizing: border-box;
  counter-reset: sline-counter;
}

.sline * {
  box-sizing: border-box;
}

/* ---- the line ---------------------------------------------------------- */
.sline__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 0;
}
.sline__path {
  fill: none;
  stroke: var(--sline-ink);
  stroke-width: var(--sline-line-weight);
  stroke-linecap: round;
}
.sline__nib {
  fill: var(--sline-ink);
  opacity: 0;
}

/* ---- the stack --------------------------------------------------------- */
.sline__steps {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 96px;
}

/* A step is two columns (content + media) with the badge floating in the
   gutter between them. The columns swap sides every step. */
.sline__step {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--sline-gap);
  align-items: center;
  transition:
    opacity 0.7s ease,
    transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Hidden-until-revealed state is only applied once the script runs, so the
   steps stay visible in the editor and when JavaScript is off. */
.sline--js .sline__step {
  opacity: 0;
  transform: translateY(36px);
}
.sline--js .sline__step.is-in {
  opacity: 1;
  transform: none;
}

/* Alternate which side each cell sits on. Both are pinned to row 1 so that
   placing the DOM-first cell into the right-hand column can't push the other
   cell onto a new row (CSS grid's default placement won't backtrack). */
.sline__step:nth-child(odd) .sline__card {
  grid-column: 1;
  grid-row: 1;
}
.sline__step:nth-child(odd) .sline__media {
  grid-column: 2;
  grid-row: 1;
}
.sline__step:nth-child(even) .sline__card {
  grid-column: 2;
  grid-row: 1;
}
.sline__step:nth-child(even) .sline__media {
  grid-column: 1;
  grid-row: 1;
}

/* Badge floats in the gutter, nudged to the content side so the connecting
   line weaves a gentle S as it travels down. */
.sline__node {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--sline-badge);
  color: var(--sline-badge-text);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
  box-shadow:
    0 0 0 6px var(--wp--preview-base-background, #ffffff),
    0 8px 24px rgba(0, 0, 0, 0.18);
}
.sline__step:nth-child(odd) .sline__node {
  left: calc(50% - (var(--sline-gap) / 2));
}
.sline__step:nth-child(even) .sline__node {
  left: calc(50% + (var(--sline-gap) / 2));
}
.sline__node::after {
  counter-increment: sline-counter;
  content: counter(sline-counter);
}

/* ---- content cell ------------------------------------------------------ */
.sline__card {
}
.sline__card > :first-child {
  margin-top: 0;
}
.sline__card > :last-child {
  margin-bottom: 0;
}

/* ---- media cell -------------------------------------------------------- */
.sline__media {
  min-width: 0;
}
.sline__media :where(.wp-block-image, figure) {
  margin: 0;
}
.sline__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--sline-radius);
}

/* ---- mobile: hide the image, stack full-width cards -------------------- */
@media (max-width: 720px) {
  .sline-background-remove {
    background-image: none !important;
  }
  .sline__steps {
    gap: 32px;
  }

  /* the image column and the connecting line are dropped on small screens,
	   so the content can use the full width instead of a cramped column. */
  .sline__media {
    display: none;
  }
  .sline__svg {
    display: none;
  }

  /* simple full-width stack: number on top, content below */
  .sline__step,
  .sline__step:nth-child(even) {
    display: block;
  }
  .sline__step .sline__card,
  .sline__step:nth-child(even) .sline__card {
    grid-column: auto;
    grid-row: auto;
    width: 100%;
  }
  .sline__step .sline__node,
  .sline__step:nth-child(even) .sline__node {
    position: static;
    transform: none;
    left: auto;
    margin: 0px auto;
  }
}

/* ---- respect reduced-motion preferences -------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .sline--js .sline__step {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---- editor canvas: badge on top, two cells side by side --------------- */
.editor-styles-wrapper .sline__svg {
  display: none;
}
.editor-styles-wrapper .sline__step {
  display: block;
}
.editor-styles-wrapper .sline__node {
  position: static;
  transform: none;
  left: auto;
  margin: 0 0 14px;
}
/* The two cells are nested inside the inner-block list while editing, so the
   side-by-side grid goes on that list rather than on .sline__step. */
.editor-styles-wrapper .sline__step .block-editor-block-list__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sline-gap);
  align-items: start;
}