/* Editorial grid for WPBakery rows. Uncode lays rows out as tables inside a 1200 px container; a row with the
   class "st-grid" becomes a 12-column grid across the whole window instead, with the page margin as its gutter.
   Columns are placed with start/end classes on the column's "Extra class name":
     st-s1 … st-s12   first grid column (default 1)
     st-e2 … st-e13   grid line where it ends (13 = right margin; default: span all)
     st-bleed-l / st-bleed-r   the column runs into the left / right window edge (photos)
     st-v-center / st-v-end    vertical alignment inside the row
     st-z                      lifts a column above its neighbours (for deliberate overlaps)
   Below 960 px every column takes the full width unless it carries st-keep (keeps start/end on tablets).
   The row's own vertical spacing comes from st-section (components.css). */

:root {
  --st-m: clamp(20px, 5.6vw, 108px);                    /* page margin */
  --st-maxw: 1780px;                                    /* the grid stops growing here (wide screens) */
  --st-col-gap: clamp(16px, 2.2vw, 40px);
  --st-edge: max(var(--st-m), (100vw - var(--st-maxw)) / 2);
}

.vc_row.st-grid > .row,
.vc_row.st-grid > .row.limit-width {
  display: block;
  max-width: none;
  width: 100%;
  padding-left: var(--st-edge) !important;
  padding-right: var(--st-edge) !important;
}
.vc_row.st-grid > .row > .row-inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--st-col-gap);
  row-gap: clamp(40px, 5vw, 88px);
  align-items: start;
  width: auto;
  height: auto !important;          /* Uncode's height: 100% would resolve to 0 inside the grid */
  margin: 0;
}
.vc_row.st-grid > .row > .row-inner::before,
.vc_row.st-grid > .row > .row-inner::after {
  display: none;
}
.vc_row.st-grid > .row > .row-inner > .wpb_column {
  display: block;
  width: auto !important;
  max-width: none;
  padding: 0 !important;
  margin: 0 !important;
  float: none;
  min-width: 0;
  height: auto !important;
  min-height: 0 !important;
}
/* Default placement at zero extra specificity, so the st-s / st-e classes below win */
:where(.vc_row.st-grid > .row > .row-inner) > .wpb_column {
  grid-column: 1 / -1;
}
/* Empty spacer columns from the old layouts carry no meaning in the grid */
.vc_row.st-grid > .row > .row-inner > .wpb_column:has(> .uncol > .uncoltable > .uncell > .uncont:empty) {
  display: none;
}
.vc_row.st-grid .uncol,
.vc_row.st-grid .uncoltable,
.vc_row.st-grid .uncell {
  display: block;
  overflow: visible;
  height: auto;
}

@media (min-width: 960px) {
  .st-grid .st-s1 { grid-column-start: 1; }
  .st-grid .st-s2 { grid-column-start: 2; }
  .st-grid .st-s3 { grid-column-start: 3; }
  .st-grid .st-s4 { grid-column-start: 4; }
  .st-grid .st-s5 { grid-column-start: 5; }
  .st-grid .st-s6 { grid-column-start: 6; }
  .st-grid .st-s7 { grid-column-start: 7; }
  .st-grid .st-s8 { grid-column-start: 8; }
  .st-grid .st-s9 { grid-column-start: 9; }
  .st-grid .st-s10 { grid-column-start: 10; }
  .st-grid .st-s11 { grid-column-start: 11; }
  .st-grid .st-s12 { grid-column-start: 12; }
  .st-grid .st-e2 { grid-column-end: 2; }
  .st-grid .st-e3 { grid-column-end: 3; }
  .st-grid .st-e4 { grid-column-end: 4; }
  .st-grid .st-e5 { grid-column-end: 5; }
  .st-grid .st-e6 { grid-column-end: 6; }
  .st-grid .st-e7 { grid-column-end: 7; }
  .st-grid .st-e8 { grid-column-end: 8; }
  .st-grid .st-e9 { grid-column-end: 9; }
  .st-grid .st-e10 { grid-column-end: 10; }
  .st-grid .st-e11 { grid-column-end: 11; }
  .st-grid .st-e12 { grid-column-end: 12; }
  .st-grid .st-e13 { grid-column-end: 13; }
  .st-grid .st-v-center { align-self: center; }
  .st-grid .st-v-end { align-self: end; }
  .st-grid .st-z { position: relative; z-index: 2; }
  .st-grid .st-row-1 { grid-row: 1; }
  .st-grid .st-row-2 { grid-row: 2; }
}

/* Bleeds: the column's box runs into the window edge (the grid's own margin is var(--st-edge)) */
.vc_row.st-grid > .row > .row-inner > .wpb_column.st-bleed-l { margin-left: calc(-1 * var(--st-edge)) !important; }
.vc_row.st-grid > .row > .row-inner > .wpb_column.st-bleed-r { margin-right: calc(-1 * var(--st-edge)) !important; }
@media (max-width: 959px) {
  .vc_row.st-grid > .row > .row-inner > .wpb_column.st-bleed-l:not(.st-keep),
  .vc_row.st-grid > .row > .row-inner > .wpb_column.st-bleed-r:not(.st-keep) {
    margin-left: calc(-1 * var(--st-edge)) !important;
    margin-right: calc(-1 * var(--st-edge)) !important;
  }
}

/* Columns past 12/12 make Uncode start a second .row-inner: it continues the same grid one row lower */
.vc_row.st-grid > .row > .row-inner + .row-inner {
  margin-top: var(--st-row-gap, clamp(40px, 5vw, 88px)) !important;
}
/* A page head (h1 with its lede in the next inner row) sits closer together */
.vc_row.st-head { --st-row-gap: clamp(20px, 2.2vw, 36px); }

/* Tablets: the columns stack, but portrait and square photos keep a measure and their side */
@media (min-width: 600px) and (max-width: 959px) {
  .vc_row.st-grid .wpb_column:not(.st-bleed-l):not(.st-bleed-r) .uncode-single-media:is(.st-photo--45, .st-photo--11):not(.st-inset) {
    width: 64%;
  }
  .vc_row.st-grid .wpb_column:is(.st-s7, .st-s8, .st-s9, .st-s10):not(.st-bleed-l):not(.st-bleed-r) .uncode-single-media:is(.st-photo--45, .st-photo--11):not(.st-inset) {
    margin-left: auto !important;
  }
  .vc_row.st-grid .wpb_column.st-bleed-l .uncode-single-media.st-photo--45 { width: 78%; }
  .vc_row.st-grid .wpb_column.st-bleed-r .uncode-single-media.st-photo--45 { width: 78%; margin-left: auto !important; }
}