/**
 * volzify snakeline – layout stylesheet (geometry only)
 *
 * Loaded automatically by YOOtheme Pro as css/custom.css of the child theme.
 * If the child theme already has a custom.css, append this file's content.
 *
 * This file intentionally contains NO colors and no typography. Colors and
 * text styles come from UIkit classes set by the templates, so they always
 * follow the active YOOtheme style:
 *
 *   circle   uk-background-primary | -secondary | -muted | -default
 *            (+ uk-light on primary/secondary for light content)
 *   content  uk-text-emphasis, uk-text-bold
 *   line     uk-text-muted | -emphasis | -primary | -secondary, or the
 *            inherited text color; the segments use currentColor
 *   texts    uk-text-small | -large | -meta, uk-h4 … uk-h6, uk-text-bold
 *
 * How the line is drawn
 * ---------------------
 * Every block (.vsl-item) owns up to four line segments. They are pseudo
 * elements of two empty, absolutely positioned hosts that cover the grid cell,
 * so the line color class never touches the circle or the texts. Visibility
 * is controlled by custom properties that the state classes from the PHP
 * template switch on (0 = hidden, 1 = visible):
 *
 *   .vsl-line-row::before   --vsl-n    line to the next block in the same row
 *   .vsl-line-row::after    --vsl-i    arc entering a row from the left
 *   .vsl-line-cell::before  --vsl-ret  piece of the return line below a row
 *   .vsl-line-cell::after   --vsl-e    arc leaving a row to the right
 *
 * The segments meet edge to edge without overlapping, so semi-transparent
 * line colors render evenly.
 *
 * @package volzify snakeline
 * @version 1.3.0
 */

/* ------------------------------------------------------------------------
 * Root: dimensions and grid
 * --------------------------------------------------------------------- */

.volzify-snakeline {
  /* dimensions; overridden per element by the builder settings (inline style) */
  --vsl-size: 44px;          /* circle diameter */
  --vsl-line: 2px;           /* line width */
  --vsl-gap: 56px;           /* row gap; the return line runs in its middle */
  --vsl-over: 40px;          /* how far the arcs reach beyond the blocks */
  --vsl-radius: 24px;        /* arc radius */

  /* blocks per row; --vsl-c0 … --vsl-cxl are set inline by the template */
  --vsl-cols: var(--vsl-c0, 2);

  /* effective radius: never larger than the space available for the arcs */
  --vsl-r: min(
    var(--vsl-radius),
    calc(var(--vsl-gap) / 2),
    var(--vsl-over),
    calc((var(--vsl-gap) + var(--vsl-size)) / 4)
  );

  display: grid;
  grid-template-columns: repeat(var(--vsl-cols), minmax(0, 1fr));
  row-gap: var(--vsl-gap);
  column-gap: 0;
  margin: 0;
  padding: 0 var(--vsl-over);
  list-style: none;

  /* keep the z-index of circles and lines local to this element */
  isolation: isolate;
}

/* ------------------------------------------------------------------------
 * Block
 * --------------------------------------------------------------------- */

.volzify-snakeline > .vsl-item {
  /* all segments hidden by default; state classes switch them on */
  --vsl-n: 0;
  --vsl-e: 0;
  --vsl-i: 0;
  --vsl-ret: 0;
  --vsl-rl: 0%;
  --vsl-rr: 0%;

  position: relative;
  margin: 0;
  padding: 0;
  text-align: center;
}

.volzify-snakeline .vsl-marker {
  position: relative;
  height: var(--vsl-size);
  display: flex;
  justify-content: center;
}

/* Circle (background: uk-background-* class) */
.volzify-snakeline .vsl-dot {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  width: var(--vsl-size);
  height: var(--vsl-size);
  border-radius: 50%;
}

/* Circle content (color: uk-text-emphasis, inverse inside uk-light) */
.volzify-snakeline .vsl-dot-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: calc(var(--vsl-size) * 0.38);
  line-height: 1;
}

/* Icon / image inside the circle (also covers SVGs injected by uk-svg) */
.volzify-snakeline .vsl-dot-icon,
.volzify-snakeline .vsl-dot-image,
.volzify-snakeline .vsl-dot-inner > svg {
  display: block;
  width: 55%;
  height: auto;
  max-height: 55%;
}

/* YOOtheme's image component may wrap raster images in <picture> (WebP);
   let the <img> size itself against the circle content box */
