/**
 * [dbc_popular_series_carousel] — IMDb-style strip cluster + bottom-left List badge (yellow on hover) + series name.
 * Prev/next: same shell as Featured Authors / AOTM (.dbc-carousel--nav-align-avatar + slim chevrons).
 */

.dbc-popular-series {
  --dbc-psc-signature-yellow: #ffd56c;
  --dbc-psc-divider: 2px solid rgba(236, 238, 244, 0.92);
  /* Cover strips: tall narrow crop (object-fit: cover) — IMDb-style composite */
  --dbc-psc-strip-w: 66px;
  --dbc-psc-strip-h: 178px;
  --dbc-psc-strip-radius: 0;
  --dbc-psc-cluster-radius: 12px;
  /* Two vertical dividers between three strips */
  --dbc-psc-strip-row-w: calc(3 * var(--dbc-psc-strip-w) + 4px);
  /* Card width tracks strip cluster (intrinsic); strips flex to fill the card — no huge empty margins */
  --dbc-psc-slide-min-w: max(8.5rem, var(--dbc-psc-strip-row-w));
  --dbc-psc-slide-max-w: 360px;
  /**
   * Shortcode header = Elementor panel (desktop): Noto Serif Vithkuqi, 28px, 500, 33px line-height,
   * letter-spacing -0.4px. Tablet / mobile are stepped-down versions (same kit breakpoints as :root titles).
   */
  --dbc-psc-heading-font-family: var(
    --dbc-title-serif-family,
    "Noto Serif Vithkuqi",
    "Noto Serif",
    Georgia,
    serif
  );
  --dbc-psc-heading-size: 22px;
  --dbc-psc-heading-line-height: 28px;
  --dbc-psc-heading-weight: 500;
  --dbc-psc-heading-letter-spacing: -0.31px;
  --dbc-psc-heading-color: #000;
  --dbc-psc-subtitle-size: 15px;
  --dbc-psc-subtitle-line-height: 22px;
  --dbc-psc-subtitle-weight: 400;
  --dbc-psc-subtitle-letter-spacing: 0;
  /* Heading icon: global title tokens (dbc-breakpoints.css) */
  --dbc-psc-heading-icon-scale: var(--dbc-title-heading-icon-scale);
  --dbc-psc-heading-icon-gap: var(--dbc-title-heading-icon-gap);
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: visible;
  box-sizing: border-box;
  font-family: Poppins, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (min-width: 768px) {
  .dbc-popular-series {
    --dbc-psc-heading-size: 24px;
    --dbc-psc-heading-line-height: 30px;
    --dbc-psc-heading-letter-spacing: -0.34px;
    --dbc-psc-subtitle-size: 16px;
    --dbc-psc-subtitle-line-height: 24px;
  }
}

@media (min-width: 1024px) {
  .dbc-popular-series {
    --dbc-psc-heading-size: 28px;
    --dbc-psc-heading-line-height: 33px;
    --dbc-psc-heading-letter-spacing: -0.4px;
    --dbc-psc-subtitle-size: 17px;
    --dbc-psc-subtitle-line-height: 25px;
    /* Slightly wider cover slices on desktop only (~9% wider row than 66px base) */
    --dbc-psc-strip-w: 72px;
  }
}

.dbc-popular-series--strips-1 {
  --dbc-psc-strip-row-w: var(--dbc-psc-strip-w);
}

.dbc-popular-series--strips-2 {
  --dbc-psc-strip-row-w: calc(2 * var(--dbc-psc-strip-w) + 2px);
}

.dbc-popular-series__header {
  margin: 0 0 18px;
}

.dbc-popular-series__heading-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--dbc-psc-heading-icon-gap, 14px);
  max-width: 100%;
}

.dbc-popular-series__heading-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

/* Icon height tracks shortcode heading scale, not a parent font-size Elementor may shrink */
.dbc-popular-series__heading-icon-svg {
  display: block;
  height: calc(var(--dbc-psc-heading-size) * var(--dbc-psc-heading-icon-scale));
  width: auto;
}

/*
 * Set size on the h2 itself: theme / Elementor often set generic h2 { font-size: … } which beats
 * font-size: 1em on a child when the row’s font-size is not the desired title size.
 */
.dbc-popular-series .dbc-popular-series__header h2.dbc-popular-series__main-heading {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--dbc-psc-heading-font-family) !important;
  font-size: var(--dbc-psc-heading-size) !important;
  line-height: var(--dbc-psc-heading-line-height) !important;
  font-weight: var(--dbc-psc-heading-weight) !important;
  letter-spacing: var(--dbc-psc-heading-letter-spacing) !important;
  font-style: normal !important;
  text-transform: none !important;
  text-decoration: none !important;
  color: var(--dbc-psc-heading-color) !important;
}

