/* RESET & GLOBAL */
*{margin:0;padding:0;box-sizing:border-box}
a{text-decoration:none;color:inherit}
a:hover{text-decoration:none}
.news-section{display:grid;grid-template-columns:1fr 1fr}
.overlay{position:absolute;bottom:0;left:0;right:0;padding:12px;
  background:linear-gradient(to top,rgba(0,0,0,.9),transparent);color:#fff;transition:.3s}
.item{position:relative;overflow:hidden}
.item img{width:100%;height:100%;object-fit:cover;display:block;transition:.5s}
.item:hover img{transform:scale(1.05)}
.overlay h2,.overlay h3,.overlay h4,.overlay small,.overlay .date{
  font-size:25px;line-height:1.3;transition:.3s;margin: 0 0 4px 0;}
.overlay small,.overlay .date{font-size:15px;opacity:.9;margin: 0;display: block;}
.item:hover .overlay h2,
.item:hover .overlay h3,
.item:hover .overlay h4,
.item:hover .overlay small,
.item:hover .overlay .date{color:#f58025;transform:translateY(-4px)}

/* Extra item */
.extra-item{
  background:#353535;color:#fff;
  display:flex;flex-direction:column;
  justify-content:center;height:100%;padding:20px;
  transition:.3s;
}
.extra-item h3{font-size:25px;line-height:1.3;transition:.3s;;margin: 0 0 4px 0;}
.extra-item .date{font-size:15px;opacity:.9;transition:.3s; margin: 0 0 4px 0;}
.extra-item:hover h3,
.extra-item:hover .date{color:#f58025;transform:translateY(-4px)}

/* Layout */
.medium-group{display:grid;grid-template-rows:auto auto}
.medium-list{display:grid;grid-template-columns:1fr 1fr}
.small-list{display:grid;grid-template-columns:repeat(4,1fr)}

/* Small-item khusus index 0 & 2 */
.small-item.white-bg{
  background:#fff;
  
}
.small-item.white-bg .overlay{
  /* position:static; */
  background:none;
  color:#000;
  padding:15px;
}
.small-item.white-bg-3 .overlay{
  /* position:static; */
  background:none;
  color:#000;
}
.small-item.white-bg h4,
.small-item.white-bg .date{
  color:#000;
  margin: 0 0 4px 0;
} 
.small-item.white-bg:hover h4,
.small-item.white-bg:hover .date{
  color:#f58025;
  transform:translateY(-4px);
}

.small-item {
  position: relative;     /* agar child absolute tetap dalam area item */
  overflow: hidden;       /* jaga layout tetap rapi */
}

.read-more {
  background: #414141;    /* biru */
  height: 50px;
  width: 100%;            /* full lebar */
  display: flex;
  align-items: center;
  justify-content: start;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  transition: background .3s ease;
  cursor: pointer;
  padding: 30px;

  position: absolute;     /* menempel ke bawah */
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;              /* tanpa margin */
}

.read-more .arrow {
  margin-left: 10px;
  transition: transform .3s ease;
  font-size: 18px;
}

/* Hover efek */
.small-item:hover .read-more {
  background: #454545;
}

.small-item:hover .read-more .arrow {
  transform: translateX(8px);
}

/* Responsive */
@media(max-width:768px){
  .news-section,.medium-list,.small-list{display:block}
  .item img{height:auto}
  .overlay h2,.overlay h3,.overlay h4{font-size:18px;margin: 0 0 4px 0;}
  .overlay small,.overlay .date{font-size:14px;color:#ddd;margin: 0 0 4px 0;}
  .extra-item{height:auto;text-align:left}
  .extra-item h3{font-size:18px}
  .extra-item small{font-size:14px}

   .small-item.white-bg {
    display: block;
    width: 100%;
    background: #fff;         /* tetap putih */
    margin: 0;
    padding: 0;
    border-radius: 0;
    overflow: hidden;
  }

  .small-item.white-bg img {
    width: 100%;
    height: auto;
    object-fit: cover;        /* biar full tanpa space */
    display: block;
  }

  .small-item.white-bg .content {
    position: relative;
    padding: 10px 12px;
  }

  .small-item.white-bg .date,
  .small-item.white-bg .category,
  .small-item.white-bg .title {
    display: block;
    margin: 2px 0;
    font-size: 14px;
    line-height: 1.4;
    color: #333;
  }

  /* Read more tombol full width di mobile */
  .small-item.white-bg .read-more {
    background: #2563eb;
    height: 40px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
  }

  .small-item.white-bg .read-more .arrow {
    margin-left: 8px;
    transition: transform .3s ease;
    font-size: 16px;
  }

  .small-item.white-bg:hover .read-more {
    background: #1e40af;
  }

  .small-item.white-bg:hover .read-more .arrow {
    transform: translateX(5px);
  }
}