/* =========================================================
   LEWDOVA CATALOG REDESIGN
   -----------------------------------------------------------
   1) Fixes a site-wide layout bug: the legacy base-theme rule
      `main { display:grid; grid-template-columns: 1fr 1fr 1fr }`
      (from the original Neveshtan theme, still present near the
      top of style.css) hijacks EVERY custom <main class="..."> page
      wrapper - Games archive, Doujin archive, Doujin single, Artist
      pages, Developer pages, etc. - turning their sections (header /
      toolbar / grid / pagination) into grid siblings placed next to
      each other instead of stacked normally.

   2) Gives the Games archive (/games/) and Doujin archive (/doujin/)
      pages a clean, unified, modern card-based design.

   3) [round 2] Games cards switched from a tall 3:4 portrait ratio
      to a wide 16:10 ratio, with a wider grid column basis, so the
      Games archive reads as a horizontal card grid instead of a
      narrow, very tall one.

   4) [round 2] Polished the homepage "กำลังได้รับความนิยม" (Popular)
      panels and the community CTA banner to match the same visual
      language as the archive pages.

   5) [round 2] Restyled the category / artist / tag pills on the
      Doujin single page, now that the tag rendering bug in
      single-doujin.php (it used post-object accessors on taxonomy
      term objects) has been fixed.

   This file is loaded AFTER style.css (see the wp_enqueue_style call
   in doujin-artist-functions.php), so it can safely win the cascade
   without having to touch the huge, heavily-!important-laden
   style.css file directly.
========================================================= */

:root{
    --cr-bg-panel:#111a28;
    --cr-bg-panel-2:#0d1420;
    --cr-line:rgba(255,255,255,.09);
    --cr-line-strong:rgba(139,124,255,.38);
    --cr-text:#f5f7fb;
    --cr-muted:#93a1b5;
    --cr-accent:#8b7cff;
    --cr-accent-2:#4cb8ff;
    --cr-radius:20px;
    --cr-radius-sm:14px;
}

/* ---------------------------------------------------------
   0. CRITICAL FIX
   Neutralize the legacy `main { display:grid }` hijack for
   every custom page shell. `main.posts` (the homepage /
   search / developer-tag masonry loop) is intentionally
   excluded because it relies on that grid behaviour and its
   own JS (title-resize.js / masonry sizing).
--------------------------------------------------------- */
main[class]:not(.posts){
    display:block !important;
    grid-template-columns:none !important;
    grid-gap:0 !important;
}

/* ---------------------------------------------------------
   1. Shared hero header (Games archive + Doujin archive)
--------------------------------------------------------- */
.archive-games-page .content-page-hero,
.doujin-catalog-page .doujin-catalog-header{
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:24px !important;
    margin:28px 0 26px !important;
    padding:32px 36px !important;
    background:linear-gradient(135deg,var(--cr-bg-panel),var(--cr-bg-panel-2)) !important;
    border:1px solid var(--cr-line) !important;
    border-radius:var(--cr-radius) !important;
    box-shadow:0 18px 45px rgba(0,0,0,.28) !important;
}

.archive-games-page .content-page-hero .eyebrow,
.doujin-catalog-page .doujin-catalog-heading .eyebrow{
    display:inline-flex !important;
    align-items:center !important;
    gap:7px !important;
    color:#b6a9ff !important;
    font-size:11.5px !important;
    font-weight:900 !important;
    letter-spacing:.14em !important;
    text-transform:uppercase !important;
}

.archive-games-page .content-page-hero h1,
.doujin-catalog-page .doujin-catalog-heading h1{
    margin:9px 0 8px !important;
    color:#fff !important;
    font-size:clamp(28px,3.4vw,42px) !important;
    line-height:1.15 !important;
    font-weight:800 !important;
    background:none !important;
    border:0 !important;
    box-shadow:none !important;
    text-align:left !important;
}

.archive-games-page .content-page-hero p,
.doujin-catalog-page .doujin-catalog-heading p{
    margin:0 !important;
    color:var(--cr-muted) !important;
    font-size:14.5px !important;
    max-width:520px !important;
}