.dbc-popular-series__subtitle {
  margin: 10px 0 0;
  font-family: var(--dbc-psc-heading-font-family);
  font-size: var(--dbc-psc-subtitle-size);
  line-height: var(--dbc-psc-subtitle-line-height);
  font-weight: var(--dbc-psc-subtitle-weight);
  letter-spacing: var(--dbc-psc-subtitle-letter-spacing);
  font-style: normal;
  text-transform: none;
  text-decoration: none;
  color: #374151;
}

.dbc-popular-series__header--has-subtitle .dbc-popular-series__subtitle {
  margin-left: calc(
    var(--dbc-psc-heading-size) * var(--dbc-psc-heading-icon-scale) * (1792 / 1536) +
      var(--dbc-psc-heading-icon-gap)
  );
  margin-top: 8px;
}

.dbc-popular-series__empty {
  margin: 0;
  padding: 1rem 0;
  color: #6b7280;
  font-size: 0.9375rem;
}

.dbc-popular-series__carousel-root {
  display: block;
  width: 100%;
  max-width: 100%;
  height: fit-content;
  min-height: 0;
  align-self: start;
  justify-self: start;
  flex-grow: 0;
  flex-shrink: 0;
  /* Prev/next sit outside the rail; do not clip them when they extend past the content column */
  overflow: visible;
  container-type: inline-size;
  container-name: dbc-psc;
}

/* ----- Carousel nav tokens (rail full width + outside chevrons: see style.css .dbc-carousel[data-dbc-carousel]) ----- */
.dbc-popular-series__carousel-root .dbc-carousel.dbc-carousel--nav-align-avatar {
  --dbc-carousel-nav-box: 28px;
  --dbc-carousel-accent: #6b7280;
  /* Cover strip only — series name below is excluded from nav alignment */
  --dbc-carousel-nav-target-size: var(--dbc-psc-strip-h);
  --dbc-carousel-nav-target-offset: 0px;
  --dbc-carousel-nav-align-pad: 10px;
  gap: 0;
}

/* Match Authors of the month: global --dbc-carousel-nav-outside-gap uses vw (56–96px on wide desktop) — keep chevrons just outside the rail. */
@media (min-width: 768px) {
  .dbc-popular-series__carousel-root .dbc-carousel[data-dbc-carousel] {
    --dbc-carousel-nav-outside-gap: 12px;
  }

  /* Chevrons sit in the gutter with negative left/right; keep them above the track so clicks are not lost. */
  .dbc-popular-series__carousel-root .dbc-carousel[data-dbc-carousel] > .dbc-carousel-nav {
    z-index: 24;
  }
}

.dbc-popular-series__carousel-root .dbc-carousel--nav-align-avatar .dbc-carousel-nav {
  width: var(--dbc-carousel-nav-box);
  min-width: var(--dbc-carousel-nav-box);
  height: var(--dbc-carousel-nav-slim-h, 72px);
  background: var(--dbc-carousel-nav-surface-bg, #fff);
  border: 1px solid var(--dbc-carousel-nav-surface-border, rgba(0, 0, 0, 0.12));
  border-radius: var(--dbc-carousel-nav-surface-radius, 8px);
  box-shadow: var(--dbc-carousel-nav-surface-shadow, 0 2px 10px rgba(0, 0, 0, 0.15));
  transform: none;
}

.dbc-popular-series__carousel-root .dbc-carousel--nav-align-avatar .dbc-carousel-nav::before,
.dbc-popular-series__carousel-root .dbc-carousel--nav-align-avatar .dbc-carousel-nav::after {
  inset: 0;
  width: auto;
  height: auto;
  border-radius: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
  transform: none;
}

.dbc-popular-series__carousel-root .dbc-carousel--nav-align-avatar .dbc-carousel-nav::after {
  display: none;
}

.dbc-popular-series__carousel-root .dbc-carousel--nav-align-avatar .dbc-carousel-nav--prev::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23232a35' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18 -6 -6 6 -6' stroke-width='2.25'/%3E%3C/svg%3E");
}

.dbc-popular-series__carousel-root .dbc-carousel--nav-align-avatar .dbc-carousel-nav--next::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23232a35' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6 -6 -6 -6' stroke-width='2.25'/%3E%3C/svg%3E");
}

