/* ============================================================================
   Lifehaki — Staff page ("Mayumi Tanaka" design system).
   Desktop layout/spacing/colour live inline in templates/staff/profile.php
   (an exact port of the design). This file only carries what inline styles
   can't: hover/interactive states, tab + filter-pill states, and the mobile
   layout. Scoped to body.lh-ds-staff.
   ========================================================================== */

body.lh-ds-staff { background: #f5f5f9; }
body.lh-ds-staff ::selection { background: #fdc949; color: #15171c; }

/* ── animations ── */
@keyframes ls-fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ── known-for posters ── */
.lh-ds-staff .ls-poster { transition: transform .28s cubic-bezier(.16,1,.3,1); }
.lh-ds-staff .ls-poster:hover { transform: translateY(-8px); }
.lh-ds-staff .ls-poster .ls-poster-img { transition: box-shadow .28s ease; }
.lh-ds-staff .ls-poster:hover .ls-poster-img { box-shadow: 0 22px 44px rgba(21,23,40,.30); }

/* ── tabs (same recipe as the character page) ── */
.lh-ds-staff .ls-tab {
    position: relative; background: none; border: none; cursor: pointer;
    padding: 18px 18px; font-family: 'Urbanist', sans-serif; font-weight: 700;
    font-size: 15px; color: #767d89; transition: color .12s ease; white-space: nowrap;
}
.lh-ds-staff .ls-tab:hover,
.lh-ds-staff .ls-tab.is-active { color: #15171c; }
.lh-ds-staff .ls-tab-ind {
    position: absolute; left: 14px; right: 14px; bottom: 0; height: 3px;
    background: #ca2128; border-radius: 3px 3px 0 0; opacity: 0; transition: opacity .16s ease;
}
.lh-ds-staff .ls-tab.is-active .ls-tab-ind { opacity: 1; }

/* ── panels ── */
.lh-ds-staff .ls-panel { display: none; }
.lh-ds-staff .ls-panel.is-active { display: block; animation: ls-fade .4s ease; }

/* ── filmography controls ── */
.lh-ds-staff .ls-pill {
    cursor: pointer; font-family: 'Urbanist', sans-serif; font-weight: 700; font-size: 13px;
    padding: 9px 16px; border-radius: 999px; border: 1px solid #e3e3ea;
    background: #fff; color: #565d68; transition: background .12s, color .12s, border-color .12s;
}
.lh-ds-staff .ls-pill:hover { border-color: #c9c9d4; }
.lh-ds-staff .ls-pill.is-active { background: #15171c; color: #fff; border-color: #15171c; }
.lh-ds-staff .ls-sort {
    cursor: pointer; font-family: 'Urbanist', sans-serif; font-weight: 700; font-size: 13px;
    padding: 7px 14px; border-radius: 999px; border: none;
    background: transparent; color: #767d89; box-shadow: none; transition: background .12s, color .12s;
}
.lh-ds-staff .ls-sort.is-active { background: #fff; color: #15171c; box-shadow: 0 1px 4px rgba(21,23,40,.12); }

/* ── credit rows ── */
.lh-ds-staff .ls-row { transition: background .16s ease; }
.lh-ds-staff .ls-row:hover { background: #ececf1; }
.lh-ds-staff .ls-row a:hover { color: #ca2128 !important; }

/* ── hover states inline styles can't hold ── */
.lh-ds-staff .ls-crumb a:hover { color: #fdc949; }
.lh-ds-staff [data-ls-share]:hover { background: rgba(255,255,255,.16); }

/* ============================================================================
   MOBILE — spacing / type language borrowed from the character page mobile
   design. Overrides the inline desktop styles, so !important is required.
   ========================================================================== */
@media (max-width: 900px) {
    .lh-ds-staff .ls-hero-inner { grid-template-columns: 220px minmax(0,1fr) !important; gap: 26px !important; }
    .lh-ds-staff .ls-name { font-size: 46px !important; }
    .lh-ds-staff .ls-known-grid { grid-template-columns: repeat(3, 1fr) !important; }
    .lh-ds-staff .ls-bio-grid,
    .lh-ds-staff .ls-awards-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
    .lh-ds-staff .ls-numbers { position: static !important; }
}

@media (max-width: 640px) {
    /* hero → single centred column */
    .lh-ds-staff .ls-hero-inner {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        padding: 20px 18px 28px !important;
        justify-items: center;
        text-align: center;
    }
    .lh-ds-staff .ls-portrait-col { width: 150px !important; margin: 0 auto; }
    .lh-ds-staff .ls-id { text-align: center; }
    .lh-ds-staff .ls-crumb { justify-content: center; font-size: 12px !important; }
    .lh-ds-staff .ls-name { font-size: 30px !important; line-height: 1.05 !important; }
    .lh-ds-staff .ls-id > div[style*="margin-bottom:24px"] { justify-content: center; }
    .lh-ds-staff .ls-actions { justify-content: center; }

    /* tab bar → horizontal scroll */
    .lh-ds-staff .ls-tabbar-inner {
        padding: 0 10px !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .lh-ds-staff .ls-tabbar-inner::-webkit-scrollbar { display: none; }
    .lh-ds-staff .ls-tab { padding: 14px 12px !important; font-size: 14px !important; }

    /* main gutters */
    .lh-ds-staff .ls-main { padding: 0 18px !important; }
    .lh-ds-staff .ls-main h2 { font-size: 26px !important; }

    /* known-for → 2 columns */
    .lh-ds-staff .ls-known-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; }

    /* filmography rows → drop the medium/role columns into a tighter grid */
    .lh-ds-staff .ls-film-controls { flex-direction: column; align-items: flex-start !important; }
    .lh-ds-staff .ls-row {
        grid-template-columns: 48px minmax(0,1fr) !important;
        gap: 12px !important;
        padding: 12px 8px !important;
    }
    .lh-ds-staff .ls-row > span:first-child { font-size: 17px !important; }
    .lh-ds-staff .ls-row > span:nth-child(3),
    .lh-ds-staff .ls-row > span:nth-child(4) { display: none; }
}