/* 1) Reset any list styling */
.visual-navigation__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 2) Use CSS Grid: 6 columns by default */
.visual-navigation__list {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--grid-spacing) !important;
}

/* 3) On screens smaller than 768px, switch to 2-column grid */
@media screen and (max-width: 767px) {
  .visual-navigation__list {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 4) Let each item size itself (instead of hardcoded widths) */
.visual-navigation__list-item {
  width: auto !important;
  max-width: none !important;
}

/* Make each image fill its grid column and auto-scale its height */
.visual-navigation__list-item img {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}

/* Let grid rows size to their content (so no forced squishing) */
.visual-navigation__list {
  grid-auto-rows: auto !important;
}
/* 1) Uniform square image containers, preserving aspect ratio */
.visual-navigation__list-item img {
  width: 100% !important;        /* fill the full column width */
  aspect-ratio: 1 / 1;           /* make the box a perfect square */
  object-fit: contain !important;/* letterbox the image inside that square */
}

/* 2) Center the text underneath */
.visual-navigation__list-item .visual-navigation__text {
  text-align: center !important;
}

/* FORCE A MINIMUM IMAGE WIDTH UNTIL MOBILE BREAKPOINT */
@media screen and (min-width: 768px) {
  .visual-navigation__list {
    /* six columns that never go below 180px each */
    grid-template-columns: repeat(6, minmax(180px, 1fr)) !important;
  }
}

/* keep the 2-per-row at mobile as before */
@media screen and (max-width: 767px) {
  .visual-navigation__list {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}


/* 1) Force each item to fill its grid track */
.visual-navigation__list-item {
  width: 100% !important;
  max-width: none !important;
  justify-self: stretch !important;
}

/* 2) Make captions span the full item and center-align */
.visual-navigation__list-item .visual-navigation__text {
  width: 100% !important;
  text-align: center !important;
}

/* 3) Make images fill that same container (preserving your square aspect) */
.visual-navigation__list-item img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: contain !important;
}

/* 1) Portrait aspect ratio (4:5) instead of square */
.visual-navigation__list-item img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 5 !important;
  object-fit: contain !important;
}

/* 2) Adjust the gap between items to something like your example */
.visual-navigation__list {
  gap: 1rem !important; /* tweak this value until it matches exactly */
}

/* 3) Tighter spacing above the caption */
.visual-navigation__list-item .visual-navigation__text {
  margin-top: 0.5rem !important;
  text-align: center !important;
}

/* 4) Smaller, uppercase, grey labels with a little letter-spacing */
.visual-navigation__list-item .visual-navigation__text-link,
.visual-navigation__list-item .visual-navigation__text p {
  font-size: 0.875rem !important;      /* ~14px */
  text-transform: uppercase !important;
  color: #7a7a7a !important;           /* adjust to match your exact grey */
  letter-spacing: 0.05em !important;   /* subtle spacing */
  line-height: 1.2 !important;
}

/* DESKTOP: six columns that can shrink down to 128px each (so 6×128=768) */
@media screen and (min-width: 768px) {
  .visual-navigation__list {
    grid-template-columns: repeat(6, minmax(128px, 1fr)) !important;
  }
}

/* MOBILE: still 2-across below 768px */
@media screen and (max-width: 767px) {
  .visual-navigation__list {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
/* ───────────────────────────────────────────────────────────────────────── */
/* ADD SIDE PADDING EQUAL TO YOUR GRID GAP SO THE FIRST/LAST ITEMS AREN’T FLUSH */
/* ───────────────────────────────────────────────────────────────────────── */
.visual-navigation__list {
  /* match whatever you’re using for gap (1rem above) */
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  box-sizing: border-box !important; /* ensure padding is included in layout */
}

/* Remove the old “no wrap anywhere” rule: */
/* .visual-navigation__list-item .visual-navigation__text-link,
   .visual-navigation__list-item .visual-navigation__text p {
     white-space: nowrap !important;
   } */

/* Replace it with this so words can break at spaces, but never inside a word */
.visual-navigation__list-item .visual-navigation__text-link,
.visual-navigation__list-item .visual-navigation__text p {
  white-space: normal !important;     /* allow wrapping at spaces */
  word-break: normal !important;      /* don’t break within a word */
  overflow-wrap: normal !important;   /* only wrap at normal break points */
}

/*────────────────────────────────────────────────────────────────────────────*/
/* BREAK THE NAV OUT OF ITS CONTENT MAX-WIDTH SO ALL 6 ITEMS ARE VISIBLE   */
/*────────────────────────────────────────────────────────────────────────────*/
[data-wetheme-section-type="section-visual-navigation-banner"] .width--content {
  /* make the wrapper full viewport width */
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  width: 100vw !important;
  max-width: 100vw !important;
  box-sizing: border-box !important;
}

/* now re-add your gutters */
[data-wetheme-section-type="section-visual-navigation-banner"] .visual-navigation__list {
  padding: 0 1rem !important;      /* 1 rem gutter on each side */
  box-sizing: border-box !important;
}