/* =========================================================
   kp_persons.css — kinogo2021
   Palette: #000 bg · #5a2a2a accent · #dd4b39 link hover
   Font: 12px Tahoma, Geneva, sans-serif
   ========================================================= */

/* ---------------------------------------------------------
   PERSONS SECTION wrapper
   --------------------------------------------------------- */

.persons-section {
    margin: 14px 0;
    clear: both;
}

.persons-block {
    margin-bottom: 12px;
}

.persons-block--crew {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #2e2e2e;
}

.persons-crew-row {
    margin-bottom: 10px;
}

.persons-crew-row:last-child {
    margin-bottom: 0;
}

/* ---------------------------------------------------------
   LABEL  "В главных ролях:", "Режиссёр:" etc.
   --------------------------------------------------------- */

.persons-label {
    display: inline-block;
    margin-bottom: 8px;
    padding: 3px 10px;
    border-radius: 999px;
    background: #3f3f3f;
    border: 1px solid #555;
    color: #d0d0d0;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* ---------------------------------------------------------
   HORIZONTAL SCROLL ROW
   --------------------------------------------------------- */

.persons-list {
    display: flex !important;
    flex-wrap: nowrap;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: #555 transparent;
}

.persons-list::-webkit-scrollbar        { height: 4px; }
.persons-list::-webkit-scrollbar-track  { background: transparent; }
.persons-list::-webkit-scrollbar-thumb  { background: #555; border-radius: 4px; }

.persons-list--crew {
    gap: 8px;
    scroll-snap-type: x proximity;
}

/* ---------------------------------------------------------
   CAST CARD  — <a class="cast-item">
   --------------------------------------------------------- */

.cast-item {
    flex: 0 0 auto;
    display: block;
    width: 80px;
    text-align: center;
    text-decoration: none !important;
    transition: transform .2s ease;
    cursor: pointer;
    scroll-snap-align: start;
}

.cast-item:hover {
    transform: translateY(-3px);
    color: inherit;
}

/* Portrait rectangle */
.cast-poster {
    width: 70px;
    height: 94px;
    margin: 0 auto 6px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #484848;
    background: #1f1f1f;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.cast-item:hover .cast-poster {
    border-color: #8b4b4b;
    box-shadow: 0 4px 16px rgba(221,75,57,.25);
}

.cast-poster img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform .25s ease;
}

.cast-item:hover .cast-poster img {
    transform: scale(1.07);
}

/* Name */
.cast-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 10px;
    font-weight: 700;
    color: #d8d8d8;
    line-height: 1.35;
    max-width: 80px;
    min-height: 27px;
}

.cast-item:hover .cast-name {
    color: #dd4b39;
}

/* Character (role) */
.cast-char {
    display: block;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 9px;
    color: #777;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 80px;
    margin-top: 2px;
}

/* Crew cards — slightly smaller */
.persons-list--crew .cast-item   { width: 64px; scroll-snap-align: start; }
.persons-list--crew .cast-poster { width: 56px; height: 75px; }
.persons-list--crew .cast-name   { font-size: 9px; max-width: 64px; min-height: 0; }


/* =========================================================
   PERSON PAGE v3.0 — .fpageactors + .fp-* blocks
   Palette: kinogo2021 native (#000/#2b2b2b/#585858)
   Accent: #dd4b39 red · #e8a838 gold · #5a2a2a burgundy
   Font: Tahoma, Geneva, sans-serif
   ========================================================= */

.fpageactors {
    --fp-bg:       #1a1a1a;
    --fp-surface:  #242424;
    --fp-card:     #2b2b2b;
    --fp-border:   #3a3a3a;
    --fp-groove-t: #111;
    --fp-groove-s: #404040;
    --fp-text:     #d8d8d8;
    --fp-heading:  #fff;
    --fp-muted:    #999;
    --fp-accent:   #dd4b39;
    --fp-burgundy: #5a2a2a;
    --fp-gold:     #e8a838;
    --fp-ff:       Tahoma, Geneva, sans-serif;
    padding: 0 0 20px;
}

/* ---------------------------------------------------------
   SECTION GROOVE DIVIDERS — единый ритм со .short
   --------------------------------------------------------- */

.fp-best,
.fp-facts,
.fp-filmography {
    margin-top: 20px;
    padding-top: 14px;
    border-top: 1px solid var(--fp-groove-t);
    box-shadow: inset 0 1px var(--fp-groove-s);
}

/* ---------------------------------------------------------
   HERO: CSS grid — photo + info
   --------------------------------------------------------- */