.content-hero-count,
.doujin-catalog-count{
    flex:0 0 auto !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    min-width:108px !important;
    padding:16px 24px !important;
    background:rgba(139,124,255,.09) !important;
    border:1px solid var(--cr-line-strong) !important;
    border-radius:16px !important;
    text-align:center !important;
}

.content-hero-count strong,
.doujin-catalog-count strong{
    color:#fff !important;
    font-size:32px !important;
    line-height:1 !important;
}

.content-hero-count span,
.doujin-catalog-count span{
    margin-top:6px !important;
    color:var(--cr-muted) !important;
    font-size:11.5px !important;
}

/* ---------------------------------------------------------
   2. Toolbar - sort pills + search
--------------------------------------------------------- */
.archive-toolbar,
.doujin-catalog-toolbar{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:16px !important;
    flex-wrap:wrap !important;
    margin:0 0 28px !important;
}

.filter-pill,
.doujin-sort-tabs a{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:10px 18px !important;
    border-radius:11px !important;
    background:rgba(255,255,255,.045) !important;
    border:1px solid var(--cr-line) !important;
    color:#c3cbdb !important;
    font-size:13px !important;
    font-weight:700 !important;
    text-decoration:none !important;
    transition:.2s ease !important;
    white-space:nowrap !important;
}

.filter-pill:hover,
.filter-pill.active,
.doujin-sort-tabs a:hover,
.doujin-sort-tabs a.active{
    background:linear-gradient(135deg,var(--cr-accent),var(--cr-accent-2)) !important;
    border-color:transparent !important;
    color:#fff !important;
    transform:translateY(-1px) !important;
}

.doujin-sort-tabs{
    display:flex !important;
    gap:8px !important;
    flex-wrap:wrap !important;
}

.archive-search,
.doujin-catalog-search{
    display:flex !important;
    align-items:center !important;
    height:44px !important;
    margin:0 !important;
    min-width:260px !important;
}

.archive-search input,
.doujin-catalog-search input{
    flex:1 !important;
    min-width:0 !important;
    height:44px !important;
    border:1px solid var(--cr-line) !important;
    border-right:0 !important;
    border-radius:12px 0 0 12px !important;
    background:var(--cr-bg-panel-2) !important;
    color:#fff !important;
    padding:0 16px !important;
    outline:none !important;
    font-size:13.5px !important;
}

.archive-search input:focus,
.doujin-catalog-search input:focus{
    border-color:var(--cr-line-strong) !important;
}

.archive-search button,
.doujin-catalog-search button{
    width:48px !important;
    height:44px !important;
    border:0 !important;
    border-radius:0 12px 12px 0 !important;
    background:linear-gradient(135deg,var(--cr-accent),var(--cr-accent-2)) !important;
    color:#fff !important;
    cursor:pointer !important;
    flex:0 0 auto !important;
}

/* ---------------------------------------------------------
   3. Grids - responsive, consistent card language
--------------------------------------------------------- */
.posts.games-archive-grid,
.doujin-catalog-grid{
    display:grid !important;
    gap:22px !important;
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
}

/* Games are shown as wide (landscape) cards - fewer, bigger
   columns so each card reads as a horizontal banner instead of
   a tall/narrow poster. */
.posts.games-archive-grid{
    grid-template-columns:repeat(auto-fill,minmax(300px,1fr)) !important;
    gap:24px !important;
}

/* Doujin covers stay tall/portrait (like a book cover), so they
   keep a narrower column basis. */
.doujin-catalog-grid{
    grid-template-columns:repeat(auto-fill,minmax(180px,1fr)) !important;
    gap:26px 18px !important;
}

/* ---- Game cards ---- */
.games-archive-grid article{
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    flex:unset !important;
    margin:0 !important;
    background:var(--cr-bg-panel) !important;
    border:1px solid var(--cr-line) !important;
    border-radius:var(--cr-radius-sm) !important;
    overflow:hidden !important;
    box-shadow:0 10px 26px rgba(0,0,0,.2) !important;
    transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease !important;
}

.games-archive-grid article:hover{
    transform:translateY(-6px) !important;
    border-color:var(--cr-line-strong) !important;
    box-shadow:0 20px 42px rgba(0,0,0,.32) !important;
}

.games-archive-grid .card-image-link{
    display:block !important;
}

