/* ============================================================================
   Lifehaki — Studio profile ("Ufotable" design system port).
   Desktop layout/spacing/colour live inline in templates/studios/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-studio.
   ========================================================================== */

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

/* ── animations ── */
@keyframes su-fade  { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes su-pulse { 0% { box-shadow: 0 0 0 0 rgba(47,143,91,.55); } 70% { box-shadow: 0 0 0 8px rgba(47,143,91,0); } 100% { box-shadow: 0 0 0 0 rgba(47,143,91,0); } }

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

/* ── form-curve bars ── */
.lh-ds-studio .su-bar { transition: transform .2s ease, filter .2s ease; }
.lh-ds-studio .su-bar:hover { transform: translateY(-4px); filter: saturate(1.15); }

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

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

/* ── productions controls ── */
.lh-ds-studio .su-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-studio .su-pill:hover { border-color: #c9c9d4; }
.lh-ds-studio .su-pill.is-active { background: #15171c; color: #fff; border-color: #15171c; }
.lh-ds-studio .su-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-studio .su-sort.is-active { background: #fff; color: #15171c; box-shadow: 0 1px 4px rgba(21,23,40,.12); }

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

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

/* ============================================================================
   MOBILE — overrides the inline desktop styles, so !important is required.
   ========================================================================== */
@media (max-width: 900px) {
    .lh-ds-studio .su-hero-inner { grid-template-columns: 168px minmax(0,1fr) !important; gap: 26px !important; }
    .lh-ds-studio .su-name { font-size: 56px !important; }
    .lh-ds-studio .su-landmark-grid { grid-template-columns: repeat(3, 1fr) !important; }
    .lh-ds-studio .su-pipeline-grid { grid-template-columns: 1fr !important; }
    .lh-ds-studio .su-story-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
    .lh-ds-studio .su-facts { position: static !important; }
}

@media (max-width: 640px) {
    /* hero → single centred column */
    .lh-ds-studio .su-hero-inner {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
        padding: 22px 18px 30px !important;
        justify-items: center;
        text-align: center;
    }
    .lh-ds-studio .su-mark-col { width: 120px !important; margin: 0 auto; }
    .lh-ds-studio .su-id { text-align: center; }
    .lh-ds-studio .su-crumb { justify-content: center; font-size: 12px !important; }
    .lh-ds-studio .su-name { font-size: 42px !important; line-height: 1 !important; }
    .lh-ds-studio .su-tagline { font-size: 19px !important; }
    .lh-ds-studio .su-chips { justify-content: center; }

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

    /* main gutters + section headings */
    .lh-ds-studio .su-main { padding: 0 18px !important; }
    .lh-ds-studio .su-main h2 { font-size: 26px !important; }

    /* landmark works → 2 columns */
    .lh-ds-studio .su-landmark-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; }

    /* form curve → let it scroll rather than crush 10 bars */
    .lh-ds-studio .su-curve-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .lh-ds-studio .su-curve-track { min-width: 560px; }

    /* productions rows → drop the format/role/score columns into a tighter grid */
    .lh-ds-studio .su-prod-controls { flex-direction: column; align-items: flex-start !important; }
    .lh-ds-studio .su-row {
        grid-template-columns: 50px minmax(0,1fr) 62px !important;
        gap: 12px !important;
        padding: 12px 8px !important;
    }
    .lh-ds-studio .su-row > span:first-child { font-size: 17px !important; }
    .lh-ds-studio .su-row > span:nth-child(3),
    .lh-ds-studio .su-row > span:nth-child(4) { display: none; }
}