.fp-hero {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 18px;
    padding: 16px 0;
    border: none;
    border-top: 1px solid var(--fp-groove-t);
    box-shadow: inset 0 1px var(--fp-groove-s);
}

.fp-hero-photo img {
    display: block;
    width: 200px;
    height: auto;
    border-radius: 4px;
    border: 1px solid #484848;
    background: #1f1f1f;
}

.fp-profession {
    display: inline-block;
    margin-bottom: 6px;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--fp-burgundy);
    color: #e0c0c0;
    font: 700 10px/1.4 var(--fp-ff);
    text-transform: uppercase;
    letter-spacing: .05em;
}

.fp-name {
    font: 700 20px/1.2 var(--fp-ff);
    color: var(--fp-heading);
    text-shadow: 1px 1px #000;
    margin: 0 0 4px;
}

.fp-hero-info {
    min-width: 0;
}

.fp-name-en {
    font-size: 12px;
    color: #777;
    margin-bottom: 10px;
}

/* ---------------------------------------------------------
   META  <dl>
   --------------------------------------------------------- */

.fp-meta {
    margin: 0;
    font-size: 12px;
    color: var(--fp-text);
}

.fp-meta-row {
    display: flex;
    gap: 6px;
    padding: 3px 0;
    border-bottom: 1px solid #2a2a2a;
}

.fp-meta-row:last-child { border-bottom: 0; }

.fp-meta-row dt {
    flex: 0 0 auto;
    min-width: 110px;
    color: var(--fp-muted);
    font-weight: 700;
    font-size: 12px;
}

.fp-meta-row dd {
    flex: 1;
    margin: 0;
    color: var(--fp-text);
}

.fp-meta-note {
    color: var(--fp-muted);
    font-size: 11px;
    margin-left: 4px;
}

/* ---------------------------------------------------------
   SECTION TITLE (reusable)
   --------------------------------------------------------- */

.fp-section-title {
    font: 700 15px/1.3 var(--fp-ff);
    color: var(--fp-heading);
    text-shadow: 1px 1px #000;
    margin: 0 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--fp-groove-t);
    box-shadow: 0 1px 0 var(--fp-groove-s);
}

/* ---------------------------------------------------------
   BEST MOVIES — numbered grid (no posters)
   --------------------------------------------------------- */

.fp-best-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.fp-best-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--fp-surface);
    border: 1px solid var(--fp-border);
    border-radius: 3px;
    transition: border-color .15s, background .15s;
}

.fp-best-item:hover {
    background: var(--fp-card);
    border-color: var(--fp-burgundy);
}

.fp-best-num {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    background: var(--fp-burgundy);
    color: #e0c0c0;
    font: 700 11px/1 var(--fp-ff);
}

.fp-best-body {
    flex: 1;
    min-width: 0;
}

.fp-best-name {
    display: block;
    font: 700 12px/1.3 var(--fp-ff);
    color: #f0f0f0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-decoration: none;
}

a.fp-best-name:hover { color: var(--fp-accent); }

.fp-best-year {
    font-size: 10px;
    color: var(--fp-muted);
}

.fp-best-rating {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 5px;
    border-radius: 3px;
    background: rgba(255,255,255,.06);
    font: 700 10px/1.4 var(--fp-ff);
}

/* Gold top-3 числовые бэджи */
.fp-best-item:nth-child(-n+3) .fp-best-num {
    background: linear-gradient(135deg, #e8a838, #d49520);
    color: #1a1a1a;
}

/* ---------------------------------------------------------
   BIO — collapsible
   --------------------------------------------------------- */

.fp-bio {
    margin-top: 20px;
    padding: 10px 15px;
    background: #222; /* намеренно: зеркало .st-desc из fullstory.tpl */
    border: 1px solid var(--fp-border);
    border-radius: 0;
}

.fp-bio-cb { display: none; }

.fp-bio-body {
    max-height: 120px;
    overflow: hidden;
    transition: max-height .35s ease;
}

.fp-bio-cb:checked ~ .fp-bio-body {
    max-height: 4000px;
}

.fp-bio-body p {
    margin: 0 0 8px;
    font-size: 12px;
    line-height: 1.7;
    color: #d0d0d0;
}

.fp-bio-body p:last-child { margin-bottom: 0; }

.fp-bio-toggle {
    display: inline-block;
    margin-top: 8px;
    padding: 4px 14px;
    border-radius: 3px;
    background: var(--fp-surface);
    border: 1px solid var(--fp-border);
    color: var(--fp-accent);
    font: 700 11px/1.4 var(--fp-ff);
    cursor: pointer;
    transition: background .15s;
}

.fp-bio-toggle:hover { background: var(--fp-card); }

.fp-bio-more { display: inline; }
.fp-bio-less  { display: none; }
.fp-bio-cb:checked ~ .fp-bio-toggle .fp-bio-more { display: none; }
.fp-bio-cb:checked ~ .fp-bio-toggle .fp-bio-less  { display: inline; }

/* ---------------------------------------------------------
   FACTS
   --------------------------------------------------------- */

.fp-facts-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.fp-facts-list li {
    position: relative;
    padding: 8px 12px 8px 22px;
    margin-bottom: 2px;
    background: var(--fp-card);
    border: 1px solid var(--fp-border);
    border-radius: 3px;
    font-size: 11px;
    color: #bbb;
    line-height: 1.55;
}

.fp-facts-list li:last-child { margin-bottom: 0; }

.fp-facts-list li::before {
    content: '';
    position: absolute;
    left: 9px;
    top: 14px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--fp-burgundy);
}