.games-archive-grid .featured-image{
    width:100% !important;
    aspect-ratio:16/10 !important;
    height:auto !important;
    background-size:cover !important;
    background-position:center !important;
    position:relative !important;
    border-radius:0 !important;
}

.games-archive-grid .content-type-badge{
    position:absolute !important;
    top:9px !important;
    left:9px !important;
    padding:5px 9px !important;
    border-radius:7px !important;
    background:rgba(9,13,19,.82) !important;
    backdrop-filter:blur(6px) !important;
    color:#bcb2ff !important;
    font-size:10px !important;
    font-weight:900 !important;
    letter-spacing:.05em !important;
}

.games-archive-grid .content{
    background:transparent !important;
    padding:0 !important;
}

.games-archive-grid h3{
    margin:0 !important;
    padding:12px 13px 6px !important;
    color:#fff !important;
    font-size:14px !important;
    font-weight:800 !important;
    line-height:1.4 !important;
    text-align:left !important;
    display:-webkit-box !important;
    -webkit-line-clamp:2 !important;
    -webkit-box-orient:vertical !important;
    overflow:hidden !important;
}

.games-archive-grid .card-views{
    display:flex !important;
    gap:12px !important;
    padding:0 13px 13px !important;
    color:#8b98ab !important;
    font-size:11px !important;
    justify-content:flex-start !important;
}

/* ---- Doujin cards (image first, title beneath) ---- */
.doujin-catalog-card{
    background:transparent !important;
}

.doujin-catalog-cover{
    border-radius:14px !important;
    border:1px solid var(--cr-line) !important;
    box-shadow:0 10px 24px rgba(0,0,0,.2) !important;
    transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease !important;
}

.doujin-catalog-card-link:hover .doujin-catalog-cover{
    transform:translateY(-5px) !important;
    border-color:var(--cr-line-strong) !important;
    box-shadow:0 18px 36px rgba(0,0,0,.3) !important;
}

.doujin-catalog-card-title{
    margin:11px 2px 0 !important;
    color:#eef1f7 !important;
    font-size:13.5px !important;
    font-weight:700 !important;
    text-align:left !important;
}

/* ---------------------------------------------------------
   4. Pagination - unified pill style
--------------------------------------------------------- */
.archive-pagination{
    margin:44px 0 20px !important;
    text-align:center !important;
}

.archive-pagination .page-numbers{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-width:40px !important;
    height:40px !important;
    margin:3px !important;
    padding:0 12px !important;
    border-radius:11px !important;
    background:rgba(255,255,255,.05) !important;
    border:1px solid var(--cr-line) !important;
    color:#dbe2ec !important;
    text-decoration:none !important;
    font-weight:700 !important;
    transition:.2s ease !important;
}

.archive-pagination .page-numbers:hover,
.archive-pagination .page-numbers.current{
    background:linear-gradient(135deg,var(--cr-accent),var(--cr-accent-2)) !important;
    border-color:transparent !important;
    color:#fff !important;
}

/* ---------------------------------------------------------
   5. Empty state
--------------------------------------------------------- */
.archive-games-page .empty-content-state,
.doujin-catalog-page .empty-content-state{
    padding:70px 24px !important;
    text-align:center !important;
    background:var(--cr-bg-panel) !important;
    border:1px solid var(--cr-line) !important;
    border-radius:var(--cr-radius) !important;
    color:var(--cr-muted) !important;
}

.archive-games-page .empty-content-state i,
.doujin-catalog-page .empty-content-state i{
    font-size:44px !important;
    margin-bottom:14px !important;
    color:var(--cr-accent) !important;
    display:block !important;
}

.archive-games-page .empty-content-state h2,
.doujin-catalog-page .empty-content-state h2{
    margin:0 0 6px !important;
    color:#fff !important;
}

/* ---------------------------------------------------------
   6. Responsive
--------------------------------------------------------- */
@media(max-width:900px){
    .archive-games-page .content-page-hero,
    .doujin-catalog-page .doujin-catalog-header{
        flex-direction:column !important;
        align-items:flex-start !important;
        padding:24px !important;
    }

    .content-hero-count,
    .doujin-catalog-count{
        align-self:flex-start !important;
    }

    .posts.games-archive-grid{
        grid-template-columns:repeat(auto-fill,minmax(240px,1fr)) !important;
        gap:16px !important;
    }

    .doujin-catalog-grid{
        grid-template-columns:repeat(auto-fill,minmax(140px,1fr)) !important;
        gap:18px 12px !important;
    }
}

