/* ==========================================================================
   Chihkao Law Firm - Lawyer Profile Exclusive Stylesheet (lawyer-profile.css v2.3)
   ========================================================================== */

/* Global Font Override */
@font-face {
    font-family: 'SiteGlobalFont';
    src: url('/style/fonts/SiteGlobalFont.ttf') format('truetype');
    font-display: swap;
}

/* Force header background to Chihkao Red */
.z_header, .z_header.z_header2 {
    background-color: #b2282e !important;
}

/* Base Container Variables & Reset */
.profile-container {
    --primary: #000000;
    --primary-deep: #111111;
    --accent: #b2282e;
    --accent-hover: #8e1f24;
    --white: #ffffff;
    --off-white: #f4f6f9;
    --text: #1d1d1f;
    --text-secondary: #5a5a5c;
    --text-muted: #8e8e93;
    --border-light: #e5e5ea;
    --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
    --sans: 'SiteGlobalFont', -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", STHeiti, "Microsoft Yahei", sans-serif;
    
    background: var(--white);
    color: var(--text);
    font-family: var(--sans) !important;
    padding-top: 68px;
}

.profile-container * {
    font-family: var(--sans) !important;
}

/* ==========================================
   1. Hero Section (Desktop)
   ========================================== */
.profile-container .hero { 
    padding: 60px 48px 0px 48px !important; 
    background: var(--white); 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    position: relative; 
    overflow: hidden !important; 
    border-bottom: 1px solid var(--border-light); 
    align-items: stretch; 
    min-height: 400px; 
}

.profile-container .hero-photo { 
    position: relative; 
    display: flex; 
    align-items: flex-end !important; 
    justify-content: center; 
    padding-top: 40px; 
    margin: 0 !important;
}

.profile-container .hero-photo img { 
    max-height: 400px; 
    width: auto; 
    max-width: 100%; 
    object-fit: contain; 
    display: block; 
    position: relative; 
    z-index: 1; 
    vertical-align: bottom !important; 
    margin-bottom: -1px !important; 
}

.profile-container .hero-content { 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    padding: 40px 72px 60px 48px !important; 
    position: relative; 
}

/* Red vertical accent line */
.profile-container .hero-content::before { 
    content: ''; 
    position: absolute; 
    left: 0; top: 15%; bottom: 15%; 
    width: 3px; 
    background: var(--accent); 
}

.profile-container .hero-name { 
    font-size: 46px; 
    font-weight: 700 !important; 
    color: var(--primary); 
    letter-spacing: 6px; 
    line-height: 1.2; 
    margin-bottom: 20px; 
    animation: fadeUp 0.9s 0.2s var(--ease) both; 
}

.profile-container .hero-title { 
    font-size: 17px; 
    color: var(--accent); 
    letter-spacing: 1.5px; 
    margin-bottom: 10px; 
    font-weight: 600; 
    line-height: 1.7; 
    animation: fadeUp 0.9s 0.35s var(--ease) both; 
}