.volzify-snakeline .vsl-dot-inner > picture {
  display: contents;
}

/* Inline SVGs (uk-svg): UIkit recolors the root fill and every descendant
   fill/stroke that contains "#", but not a stroke set on the <svg> root, and it
   overrides fill="none" on the root. Outline icons (stroke on the root, e.g.
   Feather/Lucide style) would stay black and get filled. These two rules make
   them follow the circle content color too; no color value is defined here. */
.volzify-snakeline .vsl-dot-inner > svg.uk-svg[stroke]:not([stroke="none"]):not(.uk-preserve) {
  stroke: currentcolor;
}

.volzify-snakeline .vsl-dot-inner > svg.uk-svg[fill="none"]:not(.uk-preserve) {
  fill: none;
}

.volzify-snakeline .vsl-dot-icon {
  display: flex;
  justify-content: center;
}

.volzify-snakeline .vsl-dot-icon svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Text below the circle (style and color: uk-text-* / uk-h* classes) */
.volzify-snakeline .vsl-body {
  margin-top: 12px;
  padding: 0 4px;
}

/* reset margins that heading classes like uk-h5 would add */
.volzify-snakeline .vsl-title {
  margin: 0;
}

.volzify-snakeline .vsl-meta {
  margin: 2px 0 0;
}

/* ------------------------------------------------------------------------
 * Line segments (color: currentColor of the host, see uk-text-* above)
 * --------------------------------------------------------------------- */

/* Hosts: empty spans covering the grid cell. .vsl-line-row has the height of
   the circle row, so its coordinates equal those of .vsl-marker. */
.volzify-snakeline .vsl-line-row,
.volzify-snakeline .vsl-line-cell {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  pointer-events: none;
}

.volzify-snakeline .vsl-line-row {
  height: var(--vsl-size);
}

.volzify-snakeline .vsl-line-cell {
  bottom: 0;
}

.volzify-snakeline .vsl-line-row::before,
.volzify-snakeline .vsl-line-row::after,
.volzify-snakeline .vsl-line-cell::before,
.volzify-snakeline .vsl-line-cell::after {
  content: "";
  position: absolute;
  z-index: 1;
  box-sizing: border-box;
  border: 0 solid; /* border-color defaults to currentColor */
}

/* Line to the next block: from this circle's center to the next one's */
.volzify-snakeline .vsl-line-row::before {
  left: 50%;
  width: 100%;
  top: calc(var(--vsl-size) / 2 - var(--vsl-line) / 2);
  height: var(--vsl-line);
  border-top-width: var(--vsl-line);
  opacity: var(--vsl-n);
}

/* Arc entering a row: from the return line (middle of the row gap) down to
   the circle center of the first block */
.volzify-snakeline .vsl-line-row::after {
  left: calc(var(--vsl-over) * -1);
  width: calc(var(--vsl-over) + 50%);
  top: calc(var(--vsl-gap) / -2 - var(--vsl-line) / 2);
  height: calc(var(--vsl-gap) / 2 + var(--vsl-size) / 2 + var(--vsl-line));
  border-width: var(--vsl-line) 0 var(--vsl-line) var(--vsl-line);
  border-radius: var(--vsl-r) 0 0 var(--vsl-r);
  opacity: var(--vsl-i);
}

/* Piece of the return line in the middle of the row gap below this block.
   First/last column only draw the half towards the inside (--vsl-rl/--vsl-rr),
   the arcs draw the rest. */
.volzify-snakeline .vsl-line-cell::before {
  left: var(--vsl-rl);
  right: var(--vsl-rr);
  top: calc(100% + var(--vsl-gap) / 2 - var(--vsl-line) / 2);
  height: var(--vsl-line);
  border-top-width: var(--vsl-line);
  opacity: var(--vsl-ret);
}

/* Arc leaving a row: from the circle center of the last block to the right,
   down to the return line. 100% = height of the (stretched) grid cell. */
.volzify-snakeline .vsl-line-cell::after {
  left: 50%;
  width: calc(50% + var(--vsl-over));
  top: calc(var(--vsl-size) / 2 - var(--vsl-line) / 2);
  height: calc(100% - var(--vsl-size) / 2 + var(--vsl-gap) / 2 + var(--vsl-line));
  border-width: var(--vsl-line) var(--vsl-line) var(--vsl-line) 0;
  border-radius: 0 var(--vsl-r) var(--vsl-r) 0;
  opacity: var(--vsl-e);
}