@media(max-width:600px){
    .archive-toolbar,
    .doujin-catalog-toolbar{
        flex-direction:column !important;
        align-items:stretch !important;
    }

    .doujin-sort-tabs{
        justify-content:center !important;
    }

    .archive-search,
    .doujin-catalog-search{
        width:100% !important;
        min-width:0 !important;
    }

    .archive-games-page .content-page-hero h1,
    .doujin-catalog-page .doujin-catalog-heading h1{
        font-size:26px !important;
    }
}

@media(max-width:420px){
    .posts.games-archive-grid{
        grid-template-columns:1fr !important;
    }

    .doujin-catalog-grid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }
}

/* ---------------------------------------------------------
   7. Homepage "กำลังได้รับความนิยม" (Popular) section
--------------------------------------------------------- */
.popular-split{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:20px !important;
    width:100% !important;
    margin:0 !important;
}

.popular-panel{
    background:linear-gradient(160deg,var(--cr-bg-panel),var(--cr-bg-panel-2)) !important;
    border:1px solid var(--cr-line) !important;
    border-radius:var(--cr-radius) !important;
    padding:20px !important;
    box-shadow:0 14px 32px rgba(0,0,0,.2) !important;
}

.popular-panel-title{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    padding:4px 6px 15px !important;
    margin:0 0 6px !important;
    color:#fff !important;
    font-weight:800 !important;
    font-size:15px !important;
    border-bottom:1px solid var(--cr-line) !important;
}

.popular-panel-title a{
    color:#b6a9ff !important;
    font-size:12px !important;
    font-weight:700 !important;
    text-decoration:none !important;
    transition:.2s ease !important;
}

.popular-panel-title a:hover{
    color:#fff !important;
}

.popular-row{
    display:flex !important;
    align-items:center !important;
    gap:14px !important;
    padding:11px 8px !important;
    border-radius:13px !important;
    text-decoration:none !important;
    color:#fff !important;
    transition:.2s ease !important;
}

.popular-row:hover{
    background:rgba(139,124,255,.1) !important;
    transform:translateX(3px) !important;
}

.popular-row .rank{
    width:24px !important;
    flex:0 0 24px !important;
    text-align:center !important;
    font-size:15px !important;
    font-weight:900 !important;
    color:#6f7c90 !important;
}

.popular-row img{
    width:46px !important;
    height:58px !important;
    object-fit:cover !important;
    border-radius:9px !important;
    flex:0 0 auto !important;
    background:var(--cr-bg-panel-2) !important;
}

.popular-name{
    flex:1 !important;
    min-width:0 !important;
    font-size:13.5px !important;
    font-weight:700 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
}

.popular-name small{
    display:block !important;
    margin-top:3px !important;
    color:var(--cr-muted) !important;
    font-size:11px !important;
    font-weight:500 !important;
}

.popular-row>i{
    color:#596678 !important;
    font-size:12px !important;
    flex:0 0 auto !important;
}

.popular-empty{
    padding:30px !important;
    text-align:center !important;
    color:var(--cr-muted) !important;
}

@media(max-width:800px){
    .popular-split{
        grid-template-columns:1fr !important;
    }
}

/* ---------------------------------------------------------
   8. Homepage community CTA polish
--------------------------------------------------------- */
.home-community{
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:20px !important;
    margin:55px 0 40px !important;
    padding:30px 34px !important;
    border:1px solid var(--cr-line-strong) !important;
    background:linear-gradient(120deg,rgba(139,124,255,.16),rgba(19,25,37,.92)) !important;
    border-radius:var(--cr-radius) !important;
}

.home-community h2{
    margin:5px 0 !important;
    color:#fff !important;
}

.home-community p{
    margin:0 !important;
    color:var(--cr-muted) !important;
}

.home-community-actions{
    display:flex !important;
    gap:10px !important;
    flex-wrap:wrap !important;
}

