/*!
 * AutoMedia — Homepage (Tahap 4, restructured post-Tahap 10)
 * Body simplified to two parts: a "Berita Terkini" slider + one unified
 * "Berita Populer" list mixing every category by view_count, per explicit
 * direction — replacing the earlier hero/carousel/trending/for-you/
 * per-category-rows/media-highlight structure.
 */
.section { padding-block: var(--space-12); }
.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-6);
    gap: var(--space-4);
}
.section-head h2 {
    font-size: var(--text-2xl);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.section-head__link {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    flex-shrink: 0;
}
.section-head__link:hover { text-decoration: underline; }

/* =======================================================================
   Berita Terkini — horizontal slider
   ======================================================================= */
.latest-slider {
    display: flex;
    gap: var(--space-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--space-2);
    margin-left: calc(var(--space-4) * -1);
    margin-right: calc(var(--space-4) * -1);
    padding-left: var(--space-4);
    padding-right: var(--space-4);
}
@media (min-width: 768px) { .latest-slider { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; } }
.latest-slider__item { flex: 0 0 82%; scroll-snap-align: start; }
@media (min-width: 640px)  { .latest-slider__item { flex-basis: 46%; } }
@media (min-width: 1024px) { .latest-slider__item { flex-basis: 30%; } }
.latest-slider__media {
    position: relative;
    display: block;
    border-radius: var(--radius-2xl);
    overflow: hidden;
    aspect-ratio: 4/3;
    box-shadow: var(--shadow-sm);
}
.latest-slider__media .media-placeholder,
.latest-slider__media img { width: 100%; height: 100%; object-fit: cover; }
.latest-slider__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, hsl(0 0% 0% / 0.05) 40%, hsl(0 0% 0% / 0.85)); }
.latest-slider__content { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--space-5); color: white; }
/* Mobile cards are only 82% of viewport width (.latest-slider__item above)
   — --text-lg at that width wrapped long headlines to 3 lines, pushing the
   scrim/title block tall enough to cover most of the image underneath.
   Smaller on mobile, and clamped to 2 lines regardless of headline length
   so no title (however long) can ever cover more than a bounded area —
   matches .latest-slider__item's own 640px breakpoint. */
.latest-slider__content h3 {
    font-size: var(--text-sm);
    line-height: var(--leading-sm);
    color: white;
    margin: var(--space-1) 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
@media (min-width: 640px) {
    .latest-slider__content h3 { font-size: var(--text-lg); line-height: var(--leading-lg); }
}
.latest-slider__content .card__meta { color: hsl(0 0% 100% / 0.8); font-size: var(--text-xs); }

/* =======================================================================
   Berita Populer — unified list, every category, ranked by view_count
   ======================================================================= */
.popular-list { list-style: none; counter-reset: rank; max-width: var(--container-article); margin-left: auto; margin-right: auto; }
.popular-item {
    display: flex;
    gap: var(--space-4);
    align-items: flex-start;
    padding-block: var(--space-4);
}
.popular-item + .popular-item { border-top: var(--border-width) solid var(--color-border); }
.popular-item__rank {
    counter-increment: rank;
    flex-shrink: 0;
    width: 2rem;
    font-size: var(--text-xl);
    font-weight: var(--font-extrabold);
    color: var(--color-text-tertiary);
    text-align: center;
}
.popular-item__rank::before { content: counter(rank); }
.popular-item__media {
    flex-shrink: 0;
    width: 96px;
    height: 72px;
    border-radius: var(--radius-md);
    overflow: hidden;
    display: block;
}
.popular-item__media .media-placeholder,
.popular-item__media img { width: 100%; height: 100%; object-fit: cover; font-size: var(--text-base); }
.popular-item__body { min-width: 0; }
.popular-item__title { font-size: var(--text-base); font-weight: var(--font-semibold); line-height: var(--leading-base); margin-top: var(--space-1); }
.popular-item__title a:hover { color: var(--color-primary); }
.popular-item__meta { display: flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); color: var(--color-text-tertiary); margin-top: var(--space-2); }
@media (max-width: 480px) {
    .popular-item__rank { display: none; }
}

/* Ad slot ------------------------------------------------------------ */
.ad-slot { position: relative; margin-block: var(--space-8); text-align: center; }
.ad-slot:not(:empty)::before {
    content: "Iklan";
    display: block;
    font-size: var(--text-xs);
    color: var(--color-text-tertiary);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    margin-bottom: var(--space-2);
}