/* ============================================================================
   Lifehaki — Character page ("Levi Ackerman" design system).
   Desktop layout/spacing/colour live inline in templates/character.php (an
   exact port of the design). This file only carries what inline styles can't:
   animations, hover/interactive states, the spoiler-guard toggle, and the
   mobile layout (spacing + type borrowed from the Anime Title mobile design).
   Scoped to body.lh-ds-character.
   ========================================================================== */

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

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

/* Appearance posters: hover lift only (perpetual float removed). */
.lh-ds-character .lc-poster { transition: transform .25s cubic-bezier(.16,1,.3,1); }
.lh-ds-character .lc-poster:hover { transform: translateY(-10px) scale(1.025); }
.lh-ds-character .lc-poster > div { transition: box-shadow .25s ease; }
.lh-ds-character .lc-poster:hover > div { box-shadow: 0 20px 40px rgba(21,23,40,.28); }

/* ── tabs ── */
.lh-ds-character .lc-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-character .lc-tab:hover,
.lh-ds-character .lc-tab.is-active { color: #15171c; }
.lh-ds-character .lc-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-character .lc-tab.is-active .lc-tab-ind { opacity: 1; }

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

/* ── hover states (inline styles can't hold :hover) ── */
.lh-ds-character .lc-crumb a:hover { color: #fdc949; }
.lh-ds-character .lc-btn-primary { transition: transform 120ms cubic-bezier(.16,1,.3,1), background 120ms; }
.lh-ds-character .lc-btn-primary:hover { background: #a81a20; transform: translateY(-2px); }
.lh-ds-character .lc-btn-primary.is-faved { background: #a81a20; }
.lh-ds-character [data-ch-share]:hover { background: rgba(255,255,255,.16); }
.lh-ds-character [data-spoiler-toggle]:hover { background: #353b45; }
.lh-ds-character .lc-voice-grid a[href]:hover { color: #ca2128; }
.lh-ds-character .lc-appearances a:hover > div + div { color: #ca2128; }

/* ── spoiler guard: blurred until #lc-root gets .spoilers-on ── */
.lh-ds-character .lc-spoiler { filter: blur(7px); transition: filter .3s ease; user-select: none; }
#lc-root.spoilers-on .lc-spoiler { filter: none; user-select: auto; }
#lc-root.spoilers-on .lc-spoiler-gate { display: none !important; }
.lh-ds-character .lc-ab-reveal { display: none; }
#lc-root.spoilers-on .lc-ab-reveal { display: block; }
#lc-root.spoilers-on .lc-ab-locked { display: none !important; }

/* ============================================================================
   MOBILE — spacing / font-size / padding language from the Anime Title mobile
   design (18px gutters, 30px hero H1, 20-22px section titles, 12-15px body,
   card padding 18-20px, section rhythm ~32px). Overrides the inline desktop
   styles, so !important is required.
   ========================================================================== */
@media (max-width: 640px) {

    /* hero → single centred column */
    .lh-ds-character .lc-hero-inner {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        padding: 20px 18px 28px !important;
        justify-items: center;
        text-align: center;
    }
    .lh-ds-character .lc-portrait-col { width: 150px !important; margin: 0 auto; }
    .lh-ds-character .lc-id { text-align: center; }
    .lh-ds-character .lc-crumb { justify-content: center; font-size: 12px !important; }
    .lh-ds-character .lc-name { font-size: 30px !important; line-height: 1.05 !important; }
    .lh-ds-character .lc-actions { justify-content: center; }
    .lh-ds-character .lc-standing { width: 100%; }

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

    /* banner + main gutters */
    .lh-ds-character .lc-spoiler-banner-wrap { padding: 0 18px !important; margin-top: 16px !important; }
    .lh-ds-character .lc-main { padding: 24px 18px 48px !important; }

    /* section titles + body copy */
    .lh-ds-character .lc-h2 { font-size: 22px !important; margin-bottom: 14px !important; }
    .lh-ds-character .lc-h2-lg { font-size: 24px !important; }
    .lh-ds-character .lc-sec-sub { font-size: 13px !important; margin-bottom: 20px !important; }
    .lh-ds-character .lc-body { font-size: 15px !important; }

    /* overview: stack bio + facts */
    .lh-ds-character .lc-overview-grid { grid-template-columns: 1fr !important; gap: 24px !important; }

    /* quotes → single column, tighter */
    .lh-ds-character .lc-quotes-grid { grid-template-columns: 1fr !important; gap: 28px !important; }

    /* appearances → start-aligned so 155px cards don't spread; 10px side margin */
    .lh-ds-character .lc-appearances { justify-content: flex-start !important; gap: 14px !important; margin-left: 10px !important; margin-right: 10px !important; }

    /* gallery → 2 columns */
    .lh-ds-character .lc-gallery-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }

    /* personality / abilities / voice → single column */
    .lh-ds-character .lc-personality-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
    .lh-ds-character .lc-abilities-grid   { grid-template-columns: 1fr !important; gap: 16px !important; }
    .lh-ds-character .lc-voice-grid       { grid-template-columns: 1fr !important; gap: 16px !important; }
}