/* Story slider/card styling.
   Scope ONLY: homepage story rails and layout INSIDE each story card.
   Keep carousel/slider behavior, progress bar and pager intact.
   Do not touch hero/banner, header, reader, comments or other features. */

/* --- HORIZONTAL SLIDER --- */
.rail {
  display: grid !important;
  grid-auto-flow: column !important;
  grid-template-columns: none !important;
  grid-auto-columns: minmax(300px, 78%) !important;
  gap: 0.85rem !important;
  width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory !important;
  padding-bottom: 0.4rem !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { height: 0 !important; }

@media (min-width: 800px) {
  .rail { grid-auto-columns: minmax(460px, 48%) !important; }
}

.rail-foot { display: flex !important; }

/* --- CARD --- */
.wide-card {
  --book-cover-w: clamp(8rem, 36%, 10.5rem);
  position: relative;
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  gap: clamp(0.55rem, 1.4vw, 0.78rem) !important;
  padding: clamp(0.55rem, 1.3vw, 0.72rem) !important;
  overflow: hidden !important;
  scroll-snap-align: start !important;
}

.wide-cover {
  flex: 0 0 var(--book-cover-w) !important;
  width: var(--book-cover-w) !important;
  min-width: 0 !important;
  height: auto !important;
  align-self: flex-start !important;
}
.wide-cover .cover-frame {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 2 / 3 !important;
  overflow: hidden !important;
}
.wide-cover .cover-frame img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.wide-body {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  align-self: stretch !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 0.3rem !important;
  overflow: hidden !important;
}

.wide-title {
  min-width: 0 !important;
  padding-right: 1.55rem !important;
}
.wide-title h3 {
  margin: 0 !important;
  min-width: 0 !important;
  font-size: clamp(1.22rem, 4.7vw, 1.62rem) !important;
  line-height: 1.08 !important;
  font-weight: 600 !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 3 !important;
  overflow: hidden !important;
  overflow-wrap: anywhere !important;
  text-wrap: balance;
}

.wide-body .by {
  margin: 0 !important;
  min-width: 0 !important;
  font-size: clamp(0.84rem, 2.8vw, 1rem) !important;
  line-height: 1.24 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere !important;
}

.pill-row {
  flex-wrap: wrap !important;
  row-gap: 0.28rem !important;
}
.wide-card .pill {
  font-size: clamp(0.69rem, 2vw, 0.82rem) !important;
  padding: 0.18rem 0.48rem !important;
}
.wide-stats {
  font-size: clamp(0.73rem, 1.95vw, 0.86rem) !important;
  flex-wrap: wrap !important;
  row-gap: 0.22rem !important;
}

.wide-latest {
  margin-top: 0 !important;
  font-size: clamp(0.73rem, 1.95vw, 0.86rem) !important;
  padding: 0.42rem 0.52rem 0.46rem !important;
  border-top: 1px solid rgba(173, 158, 230, 0.12);
}

/* --- MOBILE --- */
@media (max-width: 640px) {
  .rail {
    grid-auto-columns: minmax(310px, 90%) !important;
    gap: 0.72rem !important;
  }

  .wide-card {
    --book-cover-w: clamp(9rem, 52%, 10.8rem);
    gap: 0.42rem !important;
    padding: 0.48rem !important;
  }

  .wide-title { padding-right: 1.38rem !important; }
  .wide-title h3 {
    font-size: clamp(1.18rem, 5.15vw, 1.48rem) !important;
    line-height: 1.06 !important;
    -webkit-line-clamp: 4 !important;
  }

  .wide-body .by {
    font-size: clamp(0.78rem, 3.25vw, 0.94rem) !important;
    line-height: 1.2 !important;
  }

  .wide-card .pill {
    font-size: clamp(0.64rem, 2.75vw, 0.76rem) !important;
    padding: 0.16rem 0.38rem !important;
  }
  .wide-stats,
  .wide-latest {
    font-size: clamp(0.67rem, 2.75vw, 0.8rem) !important;
  }
  .wide-latest { padding: 0.36rem 0.42rem 0.4rem !important; }
}

@media (max-width: 380px) {
  .rail { grid-auto-columns: minmax(300px, 92%) !important; }
  .wide-card {
    --book-cover-w: clamp(8.6rem, 50%, 9.8rem);
    gap: 0.36rem !important;
    padding: 0.44rem !important;
  }
  .wide-title h3 {
    font-size: clamp(1.1rem, 5vw, 1.3rem) !important;
  }
  .wide-body .by {
    font-size: clamp(0.74rem, 3.2vw, 0.88rem) !important;
  }
}

/* --- TABLET / LANDSCAPE --- */
@media (min-width: 641px) {
  .wide-card { --book-cover-w: clamp(9rem, 34%, 11rem); }
  .wide-title h3 {
    font-size: clamp(1.34rem, 2.65vw, 1.72rem) !important;
    -webkit-line-clamp: 3 !important;
  }
  .wide-body .by {
    font-size: clamp(0.92rem, 1.6vw, 1.08rem) !important;
  }
}

/* Landscape: do NOT spread every line apart. Keep the info group compact,
   increase typography substantially, and anchor the latest-chapter box at the bottom. */
@media (orientation: landscape) and (min-width: 641px) {
  .rail {
    grid-auto-columns: minmax(540px, 52%) !important;
  }

  .wide-card {
    --book-cover-w: clamp(10.5rem, 35%, 12.25rem);
    gap: clamp(0.58rem, 1.05vw, 0.78rem) !important;
  }

  .wide-body {
    justify-content: flex-start !important;
    gap: clamp(0.46rem, 0.72vw, 0.72rem) !important;
  }

  .wide-title h3 {
    font-size: clamp(1.78rem, 2.35vw, 2.18rem) !important;
    line-height: 1.02 !important;
    font-weight: 600 !important;
    -webkit-line-clamp: 2 !important;
  }

  .wide-body .by {
    font-size: clamp(1.12rem, 1.45vw, 1.32rem) !important;
    line-height: 1.18 !important;
  }

  .wide-card .pill {
    font-size: clamp(0.9rem, 1vw, 1.02rem) !important;
    padding: 0.24rem 0.56rem !important;
  }

  .wide-stats {
    font-size: clamp(0.94rem, 0.98vw, 1.06rem) !important;
  }

  .wide-latest {
    margin-top: auto !important;
    font-size: clamp(0.96rem, 1vw, 1.08rem) !important;
    padding: 0.5rem 0.62rem 0.54rem !important;
  }
}

@media (min-width: 1100px) {
  .wide-card { --book-cover-w: clamp(10.5rem, 33%, 12.25rem); }
  .wide-title h3 {
    font-size: clamp(1.56rem, 1.7vw, 2rem) !important;
  }
  .wide-body .by {
    font-size: clamp(1.04rem, 1.05vw, 1.2rem) !important;
  }
  .wide-card .pill {
    font-size: clamp(0.78rem, 0.8vw, 0.92rem) !important;
  }
  .wide-stats,
  .wide-latest {
    font-size: clamp(0.82rem, 0.8vw, 0.96rem) !important;
  }
}

/* --- LANDSCAPE COMPACT OPTION 2 ---
   Only affects story cards when the device is physically in landscape.
   Portrait layout, hero/banner size, hero covers, and all other features stay untouched. */
@media (orientation: landscape) and (min-width: 641px) {
  .rail {
    grid-auto-columns: minmax(390px, 36%) !important;
    gap: clamp(0.52rem, 0.75vw, 0.68rem) !important;
  }

  .wide-card {
    --book-cover-w: clamp(8.35rem, 31%, 9.65rem);
    gap: clamp(0.46rem, 0.68vw, 0.6rem) !important;
    padding: clamp(0.42rem, 0.62vw, 0.54rem) !important;
  }

  .wide-cover .cover-frame {
    aspect-ratio: 2 / 3 !important;
  }

  .wide-body {
    gap: clamp(0.32rem, 0.48vw, 0.46rem) !important;
  }

  .wide-title {
    padding-right: 1.35rem !important;
  }

  .wide-title h3 {
    font-size: clamp(1.28rem, 1.55vw, 1.62rem) !important;
    line-height: 1.05 !important;
    -webkit-line-clamp: 2 !important;
  }

  .wide-body .by {
    font-size: clamp(0.88rem, 0.95vw, 1rem) !important;
    line-height: 1.18 !important;
  }

  .wide-card .pill {
    font-size: clamp(0.72rem, 0.72vw, 0.82rem) !important;
    padding: 0.18rem 0.42rem !important;
  }

  .wide-stats {
    font-size: clamp(0.76rem, 0.74vw, 0.86rem) !important;
  }

  .wide-latest {
    margin-top: auto !important;
    font-size: clamp(0.78rem, 0.76vw, 0.88rem) !important;
    padding: 0.38rem 0.48rem 0.42rem !important;
  }
}