/* ===================================================== */
/* ================= GRID SYSTEM ======================= */
/* ===================================================== */

.row{
display:flex;
flex-wrap:wrap;
margin-left:-15px;
margin-right:-15px;
}

.col{
padding:0 15px;
flex:1;
}

.col-2{width:50%;}
.col-3{width:33.333%;}
.col-4{width:25%;}
.col-6{width:16.666%;}

/* ===================================================== */
/* ================= PREMIUM CARD GRID ================= */
/* ===================================================== */

.card-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:28px;
align-items:stretch;
}

/* hover glow premium */
.sgk-card{
position:relative;
z-index:1;
}

.sgk-card::after{
content:"";
position:absolute;
inset:0;
border-radius:18px;
padding:1px;
background:linear-gradient(120deg,transparent,rgba(255,122,0,0.25),transparent);
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite:xor;
mask-composite:exclude;
opacity:0;
transition:.4s;
}

.sgk-card:hover::after{
opacity:1;
}

/* ===================================================== */
/* ================= ICON GRID ========================= */
/* ===================================================== */

.icon-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
gap:25px;
margin-top:40px;
text-align:center;
}

.icon-item{
background:#fff;
border-radius:14px;
padding:20px;
box-shadow:0 10px 25px rgba(0,0,0,0.06);
transition:.3s;
}

.icon-item:hover{
transform:translateY(-6px);
box-shadow:0 18px 40px rgba(0,0,0,0.12);
}

.icon-item img{
width:45px;
margin-bottom:12px;
}

.icon-item span{
display:block;
font-size:14px;
font-weight:600;
color:#0b2d5c;
}

/* ===================================================== */
/* ================= TABLE GRID ======================== */
/* ===================================================== */

.table-wrap{
overflow-x:auto;
margin-top:25px;
}

.table-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:20px;
margin-top:30px;
}

.table-box{
background:#fff;
padding:20px;
border-radius:14px;
box-shadow:0 10px 25px rgba(0,0,0,0.07);
}

.table-box h4{
font-size:16px;
margin-bottom:10px;
color:#0b2d5c;
}

/* ===================================================== */
/* ================= ARTICLE GRID ====================== */
/* ===================================================== */

.article-grid{
display:grid;
grid-template-columns:2fr 1fr;
gap:40px;
margin-top:50px;
}

.article-main{
background:#fff;
padding:35px;
border-radius:16px;
box-shadow:0 10px 35px rgba(0,0,0,0.07);
}

.article-sidebar{
background:#fff;
padding:25px;
border-radius:16px;
box-shadow:0 10px 35px rgba(0,0,0,0.07);
position:sticky;
top:100px;
height:fit-content;
}

.article-sidebar h3{
font-size:18px;
margin-bottom:15px;
color:#0b2d5c;
}

.article-sidebar a{
display:block;
padding:10px 0;
border-bottom:1px solid #eee;
text-decoration:none;
font-size:14px;
color:#333;
transition:.2s;
}

.article-sidebar a:hover{
color:#ff7a00;
padding-left:6px;
}

/* ===================================================== */
/* ================= STATS GRID ======================== */
/* ===================================================== */

.stats-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:25px;
margin-top:40px;
}

.stat-box{
background:linear-gradient(135deg,#0b2d5c,#0f4c97);
color:#fff;
padding:25px;
border-radius:16px;
box-shadow:0 15px 40px rgba(0,0,0,0.15);
position:relative;
overflow:hidden;
}

.stat-box::after{
content:"";
position:absolute;
width:120px;
height:120px;
background:rgba(255,255,255,0.08);
border-radius:50%;
right:-40px;
bottom:-40px;
}

.stat-box h3{
font-size:28px;
margin-bottom:6px;
}

.stat-box span{
font-size:14px;
opacity:.9;
}

/* ===================================================== */
/* ================= BUTTON GRID ======================= */
/* ===================================================== */

.btn-grid{
display:flex;
flex-wrap:wrap;
gap:15px;
justify-content:center;
margin-top:30px;
}

.btn-grid a{
padding:14px 24px;
border-radius:10px;
font-weight:700;
text-decoration:none;
font-size:15px;
transition:.3s;
}

.btn-primary{
background:#ff7a00;
color:#fff;
}

.btn-primary:hover{
background:#e56d00;
}

.btn-dark{
background:#0b2d5c;
color:#fff;
}

.btn-dark:hover{
background:#071f3f;
}

/* ===================================================== */
/* ================= MOBILE GRID ======================= */
/* ===================================================== */

@media(max-width:900px){

.article-grid{
grid-template-columns:1fr;
}

.article-sidebar{
position:relative;
top:0;
}

}

@media(max-width:600px){

.col-2,
.col-3,
.col-4,
.col-6{
width:100%;
}

.stats-grid{
grid-template-columns:1fr;
}

.btn-grid{
flex-direction:column;
align-items:center;
}

.btn-grid a{
width:100%;
text-align:center;
max-width:320px;
}

}