/* ==========================================================================
   SKIIN - LOCATIONS page only  (locations-page/locations.css)
   Banner and booking form are GLOBAL components. The suburb button is the GLOBAL
   .sk-btn (same colours, font, uppercase, rose hover) - only its SIZE/ALIGNMENT is
   changed here, because the global 230x50 desktop rule is too big for a 6-column grid.
   ========================================================================== */

/* spacing above/below the buttons = ~80px, as in the client design (global .sk-section is up to 96px) */
.sk-locations #locations-grid { padding: clamp(48px, 4.2vw, 80px) 0; }

/* 6 columns desktop | 4 laptop | 3 tablet | 2 phone.
   Rows are tight (6px) and columns 20px apart, exactly like the design */
.sk-locations__grid {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px 20px;
  margin: 0; padding: 0; list-style: none;
}

/* !important is needed only because style.css sets the 230x50 button size with !important */
.sk-locations .sk-loc.sk-btn {
  width: 100% !important;                 /* fill the grid cell instead of 230px */
  height: 40px !important;                /* slim pill (global button is 50px) */
  justify-content: flex-start !important; /* pin + name on the left, like the design */
  padding: 0 17px !important;
  gap: 10px;
  font-size: 13px;
}
.sk-loc span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }   /* long suburb names never break the row */

/* rose pin on the dark button; turns white when the button turns rose on hover */
.sk-loc__pin { flex: none; color: var(--color-rose-accent); fill: currentColor; transition: color .25s ease; }
.sk-loc:hover .sk-loc__pin, .sk-loc:focus-visible .sk-loc__pin { color: var(--color-white); }

@media (max-width: 1199px) { .sk-locations__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 991px)  { .sk-locations__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 575px)  { .sk-locations__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; } }