/* News Highlight — featured post + latest posts list */

.news-highlight {
   display: flex;
   flex-direction: column;
   gap: 32px;
}

/* Featured post */

.news-highlight__featured-media {
   position: relative;
   display: block;
   overflow: hidden;
   border-radius: 4px;
   background-color: #ececec;
}

.news-highlight__featured-media img {
   display: block;
   width: 100%;
   height: 340px;
   object-fit: cover;
   transition: transform 0.35s ease;
}

.news-highlight__featured-media:hover img {
   transform: scale(1.04);
}

.news-highlight__badge {
   position: absolute;
   top: 16px;
   left: 16px;
   z-index: 2;
   background-color: #e2231a;
   color: #fff;
   font-size: 11px;
   font-weight: 700;
   letter-spacing: 0.5px;
   text-transform: uppercase;
   padding: 6px 14px;
   border-radius: 2px;
}

.news-highlight__credit {
   position: absolute;
   bottom: 12px;
   right: 12px;
   z-index: 2;
   background-color: rgba(0, 0, 0, 0.45);
   color: #fff;
   font-size: 11px;
   padding: 3px 8px;
   border-radius: 2px;
}

.news-highlight__featured-content {
   margin-top: 20px;
}

.news-highlight__date {
   display: block;
   font-size: 13px;
   font-weight: 600;
   color: #9c3428;
   text-transform: uppercase;
   letter-spacing: 0.3px;
   margin-bottom: 8px;
}

.news-highlight__title {
   margin: 0 0 10px;
   font-size: 22px;
   line-height: 1.35;
   font-weight: 700;
}

.news-highlight__title a {
   color: #16213e;
   text-decoration: none;
}

.news-highlight__title a:hover {
   text-decoration: underline;
}

.news-highlight__excerpt {
   margin: 0;
   font-size: 14px;
   line-height: 1.6;
   color: #6b7280;
}

/* Side list */

.news-highlight__side {
   display: flex;
   flex-direction: column;
}

.news-highlight__list {
   list-style: none;
   margin: 0;
   padding: 0;
}

.news-highlight__item {
   display: flex;
   gap: 16px;
   padding: 8px 0;
   border-bottom: 1px solid #e5e7eb;
   margin-left: 0 !important;
}

.news-highlight__item:first-child {
   padding-top: 0;
}

.news-highlight__item:last-child {
   border-bottom: none;
}

.news-highlight__item-thumb {
   flex: 0 0 80px;
   width: 80px;
   height: 80px;
   border-radius: 4px;
   overflow: hidden;
   background-color: #ececec;
}

.news-highlight__item-thumb img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.news-highlight__item-content {
   flex: 1;
   min-width: 0;
}

.news-highlight__item-title {
   margin: 0 0 6px;
   font-size: 15px;
   line-height: 1.4;
   font-weight: 700;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
}

.news-highlight__item-title a {
   color: #16213e;
   text-decoration: none;
}

.news-highlight__item-title a:hover {
   text-decoration: underline;
}

.news-highlight__item-excerpt {
   margin: 0;
   font-size: 13px;
   line-height: 1.5;
   color: #6b7280;
   display: -webkit-box;
   -webkit-line-clamp: 1;
   -webkit-box-orient: vertical;
   overflow: hidden;
}

/* View all link */

.news-highlight__footer {
   display: flex;
   justify-content: flex-end;
   margin-top: 20px;
}

.news-highlight__view-all {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-size: 13px;
   font-weight: 700;
   letter-spacing: 0.3px;
   text-transform: uppercase;
   color: var(--primary-color);
   text-decoration: none;
}

.news-highlight__view-all-arrow {
   transition: transform 0.25s ease;
}

.news-highlight__view-all:hover .news-highlight__view-all-arrow {
   transform: translateX(4px);
}

/* Tablet and up */
@media (min-width: 768px) {
   .news-highlight {
      flex-direction: row;
      align-items: flex-start;
      gap: 48px;
   }

   .news-highlight__featured {
      flex: 1 1 58%;
      max-width: 58%;
   }

   .news-highlight__side {
      flex: 1 1 42%;
      max-width: 42%;
   }

   .news-highlight__featured-media img {
      height: 400px;
   }
}

/* Desktop */
@media (min-width: 1200px) {
   .news-highlight__title {
      font-size: 26px;
   }
}