/**
 * Shaw Tower — Slick Theming
 * ============================================================================
 *
 * Shared slick styling for EVERY slider block. `slick-theme.css` is not
 * installed, so arrows, dots and focus states have no vendor styling at all —
 * this file supplies them once, using design tokens.
 */


/* ==========================================================================
   Track / list
   ========================================================================== */

.stds .slick-list {
  margin-inline: 0;
}

.stds .slick-track {
  display: flex;
  align-items: stretch;
}

.stds .slick-slide {
  float: none;        /* flex handles placement; float would fight it */
  height: auto;       /* vendor leaves slides at content height */
}

.stds .slick-slide > div {
  height: 100%;
}


/* ==========================================================================
   Arrows
   ========================================================================== */

.stds .slick-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--stds-space-xs);
  border: 0;
  background: none;
  color: currentColor;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.stds .slick-arrow:hover {
  opacity: 0.7;
}

.stds .slick-arrow[aria-disabled="true"],
.stds .slick-arrow.slick-disabled {
  opacity: 0.35;
  cursor: default;
}

.stds .slick-arrow svg {
  display: block;
  width: 100%;
  height: auto;
}


/* ==========================================================================
   Dots
   ========================================================================== */

.stds .slick-dots {
  --stds-dot-w: clamp(20px, calc(20px + 10 * var(--stds-fluid)), 30px);
  --stds-dot-h: clamp(2px, calc(2px + 1 * var(--stds-fluid)), 3px);
  --stds-dot-gap: clamp(5.75px, calc(5.75px + 8.1 * var(--stds-fluid)), 13.85px);

  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--stds-dot-gap);
  list-style: none;
  padding-left: 0;
  flex-wrap: wrap;
  row-gap: 10px;
}

.stds .slick-dots li {
  display: flex;
}

.stds .slick-dots button {
  box-sizing: content-box;
  width: var(--stds-dot-w);
  height: var(--stds-dot-h);
  padding-block: calc((24px - var(--stds-dot-h)) / 2);
  margin-block: calc((24px - var(--stds-dot-h)) / -2);
  padding-inline: calc(var(--stds-dot-gap) / 2);
  margin-inline: calc(var(--stds-dot-gap) / -2);
  border: 0;
  background-color: currentColor;
  background-clip: content-box;  /* paints the dash only, not the hit area */
  color: currentColor;
  opacity: 0.4;
  font-size: 0;          /* slick prints the index as button text */
  line-height: 0;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.stds .slick-dots button:hover,
.stds .slick-dots button:focus-visible {
  opacity: 1;
}

.stds .slick-dots .slick-active button {
  opacity: 1;
}


/* ==========================================================================
   Focus
   ========================================================================== */

.stds .slick-list:focus-visible,
.stds .slick-slide:focus-visible {
  outline: 2px solid var(--stds-focus-ring);
  outline-offset: -2px;
}