/**********************************/
/* Post Slider widget             */
/**********************************/
/* Cards for the Post Slider. The carousel itself — wrap, header,
   nav, track, drag — is the horizontal Video Slider's, whose stylesheet this one
   is enqueued after (see storySlider.php); everything here either styles the
   story card or overrides a rule written for that widget's video cards. */

/* Badge + title stack to the left of the nav arrows. */
.pw-stories-slider .pw-shorts-widget-header {
  align-items: flex-end;
  gap: 2rem;
}
.pw-stories-header-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  min-width: 0;
}
.pw-stories-badge {
  display: inline-block;
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1;
}

/* ── Story card ── */
/* Wider than a video card and sized by content: text posts have no fixed
   aspect to hold to. horizontalSlider.js measures the rendered width for its
   step, so it follows whatever is set here. */
.pw-stories-slider .pw-shorts-widget-item {
  position: relative; /* was supplied by the theme's article rule */
  flex: 0 0 390px;
  width: 390px;
}

.pw-story-link {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  height: 100%;
  color: var(--body-text);
  text-decoration: none;
}
.pw-story-link:hover {
  color: var(--body-text);
  text-decoration: none;
}

.pw-story-partner {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.pw-story-partner-logo {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  object-fit: contain;
  border-radius: 50%;
  background-color: #ffffff;
}
.pw-story-partner-name {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.25;
}

/* Clamped like the excerpt below: a three-line title would stretch every card
   in the row (the track's flex items share the tallest card's height), pushing
   whitespace into all the others. */
.pw-story-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* Clamped rather than server-truncated so every card's text block is the same
   height whatever the excerpt length, keeping the "Read More" links aligned. */
.pw-story-excerpt {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--body-secondary-text);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
}

.pw-story-more {
  font-weight: 600;
  color: var(--highlight-text);
}
.pw-story-link:hover .pw-story-more {
  color: var(--highlight-text-hover);
}

/* margin-top:auto is what lines the images up across the row. The track's flex
   items already stretch to the tallest card, so pushing the media to the bottom
   of each card — every image being the same width and square — puts their top
   edges on one line however many lines of title or excerpt sit above them. */
.pw-story-media {
  position: relative;
  /* Margin, never padding: the box carries a placeholder background colour for
     while the image loads, and padding would show it as a grey strip along the
     top of every card. */
  margin-top: auto;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background-color: var(--tertiary-accent);
}
.pw-story-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Fades the foot of each image into the page. The start stop is a transparent
   WHITE rather than `transparent`, which some browsers interpolate through
   transparent black and render as a grey haze across the middle of the fade. */
.pw-story-media::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, var(--body-content-bg, #ffffff) 100%);
  pointer-events: none;
}
/* The platform's global frontend.css dims any image inside a hovered link
   (a[href]:hover img). These cards are one big link, so that would grey the
   whole card out on hover — same fix the grid uses. */
.pw-story-card .pw-story-link:hover img {
  opacity: 1;
}

@media (max-width: 640px) {
  .pw-stories-slider .pw-shorts-widget-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
  }
  .pw-stories-slider .pw-shorts-widget-item {
    flex-basis: 300px;
    width: 300px;
  }
  .pw-story-partner-logo {
    width: 44px;
    height: 44px;
  }
}