/* Keep the full artwork visible and fill the banner on both desktop and mobile,
   as requested on 2026-10-19. Different container ratios intentionally stretch
   the image instead of cropping its edges. Load after the shared styles. */
body.jgdj-home .home-content #hero .hero-art {
  object-fit: fill;
  object-position: center;
}

body.jgdj-home #hero .hero-mobile-pagination { display: none; }

@media (max-width: 760px) {
  body.jgdj-home .home-content #hero {
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  body.jgdj-home .home-content #hero .hero-content,
  body.jgdj-home .home-content #hero .hero-previews,
  body.jgdj-home .home-content #hero .hero-bottom { display: none; }

  body.jgdj-home .home-content #hero .hero-art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  body.jgdj-home .home-content #hero::after {
    background: linear-gradient(0deg, #0006 0%, transparent 35%);
  }

  body.jgdj-home #hero .hero-mobile-pagination {
    position: absolute;
    z-index: 3;
    right: 12px;
    bottom: 4px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
  }

  body.jgdj-home #hero .hero-mobile-pagination button {
    display: grid;
    place-items: center;
    width: 10px;
    height: 32px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
  }

  body.jgdj-home #hero .hero-mobile-pagination button > span {
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: #ffffff70;
    transition: background .18s, width .18s;
  }

  body.jgdj-home #hero .hero-mobile-pagination button[aria-pressed="true"] { width: 28px; }
  body.jgdj-home #hero .hero-mobile-pagination button[aria-pressed="true"] > span {
    width: 23px;
    background: var(--accent);
  }

  body.jgdj-home #hero .hero-mobile-count {
    margin-left: 10px;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    line-height: 32px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-shadow: 0 1px 4px #0008;
  }

  body.jgdj-home #hero .hero-mobile-count b { font-weight: inherit; }

  body.jgdj-home #hero .hero-mobile-pagination button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
    border-radius: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.jgdj-home #hero .hero-mobile-pagination button > span { transition: none; }
}