/* ---------------------------------------------------------
   FILMOGRAPHY — CSS radio tabs
   --------------------------------------------------------- */

.fp-tabs { position: relative; }

/* Hide radios */
.fp-tab-r { position: absolute; opacity: 0; pointer-events: none; }

.fp-tab-nav {
    display: flex;
    gap: 0;
    margin-bottom: 0;
    border-bottom: 1px solid var(--fp-groove-t);
    box-shadow: 0 1px 0 var(--fp-groove-s);
}

.fp-tab-lbl {
    padding: 7px 16px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    font: 700 11px/1.3 var(--fp-ff);
    color: var(--fp-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    cursor: pointer;
    background: var(--fp-bg);
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    transition: background .15s, color .15s;
    user-select: none;
}

.fp-tab-lbl:hover {
    color: var(--fp-text);
    background: var(--fp-surface);
}

.fp-tab-lbl em {
    font-style: normal;
    margin-left: 4px;
    color: var(--fp-burgundy);
}

/* Active tab — groove-bottom connect + gold underline */
#fp-tab-film:checked    ~ .fp-tab-nav [for="fp-tab-film"],
#fp-tab-series:checked  ~ .fp-tab-nav [for="fp-tab-series"],
#fp-tab-cartoon:checked ~ .fp-tab-nav [for="fp-tab-cartoon"] {
    background: var(--fp-surface);
    color: var(--fp-heading);
    border-color: var(--fp-border);
    border-bottom-color: var(--fp-surface);
    box-shadow: inset 0 2px 0 var(--fp-gold);
    position: relative;
    z-index: 1;
    margin-bottom: -1px;
}

/* Panels */
.fp-tab-panel { display: none; }

#fp-tab-film:checked    ~ .fp-tab-content #fp-panel-film,
#fp-tab-series:checked  ~ .fp-tab-content #fp-panel-series,
#fp-tab-cartoon:checked ~ .fp-tab-content #fp-panel-cartoon {
    display: block;
}

.fp-tab-content {
    background: var(--fp-surface);
    border: 1px solid var(--fp-border);
    border-top: none;
    border-radius: 0 0 4px 4px;
    padding: 2px 0;
}

/* ---------------------------------------------------------
   FILMOGRAPHY TABLE
   --------------------------------------------------------- */

