/*
 * CHINA LEGAL PORTAL: MERIDIAN LEDGER COMPONENT SYSTEM — GROK READY
 * Namespace: cll-hub-*
 * Dependency: None (native CSS Grid/Flexbox)
 * Runtime: No UIkit, Bootstrap, JavaScript, or external font/CDN required
 * Integration: Add once to Joomla/YOOtheme Custom CSS, or enqueue as a page stylesheet
 */

:root{
    --cll-navy: #0b2341;
    --cll-navy-light: #174b78;
    --cll-gold: #d2a84f;
    --cll-gold-dark: #765414;
    --cll-bg-muted: #f3faf8;
    --cll-border: #d5dce6;
    --cll-text-main: #4a5568;
    --cll-text-heading: #172b3d;
    --cll-white: #ffffff;
    --cll-spacing-lg: 60px;
    --cll-spacing-md: 30px;
    --cll-spacing-sm: 15px;
    --cll-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --cll-font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
}

/* Page shell */
.cll-meridian-kc{
    margin: 0;
    background: #f8f9fa;
    color: var(--cll-text-main);
    font-family: var(--cll-font-sans);
    line-height: 1.6;
}

.cll-meridian-kc .cll-hub-wrapper{
    color: var(--cll-text-main);
    font-family: var(--cll-font-sans);
    line-height: 1.6;
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 20px 0;
}

.cll-meridian-kc .cll-hub-wrapper h2, .cll-meridian-kc .cll-hub-wrapper h3, .cll-meridian-kc .cll-hub-wrapper h4, .cll-meridian-kc .cll-hub-ecosystem-wrapper h2, .cll-meridian-kc .cll-hub-ecosystem-wrapper h3, .cll-meridian-kc .cll-hub-ecosystem-wrapper h4, .cll-meridian-kc .cll-hub-cta-wrapper h2, .cll-meridian-kc .cll-hub-cta-wrapper h3{
    font-family: var(--cll-font-serif);
    margin-top: 0;
}

/* Hero */
.cll-meridian-kc .cll-hub-hero{
    background: linear-gradient(135deg, var(--cll-navy) 0%, var(--cll-navy-light) 100%);
    color: var(--cll-white);
    padding: 80px 20px;
}

.cll-meridian-kc .cll-hub-hero-inner{
    max-width: 1200px;
    margin: 0 auto;
}

.cll-meridian-kc .cll-hub-eyebrow{
    color: var(--cll-gold);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    margin: 0;
    text-transform: uppercase;
}

.cll-meridian-kc .cll-hub-hero-title{
    color: var(--cll-white);
    font-family: var(--cll-font-serif);
    font-size: clamp(2.6rem, 5vw, 3.5rem);
    line-height: 1.08;
    margin: 10px 0 16px;
}

.cll-meridian-kc .cll-hub-hero-lead{
    color: #cbd5e1;
    font-size: 1.15rem;
    line-height: 1.65;
    max-width: 800px;
    margin: 0;
}

.cll-meridian-kc .cll-hub-hero-lead strong{ color: var(--cll-white); }

/* Typography utilities */
.cll-meridian-kc .cll-hub-section-title{
    border-bottom: 2px solid var(--cll-gold);
    color: var(--cll-text-heading);
    display: inline-block;
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: var(--cll-spacing-md);
    padding-bottom: 10px;
}

.cll-meridian-kc .cll-hub-section-subtitle{
    border-bottom: 2px solid var(--cll-gold);
    color: var(--cll-navy);
    font-size: 1.4rem;
    margin-bottom: 20px;
    padding-bottom: 10px;
}

.cll-meridian-kc .cll-hub-copy-lg{
    color: var(--cll-text-main);
    font-size: 1.05rem;
    line-height: 1.65;
}

.cll-meridian-kc .cll-hub-copy-compact{
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

/* Component 1: Featured Insight */
.cll-meridian-kc .cll-hub-featured-grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--cll-spacing-md);
    margin-bottom: var(--cll-spacing-lg);
}

