/* =====================================================================
   Website UI/UX Redesign — frontend.css
   by TechLook Online (techlook.co)  —  v1.1

   Design note: .wuxr-home does NOT have its own background color,
   border-radius, or outer padding. It is transparent and breaks fully
   out of whatever wraps it (theme container, Elementor section, page
   builder widget) so it always spans the real page width no matter
   which template/builder is assigned to the front page — that's the
   `width:100vw` breakout below. Only .wuxr-container then re-centers
   the *reading* width on top of that, exactly like the reference site.
===================================================================== */

.wuxr-home {
  color: var(--wuxr-text);
  font-family: var(--wuxr-font-body);
  /* Full-bleed breakout: escapes any ancestor's max-width/padding
     (Elementor sections, theme content wrappers, page templates, …)
     so the homepage always fills the real viewport width. */
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  overflow-x: hidden;
}
.wuxr-home, .wuxr-home * { box-sizing: border-box; }
.wuxr-home a { color: inherit; text-decoration: none; }
.wuxr-home img { display: block; max-width: 100%; }
.wuxr-home button { font-family: inherit; }

.wuxr-container {
  width: 100%;
  max-width: var(--wuxr-maxw, 1280px);
  margin: 0 auto;
  padding: 0 clamp(1rem, 3vw, 2.5rem) 3rem;
}

.wuxr-heading { display: flex; align-items: baseline; justify-content: space-between; margin: 3rem 0 1.1rem; }
.wuxr-heading h2 { display: flex; align-items: center; gap: .5rem; font-family: var(--wuxr-font-display); font-weight: 600; font-size: clamp(1.4rem, 2.2vw, 1.9rem); margin: 0; }
.wuxr-heading h2 .wuxr-svg-icon { width: .82em; height: .82em; color: var(--wuxr-accent); flex: 0 0 auto; }

