/* =============================================
   Ver.1378 - Unified public work thumbnail ratio and badges
   - Work thumbnails now use representative-image portrait ratio 1429x1944.
   - Apply one badge color contract across home, work lists, search, my page,
     actor detail filmography, and work-detail recommendation thumbnails.
   - References: MDN aspect-ratio, object-fit, object-position, grid/media queries.
   ============================================= */
:root{
  --javyun-work-thumb-ratio:1429 / 1944;
  --javyun-work-thumb-bg:transparent;
  --javyun-badge-vr-bg:linear-gradient(180deg, rgba(37,99,235,.97), rgba(29,78,216,.94));
  --javyun-badge-jav-bg:linear-gradient(180deg, rgba(147,51,234,.97), rgba(109,40,217,.94));
  --javyun-badge-subtitle-bg:linear-gradient(180deg, rgba(22,163,74,.96), rgba(21,128,61,.94));
  --javyun-badge-fg:#fff;
  --javyun-badge-border:rgba(255,255,255,.38);
  --javyun-badge-shadow:0 5px 14px rgba(0,0,0,.28);
}

/* All work-image thumbnail frames: representative-image portrait frame. */
html body :is(
  .home .home-worktile__img,
  .work-list-page .works-category-grid .work-thumb,
  .maker-detail-page .works-category-grid .work-thumb,
  .search-page .works-grid.search-results-grid .work-thumb,
  .my-grid.works .my-thumb,
  .actor-detail-page .actor-film-thumb,
  .wd-best-thumb,
  .wd-sim-thumb,
  .wd-related-thumb
){
  position:relative !important;
  display:block !important;
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  aspect-ratio:var(--javyun-work-thumb-ratio) !important;
  overflow:hidden !important;
  line-height:0 !important;
  background:var(--javyun-work-thumb-bg) !important;
  background-color:var(--javyun-work-thumb-bg) !important;
}

html body :is(
  .home .home-worktile__img > img,
  .work-list-page .works-category-grid .work-thumb > img,
  .work-list-page .works-category-grid .work-thumb > .work-cover,
  .maker-detail-page .works-category-grid .work-thumb > img,
  .maker-detail-page .works-category-grid .work-thumb > .work-cover,
  .search-page .works-grid.search-results-grid .work-thumb > img,
  .search-page .works-grid.search-results-grid .work-thumb > .work-cover,
  .my-grid.works .my-thumb > img,
  .actor-detail-page .actor-film-thumb > img,
  .wd-best-thumb > img,
  .wd-sim-thumb > img,
  .wd-related-thumb > img
){
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  aspect-ratio:auto !important;
  object-fit:cover !important;
  object-position:center top !important;
  background:transparent !important;
  background-color:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  transform:none !important;
}

/* Smart-trim may still run on search/actor detail. Final visual frame remains portrait. */
html body :is(
  .search-page .works-grid.search-results-grid .work-thumb.is-wd-matte-trimmed,
  .actor-detail-page .actor-film-thumb.is-wd-matte-trimmed
){
  aspect-ratio:var(--javyun-work-thumb-ratio) !important;
  background:transparent !important;
  background-color:transparent !important;
}
html body :is(
  .search-page .works-grid.search-results-grid .work-thumb.is-wd-matte-trimmed > img.is-wd-matte-trimmed-img,
  .actor-detail-page .actor-film-thumb.is-wd-matte-trimmed > img.is-wd-matte-trimmed-img
){
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  aspect-ratio:auto !important;
  object-fit:cover !important;
  object-position:center top !important;
  transform:none !important;
  position:static !important;
}

/* Work card lists keep the flat thumbnail-first look, but use portrait thumbnails. */
:is(.work-list-page, .maker-detail-page) .works-grid.works-category-grid{
  grid-template-columns:repeat(6, minmax(0, 1fr)) !important;
  gap:24px 18px !important;
}
@media (max-width:1500px){
  :is(.work-list-page, .maker-detail-page) .works-grid.works-category-grid{
    grid-template-columns:repeat(5, minmax(0, 1fr)) !important;
  }
}
@media (max-width:1180px){
  :is(.work-list-page, .maker-detail-page) .works-grid.works-category-grid{
    grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  }
}
@media (max-width:900px){
  :is(.work-list-page, .maker-detail-page) .works-grid.works-category-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width:760px){
  :is(.work-list-page, .maker-detail-page) .works-grid.works-category-grid{
    grid-template-columns:1fr !important;
  }
}

