/* ==========================================================================
   Layout archetype: HERO BESAR + GRID KANAN  (Portal, Garuda)
   Lead story dominant; supporting headlines in a right rail; latest grid;
   numbered popular. Mobile-first single column → desktop hero+rail split.
   ========================================================================== */

.home-hero { padding-top: var(--sp-5); }
.hero-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); }

/* Lead story */
.lead { display: flex; flex-direction: column; gap: var(--sp-3); }
.lead__media { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 9; background: var(--c-surface-2); }
.lead__media img { width: 100%; height: 100%; object-fit: cover; }
.lead__kicker { position: absolute; left: var(--sp-3); top: var(--sp-3); }
.lead__title { font-size: var(--fs-hero); margin: 0; }
.lead__title a { color: var(--c-text); }
.lead__title a:hover { color: var(--c-primary); text-decoration: none; }
.lead__excerpt { color: var(--c-text-muted); font-size: 1.02rem; line-height: 1.65; margin: 0; }
.lead__meta { font-size: var(--fs-meta); color: var(--c-text-muted); }

/* Right rail: stacked secondary headlines */
.rail { display: flex; flex-direction: column; gap: var(--sp-4); }
.rail__head { font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; padding-bottom: var(--sp-2); border-bottom: 2px solid var(--c-accent); }
.rail .card--row + .card--row { border-top: 1px solid var(--c-border); padding-top: var(--sp-4); }

/* Latest grid */
.latest-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); }

/* Two-column body: main + sidebar (popular) */
.home-body { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); }

/* Category strip */
.cat-strip { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.cat-strip a { font-size: .82rem; font-weight: 600; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--c-border); border-radius: 999px; color: var(--c-text); }
.cat-strip a:hover { background: var(--c-primary); color: #fff; border-color: var(--c-primary); text-decoration: none; }

/* --- tablet --- */
@media (min-width: 600px) {
  .latest-grid { grid-template-columns: 1fr 1fr; }
}

/* --- desktop: hero left + rail right, then main + sidebar --- */
@media (min-width: 880px) {
  .hero-grid { grid-template-columns: minmax(0, 1.9fr) minmax(280px, 1fr); gap: var(--sp-6); align-items: start; }
  .lead__title { font-size: clamp(2rem, 2.6vw, 2.75rem); }
  .latest-grid { grid-template-columns: repeat(3, 1fr); }
  .home-body { grid-template-columns: minmax(0, 1fr) 320px; }
}
@media (min-width: 1024px) {
  .latest-grid { grid-template-columns: repeat(4, 1fr); }
}