/* Updated: Multi-line truncation moved to CSS */
.profile-container .hero-summary { 
    font-size: 15.5px; 
    line-height: 2; 
    color: var(--text-secondary); 
    max-width: 520px; 
    margin-bottom: 40px; 
    animation: fadeUp 0.9s 0.5s var(--ease) both; 
    
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.profile-container .hero-contact { 
    display: flex; 
    flex-direction: column; 
    gap: 12px; 
    animation: fadeUp 0.9s 0.65s var(--ease) both; 
    margin-bottom: 48px; 
}

.profile-container .hero-contact-item { 
    display: flex; 
    align-items: center; 
    gap: 16px; 
    font-size: 15px; 
}

.profile-container .hero-contact-label { 
    width: 32px; 
    font-size: 13px; 
    color: var(--accent); 
    flex-shrink: 0; 
    font-weight: 600; 
}

.profile-container .hero-contact-value,
.profile-container .hero-contact-value a { 
    color: var(--text); 
    font-weight: 400; 
    text-decoration: none; 
    transition: color 0.3s; 
}

.profile-container .hero-contact-value a:hover { 
    color: var(--accent); 
}

.profile-container .hero-actions { 
    display: flex; 
    gap: 16px; 
    margin-top: 10px; 
    animation: fadeUp 0.9s 0.8s var(--ease) both; 
}

.profile-container .icon-btn { 
    width: 44px; 
    height: 44px; 
    border: 1px solid var(--primary); 
    border-radius: 50%; 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    color: var(--primary); 
    transition: all 0.3s var(--ease); 
    cursor: pointer; 
    text-decoration: none; 
    background: transparent; 
}

.profile-container .icon-btn:hover { 
    background: var(--primary); 
    color: var(--white); 
    transform: translateY(-2px); 
    border-color: var(--primary); 
}

@keyframes fadeUp { 
    from { opacity: 0; transform: translateY(28px); } 
    to { opacity: 1; transform: translateY(0); } 
}


/* ==========================================
   2. Hero Section (Mobile Flexbox Fix)
   ========================================== */
/* Updated: Breakpoint unified to 1000px globally */
@media (max-width: 1000px) {
    .profile-container .hero {
        display: flex !important; 
        flex-direction: column !important;
        padding: 32px 24px 32px 24px !important; 
        background: #ffffff !important;
        min-height: 60vh !important; 
        border-bottom: 1px solid #e5e5ea !important;
        overflow: hidden !important; 
        position: relative !important;
    }
    
    .profile-container .hero-content {
        display: flex !important; 
        flex-direction: column !important;
        flex: 1 !important; 
        width: 100% !important; 
        padding: 0 !important;
        position: relative !important; 
        z-index: 2 !important;
    }
    
    .profile-container .hero-content::before { 
        display: none !important; 
    }
    
    .profile-container .hero-photo {
        position: absolute !important; 
        bottom: 0 !important; 
        right: 0 !important;
        width: 60% !important; 
        max-width: 260px !important; 
        height: auto !important;
        padding: 0 !important; 
        margin: 0 !important;
        display: flex !important; 
        align-items: flex-end !important; 
        justify-content: flex-end !important;
        z-index: 1 !important;
    }
    
    .profile-container .hero-photo img { 
        max-height: 48vh !important; 
        width: auto !important; 
        max-width: 100% !important; 
        height: auto !important; 
        object-fit: contain !important; 
        object-position: bottom right !important; 
        display: block !important; 
        margin: 0 !important; 
        vertical-align: bottom !important; 
    }
    
    .profile-container .hero-actions {
        margin-top: auto !important; 
        padding-top: 40px !important; 
        margin-bottom: 0 !important;
        position: relative !important; 
        bottom: auto !important; 
        left: auto !important;
        display: flex !important; 
        gap: 16px !important; 
        justify-content: flex-start !important; 
        z-index: 10 !important;
    }
    
    .profile-container .icon-btn { 
        width: 40px !important; 
        height: 40px !important; 
        border-color: #666 !important; 
        color: #666 !important; 
    }
    
    .profile-container .hero-name { 
        font-size: 32px !important; 
        letter-spacing: 4px !important; 
        margin-bottom: 12px !important; 
        color: #000000 !important; 
    }
    
    .profile-container .hero-title { 
        font-size: 14px !important; 
        letter-spacing: 0.5px !important; 
        margin-bottom: 8px !important; 
        color: #b2282e !important; 
    }
    
    .profile-container .hero-summary { 
        font-size: 14px !important; 
        line-height: 1.8 !important; 
        margin-bottom: 20px !important; 
        max-width: 60% !important; 
        color: #5a5a5c !important; 
        /* Updated: Allow up to 4 lines on mobile before truncating */
        -webkit-line-clamp: 10;
    }
    
    .profile-container .hero-contact { 
        gap: 10px !important; 
        margin-bottom: 0 !important; 
    }
    
    .profile-container .hero-contact-item { 
        font-size: 13px !important; 
        gap: 12px !important; 
    }
    
    .profile-container .hero-contact-label { 
        font-size: 12px !important; 
        width: 28px !important; 
        color: #b2282e !important; 
    }
}

@media (max-width: 420px) {
    .profile-container .hero-name { font-size: 28px !important; letter-spacing: 3px !important; }
    .profile-container .hero-summary { max-width: 55% !important; font-size: 13px !important; }
    .profile-container .hero-photo { width: 55% !important; }
}


/* ==========================================
   3. Breadcrumbs & Layout Grid
   ========================================== */
.profile-container .breadcrumb-bar { 
    padding: 18px 48px; 
    font-size: 13px; 
    color: var(--text-muted); 
    border-bottom: 1px solid var(--border-light); 
    background: var(--white); 
    max-width: 1400px; 
    margin: 0 auto; 
}

.profile-container .breadcrumb-bar a { color: var(--accent); text-decoration: none; font-weight: 600; }
.profile-container .breadcrumb-bar span { margin: 0 10px; color: #ccc; }

/* Updated breakpoint */
@media (max-width: 1000px) { 
    .profile-container .breadcrumb-bar { padding: 16px 20px; } 
}

.profile-container .section { max-width: 1400px; margin: 0 auto; padding: 0 48px; }
.profile-container .content-wrap { display: grid; grid-template-columns: 1fr 360px; gap: 80px; padding: 60px 0 100px; }

/* Scroll reveal classes */
.profile-container .prose.reveal, 
.profile-container .sec-title.reveal, 
.profile-container .side-block.reveal, 
.profile-container .insights-band.reveal { 
    opacity: 0; 
    transform: translateY(32px); 
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); 
}

.profile-container .prose.reveal.visible, 
.profile-container .sec-title.reveal.visible, 
.profile-container .side-block.reveal.visible, 
.profile-container .insights-band.reveal.visible { 
    opacity: 1; 
    transform: translateY(0); 
}


/* ==========================================
   4. Rich Text (Prose) Styling
   ========================================== */
.profile-container .prose { 
    font-size: 16.5px; line-height: 2; color: var(--text); 
    word-wrap: break-word; overflow-wrap: break-word; margin-bottom: 24px; 
}
.profile-container .prose * { max-width: 100% !important; box-sizing: border-box; }
.profile-container .prose p, .profile-container .prose span, .profile-container .prose div, .profile-container .prose font, .profile-container .prose section { 
    white-space: normal !important; word-wrap: break-word !important; overflow-wrap: break-word !important; 
}
.profile-container .prose img { max-width: 100% !important; height: auto !important; display: block; margin: 15px auto; object-fit: contain; }
.profile-container .prose table { width: 100% !important; overflow-x: auto; display: block; }

/* Custom Headings within Prose */
.profile-container .sec-title, 
.profile-container .prose h1, 
.profile-container .prose h2 { 
    font-size: 24px; font-weight: 700 !important; color: var(--primary); 
    margin: 64px 0 32px; position: relative; padding-left: 20px; display: block; 
}
.profile-container .sec-title::before, 
.profile-container .prose h1::before, 
.profile-container .prose h2::before { 
    content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; 
    width: 4px; background: var(--accent); 
}
.profile-container .sec-title:first-child, 
.profile-container .prose h1:first-child, 
.profile-container .prose h2:first-child { 
    margin-top: 0; 
}

.profile-container .prose h3 { 
    font-size: 18px; font-weight: 700 !important; color: var(--primary); 
    margin: 32px 0 16px; display: block; 
}

/* Custom Lists within Prose */
.profile-container .prose ul, 
.profile-container .prose ol { 
    list-style: none !important; margin: 20px 0; padding: 0; display: block; 
}
.profile-container .prose ul li, 
.profile-container .prose ol li { 
    position: relative; padding: 18px 0 18px 24px; font-size: 16px; line-height: 1.85; 
    border-bottom: 1px solid var(--border-light); color: var(--text); 
    list-style: none !important; background: none !important; 
}
.profile-container .prose ul li:last-child, 
.profile-container .prose ol li:last-child { 
    border-bottom: none; 
}
.profile-container .prose ul li::before, 
.profile-container .prose ol li::before { 
    content: ''; position: absolute; left: 0; top: 26px; width: 8px; height: 8px; 
    background: var(--accent); display: block; 
}
.profile-container .prose ul li strong, 
.profile-container .prose ol li strong { 
    font-weight: 700; color: var(--primary); 
}
.profile-container .prose ul li p, 
.profile-container .prose ol li p { 
    margin: 0 0 8px 0; padding: 0; display: inline; 
}
.profile-container .prose ul li p:last-child, 
.profile-container .prose ol li p:last-child { 
    margin-bottom: 0; 
}

.profile-container .divider { height: 1px; background: var(--border-light); margin: 60px 0; }


/* ==========================================
   5. Sidebar Layout
   ========================================== */
.profile-container .side-block { margin-bottom: 40px; }
.profile-container .side-block-title { 
    font-size: 11px; text-transform: uppercase; letter-spacing: 3px; 
    color: var(--text-muted); font-weight: 700; margin-bottom: 18px; 
    padding-bottom: 12px; border-bottom: 2px solid var(--primary); 
}

.profile-container .tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0;}
.profile-container .tag-cloud li a { 
    display: inline-block; padding: 7px 18px; font-size: 13px; color: var(--primary); 
    background: var(--off-white); text-decoration: none; border: 1px solid var(--border-light); 
    transition: all 0.25s var(--ease); font-weight: 600; 
}
.profile-container .tag-cloud li a:hover { 
    background: var(--primary); color: var(--white); border-color: var(--primary); 
}