.cll-meridian-kc .cll-hub-featured-card{
    background: var(--cll-white);
    border-top: 4px solid var(--cll-navy);
    box-shadow: 0 10px 30px rgba(11, 35, 65, 0.08);
    display: flex;
    flex-direction: column;
}

.cll-meridian-kc .cll-hub-featured-image{
    border-bottom: 1px solid var(--cll-border);
    height: 300px;
    object-fit: cover;
    width: 100%;
}

.cll-meridian-kc .cll-hub-featured-body{ padding: 40px; }

.cll-meridian-kc .cll-hub-badge-gold{
    background: var(--cll-gold);
    color: var(--cll-navy);
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-bottom: 15px;
    padding: 5px 12px;
    text-transform: uppercase;
}

.cll-meridian-kc .cll-hub-featured-title{
    color: var(--cll-navy);
    font-size: 2rem;
    line-height: 1.2;
    margin-bottom: 15px;
}

/* Component 1b: Supporting list */
.cll-meridian-kc .cll-hub-supporting-list{
    background: var(--cll-white);
    border: 1px solid var(--cll-border);
    padding: 30px;
}

.cll-meridian-kc .cll-hub-list-item{
    border-bottom: 1px solid var(--cll-border);
    padding: 20px 0;
}

.cll-meridian-kc .cll-hub-list-item:last-child{
    border-bottom: 0;
    padding-bottom: 0;
}

.cll-meridian-kc .cll-hub-badge-outline{
    border: 1px solid #94a3b8;
    color: #475569;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 3px 8px;
    text-transform: uppercase;
}

.cll-meridian-kc .cll-hub-list-title{
    font-size: 1.3rem;
    margin: 10px 0 5px;
}

.cll-meridian-kc .cll-hub-list-title a{
    color: var(--cll-navy);
    text-decoration: none;
}

.cll-meridian-kc .cll-hub-list-title a:hover{ color: var(--cll-gold-dark); }

/* Component 2: Topic matrix */
.cll-meridian-kc .cll-hub-matrix-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--cll-spacing-md);
    margin-bottom: var(--cll-spacing-lg);
}

.cll-meridian-kc .cll-hub-matrix-card{
    background: var(--cll-white);
    border: 1px solid var(--cll-border);
    display: flex;
    flex-direction: column;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.cll-meridian-kc .cll-hub-matrix-card:hover{
    border-color: var(--cll-gold);
    box-shadow: 0 10px 20px rgba(11, 35, 65, 0.07);
    transform: translateY(-2px);
}

.cll-meridian-kc .cll-hub-matrix-image{
    border-bottom: 1px solid var(--cll-border);
    height: 200px;
    object-fit: cover;
    width: 100%;
}

.cll-meridian-kc .cll-hub-matrix-body{
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 30px;
}

.cll-meridian-kc .cll-hub-matrix-body > p{ margin-top: 0; }

.cll-meridian-kc .cll-hub-matrix-title{
    color: var(--cll-navy);
    font-size: 1.4rem;
    margin-bottom: 15px;
}

.cll-meridian-kc .cll-hub-link-arrow{
    color: var(--cll-gold-dark);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    margin-top: auto;
    padding-top: 15px;
    text-decoration: none;
    text-transform: uppercase;
}

.cll-meridian-kc .cll-hub-link-arrow:hover{ color: var(--cll-navy); }

/* Component 3: Ecosystem map */
.cll-meridian-kc .cll-hub-ecosystem-wrapper{
    background: var(--cll-navy);
    color: var(--cll-white);
    margin: var(--cll-spacing-lg) 0;
    padding: var(--cll-spacing-lg) 20px;
}

.cll-meridian-kc .cll-hub-ecosystem-container{
    max-width: 1200px;
    margin: 0 auto;
}

.cll-meridian-kc .cll-hub-ecosystem-title{
    color: var(--cll-white);
    font-size: 2.5rem;
    margin-bottom: 15px;
    text-align: center;
}

.cll-meridian-kc .cll-hub-ecosystem-intro{
    color: #cbd5e1;
    font-size: 1.05rem;
    line-height: 1.65;
    margin: 0 auto 40px;
    max-width: 800px;
    text-align: center;
}

.cll-meridian-kc .cll-hub-ecosystem-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--cll-spacing-md);
}

