/* ==========================================================
   INFOWORLD V2
   HOMEPAGE.CSS
========================================================== */

/* ==========================================
   MAIN LAYOUT
========================================== */

.main-layout{

    display:grid;

    grid-template-columns:minmax(0,2fr) 340px;

    gap:35px;

    align-items:start;

    margin:50px 0;

}

/* ==========================================
   MAIN CONTENT
========================================== */

.main-content{

    display:flex;

    flex-direction:column;

    gap:60px;

}

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

.home-section{

    width:100%;

}

.home-section:last-child{

    margin-bottom:0;

}

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

.section-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:25px;

    padding-bottom:15px;

    border-bottom:2px solid var(--border);

}

.section-header h2{

    margin:0;

    font-size:1.7rem;

}

.section-header a{

    color:var(--primary);

    font-weight:600;

}

.section-header a:hover{

    color:var(--primary-dark);

}

/* ==========================================
   BERITA TERBARU
========================================== */

.latest-news{

    display:grid;

    gap:25px;

}

.latest-item{

    display:grid;

    grid-template-columns:260px 1fr;

    gap:22px;

    background:#fff;

    border-radius:16px;

    overflow:hidden;

    box-shadow:var(--shadow-sm);

    transition:.3s;

}

.latest-item:hover{

    transform:translateY(-4px);

    box-shadow:var(--shadow);

}

.latest-item img{

    width:100%;

    height:180px;

    object-fit:cover;

}

.latest-content{

    padding:22px;

}

.latest-content h3{

    margin-bottom:12px;

    line-height:1.4;

}

.latest-content p{

    margin-bottom:15px;

}

.latest-content time{

    color:var(--text-muted);

    font-size:.85rem;

}

/* ==========================================
   CATEGORY
========================================== */

.home-category{

    margin-top:20px;

}

.category-layout{

    display:grid;

    grid-template-columns:1.5fr 1fr;

    gap:30px;

}

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

.category-featured{

    background:#fff;

    border-radius:18px;

    overflow:hidden;

    box-shadow:var(--shadow-sm);

}

.category-featured img{

    width:100%;

    height:320px;

    object-fit:cover;

}

.category-featured .card-content{

    padding:25px;

}

/* ==========================================
   SIDE LIST
========================================== */

.category-list{

    display:flex;

    flex-direction:column;

    gap:20px;

}

/* ==========================================
   CATEGORY MINI
========================================== */

.category-mini{

    display:flex;

    gap:15px;

    background:#fff;

    border-radius:14px;

    overflow:hidden;

    box-shadow:var(--shadow-sm);

    transition:.3s;

}

.category-mini:hover{

    transform:translateY(-3px);

}

.category-mini img{

    width:120px;

    height:100px;

    object-fit:cover;

}

.category-mini .content{

    padding:15px;

}

.category-mini h4{

    font-size:.95rem;

    line-height:1.45;

}

/* ==========================================
   VIDEO
========================================== */

.video-section{

    margin-top:40px;

}

.video-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;

}

/* ==========================================
   NEWSLETTER STRIP
========================================== */

.newsletter-strip{

    background:linear-gradient(90deg,#0ea5e9,#2563eb);

    color:#fff;

    border-radius:20px;

    padding:40px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:30px;

}

.newsletter-strip h2{

    color:#fff;

    margin-bottom:10px;

}

.newsletter-form{

    display:flex;

    gap:10px;

    width:420px;

}

.newsletter-form input{

    flex:1;

    height:52px;

    padding:0 18px;

    border-radius:999px;

    border:none;

}

.newsletter-form button{

    padding:0 26px;

    border-radius:999px;

    background:#111827;

    color:#fff;

    font-weight:600;

}

/* ==========================================
   SPACING
========================================== */

.home-section + .home-section{

    margin-top:60px;

}

/* ==========================================
   RESPONSIVE
========================================== */

@media(max-width:1200px){

.main-layout{

grid-template-columns:1fr;

}

.category-layout{

grid-template-columns:1fr;

}

.video-grid{

grid-template-columns:repeat(2,1fr);

}

.newsletter-strip{

flex-direction:column;

align-items:flex-start;

}

.newsletter-form{

width:100%;

}

}

@media(max-width:768px){

.latest-item{

grid-template-columns:1fr;

}

.latest-item img{

height:220px;

}

.video-grid{

grid-template-columns:1fr;

}

.newsletter-strip{

padding:25px;

}

.newsletter-form{

flex-direction:column;

}

.newsletter-form button{

height:50px;

}

}