.profile-container .side-location { 
    background: var(--off-white); padding: 24px; border-left: 3px solid var(--accent); 
}
.profile-container .side-location .sl-label { 
    font-size: 11px; text-transform: uppercase; letter-spacing: 2px; 
    color: var(--text-muted); margin-bottom: 10px; font-weight: 600; 
}
.profile-container .side-location .sl-value { 
    font-size: 14px; color: var(--text); line-height: 1.7; font-weight: 600; 
}
.profile-container .side-location .sl-value a { color: var(--accent); text-decoration: none; }


/* ==========================================
   6. Bottom Insights/News Cards
   ========================================== */
.profile-container .insights-band { background: var(--off-white); padding: 80px 0; border-top: 1px solid var(--border-light); }
.profile-container .insights-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 48px; }
.profile-container .insights-header h2 { font-size: 26px; font-weight: 700 !important; color: var(--primary); letter-spacing: 2px; margin: 0; padding: 0; }
.profile-container .insights-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.profile-container .insight-card { 
    background: var(--white); border: 1px solid var(--border-light); 
    padding: 36px 32px; text-decoration: none; color: inherit; 
    display: flex; flex-direction: column; transition: all 0.35s var(--ease); 
    position: relative; overflow: hidden; border-radius: 4px; 
}
.profile-container .insight-card::before { 
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; 
    background: var(--accent); transform: scaleX(0); transform-origin: left; 
    transition: transform 0.4s var(--ease); 
}
.profile-container .insight-card:hover { 
    background: var(--white); border-color: rgba(0,0,0,0.1); 
    box-shadow: 0 10px 30px rgba(0,0,0,0.06); transform: translateY(-4px); 
}
.profile-container .insight-card:hover::before { transform: scaleX(1); }

