/* ==========================================================================
   MarineTL | Premium Latest Chapters v2.8.3

   Only Fictioneer [fictioneer_latest_chapters type="list"] is decorated in PHP.
   These rules require .mtl-latest-static: no unrelated Splide/card components
   can inherit the design, on Main or Pro.
   ========================================================================== */

.latest-chapters.mtl-latest-static {
  --mtl-row: rgb(255 255 255 / 5%);
  --mtl-row-hover: rgb(232 196 138 / 9%);
  --mtl-line: rgb(232 196 138 / 20%);
  --mtl-line-hover: rgb(246 226 186 / 58%);
  --mtl-gold: #e8c48a;
  --mtl-gold-hi: #f6e2ba;
  --mtl-muted: rgb(229 232 236 / 67%);
  --mtl-ring: rgb(232 196 138 / 34%);
  --mtl-action: rgb(8 14 19 / 34%);
  --mtl-shadow: 0 12px 24px -18px rgb(0 0 0 / 78%);
  --mtl-ease: cubic-bezier(.2, .75, .2, 1);
  position: relative;
  width: 100%;
  /* Safety fallback if another integration accidentally restores .splide:
     a static list must never depend on the Splide mount to become visible. */
  visibility: visible !important;
  padding: 0 !important;
  max-width: 100%;
  container: mtl-latest / inline-size;
}

:root[data-mode="light"] .latest-chapters.mtl-latest-static {
  --mtl-row: rgb(255 255 255 / 85%);
  --mtl-row-hover: rgb(154 106 34 / 8%);
  --mtl-line: rgb(154 106 34 / 22%);
  --mtl-line-hover: rgb(154 106 34 / 55%);
  --mtl-gold: #9a6a22;
  --mtl-gold-hi: #7e5116;
  --mtl-muted: rgb(43 49 57 / 67%);
  --mtl-ring: rgb(154 106 34 / 28%);
  --mtl-action: rgb(255 255 255 / 52%);
  --mtl-shadow: 0 12px 22px -18px rgb(30 38 46 / 50%);
}

/* Keep native list semantics while removing Splide's constrained viewport.
   PHP strips the root .splide class and makes this a real static list. */
.latest-chapters.mtl-latest-static :is(.mtl-latest__track, .splide__track) {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 0 !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

.latest-chapters.mtl-latest-static .post-list._latest-chapters {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  gap: 9px !important;
  height: auto !important;
  max-height: none !important;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  list-style: none;
}

.latest-chapters.mtl-latest-static :is(.splide__arrows, .splide__pagination) {
  display: none !important;
}

/* A mobile-width panel shows 5 rows on the HOME PAGE only. Regular Latest
   Chapters pages keep every requested row. Container width, not device width,
   determines when the extra five rows and the second column can fit. */
.latest-chapters.mtl-latest-home .mtl-latest__beyond-mobile {
  display: none !important;
}

.latest-chapters.mtl-latest-static .post-list-item.mtl-latest__item {
  position: relative;
  box-sizing: border-box;
  display: grid !important;
  grid-template-columns: 58px minmax(0, 1fr) 34px;
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "cover title action"
    "cover secondary action"
    "cover extra action";
  align-content: center;
  align-items: center;
  column-gap: 13px;
  row-gap: 3px;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 82px;
  height: auto !important;
  margin: 0 !important;
  padding: 8px 10px !important;
  overflow: hidden;
  border: 1px solid var(--mtl-line) !important;
  border-radius: 16px !important;
  clip-path: none !important;
  background: var(--mtl-row) !important;
  box-shadow: var(--mtl-shadow) !important;
  aspect-ratio: auto !important;
  transform: none !important;
  transition: background .22s ease, border-color .22s ease, box-shadow .25s ease, transform .25s var(--mtl-ease);
}

.latest-chapters.mtl-latest-static .post-list-item.mtl-latest__no-cover {
  grid-template-columns: minmax(0, 1fr) 34px;
  grid-template-areas:
    "title action"
    "secondary action"
    "extra action";
  padding-left: 14px !important;
}

.latest-chapters.mtl-latest-static .post-list-item.mtl-latest__item > .post-list-item__image {
  grid-area: cover !important;
  display: block !important;
  align-self: center;
  width: 58px !important;
  height: 70px !important;
  min-width: 58px !important;
  max-width: 58px !important;
  margin: 0 !important;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 11px !important;
  box-shadow: 0 8px 18px -12px rgb(0 0 0 / 85%);
  aspect-ratio: auto !important;
  pointer-events: none; /* Full-row title link owns the chapter action. */
}

.latest-chapters.mtl-latest-static .post-list-item.mtl-latest__item > .post-list-item__image img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0;
  object-fit: cover;
}

.latest-chapters.mtl-latest-static .post-list-item.mtl-latest__item > .post-list-item__title.mtl-latest__title-link {
  position: static !important;
  grid-area: title !important;
  align-self: end;
  display: -webkit-box !important;
  min-width: 0;
  max-width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  color: inherit;
  font-size: clamp(15px, 4.2cqw, 17px) !important;
  font-weight: 650 !important;
  line-height: 1.18 !important;
  letter-spacing: .002em;
  text-decoration: none !important;
  text-wrap: pretty;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.latest-chapters.mtl-latest-static .post-list-item.mtl-latest__item > .mtl-latest__title-link::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
}

.latest-chapters.mtl-latest-static .post-list-item.mtl-latest__item > .mtl-latest__meta {
  grid-area: secondary !important;
  align-self: start;
  display: flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  gap: 6px;
  margin: 0;
  overflow: hidden;
  color: var(--mtl-muted);
  font-size: 12.5px;
  font-weight: 520;
  line-height: 1.3;
  letter-spacing: .015em;
  white-space: nowrap;
}