.home-community-actions a{
    display:inline-flex !important;
    align-items:center !important;
    gap:9px !important;
    padding:12px 18px !important;
    border-radius:13px !important;
    text-decoration:none !important;
    font-weight:800 !important;
    font-size:13.5px !important;
    transition:.2s ease !important;
    border:1px solid var(--cr-line) !important;
    background:rgba(255,255,255,.05) !important;
    color:#fff !important;
}

.home-community-actions a:last-child{
    background:#5865f2 !important;
    border-color:#5865f2 !important;
}

.home-community-actions a:hover{
    transform:translateY(-2px) !important;
}

/* ---------------------------------------------------------
   9. Doujin single page - category / artist / tag pills
   (fixes look nicer now that the tag term-object bug in
   single-doujin.php has been corrected and the pills actually
   contain text again)
--------------------------------------------------------- */
.doujin-info-meta-row{
    display:flex !important;
    align-items:flex-start !important;
    gap:12px !important;
    flex-wrap:wrap !important;
}

.doujin-info-meta-row strong{
    flex:0 0 auto !important;
    padding-top:7px !important;
    color:#8f9bae !important;
    font-size:12.5px !important;
    font-weight:700 !important;
}

.doujin-info-terms{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:7px !important;
}

.doujin-info-terms a{
    display:inline-flex !important;
    align-items:center !important;
    padding:7px 12px !important;
    border-radius:9px !important;
    background:rgba(139,124,255,.1) !important;
    border:1px solid var(--cr-line) !important;
    color:#dce5f0 !important;
    font-size:12px !important;
    font-weight:600 !important;
    text-decoration:none !important;
    transition:.18s ease !important;
}

.doujin-info-terms a:hover{
    background:linear-gradient(135deg,var(--cr-accent),var(--cr-accent-2)) !important;
    border-color:transparent !important;
    color:#fff !important;
}

/* ---------------------------------------------------------
   10. [FIX] Homepage width - the hero ("Thai Games & Doujin
   Translation") and other homepage sections use ".content-shell"
   which is supposed to cap width at 1400px and center itself, but
   on the live site it was rendering edge-to-edge with no side
   margin at all - something later in style.css's very long,
   heavily-duplicated ruleset was overriding its width. Forcing it
   here with !important guarantees a contained, centered layout
   regardless of what conflicting rule exists upstream, and also
   narrows it slightly further per feedback that 1400px still felt
   too wide.
--------------------------------------------------------- */
.content-shell{
    width:min(1320px, calc(100% - 48px)) !important;
    max-width:1320px !important;
    margin-left:auto !important;
    margin-right:auto !important;
}

/* ---------------------------------------------------------
   11. [FIX] Homepage "เกมล่าสุด" card size
   [round 12] The card height (200px) is correct now, but with
   only a couple of games the minmax(200px,1fr) column basis made
   each card look too narrow next to all the empty grid space -
   widening the column basis while keeping the height untouched.
--------------------------------------------------------- */
.home-game-grid{
    grid-template-columns:repeat(auto-fill,minmax(260px,1fr)) !important;
    gap:16px !important;
}

.home-game-grid .featured-image{
    height:200px !important;
}

@media(max-width:600px){
    .home-game-grid{
        grid-template-columns:repeat(auto-fill,minmax(170px,1fr)) !important;
        gap:10px !important;
    }

    .home-game-grid .featured-image{
        height:150px !important;
    }
}

/* ---------------------------------------------------------
   12. [FIX] Ad slot for listing pages that previously had none
   (Doujin catalog, Artists/Circles, Doujin Categories, Doujin
   Tag, Developer). Matches the general card sizing/spacing of
   whichever grid it gets appended into.
--------------------------------------------------------- */
.lewdova-inline-ad-card{
    position:relative;
    min-height:220px;
    width:100%;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.09);
    background:#0e151f;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

.lewdova-inline-ad-label{
    position:absolute;
    top:8px;
    left:8px;
    padding:3px 9px;
    background:rgba(255,255,255,.08);
    border-radius:6px;
    color:#8ea0b5;
    font-size:10px;
    font-weight:800;
    letter-spacing:.06em;
    z-index:2;
}