.dbc-popular-series__carousel-root .dbc-carousel--nav-align-avatar .dbc-carousel-nav:hover:not(:disabled),
.dbc-popular-series__carousel-root .dbc-carousel--nav-align-avatar .dbc-carousel-nav:focus-visible:not(:disabled),
.dbc-popular-series__carousel-root .dbc-carousel--nav-align-avatar .dbc-carousel-nav:active:not(:disabled) {
  background: var(--dbc-carousel-nav-surface-bg, #fff);
  box-shadow: var(--dbc-carousel-nav-surface-shadow-hover, 0 3px 12px rgba(0, 0, 0, 0.2));
}

.dbc-popular-series__carousel-root .dbc-carousel--nav-align-avatar .dbc-carousel-nav:hover:not(:disabled)::before,
.dbc-popular-series__carousel-root .dbc-carousel--nav-align-avatar .dbc-carousel-nav:focus-visible:not(:disabled)::before {
  background-size: 18px 18px;
}

.dbc-popular-series__carousel-root .dbc-carousel--nav-align-avatar .dbc-carousel-nav--prev:hover:not(:disabled)::before,
.dbc-popular-series__carousel-root .dbc-carousel--nav-align-avatar .dbc-carousel-nav--prev:focus-visible:not(:disabled)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23232a35' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18 -6 -6 6 -6' stroke-width='2'/%3E%3C/svg%3E");
}

.dbc-popular-series__carousel-root .dbc-carousel--nav-align-avatar .dbc-carousel-nav--next:hover:not(:disabled)::before,
.dbc-popular-series__carousel-root .dbc-carousel--nav-align-avatar .dbc-carousel-nav--next:focus-visible:not(:disabled)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23232a35' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6 -6 -6 -6' stroke-width='2'/%3E%3C/svg%3E");
}

.dbc-popular-series__carousel-root .dbc-carousel--nav-align-avatar .dbc-carousel-nav:focus-visible:not(:disabled) {
  outline: 2px solid #6b7280;
  outline-offset: 2px;
}

