/* ===================================================================
   ARTICLE-DETAIL.CSS
   Editorial article detail page, consistent with Ecoco Nusantara
   dark luxury/industrial visual identity.
=================================================================== */

.article-page{
    background:#16100c;
    padding:150px 60px 120px;
    min-height:100vh;
}

.article-container{
    max-width:1240px;
    margin:0 auto;
}

/* ----- BACK NAVIGATION ----- */
.article-back{
    display:inline-flex;
    align-items:center;
    gap:8px;

    color:#b3a794;
    font-family:'Inter',sans-serif;
    font-size:13px;
    font-weight:500;
    letter-spacing:.5px;
    text-decoration:none;

    transition:.3s;
    margin-bottom:48px;
}

.article-back svg{
    width:15px;
    height:15px;
}

.article-back:hover{
    color:#F99532;
}

/* ----- ARTICLE HEADER ----- */
.article-header{
    position:static;
    display:block;
    width:auto;
    height:auto;
    background:transparent;
    border:none;
    padding:0;
    z-index:auto;

    max-width:840px;
    margin:0 0 64px;
}

.article-category{
    display:block;

    color:#F99532;
    font-family:'Inter',sans-serif;
    font-size:12px;
    font-weight:700;
    letter-spacing:3px;
    text-transform:uppercase;

    margin-bottom:18px;
}

.article-category::before{
    content:'';
    display:inline-block;
    width:2px;
    height:12px;
    background:#F99532;
    margin-right:10px;
    vertical-align:-1px;
}

.article-title{
    font-family:'Playfair Display',serif;
    font-size:46px;
    font-weight:700;
    line-height:1.18;
    color:#fff;
    margin-bottom:22px;
    white-space:pre-line;
}

.article-meta{
    font-family:'Inter',sans-serif;
    font-size:13.5px;
    color:#a89e91;
    letter-spacing:.3px;
    display:flex;
    align-items:center;
    gap:8px;
}

.article-meta-author{
    color:#F99532;
    font-weight:600;
}

.article-meta-sep{
    color:rgba(255,255,255,.4);
}

.article-meta-date{
    color:#a89e91;
}

/* ----- SOCIAL SHARE ----- */
.article-share{
    display:flex;
    align-items:center;
    gap:12px;
    margin-top:34px;
}

.article-share-label{
    font-family:'Inter',sans-serif;
    font-size:11px;
    font-weight:600;
    letter-spacing:2px;
    color:#8c8073;
    margin-right:4px;
}

.share-btn{
    width:38px;
    height:38px;
    border-radius:50%;
    border:none;
    color:#fff;

    display:flex;
    align-items:center;
    justify-content:center;

    cursor:pointer;
    transition:.3s;
}

.share-btn svg{
    width:15px;
    height:15px;
}