.cll-meridian-kc .cll-hub-eco-card{
    background: rgba(255, 255, 255, 0.04);
    border-left: 3px solid var(--cll-gold);
    padding: 30px;
}

.cll-meridian-kc .cll-hub-eco-code{
    color: var(--cll-gold) !important;
    font-family: var(--cll-font-sans) !important;
    font-size: 0.8rem !important;
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-bottom: 8px !important;
    text-transform: uppercase;
}

.cll-meridian-kc .cll-hub-eco-card h4{
    color: var(--cll-white);
    font-size: 1.3rem;
    margin-bottom: 10px;
}

.cll-meridian-kc .cll-hub-eco-card p{
    color: #cbd5e1;
    font-size: 0.95rem;
    margin: 0;
}

/* Component 4: Counsel CTA */
.cll-meridian-kc .cll-hub-cta-wrapper{
    background: var(--cll-bg-muted);
    border-bottom: 1px solid var(--cll-border);
    border-top: 1px solid var(--cll-border);
    padding: var(--cll-spacing-lg) 20px;
    text-align: center;
}

.cll-meridian-kc .cll-hub-cta-inner{
    max-width: 800px;
    margin: 0 auto;
}

.cll-meridian-kc .cll-hub-cta-title{
    color: var(--cll-navy);
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.cll-meridian-kc .cll-hub-cta-copy{
    color: var(--cll-text-main);
    font-size: 1.05rem;
    line-height: 1.65;
}

.cll-meridian-kc .cll-hub-btn-group{
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
    margin-top: var(--cll-spacing-md);
}

.cll-meridian-kc .cll-hub-btn-primary, .cll-meridian-kc .cll-hub-btn-outline{
    align-items: center;
    display: inline-flex;
    font-size: 0.9rem;
    font-weight: 700;
    justify-content: center;
    letter-spacing: 0.06em;
    min-height: 44px;
    padding: 11px 30px;
    text-decoration: none;
    text-transform: uppercase;
}

.cll-meridian-kc .cll-hub-btn-primary{
    background: var(--cll-gold);
    border: 1px solid var(--cll-gold);
    color: var(--cll-navy);
}

.cll-meridian-kc .cll-hub-btn-primary:hover{
    background: var(--cll-gold-dark);
    border-color: var(--cll-gold-dark);
    color: var(--cll-white);
}

.cll-meridian-kc .cll-hub-btn-outline{
    background: transparent;
    border: 1px solid var(--cll-navy);
    color: var(--cll-navy);
}

.cll-meridian-kc .cll-hub-btn-outline:hover{
    background: var(--cll-navy);
    color: var(--cll-white);
}

/* Keyboard accessibility */
.cll-meridian-kc a:focus-visible, .cll-meridian-kc .cll-hub-wrapper a:focus-visible, .cll-meridian-kc .cll-hub-ecosystem-wrapper a:focus-visible, .cll-meridian-kc .cll-hub-cta-wrapper a:focus-visible{
    outline: 3px solid var(--cll-gold);
    outline-offset: 3px;
}

.cll-meridian-kc .cll-hub-btn-primary:focus-visible{
    outline-color: var(--cll-navy);
}

/* Desktop enhancement */
@media (min-width: 960px) {
    .cll-meridian-kc .cll-hub-featured-grid{ grid-template-columns: 3fr 2fr; }
}

/* Tablet */
@media (max-width: 959px) {
    :root{
        --cll-spacing-lg: 50px;
        --cll-spacing-md: 24px;
    }

    .cll-meridian-kc .cll-hub-hero{ padding: 64px 24px; }
    .cll-meridian-kc .cll-hub-wrapper{ padding-top: 50px; }
    .cll-meridian-kc .cll-hub-featured-body{ padding: 30px; }
    .cll-meridian-kc .cll-hub-supporting-list, .cll-meridian-kc .cll-hub-matrix-body, .cll-meridian-kc .cll-hub-eco-card{ padding: 26px; }
    .cll-meridian-kc .cll-hub-ecosystem-title, .cll-meridian-kc .cll-hub-cta-title{ font-size: 2.15rem; }
}

/* Mobile */
@media (max-width: 639px) {
    :root{
        --cll-spacing-lg: 40px;
        --cll-spacing-md: 20px;
    }

    .cll-meridian-kc .cll-hub-hero{ padding: 46px 18px; }
    .cll-meridian-kc .cll-hub-hero-title{ font-size: clamp(2.15rem, 11vw, 2.7rem); }
    .cll-meridian-kc .cll-hub-hero-lead{ font-size: 1rem; }
    .cll-meridian-kc .cll-hub-wrapper{ padding: 40px 18px 0; }
    .cll-meridian-kc .cll-hub-section-title{ font-size: 1.75rem; }
    .cll-meridian-kc .cll-hub-featured-image{ height: 220px; }
    .cll-meridian-kc .cll-hub-featured-body, .cll-meridian-kc .cll-hub-supporting-list, .cll-meridian-kc .cll-hub-matrix-body, .cll-meridian-kc .cll-hub-eco-card{ padding: 22px; }
    .cll-meridian-kc .cll-hub-featured-title{ font-size: 1.7rem; }
    .cll-meridian-kc .cll-hub-matrix-grid, .cll-meridian-kc .cll-hub-ecosystem-grid{ grid-template-columns: 1fr; }
    .cll-meridian-kc .cll-hub-matrix-image{ height: 180px; }
    .cll-meridian-kc .cll-hub-ecosystem-wrapper, .cll-meridian-kc .cll-hub-cta-wrapper{ padding: 44px 18px; }
    .cll-meridian-kc .cll-hub-ecosystem-title, .cll-meridian-kc .cll-hub-cta-title{ font-size: 1.9rem; }
    .cll-meridian-kc .cll-hub-btn-group{ align-items: stretch; flex-direction: column; }
    .cll-meridian-kc .cll-hub-btn-primary, .cll-meridian-kc .cll-hub-btn-outline{ width: 100%; box-sizing: border-box; }
}

@media (prefers-reduced-motion: reduce) {
    .cll-meridian-kc .cll-hub-matrix-card{ transition: none; }
}


/* Production isolation + full-bleed bands inside YOOtheme article container */
.cll-meridian-kc {
    margin: 0;
    background: #f8f9fa;
    color: var(--cll-text-main);
    font-family: var(--cll-font-sans);
    line-height: 1.6;
}
.cll-meridian-kc .cll-hub-hero,
.cll-meridian-kc .cll-hub-ecosystem-wrapper,
.cll-meridian-kc .cll-hub-cta-wrapper {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    box-sizing: border-box;
}
.cll-meridian-kc .cll-hub-eco-card h3 {
    color: var(--cll-white);
    font-family: var(--cll-font-serif);
    font-size: 1.3rem;
    margin: 0 0 10px;
}
.cll-meridian-kc .cll-hub-editorial {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 20px 40px;
    color: #607384;
    font-size: 0.9rem;
}
body:has(.cll-meridian-kc) .page-header,
body:has(.cll-meridian-kc) #comments,
body:has(.cll-meridian-kc) #commentbox,
body:has(.cll-meridian-kc) [id*="commentbox"],
body:has(.cll-meridian-kc) .commentbox-counter {
    display: none !important;
}