.dbc-popular-series__carousel-root .dbc-carousel--nav-align-avatar .dbc-carousel-nav:disabled {
  background: var(--dbc-carousel-nav-surface-bg, #fff);
  opacity: 0.45;
}

/* Same as [dbc_upcoming_releases_carousel]: no overflow — hide chevrons, keep layout parity */
.dbc-popular-series__carousel-root .dbc-carousel.dbc-carousel--no-scroll .dbc-carousel-nav {
  visibility: hidden;
  pointer-events: none;
}

/*
 * Mobile: strip dimensions only — slim side-bar nav from style.css (32×72, stronger contrast).
 */
@media (max-width: 767px) {
  .dbc-popular-series {
    --dbc-psc-strip-w: 52px;
    --dbc-psc-strip-h: 160px;
  }
}

.dbc-carousel.dbc-carousel--nav-align-avatar:has(> .dbc-carousel__rail > .dbc-popular-series__track) {
  height: fit-content;
  min-height: 0;
  flex-grow: 0;
  align-self: start;
}

.dbc-carousel--nav-align-avatar:has(> .dbc-carousel__rail > .dbc-popular-series__track) .dbc-carousel__rail {
  align-self: start;
  height: fit-content;
  min-height: 0;
}

/*
 * Horizontal strip: same scrolling contract as [dbc_upcoming_releases_carousel]
 * (page size from --dbc-carousel-page-items, theme default scroll-snap on .dbc-carousel__track).
 */
.dbc-popular-series__track.dbc-carousel__track {
  gap: 14px;
  padding-bottom: 14px;
  scroll-padding-inline: 0;
  --dbc-carousel-page-items: 3;
}

@media (min-width: 768px) {
  .dbc-popular-series__track.dbc-carousel__track {
    --dbc-carousel-page-items: 4;
  }
}

@media (min-width: 1024px) {
  .dbc-popular-series__track.dbc-carousel__track {
    --dbc-carousel-page-items: 5;
  }
}

.dbc-popular-series .dbc-popular-series__track.dbc-carousel__track {
  overflow-x: auto;
  overflow-y: hidden;
  touch-action: pan-y;
  overscroll-behavior-x: contain;
  overscroll-behavior-y: auto;
}

.dbc-popular-series__slide {
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: auto;
  min-width: var(--dbc-psc-slide-min-w);
  max-width: min(var(--dbc-psc-slide-max-w), 92vw);
  list-style: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.dbc-popular-series__block {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* One hit target: series page */
.dbc-popular-series__block-hit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 100%;
  text-decoration: none;
  color: inherit;
  border-radius: 6px;
  box-sizing: border-box;
}

.dbc-popular-series__block-hit:hover .dbc-popular-series__series-name,
.dbc-popular-series__block-hit:focus-visible .dbc-popular-series__series-name {
  color: #000;
}

.dbc-popular-series__block-hit:hover .dbc-popular-series__list-badge,
.dbc-popular-series__block-hit:focus-visible .dbc-popular-series__list-badge {
  color: var(--dbc-psc-signature-yellow);
}

/* Ranked-book-list style: lift cover cluster + deepen shadow (fine pointer only); keyboard uses :focus-visible */
@media (prefers-reduced-motion: no-preference) {
  @media (hover: hover) and (pointer: fine) {
    .dbc-popular-series__block-hit:hover .dbc-popular-series__strips {
      transform: translateY(-1px);
      box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
    }
  }

  .dbc-popular-series__block-hit:focus-visible .dbc-popular-series__strips {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dbc-popular-series__strips {
    transition: none;
  }
}

.dbc-popular-series__block-hit:focus-visible {
  outline: 2px solid #69aaff;
  outline-offset: 3px;
}

.dbc-popular-series .dbc-popular-series__series-name {
  display: block;
  width: 100%;
  max-width: 100%;
  font-family: var(--dbc-title-series-name-family, "Noto Serif Vithkuqi", "Noto Serif", Georgia, serif);
  font-size: 16px;
  line-height: 22px;
  font-weight: var(--dbc-title-series-name-weight, 500);
  font-style: normal;
  letter-spacing: var(--dbc-title-series-name-tracking, 0.025em);
  color: var(--dbc-title-series-name-color, #333);
  text-align: center;
  text-decoration: none;
  transition: color 0.15s ease-out;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dbc-popular-series__strips {
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  min-height: var(--dbc-psc-strip-h);
  border-radius: var(--dbc-psc-cluster-radius);
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Grow cover strips to fill the slide width (three equal columns share the card; no narrow cluster centered in a wide slide). */
.dbc-popular-series__strips--books-1 .dbc-popular-series__strips-inner,
.dbc-popular-series__strips--books-2 .dbc-popular-series__strips-inner,
.dbc-popular-series__strips--books-3 .dbc-popular-series__strips-inner {
  /* "stretch" is not valid for flex main axis — invalid rule was ignored, then .strips-inner { center } won → side gaps with two strips. */
  justify-content: flex-start;
}

.dbc-popular-series__strips--books-1 .dbc-popular-series__strip-wrap,
.dbc-popular-series__strips--books-2 .dbc-popular-series__strip-wrap,
.dbc-popular-series__strips--books-3 .dbc-popular-series__strip-wrap {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

.dbc-popular-series__strips--books-1 .dbc-popular-series__strip,
.dbc-popular-series__strips--books-2 .dbc-popular-series__strip,
.dbc-popular-series__strips--books-3 .dbc-popular-series__strip {
  width: 100% !important;
  max-width: none;
}

.dbc-popular-series__strips::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 46%;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.28) 42%, transparent 100%);
  border-radius: 0 0 var(--dbc-psc-cluster-radius) var(--dbc-psc-cluster-radius);
}

.dbc-popular-series__strips-inner {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0;
  position: relative;
  z-index: 0;
  width: 100%;
  min-height: var(--dbc-psc-strip-h);
}

.dbc-popular-series__list-badge {
  position: absolute;
  left: 10px;
  bottom: 8px;
  z-index: 2;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 7px;
  color: #fff;
  font-family: Poppins, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: none;
  pointer-events: none;
  transition: color 0.18s ease;
}

.dbc-popular-series__list-badge-icon {
  display: block;
  flex-shrink: 0;
}

.dbc-popular-series__list-badge-label {
  display: block;
  padding-top: 1px;
}

.dbc-popular-series__strip-wrap {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-sizing: border-box;
}

.dbc-popular-series__strip-wrap--divider {
  border-left: var(--dbc-psc-divider);
  margin-left: 0;
}

.dbc-popular-series__strip {
  display: block;
  width: var(--dbc-psc-strip-w);
  height: var(--dbc-psc-strip-h);
  border-radius: var(--dbc-psc-strip-radius);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 0 rgba(0, 0, 0, 0.06);
}

.dbc-popular-series__strip--cover {
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.dbc-popular-series__strip--fallback {
  background: linear-gradient(180deg, #e4e4e4 0%, #b8b8b8 55%, #9a9a9a 100%);
}

.dbc-popular-series__strip--cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
  display: block;
  pointer-events: none;
}

/* No horizontal overflow: keep vertical overflow locked (native wheel, no inner vertical scroll). */
.dbc-popular-series .dbc-carousel.dbc-carousel--no-scroll .dbc-popular-series__track.dbc-carousel__track,
.dbc-popular-series .dbc-carousel.dbc-carousel--no-scroll .dbc-carousel__rail:not(:has(.dbc-carousel__track)) {
  overscroll-behavior-x: contain;
  overscroll-behavior-y: auto !important;
  touch-action: pan-y !important;
  overflow-y: hidden !important;
}