/* The "Sponsored" cards in a listing's sidebar: one card at a time, dots underneath.
   Why this file exists: the theme lays the slider out as a grid (so the four cards used to sit side by side, or one under another),
   and an older rule let the slider's window overflow. Here the slider is a plain block again, its window hides the other cards,
   and the dots look like the rest of the site. The doubled class name makes these rules win over the older ones without more !important. */
.sponsored-widget.listing-widget .widget-listing-slider {
  display: block !important;
  grid-template-columns: none !important;
  min-width: 0;
  position: relative;
}

/* Until the slider script has started, only the first card is shown (no jump, no tall stack of four). */
.sponsored-widget.listing-widget .widget-listing-slider:not(.slick-initialized) .fw-carousel-item:not(:first-child) { display: none; }

.sponsored-widget.listing-widget .widget-listing-slider .slick-list {
  border-radius: 14px;
  display: block;
  height: auto;
  margin: 0 !important;
  overflow: hidden !important;
  padding: 0 !important; /* the article plugin adds 5px each side, which pushed the next card into view */
  position: relative;
  width: 100% !important;
}

.sponsored-widget.listing-widget .widget-listing-slider .slick-track {
  align-items: stretch;
  display: flex !important;
  left: 0;
  margin: 0;
  max-width: none !important;
  position: relative;
  top: 0;
}

.sponsored-widget.listing-widget .widget-listing-slider .slick-slide {
  display: block;
  flex: 0 0 auto;
  float: none;
  height: auto;
  max-width: none !important;
  min-height: 1px;
}

.sponsored-widget.listing-widget .widget-listing-slider .slick-slide > div { height: 100%; }
.sponsored-widget.listing-widget .widget-listing-slider .slick-slide .article-card { box-shadow: 0 2px 10px var(--tc-sponsored-142a3a1a,rgba(20, 42, 58, .1)); height: 100%; margin: 0; }

.sponsored-widget.listing-widget .widget-listing-slider .slick-dots {
  display: flex;
  gap: 7px;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 12px 0 0;
}

.sponsored-widget.listing-widget .widget-listing-slider .slick-dots li { margin: 0; }

.sponsored-widget.listing-widget .widget-listing-slider .slick-dots li button {
  background: var(--tc-sponsored-cfc6b3,#cfc6b3);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  font-size: 0;
  height: 9px;
  padding: 0;
  transition: background .15s, transform .15s;
  width: 9px;
}

.sponsored-widget.listing-widget .widget-listing-slider .slick-dots li.slick-active button { background: var(--tc-sponsored-e8503a,#e8503a); transform: scale(1.25); }

/* The picture fills its frame (no empty grey band under it). */
.sponsored-widget.listing-widget .widget-listing-slider .article-thumbnail { height: auto !important; line-height: 0; }
.sponsored-widget.listing-widget .widget-listing-slider .article-thumbnail img { display: block; height: 170px; object-fit: cover; width: 100%; }