/* =============================================================================
   Location Grid — [location_grid] shortcode
   ============================================================================= */

.lgrid-wrap {
  width: 100%;
}

/* ---- Grid ---- */

.lgrid {
  display: grid;
  grid-template-columns: repeat(var(--lgrid-cols, 1), 1fr);
  list-style: none;
  margin: 0;
  padding: 0;
  padding-left:0px!important;
}

/* ---- Item ---- */

.lgrid-item {
  padding: 0;
  margin: 0;
}

/* ---- Vertical divider when list sits beside another column ----
   Uses ::after on the row so the line runs the full height of the
   taller column (the image), not just the height of the list.      */

.kt-row-column-wrap.kt-has-2-columns:has(.lgrid-wrap) {
  position: relative;
}

.kt-row-column-wrap.kt-has-2-columns:has(.lgrid-wrap)::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background-color: rgba(116, 140, 164, 0.35);
  transform: translateX(-0.5px) scaleY(0);
  transform-origin: top center;
  transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

.kt-row-column-wrap.kt-has-2-columns.lgrid-line-visible:has(.lgrid-wrap)::after {
  transform: translateX(-0.5px) scaleY(1);
}

.kt-has-2-columns .kt-inside-inner-col:has(.lgrid-wrap) {
  padding-right: 40px;
}

@media (max-width: 767px) {
  .kt-row-column-wrap.kt-has-2-columns:has(.lgrid-wrap)::after {
    display: none;
  }

  .kt-has-2-columns .kt-inside-inner-col:has(.lgrid-wrap) {
    padding-right: 0;
  }
}

/* Vertical dividers — only needed when using multiple columns */
.lgrid[data-cols="2"] .lgrid-item:nth-child(2n+1) {
  border-right: 1px solid rgba(116, 140, 164, 0.35);
}

.lgrid[data-cols="4"] .lgrid-item:nth-child(4n+1),
.lgrid[data-cols="4"] .lgrid-item:nth-child(4n+2),
.lgrid[data-cols="4"] .lgrid-item:nth-child(4n+3) {
  border-right: 1px solid rgba(116, 140, 164, 0.35);
}

/* ---- Link ---- */

.lgrid-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 22px 0;
  text-decoration: none;
  color: rgba(12, 36, 74, 0.35);
  transition: color 0.25s ease;
}

.lgrid-link:hover {
  color: #0C244A;
}

/* Inner padding mirrors service list */
.lgrid[data-cols="4"] .lgrid-item:nth-child(4n+1) .lgrid-link { padding-left: 0;    padding-right: 28px; }
.lgrid[data-cols="4"] .lgrid-item:nth-child(4n+2) .lgrid-link { padding-left: 28px; padding-right: 28px; }
.lgrid[data-cols="4"] .lgrid-item:nth-child(4n+3) .lgrid-link { padding-left: 28px; padding-right: 28px; }
.lgrid[data-cols="4"] .lgrid-item:nth-child(4n)   .lgrid-link { padding-left: 28px; padding-right: 0;    }

.lgrid[data-cols="2"] .lgrid-item:nth-child(2n+1) .lgrid-link { padding-left: 0;    padding-right: 32px; }
.lgrid[data-cols="2"] .lgrid-item:nth-child(2n)   .lgrid-link { padding-left: 32px; padding-right: 0;    }

/* ---- Title ---- */

.lgrid-title {
  font-size: clamp(1.3rem, 2.2vw, 2.2rem);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0;
}

/* ---- Arrow icon ---- */

.lgrid-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  transition: transform 0.25s ease;
}

.lgrid-link:hover .lgrid-icon {
  transform: translateX(3px);
}

/* ---- Location image swap ---- */

#cities-section .location-image img {
  transition: opacity 0.3s ease;
}

#cities-section .location-image img.is-swapping {
  opacity: 0;
}

/* ---- Responsive ---- */

@media (max-width: 900px) {
  .lgrid:not([data-cols="1"]) {
    --lgrid-cols: 2 !important;
  }

  .lgrid[data-cols="1"] {
    --lgrid-cols: 1 !important;
  }

  .lgrid[data-cols="4"] .lgrid-item:nth-child(4n+1),
  .lgrid[data-cols="4"] .lgrid-item:nth-child(4n+2),
  .lgrid[data-cols="4"] .lgrid-item:nth-child(4n+3) {
    border-right: none;
  }
}

@media (max-width: 480px) {
  .lgrid {
    --lgrid-cols: 1 !important;
  }

  .lgrid-item {
    border-right: none !important;
  }

  .lgrid-link {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}