.profile-container .insight-label { 
    font-size: 11px; text-transform: uppercase; letter-spacing: 2.5px; 
    color: var(--accent); margin-bottom: 16px; font-weight: 700; 
}
.profile-container .insight-title { 
    font-size: 17px; font-weight: 700 !important; color: var(--primary); 
    line-height: 1.55; flex: 1; margin-bottom: 20px; transition: color 0.3s; 
}
.profile-container .insight-card:hover .insight-title { color: var(--accent); }
.profile-container .insight-date { font-size: 12px; color: var(--text-muted); }


/* ==========================================
   7. General Mobile Responsive Fixes
   ========================================== */
/* Updated breakpoint */
@media (max-width: 1000px) {
    .profile-container .content-wrap { grid-template-columns: 1fr; gap: 48px; padding: 48px 0 60px; }
    .profile-container .section { padding: 0 20px; }
    .profile-container .sec-title, 
    .profile-container .prose h1, 
    .profile-container .prose h2 { font-size: 20px; margin: 48px 0 24px; }
    .profile-container .prose { font-size: 15.5px; line-height: 1.9; margin-bottom: 20px; }
    .profile-container .prose ul li, 
    .profile-container .prose ol li { font-size: 15.5px; padding: 14px 0 14px 20px; }
    .profile-container .prose ul li::before, 
    .profile-container .prose ol li::before { width: 6px; height: 6px; top: 21px; }
    
    .profile-container .insights-grid { grid-template-columns: 1fr; gap: 16px; } 
    .profile-container .insights-band { padding: 48px 0; } 
    .profile-container .insights-header h2 { font-size: 20px; } 
    .profile-container .insight-card { padding: 24px 20px; } 
    .profile-container .insight-title { font-size: 15px; } 
}
.profile-container .sub-title {
    font-size: 18px; 
    font-weight: 700 !important; 
    color: var(--primary); 
    margin: 32px 0 16px; 
}

.profile-container .case-list {
    list-style: none !important; 
    padding: 0; 
    margin: 0 0 32px 0; 
    display: block;
}

.profile-container .case-list li {
    position: relative; 
    padding: 16px 0 16px 24px !important; 
    font-size: 15.5px; 
    line-height: 1.8;
    border-bottom: 1px dashed var(--border-light) !important; 
    color: var(--text); 
    background: none !important;
}

.profile-container .case-list li:last-child {
    border-bottom: none !important;
}

.profile-container .case-list li::before {
    content: '■' !important; 
    position: absolute; 
    left: 0; 
    top: 18px !important; 
    font-size: 10px;
    color: var(--accent) !important; 
    display: block; 
    background: none !important;
    width: auto !important;
    height: auto !important;
}

.profile-container .case-list li strong {
    font-weight: 700; 
    color: var(--primary); 
}

.profile-container .faq-container {
    margin-top: 24px;
}

.profile-container .faq-item {
    background: var(--off-white);
    border-radius: 4px;
    padding: 24px 32px;
    margin-bottom: 16px;
    border-left: 3px solid var(--accent);
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.profile-container .faq-item:hover {
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.profile-container .faq-q {
    font-size: 16.5px;
    font-weight: 700 !important;
    color: var(--primary);
    margin-bottom: 12px;
    line-height: 1.6;
}

.profile-container .faq-a {
    font-size: 15px;
    line-height: 1.9;
    color: var(--text-secondary);
}

.profile-container .faq-a strong {
    color: var(--accent);
    font-weight: 600;
}

@media (max-width: 1000px) {
    .profile-container .faq-item { padding: 20px; }
    .profile-container .faq-q { font-size: 15.5px; }
    .profile-container .faq-a { font-size: 14.5px; }
    .profile-container .case-list li { padding: 14px 0 14px 20px !important; font-size: 14.5px; }
    .profile-container .case-list li::before { top: 16px !important; font-size: 9px; }
}