/* GTA 6 GUIDES — COMPLETE STYLESHEET */

.guides-hero{
    position:relative;overflow:hidden;padding:105px 0 82px;
    background:radial-gradient(circle at 82% 35%,rgba(139,210,63,.16),transparent 28%),
               linear-gradient(135deg,#090c0e 0%,#111719 55%,#0a0d0f 100%);
    border-bottom:1px solid #222a2e;
}
.guides-hero::after{
    content:"";position:absolute;width:450px;height:450px;right:-160px;top:-170px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(220,234,105,.38),rgba(139,210,63,.08) 48%,transparent 72%);
    pointer-events:none;
}
.guides-hero .container{position:relative;z-index:2}
.guides-hero h1{
    margin:18px 0 20px;font-family:"Barlow Condensed",sans-serif;
    font-size:clamp(65px,9vw,105px);line-height:.84;letter-spacing:-2px;text-transform:uppercase;
}
.guides-hero h1 span{display:block}
.guides-hero p{max-width:720px;margin:0;color:#a8b0b3;font-size:15px;line-height:1.75}

.guides-section{padding:80px 0 95px}
.guides-intro{max-width:780px;margin:0 0 38px;color:#9da6a9;font-size:13px;line-height:1.85}
.guides-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.guide-card-large{
    position:relative;display:flex;flex-direction:column;min-height:275px;padding:28px;
    background:linear-gradient(145deg,#181e21,#121719);border:1px solid #293236;
    transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.guide-card-large:hover{transform:translateY(-5px);border-color:#687477;box-shadow:0 18px 38px rgba(0,0,0,.25)}
.guide-index{color:#687276;font-family:"Barlow Condensed",sans-serif;font-size:15px;font-weight:800;letter-spacing:1px}
.guide-category{align-self:flex-start;margin-top:16px;padding:5px 8px;border:1px solid #374146;color:#8c9699;font-size:8px;font-weight:800;letter-spacing:1px}
.guide-card-large h2{margin:18px 0 10px;font-family:"Barlow Condensed",sans-serif;font-size:35px;line-height:.98;text-transform:uppercase}
.guide-card-large p{max-width:520px;margin:0;color:#98a1a4;font-size:12px;line-height:1.7}
.guide-read{margin-top:auto;padding-top:25px;color:var(--green);font-size:9px;font-weight:800;letter-spacing:1px}

.guides-cta{padding:70px 0;background:linear-gradient(110deg,#8bd23f,#b8e956);color:#091006}
.guides-cta h2{max-width:720px;margin:8px 0 12px;font-family:"Barlow Condensed",sans-serif;font-size:50px;line-height:.95;text-transform:uppercase}
.guides-cta p{max-width:680px;margin:0 0 25px;color:#263719;font-size:13px;line-height:1.7}
.guides-cta-button{display:inline-flex;align-items:center;min-height:45px;padding:0 20px;background:#0b100c;color:#fff;font-size:10px;font-weight:800;letter-spacing:1px}

/* ARTICLE BREADCRUMB */
.article-breadcrumb{
    padding:18px 0;background:#0b0e10;border-bottom:1px solid #20272a;color:#747d80;
    font-size:10px;line-height:1.5;
}
.article-breadcrumb .container{display:flex;align-items:center;flex-wrap:wrap;gap:9px}
.article-breadcrumb a{color:#8d9699}
.article-breadcrumb a:hover{color:var(--green)}
.article-breadcrumb strong{color:#d1d5d5}

/* ARTICLE HERO */
.article-hero{
    position:relative;overflow:hidden;padding:92px 0 80px;
    background:radial-gradient(circle at 82% 35%,rgba(139,210,63,.15),transparent 30%),
               linear-gradient(135deg,#090c0e 0%,#111719 58%,#0b0e10 100%);
    border-bottom:1px solid #222a2e;
}
.article-hero::after{
    content:"";position:absolute;width:420px;height:420px;right:-150px;top:-170px;border-radius:50%;
    background:radial-gradient(circle,rgba(220,233,100,.33),rgba(139,210,63,.07) 48%,transparent 72%);
    pointer-events:none;
}
.article-hero .container{position:relative;z-index:2}
.article-label{display:inline-block;margin:0 0 18px;color:var(--green);font-size:10px;font-weight:800;letter-spacing:2px;text-transform:uppercase}
.article-hero h1{
    max-width:900px;margin:0 0 22px;font-family:"Barlow Condensed",sans-serif;
    font-size:clamp(62px,8vw,96px);line-height:.84;letter-spacing:-2px;text-transform:uppercase;color:#f5f5ef;
}
.article-hero h1 span{display:block}
.article-lead{max-width:780px;margin:0 0 24px;color:#aab2b5;font-size:17px;line-height:1.75}
.article-meta{display:flex;align-items:center;flex-wrap:wrap;gap:10px;color:#6f797c;font-size:9px;font-weight:800;letter-spacing:1px}

/* ARTICLE BODY */
.article-section{padding:82px 0 105px;background:var(--black)}
.article-layout{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:58px;align-items:start}
.article-content{min-width:0;max-width:800px}
.article-notice{margin-bottom:48px;padding:22px 24px;border-left:3px solid var(--yellow);background:#121719}
.article-notice strong{color:var(--yellow);font-size:9px;font-weight:800;letter-spacing:1.2px}
.article-notice p{margin:8px 0 0;color:#a0a8ab;font-size:12px;line-height:1.75}
.article-content h2{
    margin:54px 0 16px;font-family:"Barlow Condensed",sans-serif;font-size:40px;line-height:.98;
    letter-spacing:-.2px;text-transform:uppercase;color:#f5f5ef;
}
.article-content h2:first-of-type{margin-top:0}
.article-content p{max-width:780px;margin:0 0 18px;color:#a7afb1;font-size:14px;line-height:1.9}

.article-list{display:grid;gap:9px;max-width:620px;margin:26px 0 34px}
.article-list a{
    display:block;padding:15px 17px;background:#121719;border:1px solid #293236;color:#aeb6b8;
    font-size:12px;font-weight:700;transition:border-color .2s ease,color .2s ease,transform .2s ease;
}
.article-list a:hover{border-color:var(--green);color:var(--green);transform:translateX(2px)}
.article-button{display:inline-flex;align-items:center;min-height:46px;margin-top:6px;padding:0 20px;background:var(--green);color:#081006;font-size:10px;font-weight:800;letter-spacing:1px}

/* FAQ */
.article-faq{margin-top:68px;padding-top:48px;border-top:1px solid #293134}
.article-faq h2{margin:0 0 24px;font-family:"Barlow Condensed",sans-serif;font-size:40px;line-height:1;text-transform:uppercase}
.article-faq details{border-top:1px solid #293134}
.article-faq details:last-child{border-bottom:1px solid #293134}
.article-faq summary{
    position:relative;padding:21px 34px 21px 0;cursor:pointer;list-style:none;color:#f1f2ee;
    font-family:"Barlow Condensed",sans-serif;font-size:24px;line-height:1.05;text-transform:uppercase;
}
.article-faq summary::-webkit-details-marker{display:none}
.article-faq summary::after{
    content:"+";position:absolute;right:0;top:20px;color:var(--green);
    font-family:Inter,Arial,sans-serif;font-size:20px;font-weight:500;
}
.article-faq details[open] summary::after{content:"−"}
.article-faq details p{max-width:760px;margin:0;padding:0 0 22px;color:#969fa2;font-size:13px;line-height:1.8}

/* SIDEBAR */
.article-sidebar{position:sticky;top:110px;width:100%}
.article-sidebar-card{margin-bottom:15px;padding:22px;background:#121719;border:1px solid #293236}
.article-sidebar-card .sidebar-title{margin-bottom:13px;color:var(--green);font-size:9px;font-weight:800;letter-spacing:1.4px}
.article-sidebar-card a{display:block;padding:11px 0;border-top:1px solid #252d30;color:#a8b0b2;font-size:11px;font-weight:700;line-height:1.5}
.article-sidebar-card a:first-of-type{border-top:none}
.article-sidebar-card a:hover{color:var(--green)}

@media (max-width:900px){
    .article-layout{grid-template-columns:1fr;gap:30px}
    .article-sidebar{position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
}
@media (max-width:800px){
    .guides-hero{padding:78px 0 62px}
    .guides-hero h1{font-size:64px}
    .guides-section{padding:60px 0 78px}
    .guides-grid{grid-template-columns:1fr}
    .guide-card-large{min-height:245px;padding:23px}
    .guide-card-large h2{font-size:32px}
}
@media (max-width:650px){
    .article-breadcrumb{padding:14px 0}
    .article-hero{padding:70px 0 60px}
    .article-hero h1{font-size:58px;letter-spacing:-1px}
    .article-lead{font-size:15px}
    .article-section{padding:60px 0 78px}
    .article-content h2{font-size:35px}
    .article-content p{font-size:13px;line-height:1.8}
    .article-faq{margin-top:55px;padding-top:40px}
    .article-faq h2{font-size:36px}
    .article-faq summary{padding:18px 30px 18px 0;font-size:21px}
    .article-faq summary::after{top:17px}
    .article-sidebar{grid-template-columns:1fr}
}
@media (max-width:430px){
    .article-hero h1{font-size:52px}
    .article-meta{gap:7px}
}