/*
Theme Name: Jelajah Bisnis
Theme URI: https://salamku.pro/nusabisnis/
Author: Jelajah Bisnis
Description: Tema editorial untuk media bisnis, pariwisata, dan ekonomi kreatif. Gaya jurnalistik terinspirasi detikTravel.
Version: 1.0
Text Domain: jelajah-bisnis
*/

/* ============================================
   1. DESIGN TOKENS
============================================ */
:root{
  --c-navy: #16335c;
  --c-navy-deep: #0e2342;
  --c-amber: #f5820d;
  --c-amber-deep: #d96c00;
  --c-sky: #eaf3fb;
  --c-paper: #fbf9f5;
  --c-white: #ffffff;
  --c-ink: #16213a;
  --c-gray: #6b7280;
  --c-gray-light: #9aa3b2;
  --c-line: #e6e3dc;

  --f-display: 'Lora', Georgia, serif;
  --f-body: 'Inter', -apple-system, sans-serif;
  --f-label: 'Poppins', -apple-system, sans-serif;

  --container-max: 1200px;
  --pad-x: 16px;
  --radius-sm: 7px;
  --radius-md: 12px;
  --radius-lg: 18px;

  --shadow-card: 0 1px 3px rgba(14,35,66,.06);
  --shadow-pop: 0 12px 32px rgba(14,35,66,.14);
}
@media(min-width:768px){ :root{ --pad-x: 24px; } }

/* ============================================
   2. RESET & BASE
============================================ */
*,*::before,*::after{box-sizing:border-box; margin:0; padding:0;}
html{overflow-x:hidden; max-width:100%; scroll-behavior:smooth; -webkit-text-size-adjust:100%;}
body{
  font-family:var(--f-body); color:var(--c-ink); background:var(--c-white);
  -webkit-font-smoothing:antialiased; overflow-x:hidden; width:100%; max-width:100vw;
  font-size:15px; line-height:1.5;
}
img{max-width:100%; height:auto; display:block;}
a{text-decoration:none; color:inherit; -webkit-tap-highlight-color:transparent;}
a:visited,a:active,a:focus{color:inherit;}
button{font:inherit; color:inherit; cursor:pointer; background:none; border:none;}
input{font:inherit;}
ul{list-style:none;}
h1,h2,h3,h4,h5{font-family:var(--f-display); line-height:1.2; font-weight:700;}
svg{display:block; flex-shrink:0;}

.wrap{width:100%; max-width:var(--container-max); margin-inline:auto; padding-inline:var(--pad-x);}
.eyebrow{font-family:var(--f-label); font-weight:600; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--c-amber-deep);}

/* ============================================
   3. LOGO
============================================ */
.jb-mark{width:34px; height:34px; flex-shrink:0;}
.jb-mark svg{width:100%; height:100%;}

