.slider-initialized {
  margin: 50px 0;
}

.slider-arrows {
  float: right;
  display: flex;
  flex-direction: row;
}

.slider-post-image {
  height: 300px;
  background-position: 50% 50%;
  background-size: cover;
}

.slider-post-info {
  padding: 15px;
  background-color: #F3F6F9;

  .slider-post-title {
    margin-top: 0
  }
}

.slider-post {
  margin: 0 10px;
}

/* ---------------------------------------------------------------------------
   variant="legacy" - the SmartPress-3 presentation.
   
   This shortcode was rewritten for v4 with new markup and a third of the CSS,
   so a migrated site's news slider renders nothing like it did on v3. These
   rules port the v3 stylesheet (themes/realsmart-cloud/inc/shortcodes/css/
   shortcode_posts-slider.css) onto v4's markup: .ps-post -> .slider-post,
   .ps-post-info -> .slider-post-info, and so on.

   All of it is scoped under .posts-slider-legacy, which only the mattpress
   converter turns on, so sites built natively on v4 keep the current look.
   --------------------------------------------------------------------------- */

.posts-slider-legacy .slider-post {
  margin: 0 15px;
}

/* v3 sized the image by aspect ratio rather than a fixed height, so the picture
   scaled with the column instead of cropping to 300px. */
.posts-slider-legacy .slider-post-image {
  height: auto;
}

.posts-slider-legacy .slider-post-image:before {
  content: '';
  display: block;
  padding-top: 50%;
}

@media only screen and (min-width: 768px) {
  .posts-slider-legacy .slider-post-image:before {
    padding-top: 75%;
  }
}

.posts-slider-legacy .slider-post-info {
  background-color: #F3F6F9;
  padding: 25px;
  transition: all 0.15s ease-in-out;
}

.posts-slider-legacy .slider-post-date {
  color: rgba(65, 68, 73, 0.5);
  display: block;
  line-height: 1;
  margin-bottom: 1em;
}

/* The fixed height plus overflow is v3's line clamp: two lines of title,
   whatever the headline length, so the cards line up. */
.posts-slider-legacy .slider-post-title {
  color: #414449;
  display: block;
  font-size: 1.2em;
  font-weight: 600;
  height: 3em;
  line-height: 1.5em;
  margin-top: 0;
  overflow: hidden;
}

.posts-slider-legacy .slider-post > a {
  color: inherit;
  text-decoration: none;
}

/* v3's hover: the info panel darkens and the text inverts. A per-slider
   hover_colour, if the shortcode passes one, overrides the background below
   this via an inline <style> the shortcode emits. */
.posts-slider-legacy .slider-post > a:hover .slider-post-info {
  background-color: #414449;
  transition: background-color 0.15s ease-in-out;
}

.posts-slider-legacy .slider-post > a:hover .slider-post-date,
.posts-slider-legacy .slider-post > a:hover .slider-post-title {
  color: #F3F6F9;
  transition: color 0.15s ease-in-out;
}

/* Controls. v3 sat the arrows and dots *over* a 60px strip at the foot of the
   slider - dots bottom-left, arrows bottom-right - rather than after it. The
   wrapper (legacy only) is the containing block that makes that possible. */

.posts-slider-wrapper {
  position: relative;
}

.posts-slider-legacy {
  padding-bottom: 60px;
}

/* slick ships `.slick-track { margin: 0 auto }`, so when the track is narrower
   than the list - a page with only two or three posts - the auto margins centre
   the cards in the strip. v3 never used slick and pulled the row out -15px each
   side (`.posts-slider-wrapper .posts-slider { margin: 0 -15px }`); that one rule
   was the only piece of v3's stylesheet the legacy port missed. Restoring it both
   kills the auto-centre and reinstates the outer pull, so a short slider is
   left-aligned exactly as on v3. (0,2,0) beats slick's (0,1,0) and loads after. */
.posts-slider-legacy .slick-track {
  margin-left: -15px;
  margin-right: -15px;
}