/* ------------------------------------------------------------------------
 * State classes per breakpoint (UIkit: s 640, m 960, l 1200, xl 1600)
 *
 * Each breakpoint first resets all states, then applies its own classes.
 * Reset and state selectors have the same specificity, so source order wins.
 * --------------------------------------------------------------------- */

/* Mobile (base) */
.volzify-snakeline .vsl-n { --vsl-n: 1; }
.volzify-snakeline .vsl-e { --vsl-e: 1; }
.volzify-snakeline .vsl-i { --vsl-i: 1; }
.volzify-snakeline .vsl-r { --vsl-ret: 1; }
.volzify-snakeline .vsl-rs { --vsl-rl: 50%; }
.volzify-snakeline .vsl-re { --vsl-rr: 50%; }

/* S */
@media (min-width: 640px) {
  .volzify-snakeline { --vsl-cols: var(--vsl-cs, var(--vsl-c0, 2)); }

  .volzify-snakeline > .vsl-item {
    --vsl-n: 0; --vsl-e: 0; --vsl-i: 0; --vsl-ret: 0; --vsl-rl: 0%; --vsl-rr: 0%;
  }

  .volzify-snakeline .vsl-n-s { --vsl-n: 1; }
  .volzify-snakeline .vsl-e-s { --vsl-e: 1; }
  .volzify-snakeline .vsl-i-s { --vsl-i: 1; }
  .volzify-snakeline .vsl-r-s { --vsl-ret: 1; }
  .volzify-snakeline .vsl-rs-s { --vsl-rl: 50%; }
  .volzify-snakeline .vsl-re-s { --vsl-rr: 50%; }
}

/* M */
@media (min-width: 960px) {
  .volzify-snakeline { --vsl-cols: var(--vsl-cm, var(--vsl-c0, 2)); }

  .volzify-snakeline > .vsl-item {
    --vsl-n: 0; --vsl-e: 0; --vsl-i: 0; --vsl-ret: 0; --vsl-rl: 0%; --vsl-rr: 0%;
  }

  .volzify-snakeline .vsl-n-m { --vsl-n: 1; }
  .volzify-snakeline .vsl-e-m { --vsl-e: 1; }
  .volzify-snakeline .vsl-i-m { --vsl-i: 1; }
  .volzify-snakeline .vsl-r-m { --vsl-ret: 1; }
  .volzify-snakeline .vsl-rs-m { --vsl-rl: 50%; }
  .volzify-snakeline .vsl-re-m { --vsl-rr: 50%; }
}

/* L */
@media (min-width: 1200px) {
  .volzify-snakeline { --vsl-cols: var(--vsl-cl, var(--vsl-c0, 2)); }

  .volzify-snakeline > .vsl-item {
    --vsl-n: 0; --vsl-e: 0; --vsl-i: 0; --vsl-ret: 0; --vsl-rl: 0%; --vsl-rr: 0%;
  }

  .volzify-snakeline .vsl-n-l { --vsl-n: 1; }
  .volzify-snakeline .vsl-e-l { --vsl-e: 1; }
  .volzify-snakeline .vsl-i-l { --vsl-i: 1; }
  .volzify-snakeline .vsl-r-l { --vsl-ret: 1; }
  .volzify-snakeline .vsl-rs-l { --vsl-rl: 50%; }
  .volzify-snakeline .vsl-re-l { --vsl-rr: 50%; }
}

/* XL */
@media (min-width: 1600px) {
  .volzify-snakeline { --vsl-cols: var(--vsl-cxl, var(--vsl-c0, 2)); }

  .volzify-snakeline > .vsl-item {
    --vsl-n: 0; --vsl-e: 0; --vsl-i: 0; --vsl-ret: 0; --vsl-rl: 0%; --vsl-rr: 0%;
  }

  .volzify-snakeline .vsl-n-xl { --vsl-n: 1; }
  .volzify-snakeline .vsl-e-xl { --vsl-e: 1; }
  .volzify-snakeline .vsl-i-xl { --vsl-i: 1; }
  .volzify-snakeline .vsl-r-xl { --vsl-ret: 1; }
  .volzify-snakeline .vsl-rs-xl { --vsl-rl: 50%; }
  .volzify-snakeline .vsl-re-xl { --vsl-rr: 50%; }
}