.latest-chapters.mtl-latest-static .mtl-latest__chapter {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.latest-chapters.mtl-latest-static .mtl-latest__separator {
  flex: 0 0 auto;
  opacity: .5;
}

.latest-chapters.mtl-latest-static .mtl-latest__time {
  flex: 0 0 auto;
}

.latest-chapters.mtl-latest-static .mtl-latest__fresh {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mtl-gold);
  box-shadow: 0 0 0 3px rgb(232 196 138 / 10%);
}

.latest-chapters.mtl-latest-static .mtl-latest__lock {
  flex: 0 0 auto;
  color: var(--mtl-gold);
  font-size: 10px;
  opacity: .9;
}

/* If the shortcode opts into footer metadata, keep it rather than silently
   stripping its story/author links and any Fictioneer filter additions. */
.latest-chapters.mtl-latest-static .post-list-item.mtl-latest__item > .post-list-item__meta {
  grid-area: extra !important;
  display: flex !important;
  flex-wrap: wrap;
  gap: 3px 9px;
  align-items: center;
  min-width: 0;
  width: auto;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 11px;
  line-height: 1.4;
}

.latest-chapters.mtl-latest-static .post-list-item.mtl-latest__item > .post-list-item__meta a {
  position: relative;
  z-index: 3; /* Keep links inside optional footer independently clickable. */
}

.latest-chapters.mtl-latest-static .mtl-latest__action {
  grid-area: action !important;
  align-self: center;
  justify-self: end;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin: 0;
  border: 1px solid var(--mtl-ring);
  border-radius: 11px;
  background: var(--mtl-action);
  color: var(--mtl-gold);
  font-size: 13px;
  pointer-events: none;
  transition: color .22s ease, background .22s ease, border-color .22s ease, transform .25s var(--mtl-ease);
}

.latest-chapters.mtl-latest-static .mtl-latest__item:focus-within {
  outline: 2px solid var(--mtl-gold);
  outline-offset: -2px;
}

.latest-chapters.mtl-latest-static .mtl-latest__title-link:focus-visible {
  outline: 0;
}

@media (hover: hover) {
  .latest-chapters.mtl-latest-static .mtl-latest__item:hover {
    border-color: var(--mtl-line-hover) !important;
    background: var(--mtl-row-hover) !important;
    box-shadow: 0 15px 28px -18px rgb(0 0 0 / 88%) !important;
    transform: translateY(-1px) !important;
  }

  .latest-chapters.mtl-latest-static .mtl-latest__item:hover .mtl-latest__title-link {
    color: var(--mtl-gold-hi);
  }

  .latest-chapters.mtl-latest-static .mtl-latest__item:hover .mtl-latest__action {
    color: var(--mtl-gold-hi);
    border-color: var(--mtl-line-hover);
    background: rgb(232 196 138 / 10%);
    transform: translateX(2px);
  }
}

.latest-chapters.mtl-latest-static .mtl-latest__footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

.latest-chapters.mtl-latest-static .mtl-latest__view-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 7px 12px;
  border: 1px solid var(--mtl-line);
  border-radius: 12px;
  background: rgb(255 255 255 / 2.5%);
  color: var(--mtl-muted);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none !important;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}

.latest-chapters.mtl-latest-static .mtl-latest__view-all i {
  color: var(--mtl-gold);
  font-size: 11px;
  transition: transform .25s var(--mtl-ease);
}

.latest-chapters.mtl-latest-static .mtl-latest__view-all:focus-visible {
  outline: 2px solid var(--mtl-gold);
  outline-offset: 2px;
}

@media (hover: hover) {
  .latest-chapters.mtl-latest-static .mtl-latest__view-all:hover {
    color: var(--mtl-gold-hi);
    border-color: var(--mtl-line-hover);
    background: rgb(232 196 138 / 7%);
  }
  .latest-chapters.mtl-latest-static .mtl-latest__view-all:hover i {
    transform: translateX(2px);
  }
}

/* Desktop is decided by actual component width: a desktop sidebar is still a
   one-column list, not two narrow cards crammed into its available space. */
@container mtl-latest (min-width: 680px) {
  .post-list._latest-chapters {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 11px 12px !important;
  }
  .post-list._latest-chapters .mtl-latest__beyond-mobile {
    display: grid !important;
  }
  .post-list-item.mtl-latest__item {
    grid-template-columns: 56px minmax(0, 1fr) 34px;
    min-height: 80px;
  }
  .post-list-item.mtl-latest__item > .post-list-item__image {
    width: 56px !important;
    height: 66px !important;
    min-width: 56px !important;
    max-width: 56px !important;
  }
}

/* Tiny screens: preserve room for the title and the full-row tap target. */
@container mtl-latest (max-width: 359px) {
  .post-list-item.mtl-latest__item {
    grid-template-columns: 52px minmax(0, 1fr) 32px;
    column-gap: 10px;
  }
  .post-list-item.mtl-latest__item > .post-list-item__image {
    width: 52px !important;
    height: 66px !important;
    min-width: 52px !important;
    max-width: 52px !important;
  }
  .mtl-latest__action {
    width: 32px;
    height: 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .latest-chapters.mtl-latest-static * {
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media (forced-colors: active) {
  .latest-chapters.mtl-latest-static .mtl-latest__item,
  .latest-chapters.mtl-latest-static .mtl-latest__view-all,
  .latest-chapters.mtl-latest-static .mtl-latest__action {
    border-color: CanvasText !important;
  }
  .latest-chapters.mtl-latest-static .mtl-latest__fresh {
    background: CanvasText;
    box-shadow: none;
  }
}