/* slick renders <ul class="slick-dots"><li><button>; v3's markup was
   <div class="unslider-nav"><ol><li>. Different elements, same result: a 10px
   square per slide, the current one solid. The button is the accessible label
   slick needs, so it stays in the DOM and is hidden rather than removed. */
/* Positioned from where v3 actually renders rather than from v3's own
   declarations: it got there via a padded .unslider-nav wrapping an <ol>, which
   slick has no equivalent of, so copying that padding lands the dots ~28px low.
   Measured off the SP3 pane, the dots sit 22px above the foot of the slider and
   4px in from its left edge. */
/* Flex rather than slick's inline-block dots: inline-block aligns on the text
   baseline, so the row carried ~7px of descender space and sat off the mark no
   matter what bottom was set to. Flex takes typography out of it, and the gap
   gives the 18px pitch (10px dot + 8px) directly. */
.posts-slider-legacy .slick-dots {
  align-items: center;
  bottom: 22px;
  display: flex;
  gap: 8px;
  height: 10px;
  left: 4px;
  line-height: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  width: auto;
}

/* The radius comes from unslider's own vendor stylesheet (css/vendor/
   unslider-dots.css: border-radius: 5px), not from the shortcode's CSS - v3's
   dots are circles, and porting only the shortcode stylesheet made them
   squares. 5px on a 10px box is a circle. */
.posts-slider-legacy .slick-dots li {
  background-color: rgba(65, 68, 73, 0.5);
  border: none;
  border-radius: 5px;
  flex: 0 0 auto;
  height: 10px;
  margin: 0;
  padding: 0;
  width: 10px;
}

.posts-slider-legacy .slick-dots li.slick-active {
  background-color: #414449;
}

.posts-slider-legacy .slick-dots li button {
  display: none;
}

/* v3: 34x34, bottom: 13px, next at right: 0 and prev at right: 36px - i.e.
   adjacent with a 2px gap. float: none undoes the default v4 arrow layout,
   which floats them right in the flow. */
/* Selector shape here is load-bearing, not cosmetic.

   v3 styled these as `.posts-slider-wrapper .unslider-arrow` - specificity
   (0,2,0) - and sites copied that rule verbatim and recoloured it. Reaching the
   arrows as `.slider-arrows > div` is (0,2,1), which out-specifies the copy even
   once the class is back, so the site's colours still lose. Matching v3's
   selector exactly puts us at (0,2,0): a copied site rule ties and wins on
   document order (the site's inline smartCss comes after this file), which is
   precisely the arrangement v3 had. */
.posts-slider-wrapper .slider-arrows {
  /* Not a box of its own: this lets the arrows position against
     .posts-slider-wrapper (already position: relative) the way v3's did, since
     v3 had no wrapper element around them at all. */
  display: contents;
}

.posts-slider-wrapper .unslider-arrow {
  background-color: #414449;
  bottom: 13px;
  color: #F3F6F9;
  cursor: pointer;
  /* Required, and not for layout: slick adds `.slick-hidden { display: none }`
     to an arrow when there is only one slide. The old `> div { display: flex }`
     happened to beat that on specificity; at (0,2,0) it ties instead and wins on
     order (this file loads after slick.css). Drop this and the arrows vanish to
     0x0 on single-slide pages. */
  display: block;
  height: 34px;
  line-height: 34px;
  position: absolute;
  text-align: center;
  transition: all 0.15s ease-in-out;
  width: 34px;
}

.posts-slider-wrapper .unslider-arrow:hover {
  background-color: #F3F6F9;
  color: #414449;
  transition: all 0.15s ease-in-out;
}

/* v3's offsets: next hard right, prev one arrow plus a 2px gap to its left. */
.posts-slider-wrapper .unslider-arrow.next {
  left: auto;
  right: 0;
}

.posts-slider-wrapper .unslider-arrow.prev {
  left: auto;
  right: 36px;
}