/* ============================================
   4. TOPBAR
============================================ */
.topbar{background:var(--c-navy-deep); color:#cfdbef;}
.topbar .wrap{display:flex; align-items:center; justify-content:space-between; height:32px; font-size:11px; gap:8px;}
.topbar .date-line{display:flex; align-items:center; gap:6px; color:#cfdbef; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.topbar .dot{width:5px; height:5px; border-radius:50%; background:var(--c-amber); flex-shrink:0;}
.topbar .links{display:none;}
@media(min-width:640px){
  .topbar .wrap{height:34px; font-size:12.5px;}
  .topbar .links{display:flex; gap:16px;}
  .topbar .links a{color:#cfdbef; opacity:.85;}
  .topbar .links a:hover{opacity:1; color:#fff;}
}

/* ============================================
   5. NAVBAR
============================================ */
.navbar{background:var(--c-white); border-bottom:1px solid var(--c-line); position:sticky; top:0; z-index:100;}
.navbar .wrap{display:flex; align-items:center; justify-content:space-between; height:60px; gap:10px;}
.brand{display:flex; align-items:center; gap:9px; min-width:0;}
.brand-text{line-height:1.15; min-width:0;}
.brand-text .name{font-family:var(--f-display); font-weight:700; font-size:17px; color:var(--c-navy-deep); white-space:nowrap;}
.brand-text .tag{font-family:var(--f-label); font-size:8.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--c-amber-deep); font-weight:600; display:none;}

.nav-links{display:none;}
.nav-actions{display:flex; align-items:center; gap:8px;}
.icon-btn{width:36px; height:36px; border-radius:50%; border:1px solid var(--c-line); display:flex; align-items:center; justify-content:center; color:var(--c-navy); flex-shrink:0;}
.btn-ai{background:var(--c-amber); color:#fff; font-family:var(--f-label); font-weight:600; font-size:12.5px; padding:9px 12px; border-radius:var(--radius-sm); display:flex; align-items:center; gap:6px; box-shadow:0 4px 12px rgba(245,130,13,.28); white-space:nowrap;}
.btn-ai .btn-label{display:none;}
.navbar-ai-btn{display:none;}

.burger{width:36px; height:36px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; flex-shrink:0;}
.burger span{width:19px; height:2px; background:var(--c-navy-deep); border-radius:2px; transition:.25s;}
.burger.is-open span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.burger.is-open span:nth-child(2){opacity:0;}
.burger.is-open span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

@media(min-width:1024px){
  .navbar .wrap{height:78px;}
  .jb-mark{width:40px; height:40px;}
  .brand-text .name{font-size:21px;}
  .brand-text .tag{display:block; margin-top:2px;}
  .nav-links{display:flex; align-items:center; gap:26px;}
  .nav-links a{font-family:var(--f-label); font-size:13.5px; font-weight:500; color:var(--c-navy-deep);}
  .nav-links a:hover{color:var(--c-amber-deep);}
  .btn-ai{padding:10px 18px; font-size:13px; gap:8px;}
  .btn-ai .btn-label{display:inline;}
  .navbar-ai-btn{display:flex;}
  .burger{display:none;}
}

.mobile-menu{position:fixed; inset:0; background:rgba(14,35,66,.5); z-index:200; opacity:0; pointer-events:none; transition:opacity .25s;}
.mobile-menu.is-open{opacity:1; pointer-events:auto;}
.mobile-menu-panel{position:absolute; top:0; right:0; height:100%; width:min(78vw,320px); background:var(--c-white); box-shadow:var(--shadow-pop); padding:20px; padding-top:max(20px, env(safe-area-inset-top)); transform:translateX(100%); transition:transform .3s ease; display:flex; flex-direction:column;}
.mobile-menu.is-open .mobile-menu-panel{transform:translateX(0);}
.mobile-menu-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:24px;}
.mobile-menu-head .jb-mark{width:30px; height:30px;}
.mobile-menu nav{display:flex; flex-direction:column;}
.mobile-menu nav a{padding:14px 4px; font-family:var(--f-label); font-weight:600; font-size:15px; color:var(--c-navy-deep); border-bottom:1px solid var(--c-line); display:flex; align-items:center; justify-content:space-between;}
.mobile-menu .btn-ai{margin-top:20px; justify-content:center; padding:13px;}
.mobile-menu .btn-ai .btn-label{display:inline;}
@media(min-width:1024px){ .mobile-menu{display:none;} }

/* ============================================
   6. HERO
============================================ */
.hero{background:var(--c-white); padding:18px 0 0; position:relative; overflow:hidden; width:100%;}
.hero-grid{display:flex; flex-direction:column; gap:14px; position:relative; z-index:2;}
.hero-main{position:relative; border-radius:var(--radius-md); overflow:hidden; min-height:320px; display:flex; align-items:flex-end; box-shadow:var(--shadow-card); border:1px solid var(--c-line);}
.hero-main img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.hero-main .scrim{position:absolute; inset:0; background:linear-gradient(0deg, rgba(14,35,66,.95) 0%, rgba(14,35,66,.5) 50%, rgba(14,35,66,.05) 78%);}
.hero-main .content{position:relative; z-index:2; padding:18px; color:#fff; width:100%;}
.pill{display:inline-block; background:var(--c-amber); color:#fff; font-family:var(--f-label); font-weight:600; font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; padding:5px 11px; border-radius:5px; margin-bottom:10px;}
.hero-main h2{font-size:21px; line-height:1.25; font-weight:700; color:#fff !important; margin-bottom:10px;}
.hero-meta{display:flex; flex-wrap:wrap; gap:8px; font-size:11.5px; color:#c4d2e8;}

.hero-side{display:grid; grid-template-columns:1fr; gap:12px;}
.hero-card{background:var(--c-white); border:1px solid var(--c-line); border-radius:var(--radius-md); padding:12px; display:flex; gap:11px; cursor:pointer; box-shadow:var(--shadow-card); transition:border-color .2s;}
.hero-card:hover{border-color:var(--c-amber);}
.hero-card img{width:78px; height:64px; object-fit:cover; border-radius:7px; flex-shrink:0;}
.hero-card .pill-sm{font-family:var(--f-label); font-size:9.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--c-amber-deep); margin-bottom:5px; display:block;}
.hero-card h4{color:var(--c-navy-deep) !important; font-size:13px; line-height:1.35; font-weight:600;}
.hero-card .time{color:var(--c-gray-light); font-size:10.5px; margin-top:6px; display:block; font-family:var(--f-body); font-weight:400;}

.ticker-strip{background:var(--c-white); border-top:1px solid var(--c-line); border-bottom:1px solid var(--c-line); margin-top:16px; padding:9px 0; position:relative; z-index:2; width:100%; overflow:hidden;}
.ticker-strip .wrap{display:flex; align-items:center; gap:10px;}
.ticker-strip .tag{font-family:var(--f-label); font-weight:700; font-size:10px; letter-spacing:.06em; text-transform:uppercase; background:var(--c-amber); color:#fff; padding:4px 9px; border-radius:5px; flex-shrink:0;}
.ticker-strip .items{font-size:11.5px; color:var(--c-navy-deep); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

@media(min-width:768px){
  .hero{padding:28px 0 0;}
  .hero-main{min-height:400px;}
  .hero-main .content{padding:28px;}
  .hero-main h2{font-size:28px;}
  .hero-card img{width:92px; height:78px;}
  .hero-card h4{font-size:14px;}
}
@media(min-width:1024px){
  .hero-grid{display:grid; grid-template-columns:1.5fr 1fr; gap:24px;}
  .hero-main{min-height:440px;}
  .hero-main .content{padding:32px;}
  .hero-main h2{font-size:32px; max-width:540px;}
  .hero-side{gap:16px;}
  .hero-card{padding:16px;}
  .hero-card img{width:100px; height:84px;}
  .hero-card h4{font-size:15px;}
  .ticker-strip{margin-top:28px; padding:11px 0;}
}

/* ============================================
   7. RUBRIK STRIP
============================================ */
.rubrik-strip{background:var(--c-white); border-bottom:1px solid var(--c-line);}
.rubrik-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--c-line);}
.rubrik-item{padding:18px 10px; text-align:center; background:var(--c-white); transition:background .2s;}
.rubrik-item:hover{background:var(--c-sky);}
.rubrik-item .ricon{width:38px; height:38px; margin:0 auto 9px; display:flex; align-items:center; justify-content:center; background:var(--c-sky); border-radius:50%; color:var(--c-navy);}
.rubrik-item:hover .ricon{background:var(--c-amber); color:#fff;}
.rubrik-item h5{font-family:var(--f-label); font-weight:600; font-size:12.5px; color:var(--c-navy-deep); margin-bottom:3px;}
.rubrik-item p{font-size:10.5px; color:var(--c-gray);}
@media(min-width:640px){ .rubrik-grid{grid-template-columns:repeat(3,1fr);} }
@media(min-width:1024px){
  .rubrik-grid{grid-template-columns:repeat(5,1fr);}
  .rubrik-item{padding:28px 18px;}
  .rubrik-item .ricon{width:44px; height:44px;}
  .rubrik-item h5{font-size:14px;}
  .rubrik-item p{font-size:11.5px;}
}

/* ============================================
   8. SECTION PATTERN
============================================ */
.section{padding:36px 0;}
.section-head{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:18px; gap:10px;}
.section-head h3{font-size:20px; font-weight:700; color:var(--c-navy-deep); margin-top:4px;}
.section-head .more{font-family:var(--f-label); font-size:12px; font-weight:600; color:var(--c-amber-deep); display:flex; align-items:center; gap:5px; white-space:nowrap; flex-shrink:0;}
@media(min-width:768px){ .section{padding:52px 0;} .section-head h3{font-size:25px;} }
@media(min-width:1024px){ .section{padding:64px 0;} .section-head h3{font-size:28px;} .section-head .more{font-size:13px;} }

/* ============================================
   9. NEWS GRID
============================================ */
.news-grid{display:grid; grid-template-columns:1fr; gap:22px;}
.news-card{cursor:pointer;}
.news-card .thumb{border-radius:var(--radius-sm); overflow:hidden; aspect-ratio:16/10; margin-bottom:12px; background:var(--c-sky);}
.news-card .thumb img{width:100%; height:100%; object-fit:cover; transition:transform .4s;}
.news-card:hover .thumb img{transform:scale(1.05);}
.news-card .cat{font-family:var(--f-label); font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--c-amber-deep); margin-bottom:7px; display:block;}
.news-card h4{font-size:16.5px; line-height:1.35; font-weight:600; color:var(--c-navy-deep); margin-bottom:8px;}
.news-card:hover h4{color:var(--c-amber-deep);}
.news-card .excerpt{font-size:13px; color:var(--c-gray); line-height:1.55; margin-bottom:10px;}
.news-card .time{font-size:11px; color:var(--c-gray-light);}
@media(min-width:640px){ .news-grid{grid-template-columns:1fr 1fr;} }
@media(min-width:1024px){ .news-grid{grid-template-columns:repeat(3,1fr); gap:28px;} .news-card h4{font-size:18.5px;} .news-card .excerpt{font-size:13.5px;} }

/* ============================================
   10. AI BANNER
============================================ */
.ai-banner{background:var(--c-white); border:1px solid var(--c-line); border-radius:var(--radius-lg); padding:28px 18px; position:relative; overflow:hidden; display:flex; flex-direction:column; gap:24px; width:100%; min-width:0; box-shadow:var(--shadow-card);}
.ai-banner::before{content:""; position:absolute; right:-100px; top:-60px; width:280px; height:280px; border:1px solid var(--c-sky); border-radius:50%; pointer-events:none;}
.ai-banner .eyebrow{color:var(--c-amber-deep);}
.ai-banner h3{color:var(--c-navy-deep) !important; font-size:21px; line-height:1.3; margin:10px 0 12px;}
.ai-banner p{color:var(--c-gray); font-size:13.5px; line-height:1.6; margin-bottom:18px;}
.ai-tool-list{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; position:relative; z-index:2; min-width:0;}
.ai-tool-list span{font-family:var(--f-label); font-size:11px; font-weight:500; color:var(--c-navy-deep); background:var(--c-sky); border:1px solid #dbe9f8; padding:6px 11px; border-radius:20px; white-space:normal; max-width:100%;}
.btn-amber-lg{background:var(--c-amber); color:#fff; font-family:var(--f-label); font-weight:600; font-size:13.5px; padding:13px 22px; border-radius:var(--radius-sm); display:inline-flex; align-items:center; gap:8px; box-shadow:0 8px 20px rgba(245,130,13,.25); width:fit-content; position:relative; z-index:2;}
.ai-visual{display:flex; justify-content:center; position:relative; z-index:2;}
.ai-orb{width:140px; height:140px; border-radius:50%; background:radial-gradient(circle at 35% 30%, var(--c-sky), #fff 70%); display:flex; align-items:center; justify-content:center; border:1px solid var(--c-line);}
.ai-orb .jb-mark{width:54px; height:54px;}
@media(min-width:1024px){
  .ai-banner{padding:56px 50px; flex-direction:row; align-items:center; gap:30px;}
  .ai-banner > div:first-child{flex:1.2;}
  .ai-banner h3{font-size:32px; max-width:480px;}
  .ai-banner p{font-size:14.5px; max-width:460px;}
  .ai-visual{flex:.8;}
  .ai-orb{width:220px; height:220px;}
  .ai-orb .jb-mark{width:84px; height:84px;}
}

/* ============================================
   11. SPOTLIGHT
============================================ */
.spotlight{display:flex; flex-direction:column; border-radius:var(--radius-md); overflow:hidden; background:var(--c-white); box-shadow:var(--shadow-card); border:1px solid var(--c-line);}
.spotlight .img-side{position:relative; min-height:220px; background:var(--c-sky);}
.spotlight .img-side img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.spotlight .text-side{padding:22px;}
.spotlight .pill{background:var(--c-sky); color:var(--c-navy-deep);}
.spotlight h3{font-size:20px; line-height:1.3; color:var(--c-navy-deep); margin-bottom:12px;}
.spotlight p{font-size:13.5px; color:var(--c-gray); line-height:1.6; margin-bottom:18px;}
.spotlight .stats{display:flex; flex-wrap:wrap; gap:18px; margin-bottom:18px;}
.spotlight .stat b{font-family:var(--f-display); font-size:19px; color:var(--c-amber-deep); display:block;}
.spotlight .stat span{font-size:10.5px; color:var(--c-gray);}
.link-arrow{font-family:var(--f-label); font-weight:600; font-size:13px; color:var(--c-navy-deep); display:inline-flex; align-items:center; gap:7px;}
@media(min-width:1024px){
  .spotlight{flex-direction:row;}
  .spotlight .img-side{flex:1; min-height:420px;}
  .spotlight .text-side{flex:1; padding:48px; display:flex; flex-direction:column; justify-content:center;}
  .spotlight h3{font-size:27px;}
  .spotlight p{font-size:14.5px;}
  .spotlight .stat b{font-size:24px;}
}

/* ============================================
   12. EKRAF SCROLL
============================================ */
.ekraf-scroll{display:flex; gap:14px; overflow-x:auto; padding-bottom:6px; margin-inline:calc(var(--pad-x) * -1); padding-inline:var(--pad-x); scrollbar-width:none;}
.ekraf-scroll::-webkit-scrollbar{display:none;}
.ekraf-card{flex:0 0 220px; background:var(--c-white); border-radius:var(--radius-sm); overflow:hidden; border:1px solid var(--c-line); cursor:pointer;}
.ekraf-card .thumb{aspect-ratio:4/3; overflow:hidden; background:var(--c-sky);}
.ekraf-card .thumb img{width:100%; height:100%; object-fit:cover;}
.ekraf-card .body{padding:13px;}
.ekraf-card .cat{font-family:var(--f-label); font-size:9px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--c-amber-deep);}
.ekraf-card h5{font-size:13px; margin:7px 0; color:var(--c-navy-deep); line-height:1.35; font-weight:600;}
.ekraf-card .loc{font-size:10.5px; color:var(--c-gray); display:flex; align-items:center; gap:5px;}
@media(min-width:1024px){ .ekraf-card{flex:0 0 280px;} .ekraf-card h5{font-size:15.5px;} }

/* ============================================
   13. TOKOH
============================================ */
.tokoh-grid{display:grid; grid-template-columns:1fr; gap:16px;}
.tokoh-card{position:relative; border-radius:var(--radius-md); overflow:hidden; aspect-ratio:3/3; cursor:pointer;}
.tokoh-card img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.tokoh-card .scrim{position:absolute; inset:0; background:linear-gradient(0deg, rgba(14,35,66,.93) 15%, transparent 60%);}
.tokoh-card .body{position:absolute; left:0; right:0; bottom:0; padding:18px; color:#fff;}
.tokoh-card .role{font-family:var(--f-label); font-size:9.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--c-amber); margin-bottom:6px; display:block;}
.tokoh-card h5{font-size:16px; margin-bottom:7px; color:#fff !important;}
.tokoh-card .quote{font-size:11.5px; color:#c9d4e6; line-height:1.5; font-style:italic;}
@media(min-width:640px){ .tokoh-grid{grid-template-columns:repeat(3,1fr);} }

/* ============================================
   14. NEWSLETTER
============================================ */
.newsletter{background:var(--c-navy-deep); border-radius:var(--radius-lg); padding:32px 20px; text-align:center; position:relative; overflow:hidden;}
.newsletter::before{content:""; position:absolute; left:-60px; bottom:-80px; width:240px; height:240px; border:1px solid rgba(245,130,13,.25); border-radius:50%; pointer-events:none;}
.newsletter .eyebrow{color:var(--c-amber); opacity:1;}
.newsletter h3{color:#fff !important; font-size:22px; margin:12px 0 8px;}
.newsletter p{color:#c4d2e8; font-size:13.5px; margin-bottom:22px;}
.newsletter-form{display:flex; flex-direction:column; gap:9px; max-width:420px; margin:0 auto; position:relative; z-index:2;}
.newsletter-form input{border:none; border-radius:var(--radius-sm); padding:13px 16px; font-family:var(--f-body); font-size:14px; outline:none; width:100%;}
.newsletter-form button{background:var(--c-amber); color:#fff; border-radius:var(--radius-sm); padding:13px 22px; font-family:var(--f-label); font-weight:600; font-size:13px;}
@media(min-width:640px){
  .newsletter{padding:54px 60px;}
  .newsletter h3{font-size:30px;}
  .newsletter-form{flex-direction:row;}
  .newsletter-form input{flex:1;}
  .newsletter-form button{white-space:nowrap;}
}

/* ============================================
   15. FOOTER
============================================ */
footer{background:var(--c-navy-deep); color:#aebcd6; padding:40px 0 0; margin-top:20px;}
.footer-grid{display:grid; grid-template-columns:1fr; gap:28px; padding-bottom:32px; border-bottom:1px solid rgba(255,255,255,.08);}
.footer-brand .brand{margin-bottom:14px;}
.footer-brand .brand-text .name{color:#fff;}
.footer-brand p{font-size:12.5px; line-height:1.7; max-width:280px; color:#8fa1c2;}
.footer-col h6{font-family:var(--f-label); font-size:11.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:#fff; margin-bottom:14px;}
.footer-col a{display:block; font-size:13px; margin-bottom:10px; color:#aebcd6;}
.footer-col a:hover{color:var(--c-amber);}
.footer-bottom{display:flex; flex-direction:column; gap:10px; align-items:center; text-align:center; padding:20px 0; font-size:11.5px; color:#7c8caa;}
.footer-bottom .tagline{font-family:var(--f-display); font-style:italic; color:#c9d4e6;}
.social-row{display:flex; gap:9px;}
.social-row a{width:32px; height:32px; border-radius:50%; border:1px solid rgba(255,255,255,.15); display:flex; align-items:center; justify-content:center; color:#aebcd6; font-size:11px;}
.social-row a:hover{background:var(--c-amber); border-color:var(--c-amber); color:#fff;}
@media(min-width:768px){ .footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr;} .footer-bottom{flex-direction:row; justify-content:space-between;} }

/* ============================================
   16. HALAMAN ARTIKEL (single.php)
============================================ */
.article-hero{background:var(--c-white); padding:18px 0 0;}
.breadcrumb{display:flex; align-items:center; gap:6px; font-size:12px; color:var(--c-gray); margin-bottom:14px; flex-wrap:wrap;}
.breadcrumb a{color:var(--c-gray);}
.breadcrumb a:hover{color:var(--c-amber-deep);}
.article-header{padding-bottom:16px; text-align:left;}
.article-header .pill{display:none;}
.article-header h1{color:var(--c-navy-deep) !important; font-size:22px; line-height:1.32; margin:0 0 14px;}
.article-meta{display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:12.5px; color:var(--c-gray);}
.article-meta .author-name{font-weight:600; color:var(--c-navy-deep);}
.article-meta .source{color:var(--c-amber-deep); font-weight:600;}
.article-date{font-size:12px; color:var(--c-gray-light); margin-top:8px;}
.author-chip{display:none;}
.article-cover{aspect-ratio:16/10; overflow:hidden; margin-top:18px; border-radius:var(--radius-sm); background:var(--c-sky);}
.article-cover img{width:100%; height:100%; object-fit:cover;}
.article-caption{font-size:11.5px; color:var(--c-gray); padding:8px 0 0; text-align:left;}

.article-body-wrap{padding:24px 0 0; display:flex; flex-direction:column; gap:28px; align-items:flex-start;}
.article-body{font-family:var(--f-body); font-size:15.5px; line-height:1.85; color:#2b3650; width:100%;}
.article-body p{margin-bottom:18px;}
.article-body p:first-of-type::first-letter{font-weight:700;}
.article-lead{font-weight:700; color:var(--c-ink);}
.article-body h2{font-size:19px; color:var(--c-navy-deep); margin:26px 0 12px;}
.article-body blockquote{border-left:3px solid var(--c-amber); padding:4px 0 4px 16px; margin:22px 0; font-family:var(--f-display); font-style:italic; font-size:17px; color:var(--c-navy-deep);}
.article-share{display:flex; gap:8px; margin:24px 0; flex-wrap:wrap;}
.article-share a{width:36px; height:36px; border-radius:50%; border:1px solid var(--c-line); display:flex; align-items:center; justify-content:center; color:var(--c-navy); font-size:13px;}
.article-share a:hover{background:var(--c-amber); border-color:var(--c-amber); color:#fff;}

.article-sidebar h6{font-family:var(--f-label); font-size:11.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--c-navy-deep); margin-bottom:14px; padding-bottom:10px; border-bottom:2px solid var(--c-amber); display:inline-block;}
.related-item{display:flex; gap:11px; padding:12px 0; border-bottom:1px solid var(--c-line); cursor:pointer;}
.related-item:first-of-type{padding-top:0;}
.related-item img{width:72px; height:62px; object-fit:cover; border-radius:6px; flex-shrink:0; background:var(--c-sky);}
.related-item h6{font-size:12.5px; font-weight:600; color:var(--c-navy-deep); line-height:1.4; margin:0; padding:0; border:none; display:block; text-transform:none; letter-spacing:0; font-family:var(--f-body);}
.related-item:hover h6{color:var(--c-amber-deep);}
.related-item .time{font-size:10.5px; color:var(--c-gray-light); margin-top:5px; display:block;}

.back-to-list{display:inline-flex; align-items:center; gap:7px; font-family:var(--f-label); font-weight:600; font-size:12.5px; color:var(--c-navy-deep); padding:9px 0; margin-bottom:10px; cursor:pointer;}

@media(min-width:1024px){
  .article-hero{padding:0;}
  .article-header{padding-bottom:20px;}
  .article-header h1{font-size:32px;}
  .article-cover{margin-top:20px;}
  .article-body-wrap{padding:40px 0 0; flex-direction:row; gap:56px; align-items:flex-start;}
  .article-body{flex:1.7; font-size:16.5px;}
  .article-sidebar{flex:1; max-width:300px; padding-top:0;}
}

/* Utility */
.skip-mobile{display:none;}
@media(min-width:1024px){ .skip-mobile{display:block;} }