/* ---------------- HERO ---------------- */
.wuxr-hero { position: relative; width: 100%; border-radius: 18px; overflow: hidden; height: clamp(300px, 40vw, 460px); margin-top: 1.5rem; isolation: isolate; }
.wuxr-hero-track { display: flex; width: 100%; height: 100%; transition: transform .6s cubic-bezier(.65,0,.35,1); }
.wuxr-hero-slide { flex: 0 0 100%; width: 100%; height: 100%; position: relative; background-size: cover; background-position: center 22%; display: flex; align-items: flex-end; }
.wuxr-hero-slide::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,9,14,0) 20%, rgba(8,9,14,.6) 62%, rgba(8,9,14,.95) 100%),
              linear-gradient(90deg, rgba(8,9,14,.78) 0%, rgba(8,9,14,.1) 55%);
}
.wuxr-hero-copy { position: relative; z-index: 1; padding: clamp(1.25rem, 3vw, 2.75rem); max-width: 580px; }
.wuxr-pills { display: flex; gap: .4rem; margin-bottom: .7rem; flex-wrap: wrap; }
.wuxr-pills span { font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); padding: .22rem .65rem; border-radius: 999px; }
.wuxr-hero-title { font-family: var(--wuxr-font-display); font-weight: 600; font-size: clamp(1.9rem, 4.2vw, 3.1rem); line-height: 1.05; margin: 0 0 .6rem; }
.wuxr-hero-excerpt { font-size: .93rem; color: rgba(255,255,255,.82); margin: 0 0 1.15rem; max-width: 48ch; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wuxr-hero-actions { display: flex; gap: .6rem; flex-wrap: wrap; }

.wuxr-btn { display: inline-flex; align-items: center; gap: .45rem; font-size: .86rem; font-weight: 700; padding: .65rem 1.2rem; border-radius: 9px; border: none; cursor: pointer; transition: transform .15s, filter .15s, background .15s; }
.wuxr-btn .wuxr-svg-icon { width: 16px; height: 16px; }
.wuxr-btn:hover { transform: translateY(-1px); }
.wuxr-btn-solid { background: var(--wuxr-accent); color: #06231d; }
.wuxr-btn-solid:hover { filter: brightness(1.08); }
.wuxr-btn-ghost { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); color: var(--wuxr-text); }
.wuxr-btn-lg { padding: .8rem 1.6rem; font-size: .92rem; }

.wuxr-hero-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 50%; background: rgba(8,9,14,.45); border: 1px solid rgba(255,255,255,.2); color: #fff; font-size: 1.15rem; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; transition: background .15s; }
.wuxr-hero-nav:hover { background: rgba(8,9,14,.78); }
.wuxr-hero-nav--prev { left: 14px; } .wuxr-hero-nav--next { right: 14px; }
.wuxr-hero-dots { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 2; }
.wuxr-hero-dots button { width: 7px; height: 7px; border-radius: 50%; border: none; background: rgba(255,255,255,.4); cursor: pointer; padding: 0; transition: width .2s, background .2s; }
.wuxr-hero-dots button.is-active { width: 22px; border-radius: 4px; background: var(--wuxr-accent); }

/* ---------------- SCROLL ROWS + CARDS ---------------- */
/* A "5 cards visible, 6th peeking" horizontally-scrolling row — card width
   is computed from the row width itself (via --wuxr-cols) so it always
   shows the right count regardless of container width, and narrows the
   count on smaller screens instead of cards shrinking into unreadable
   slivers. The scrollbar itself is hidden (scroll still works via touch,
   trackpad, wheel, drag, or the nav arrows) and replaced with soft edge
   fades + hover-revealed arrow buttons for a cleaner, "no ugly scrollbar
   line" feel. */
.wuxr-row-outer { position: relative; }
.wuxr-row-outer::before, .wuxr-row-outer::after {
  content: ""; position: absolute; top: 0; bottom: .85rem; width: 44px; z-index: 2;
  pointer-events: none; transition: opacity .25s;
}
.wuxr-row-outer::before { left: 0; background: linear-gradient(90deg, var(--wuxr-bg), transparent); }
.wuxr-row-outer::after  { right: 0; background: linear-gradient(270deg, var(--wuxr-bg), transparent); }
.wuxr-row-outer.is-start::before { opacity: 0; }
.wuxr-row-outer.is-end::after { opacity: 0; }

.wuxr-row-nav {
  position: absolute; top: 42%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%;
  background: var(--wuxr-card); border: 1px solid var(--wuxr-line); color: var(--wuxr-text);
  display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 3;
  font-size: 1.05rem; line-height: 1; opacity: 0; transition: opacity .2s, background .15s, transform .15s;
  box-shadow: 0 8px 20px -8px rgba(0,0,0,.55);
}
.wuxr-row-outer:hover .wuxr-row-nav { opacity: 1; }
.wuxr-row-nav:hover { background: var(--wuxr-accent); color: #06231d; transform: translateY(-50%) scale(1.06); }
.wuxr-row-nav--prev { left: -4px; } .wuxr-row-nav--next { right: -4px; }
.wuxr-row-outer.is-start .wuxr-row-nav--prev,
.wuxr-row-outer.is-end .wuxr-row-nav--next { opacity: 0 !important; pointer-events: none; }
@media (hover: none) { .wuxr-row-nav { display: none; } } /* touch devices: swipe instead */

.wuxr-row {
  --wuxr-cols: 5.15; /* 5 full cards + a peek of the 6th, exactly like the reference */
  display: flex; gap: var(--wuxr-gap, 1.1rem); overflow-x: auto; scroll-snap-type: x mandatory;
  padding: .2rem .1rem 1rem; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none; /* Firefox / legacy Edge */
}
.wuxr-row::-webkit-scrollbar { display: none; } /* Chrome / Safari */

/* .wuxr-row--2: a two-row-tall shelf (Popular / Recommended). Cards flow
   top-to-bottom then wrap into a new column, and the whole grid scrolls
   sideways — same hidden-scrollbar/arrow/fade treatment as a single row.
   Row height is `auto` (sized to the tallest card in that row), NOT
   `1fr` — `1fr` tracks need a definite container height to divide up,
   and this container's height is itself derived from its content, which
   is a circular dependency that can make cards render with zero/broken
   height. `auto` sidesteps that entirely. */
.wuxr-row--2 {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, auto);
  align-items: start;
  grid-auto-columns: calc((100% - (var(--wuxr-cols) - 1) * var(--wuxr-gap)) / var(--wuxr-cols));
}

@media (max-width: 1100px) { .wuxr-row { --wuxr-cols: 3.35; } }
@media (max-width: 700px)  { .wuxr-row { --wuxr-cols: 2.25; } }

.wuxr-card {
  flex: 0 0 calc((100% - (var(--wuxr-cols) - 1) * var(--wuxr-gap)) / var(--wuxr-cols));
  min-width: 128px;
  scroll-snap-align: start; background: var(--wuxr-card); border: 1px solid var(--wuxr-line);
  border-radius: var(--wuxr-radius, 12px); overflow: hidden;
  box-shadow: 0 2px 10px -6px rgba(0,0,0,.4);
  transition: transform .18s, border-color .18s, box-shadow .18s;
  display: flex; flex-direction: column;
}
.wuxr-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--wuxr-accent) 45%, transparent); box-shadow: 0 16px 32px -14px rgba(0,0,0,.55); }
.wuxr-card-cover { position: relative; aspect-ratio: 2/3; overflow: hidden; background: var(--wuxr-card-hi); }
.wuxr-card-cover-link { position: absolute; inset: 0; display: block; z-index: 1; }
.wuxr-card-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.wuxr-card:hover .wuxr-card-cover img { transform: scale(1.05); }
.wuxr-badge { position: absolute; top: 8px; left: 8px; z-index: 2; font-size: .64rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; background: rgba(8,9,14,.7); border: 1px solid rgba(255,255,255,.15); padding: .18rem .5rem; border-radius: 999px; pointer-events: none; }
.wuxr-card-body { padding: .7rem .75rem .85rem; flex: 1; display: flex; flex-direction: column; }
.wuxr-card-title { font-size: .87rem; font-weight: 700; line-height: 1.3; margin: 0 0 .35rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wuxr-card-title:hover { color: var(--wuxr-accent); }
.wuxr-card-meta { display: flex; align-items: center; gap: .7rem; font-size: .72rem; color: var(--wuxr-text-dim); margin-top: auto; }
.wuxr-meta-ch, .wuxr-meta-comments { display: inline-flex; align-items: center; gap: .3rem; }
.wuxr-meta-ch .wuxr-svg-icon, .wuxr-meta-comments .wuxr-svg-icon { width: 12px; height: 12px; opacity: .8; }

/* ---- Read shortcut ----
   A single "jump straight to the story" icon revealed on hover. Favorite/
   bookmark icons were removed — see readme changelog. */
.wuxr-card-actions {
  position: absolute; top: 8px; right: 8px; z-index: 3;
  display: flex; gap: .35rem; align-items: center;
}
.wuxr-icon-btn {
  width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(255,255,255,.16);
  background: rgba(8,9,14,.55); backdrop-filter: blur(3px); color: #f4f3fa;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background .15s, transform .15s, opacity .18s, border-color .15s;
  padding: 0;
}
.wuxr-icon-btn .wuxr-svg-icon { width: 15px; height: 15px; }
.wuxr-icon-btn:hover { background: rgba(8,9,14,.85); transform: scale(1.08); }
.wuxr-icon-btn:active { transform: scale(.95); }

.wuxr-card-actions .wuxr-read-btn {
  opacity: 0; transform: translateY(-6px) scale(.9); pointer-events: none;
}
.wuxr-card:hover .wuxr-card-actions .wuxr-read-btn,
.wuxr-card-actions:focus-within .wuxr-read-btn {
  opacity: 1; transform: none; pointer-events: auto;
}

.wuxr-ch-cover { position: relative; }

/* ---------------- STATIC 3-COLUMN GRID (Latest Stories / Latest Chapters) ---------------- */
/* Non-scrolling — wraps naturally to the right row count from the count
   setting (30 items / 3 columns = 10 rows). */
.wuxr-static-grid { display: grid; gap: var(--wuxr-gap, 1.1rem); }
.wuxr-static-grid--3col { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .wuxr-static-grid--3col { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .wuxr-static-grid--3col { grid-template-columns: 1fr; } }

.wuxr-section-footer { display: flex; justify-content: center; margin-top: 1.6rem; }

/* Latest Chapters: flat tiles — one chapter per cell, not grouped by story */
.wuxr-chtile {
  display: flex; align-items: center; gap: .8rem; background: var(--wuxr-card); border: 1px solid var(--wuxr-line);
  border-radius: var(--wuxr-radius, 12px); padding: .7rem .9rem;
  box-shadow: 0 2px 10px -6px rgba(0,0,0,.35);
  transition: border-color .18s, transform .15s, box-shadow .18s;
}
.wuxr-chtile:hover { border-color: color-mix(in srgb, var(--wuxr-accent) 40%, transparent); transform: translateY(-2px); box-shadow: 0 10px 22px -12px rgba(0,0,0,.5); }
.wuxr-chtile-cover { flex: 0 0 46px; width: 46px; aspect-ratio: 2/3; border-radius: 5px; overflow: hidden; background: var(--wuxr-card-hi); }
.wuxr-chtile-cover img { width: 100%; height: 100%; object-fit: cover; }
.wuxr-chtile-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.wuxr-chtile-title { font-size: .85rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: .35rem; }
.wuxr-chtile:hover .wuxr-chtile-title { color: var(--wuxr-accent); }
.wuxr-lock { display: inline-flex; flex: 0 0 auto; color: var(--wuxr-accent-2); }
.wuxr-lock .wuxr-svg-icon { width: 11px; height: 11px; }
.wuxr-chtile-story { font-size: .74rem; color: var(--wuxr-text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wuxr-chtile-date { font-size: .7rem; color: var(--wuxr-text-dim); opacity: .8; }

/* ---------------- BROWSE BY GENRE — static tile grid (2 rows x 6 cols) ---------------- */
.wuxr-genre-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--wuxr-gap, 1.1rem); }
@media (max-width: 1100px) { .wuxr-genre-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px)  { .wuxr-genre-grid { grid-template-columns: repeat(2, 1fr); } }
.wuxr-genre-tile {
  display: flex; flex-direction: column; gap: .3rem; align-items: center; justify-content: center; text-align: center;
  background: var(--wuxr-card); border: 1px solid var(--wuxr-line); border-radius: var(--wuxr-radius, 12px);
  padding: 1.3rem .8rem;
  box-shadow: 0 2px 10px -6px rgba(0,0,0,.35);
  transition: border-color .18s, transform .15s, background .18s, box-shadow .18s;
}
.wuxr-genre-tile:hover { transform: translateY(-3px); border-color: var(--wuxr-accent); background: var(--wuxr-card-hi); box-shadow: 0 10px 22px -12px rgba(0,0,0,.5); }
.wuxr-genre-name { font-weight: 700; font-size: .92rem; }
.wuxr-genre-count { font-size: .72rem; color: var(--wuxr-text-dim); }
.wuxr-empty { color: var(--wuxr-text-dim); font-size: .85rem; padding: 1rem 0; }

/* ---------------- TAG CLOUD ---------------- */
.wuxr-tagcloud { display: flex; flex-wrap: wrap; gap: .5rem; }
.wuxr-tagcloud a { font-size: .8rem; background: var(--wuxr-card); border: 1px solid var(--wuxr-line); padding: .38rem .9rem; border-radius: 999px; color: var(--wuxr-text-dim); transition: background .15s, color .15s, border-color .15s; }
.wuxr-tagcloud a:hover { background: var(--wuxr-accent); border-color: var(--wuxr-accent); color: #06231d; }

/* ---------------- CTA ---------------- */
.wuxr-cta { margin-top: 3rem; text-align: center; background: linear-gradient(135deg, color-mix(in srgb, var(--wuxr-accent) 14%, transparent), color-mix(in srgb, var(--wuxr-accent-2) 12%, transparent)); border: 1px solid var(--wuxr-line); border-radius: 18px; padding: 2.4rem 1.5rem; }
.wuxr-cta h3 { font-family: var(--wuxr-font-display); font-size: 1.7rem; margin: 0 0 .5rem; }
.wuxr-cta p { color: var(--wuxr-text-dim); max-width: 46ch; margin: 0 auto 1.2rem; font-size: .92rem; }