.share-btn[data-share="facebook"]{ background:#1877F2; }
.share-btn[data-share="instagram"]{ background:#E1306C; }
.share-btn[data-share="linkedin"]{ background:#0A66C2; }
.share-btn[data-share="whatsapp"]{ background:#25D366; }
.share-btn[data-share="copy"]{ background:#6b7280; }

.share-btn:hover{
    filter:brightness(1.12);
    transform:translateY(-2px);
}

.share-btn.done{
    filter:brightness(1.2);
}

/* ----- TWO-COLUMN LAYOUT ----- */
.article-layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) 340px;
    gap:70px;
    align-items:start;
}

/* ----- MAIN CONTENT ----- */
.article-cover{
    border-radius:14px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.1);
    background:#1c140f;
    margin-bottom:52px;
}

.article-cover img{
    width:100%;
    aspect-ratio:16/9;
    object-fit:cover;
    display:block;
}

.article-body{
    max-width:100%;
}

.article-intro{
    font-family:'Playfair Display',serif;
    font-style:italic;
    font-size:20px;
    line-height:1.8;
    color:#f1e9dc;

    margin-bottom:46px;
    padding-bottom:34px;
    border-bottom:1px solid rgba(255,255,255,.1);
}

.article-body h2{
    font-family:'Playfair Display',serif;
    font-size:26px;
    font-weight:600;
    line-height:1.4;
    color:#fff;
    margin:50px 0 18px;
}

.article-body h2::after{
    content:'';
    display:block;
    width:44px;
    height:2px;
    background:#F99532;
    margin-top:14px;
}

.article-body p{
    font-family:'Inter',sans-serif;
    font-size:15.5px;
    line-height:1.95;
    color:#d5ccc0;
    margin-bottom:22px;
    text-align:justify;
}

.article-conclusion{
    margin-top:26px;
    padding:0;

    font-family:'Playfair Display',serif;
    font-style:italic;
    font-size:18px;
    line-height:1.85;
    color:#f1e9dc;
}

/* ----- SIDEBAR ----- */
.article-sidebar{
    position:sticky;
    top:110px;

    padding:34px;
    background:rgba(28,20,15,.7);
    border:1px solid rgba(255,255,255,.08);
    border-radius:20px;
}

.sidebar-title{
    display:flex;
    align-items:center;
    gap:10px;

    font-family:'Playfair Display',serif;
    font-size:21px;
    font-weight:600;
    color:#fff;

    margin-bottom:24px;
    padding-bottom:16px;
    border-bottom:1px solid rgba(255,255,255,.1);
}

.sidebar-title::before{
    content:'';
    width:2px;
    height:16px;
    background:#F99532;
}

.sidebar-card{
    display:flex;
    gap:16px;
    text-decoration:none;

    padding:16px 0;
    border-bottom:1px solid rgba(255,255,255,.07);

    transition:.3s;
}

.sidebar-card:last-child{
    border-bottom:none;
    padding-bottom:0;
}

.sidebar-card-thumb{
    flex:0 0 auto;
    width:86px;
    height:86px;
    border-radius:12px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.08);
    transition:border-color .3s;
}

.sidebar-card-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.sidebar-card-meta{
    display:block;
    font-family:'Inter',sans-serif;
    font-size:10.5px;
    font-weight:600;
    letter-spacing:1px;
    text-transform:uppercase;
    color:#8c8073;
    margin-bottom:7px;
}

.sidebar-card-title{
    font-family:'Poppins',sans-serif;
    font-size:14px;
    font-weight:600;
    line-height:1.45;
    color:#fff;
    transition:color .3s;
}

.sidebar-card:hover .sidebar-card-title{
    color:#F99532;
}

.sidebar-card:hover .sidebar-card-thumb{
    border-color:rgba(249,149,50,.5);
}

/* ===== RESPONSIVE ===== */
/* Tablet: two columns, narrower sidebar, smaller heading */
@media(max-width:1100px){
    .article-page{
        padding:130px 40px 100px;
    }

    .article-layout{
        grid-template-columns:minmax(0,1fr) 280px;
        gap:44px;
    }

    .article-title{
        font-size:38px;
    }
}

/* Mobile: stack everything vertically, article first, sidebar below */
@media(max-width:900px){
    .article-page{
        padding:120px 24px 70px;
    }

    .article-title{
        font-size:30px;
    }

    .article-header{
        margin-bottom:40px;
    }

    .article-share{
        flex-wrap:wrap;
    }

    .article-layout{
        grid-template-columns:1fr;
        gap:50px;
    }

    .article-sidebar{
        position:static;
        width:100%;
    }

    .article-intro{
        font-size:17px;
    }

    .article-body h2{
        font-size:22px;
    }

    .article-sidebar{
        padding:26px;
    }

    .article-body p{
        text-align:left;
        line-height:1.85;
    }

    .article-meta{
        flex-wrap:wrap;
    }

    .article-back{
        margin-bottom:28px;
    }
}

@media(max-width:480px){
    .article-page{
        padding:110px 20px 60px;
    }

    .article-title{
        font-size:25px;
        line-height:1.3;
    }
}