/* ================= FEED ================= */

    /* ================= FEATURED HERO ================= */

.featuredHero{

padding:20px;

}

.featuredLayout{

-webkit-user-select:none;
user-select:none;
-webkit-tap-highlight-color:transparent;

display:flex;

align-items:stretch;

background:#0d1b38;

border:1px solid rgba(91,192,190,.15);

border-radius:20px;

overflow:hidden;

cursor:pointer;

box-shadow:0 10px 28px rgba(0,0,0,.35);

transition:.25s;

}

.featuredLayout:hover{

transform:translateY(-4px);

border-color:#5bc0be;

}

.featuredImage{

flex:1.2;

min-height:300px;

}

.featuredImage img{

width:100%;

height:100%;

display:block;

object-fit:cover;

transition:transform .45s ease;

}

.featuredLayout:hover .featuredImage img{

transform:scale(1.05);

}

.featuredInfo{

flex:1;

padding:34px;

display:flex;

flex-direction:column;

justify-content:center;

}

.featuredBadge{

display:inline-block;

padding:8px 18px;

margin-bottom:20px;

background:#18344d;

color:#21d4ff;

font-size:12px;

font-weight:700;

border-radius:999px;

letter-spacing:1px;

width:max-content;

}

.featuredInfo h2{

margin:0 0 16px;

font-size:42px;

line-height:1.15;

color:#fff;

}

.featuredInfo p{

margin:0 0 24px;

font-size:18px;

line-height:1.6;

color:#b9c2d0;

}

.featuredRead{

-webkit-user-select:none;
user-select:none;
pointer-events:none;

color:#21d4ff;

font-size:22px;

font-weight:700;

}

@media(max-width:900px){

.featuredLayout{

flex-direction:column;

}

.featuredImage{

min-height:220px;

}

.featuredInfo{

padding:24px;

}

.featuredInfo h2{

font-size:30px;

}

.featuredInfo p{

font-size:16px;

}

}

/* ================= SECTION ================= */

.sectionTitle{

padding:0 16px;

margin-top:14px;

margin-bottom:8px;

font-size:28px;

font-weight:700;

display:flex;

align-items:center;

gap:12px;

}

.sectionTitle::before{

content:"";

width:5px;

height:30px;

border-radius:6px;

background:#21d4ff;

}

/* ================= ARTICLES ================= */

.moreArticles button{

width:auto;

padding:12px 28px;

background:linear-gradient(135deg,#5bc0be,#21d4ff);

color:#071229;

font-weight:700;

border:none;

border-radius:14px;

cursor:pointer;

transition:.25s;

box-shadow:0 8px 24px rgba(33,212,255,.25);

}

.post{

-webkit-user-select:none;
user-select:none;
-webkit-tap-highlight-color:transparent;

display:flex;

gap:22px;

background:#0d1b38;

border:1px solid rgba(91,192,190,.15);

border-radius:20px;

padding:18px;

margin-bottom:18px;

cursor:pointer;

transition:.25s;

box-shadow:0 10px 28px rgba(0,0,0,.25);

align-items:center;

}

.post:hover{

transform:translateY(-6px);

border-color:#5bc0be;

box-shadow:0 16px 36px rgba(33,212,255,.18);

}

.post img{

width:220px;

height:140px;

object-fit:cover;

border-radius:16px;

flex-shrink:0;

transition:transform .35s ease;

}

.post:hover img{

transform:scale(1.05);

}

.postInfo{

flex:1;

display:flex;

flex-direction:column;

justify-content:center;

}

.postInfo h4{

margin:0 0 12px;

font-size:24px;

font-weight:700;

line-height:1.35;

color:#ffffff;

}

.postMeta{

display:flex;

align-items:center;

justify-content:space-between;

gap:12px;

margin-bottom:14px;

flex-wrap:wrap;

}

.readTime{

font-size:12px;

color:#7ea7c7;

font-weight:600;

}

.postInfo small{

display:-webkit-box;

-webkit-box-orient:vertical;

-webkit-line-clamp:2;

overflow:hidden;

font-size:15px;

line-height:1.6;

color:#9db3cf;

margin-bottom:12px;

}

@media(max-width:768px){

.post{

flex-direction:row;

align-items:center;

gap:16px;

padding:14px;

}

.post img{

width:135px;

height:95px;

border-radius:14px;

flex-shrink:0;

}

.postInfo{

flex:1;

}

.postInfo h4{

font-size:20px;

margin-bottom:8px;

}

.postInfo small{

font-size:14px;

line-height:1.5;

}

.postMeta{

justify-content:flex-start;

margin-bottom:8px;

}

}

/* ================= MORE ================= */

.moreArticles{

padding:20px;

text-align:center;

}

.moreArticles button{

width:auto;

padding:10px 24px;

background:linear-gradient(145deg,#1c2541,#141b2e);

border-radius:12px;

cursor:pointer;

transition:.25s;

}

.post:hover{

transform:translateY(-4px);

border:1px solid #5bc0be;

}

/* ================= DESKTOP VERSION ================= */

.desktop-version .post{

display:flex;

flex-direction:row;

align-items:center;

gap:24px;

padding:20px;

}

.desktop-version .post img{

width:280px;

height:160px;

border-radius:16px;

object-fit:cover;

flex-shrink:0;

}

.desktop-version .postInfo{

flex:1;

}

.desktop-version .postInfo h4{

font-size:32px;

margin-bottom:14px;

}

.desktop-version .postInfo small{

font-size:18px;

line-height:1.7;

}

.desktop-version .postMeta{

justify-content:flex-end;

}