/* 公式照 carousel in the About WLJ widget (templates/partials/wlj_about_widget.html, static/js/official_portraits.js):
   2:3 pictures stacked in one frame and cross-faded; the theme's sidebar image rules are overridden here. */
.wlj-portraits { position: relative; width: 100%; aspect-ratio: 2 / 3; margin: 0 0 14px; overflow: hidden; border-radius: 8px;
    background: #e5e7eb; outline: none; touch-action: pan-y; user-select: none; }
.wlj-portraits:focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #4ab7cc; }
.wlj-portraits .wlj-portrait { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .8s ease; pointer-events: none; }
.wlj-portraits .wlj-portrait.is-active { opacity: 1; pointer-events: auto; }
.textwidget .wlj-portraits .wlj-portrait img, .wlj-portraits .wlj-portrait img {
    display: block; width: 100% !important; height: 100% !important; max-width: none; margin: 0 !important; border-radius: 0;
    object-fit: cover; }
.wlj-portraits figcaption { position: absolute; left: 10px; bottom: 30px; padding: 2px 8px; border-radius: 999px; background: rgba(0, 0, 0, .45);
    color: #fff; font-size: 12px; line-height: 1.5; letter-spacing: .08em; }
.wlj-portraits .wlj-portraits-nav { position: absolute; top: 50%; z-index: 2; width: 34px; height: 34px; margin: -17px 0 0; padding: 0; border: 0;
    border-radius: 50%; background: rgba(0, 0, 0, .35); color: #fff; font-size: 22px; line-height: 34px; text-align: center; cursor: pointer;
    opacity: .75; transition: opacity .2s, background .2s; }
.wlj-portraits .wlj-portraits-nav:hover, .wlj-portraits .wlj-portraits-nav:focus-visible { opacity: 1; background: rgba(0, 0, 0, .55); }
/* With a mouse, ‹ › show only while it is over the pictures or keyboard focus is in them; touch screens always show them. */
@media (hover: hover) {
    .wlj-portraits .wlj-portraits-nav { opacity: 0; }
    .wlj-portraits:hover .wlj-portraits-nav, .wlj-portraits:focus-visible .wlj-portraits-nav { opacity: .75; }
    .wlj-portraits:has(:focus-visible) .wlj-portraits-nav { opacity: .75; } /* its own rule: a browser without :has drops only this */
    .wlj-portraits .wlj-portraits-nav:hover, .wlj-portraits .wlj-portraits-nav:focus-visible { opacity: 1; }
}
.wlj-portraits .wlj-portraits-nav.is-prev { left: 8px; }
.wlj-portraits .wlj-portraits-nav.is-next { right: 8px; }
.wlj-portraits-dots { position: absolute; right: 0; bottom: 10px; left: 0; z-index: 2; display: flex; justify-content: center; gap: 6px; }
.wlj-portraits .wlj-portraits-dots button { width: 7px; height: 7px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .55);
    box-shadow: 0 0 3px rgba(0, 0, 0, .45); /* still visible on a light photo */
    cursor: pointer; transition: width .2s, background .2s; }
.wlj-portraits .wlj-portraits-dots button[aria-current="true"] { width: 18px; border-radius: 4px; background: #fff; }
@media (prefers-reduced-motion: reduce) {
    .wlj-portraits .wlj-portrait { transition: none; }
}