/* Home PC grid can now hold portrait thumbs without becoming too sparse. */
@media (min-width:1101px){
  html body.page-home .home .home-card--latest .home-workgrid,
  html body.page-home .home .home-card--recommended .home-workgrid{
    grid-template-columns:repeat(6, minmax(0, 1fr)) !important;
    gap:24px 20px !important;
  }
}
@media (min-width:761px) and (max-width:1100px){
  html body.page-home .home .home-card--latest .home-workgrid,
  html body.page-home .home .home-card--recommended .home-workgrid{
    grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
    gap:22px 16px !important;
  }
}

/* Unified badge component: existing work-badge + home badges + small thumb badges. */
html body :is(.work-badge, .home-worktile__tag, .home-worktile__subtitle, .work-thumb-badge){
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:26px !important;
  padding:5px 9px !important;
  border-radius:999px !important;
  font-size:11px !important;
  font-weight:900 !important;
  line-height:1 !important;
  letter-spacing:.01em !important;
  color:var(--javyun-badge-fg) !important;
  border:1px solid var(--javyun-badge-border) !important;
  box-shadow:var(--javyun-badge-shadow) !important;
  text-shadow:0 1px 1px rgba(0,0,0,.35) !important;
  backdrop-filter:blur(5px) saturate(1.12) !important;
  -webkit-backdrop-filter:blur(5px) saturate(1.12) !important;
  white-space:nowrap !important;
  z-index:5 !important;
}

html body :is(.home-worktile__tag, .work-thumb-badge){
  position:absolute !important;
  top:8px !important;
  left:8px !important;
}
html body :is(.home-worktile__subtitle, .work-thumb-badge--subtitle){
  position:absolute !important;
  top:8px !important;
  right:8px !important;
  left:auto !important;
}

html body :is(.work-badge--type, .work-badge--vr, .work-thumb-badge--vr, .home-worktile__tag--vr){
  --work-badge-bg:var(--javyun-badge-vr-bg);
  --work-badge-fg:#fff;
  --work-badge-border:var(--javyun-badge-border);
  background:var(--javyun-badge-vr-bg) !important;
  color:#fff !important;
  border-color:var(--javyun-badge-border) !important;
}
html body :is(.work-badge--jav, .work-thumb-badge--jav, .home-worktile__tag--jav){
  --work-badge-bg:var(--javyun-badge-jav-bg);
  --work-badge-fg:#fff;
  --work-badge-border:var(--javyun-badge-border);
  background:var(--javyun-badge-jav-bg) !important;
  color:#fff !important;
  border-color:var(--javyun-badge-border) !important;
}
html body :is(.work-badge--subtitle, .home-worktile__subtitle, .work-thumb-badge--subtitle){
  --work-badge-bg:var(--javyun-badge-subtitle-bg);
  --work-badge-fg:#fff;
  --work-badge-border:var(--javyun-badge-border);
  background:var(--javyun-badge-subtitle-bg) !important;
  color:#fff !important;
  border-color:var(--javyun-badge-border) !important;
}

/* Work-grid stack holds VR/JAV and release/state badges together on the left. */
:is(.work-list-page, .search-page, .maker-detail-page) .work-badge-stack{
  top:8px !important;
  left:8px !important;
  right:auto !important;
  gap:5px !important;
  max-width:calc(100% - 68px) !important;
}
:is(.work-list-page, .search-page, .maker-detail-page) .work-badge--subtitle{
  top:8px !important;
  right:8px !important;
}

@media (max-width:640px){
  html body :is(.work-badge, .home-worktile__tag, .home-worktile__subtitle, .work-thumb-badge){
    min-height:24px !important;
    padding:5px 8px !important;
    font-size:10.5px !important;
  }
}