.fp-filmlist {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.fp-filmlist thead th {
    padding: 6px 10px;
    font: 700 10px/1.3 var(--fp-ff);
    color: var(--fp-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    text-align: left;
    background: var(--fp-bg);
    border-bottom: 1px solid var(--fp-groove-t);
    box-shadow: 0 1px 0 var(--fp-groove-s);
}

.fp-fl-row {
    transition: background .12s;
}

.fp-fl-row:nth-child(even) {
    background: rgba(255,255,255,.02);
}

.fp-fl-row:hover {
    background: rgba(90,42,42,.12);
}

.fp-fl-row td {
    padding: 5px 10px;
    border-bottom: 1px solid #222;
    vertical-align: middle;
}

.fp-fl-year {
    width: 44px;
    font-size: 11px;
    color: var(--fp-muted);
    white-space: nowrap;
}

.fp-fl-title {
    font-weight: 700;
    color: #f0f0f0;
}

.fp-fl-title a {
    color: #f0f0f0;
    text-decoration: none;
}

.fp-fl-title a:hover { color: var(--fp-accent); }

.fp-fl-role {
    font-size: 11px;
    color: #777;
    font-style: italic;
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fp-fl-r {
    width: 46px;
    text-align: center;
    font: 700 11px/1 var(--fp-ff);
    white-space: nowrap;
}

.fp-r--hi  { color: #83bf45; }
.fp-r--mid { color: var(--fp-gold); }
.fp-r--lo  { color: var(--fp-accent); }

/* ---------------------------------------------------------
   PERSON POPUP
   --------------------------------------------------------- */

.cast-item--popup { cursor: pointer; }
.cast-item--popup:hover .cast-poster { opacity: .85; }
.cast-item--loading { opacity: .6; pointer-events: none; }

.person-popup-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    z-index: 1200;
}
.person-popup-overlay--visible { display: block; }

.person-popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 1201;
    background: #1a1a2e;
    border: 1px solid #333;
    border-radius: 8px;
    width: min(480px, calc(100vw - 24px));
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0,0,0,.6);
}
.person-popup--visible { display: block; }

.person-popup__close {
    position: absolute;
    top: 8px;
    right: 10px;
    background: none;
    border: none;
    color: #aaa;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 6px;
    z-index: 1;
}
.person-popup__close:hover { color: #fff; }

.person-popup__body {
    display: flex;
    gap: 14px;
    padding: 16px;
}

.person-popup__photo-wrap { flex-shrink: 0; }
.person-popup__photo {
    width: 90px;
    height: 135px;
    object-fit: cover;
    border-radius: 4px;
    display: block;
    transition: transform .2s;
}
.person-popup__photo--zoomed {
    width: 160px;
    height: 240px;
    cursor: zoom-out;
}

.person-popup__info { flex: 1; min-width: 0; }
.person-popup__name {
    font-size: 15px;
    font-weight: bold;
    color: #fff;
    margin-bottom: 2px;
}
.person-popup__name-en { font-size: 12px; color: #888; margin-bottom: 6px; }
.person-popup__meta { font-size: 12px; color: #bbb; margin-bottom: 2px; }
.person-popup__bio {
    font-size: 12px;
    color: #ccc;
    line-height: 1.5;
    margin: 8px 0 6px;
}
.person-popup__facts {
    font-size: 11px;
    color: #aaa;
    padding-left: 14px;
    margin: 4px 0;
}
.person-popup__facts li { margin-bottom: 2px; }
.person-popup__best-label { font-size: 12px; color: #999; margin: 8px 0 3px; font-weight: bold; }
.person-popup__best {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 12px;
}
.person-popup__best li { margin-bottom: 3px; }
.person-popup__best a { color: #dd4b39; text-decoration: none; }
.person-popup__best a:hover { text-decoration: underline; }

@media (max-width: 480px) {
    .person-popup__body { flex-direction: column; }
    .person-popup__photo { width: 80px; height: 120px; }
}

/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 600px) {
    .cast-item   { width: 54px; }
    .cast-poster { width: 54px; height: 72px; }
    .cast-name   { max-width: 54px; }

    .fp-hero {
        grid-template-columns: 126px minmax(0, 1fr);
        gap: 12px;
        align-items: start;
    }
    .fp-hero-photo { text-align: left; }
    .fp-hero-photo img { width: 126px; }
    .fp-profession { margin-bottom: 7px; padding: 2px 8px; font-size: 9px; line-height: 1.35; }
    .fp-name { font-size: 19px; line-height: 1.15; margin-bottom: 5px; }
    .fp-name-en { font-size: 11px; margin-bottom: 8px; }
    .fp-meta { font-size: 12px; }
    .fp-meta-row { padding: 4px 0; }

    .fp-meta-row { flex-direction: column; gap: 1px; }
    .fp-meta-row dt { min-width: 0; }

    .fp-best-grid { grid-template-columns: 1fr; }

    .fp-tab-lbl { padding: 7px 10px; font-size: 10px; }

    .fp-fl-role { display: none; }
    .fp-filmlist thead th:nth-child(3) { display: none; }
}

@media (max-width: 360px) {
    .fp-hero { grid-template-columns: 112px minmax(0, 1fr); gap: 10px; }
    .fp-hero-photo img { width: 112px; }
    .fp-name { font-size: 18px; }
}

@media (max-width: 480px) {
    .fp-best-item { padding: 6px 10px; }
    .fp-filmlist { font-size: 11px; }
    .fp-fl-year { width: 36px; font-size: 10px; }
    .fp-fl-r { width: 36px; font-size: 10px; }
    .fp-fl-row td { padding: 4px 8px; }
}

/* Shared static pages and header actions */
.quick-actions{position:relative;z-index:5;display:inline-flex;align-items:center;gap:8px;flex:0 0 auto}
.quick-action{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;min-width:38px;border-radius:8px;color:inherit;text-decoration:none;background-color:rgba(128,128,128,.14);background-repeat:no-repeat;background-position:center;background-size:18px 18px;border:1px solid rgba(128,128,128,.22);box-sizing:border-box;transition:background-color .18s ease,border-color .18s ease,transform .18s ease,opacity .18s ease;cursor:pointer;overflow:hidden}
.quick-action:hover{background-color:rgba(128,128,128,.24);border-color:rgba(128,128,128,.38);transform:translateY(-1px)}
.quick-action--random{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23ff6600' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='3'/%3E%3Ccircle cx='8' cy='8' r='1' fill='%23ff6600'/%3E%3Ccircle cx='16' cy='8' r='1' fill='%23ff6600'/%3E%3Ccircle cx='12' cy='12' r='1' fill='%23ff6600'/%3E%3Ccircle cx='8' cy='16' r='1' fill='%23ff6600'/%3E%3Ccircle cx='16' cy='16' r='1' fill='%23ff6600'/%3E%3C/svg%3E")}
.quick-action--history{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%2300a3ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7'/%3E%3Cpath d='M3 4v6h6'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E")}
.quick-action--marks{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23e83e8c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21l-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z'/%3E%3C/svg%3E")}
body.is-static-page .site-cols,body.is-static-page .cols,body.is-static-page .content__cols,body.is-static-page .columns-block,body.is-static-page .main-wrapper{grid-template-columns:minmax(0,1fr)!important}
body.is-static-page .main-col,body.is-static-page #dle-content,body.is-static-page .static-page,body.is-static-page .content__col-main,body.is-static-page .cols__left{width:100%!important;max-width:none!important;flex:1 1 100%!important;margin-left:0!important;margin-right:0!important;overflow:visible!important}
body.is-static-page .sidebar,body.is-static-page aside.sidebar,body.is-static-page .side,body.is-static-page .rightside,body.is-static-page .column-right,body.is-static-page .content__col-side,body.is-static-page .cols__right{display:none!important}
.static-page-card__link{display:flex;flex-direction:column;min-height:100%;color:inherit;text-decoration:none}
@media(max-width:640px){.quick-actions{gap:6px}.quick-action{width:34px;height:34px;min-width:34px}}

/* codex person card visual refresh 2026-06 */
.persons-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--p-text, #f1f1f1);
    font-size: 13px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
}
.persons-label::before {
    content: "";
    display: block;
    width: 3px;
    height: 18px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--p-gold, #e8a838), var(--p-red, #dd4b39));
}
.persons-list {
    gap: 12px;
    padding: 2px 2px 12px;
    scroll-snap-type: x proximity;
}
.persons-list--crew { gap: 10px; }
.persons-section button.cast-item,
.cast-item {
    display: flex;
    flex-direction: column;
    width: 108px;
    min-height: 176px;
    padding: 8px;
    box-sizing: border-box;
    text-align: left;
    color: var(--p-text, #e2e2e2);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.025));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 8px 18px rgba(0,0,0,.24);
    scroll-snap-align: start;
    touch-action: manipulation;
}
.cast-item:hover,
.cast-item:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(232,168,56,.62);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 12px 24px rgba(0,0,0,.34);
    outline: none;
}
.cast-poster {
    width: 100%;
    height: auto;
    aspect-ratio: 200 / 317;
    margin: 0 0 8px;
    border-radius: 7px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.12);
    background: #161616;
}
.cast-poster img,
.cast-photo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}
.cast-name {
    display: -webkit-box;
    max-width: 100%;
    min-height: 31px;
    color: var(--p-text, #f0f0f0);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.28;
    overflow: hidden;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: normal;
}
.cast-char { display: none; }
.persons-list--crew .cast-item { width: 98px; min-height: 164px; }
.persons-list--crew .cast-name { font-size: 11px; }
.persons-list--crew .cast-poster { width: 100%; height: auto; aspect-ratio: 200 / 317; }
.persons-list--crew .cast-photo { width: 100%; height: 100%; }
@media (max-width: 600px) {
    .persons-list { gap: 10px; padding-bottom: 10px; }
    .persons-section button.cast-item,
    .cast-item { width: 92px; min-height: 158px; padding: 7px; }
    .cast-name { min-height: 29px; font-size: 11px; }
    .persons-list--crew .cast-item { width: 88px; min-height: 150px; }
}