/* ==========================================================================
   Layout archetype: FULL-WIDTH LIST  (Tera, Kabar)
   A fast, scannable news river — NO large hero. A quick category bar, a trending
   strip, then a vertical full-width list of timestamped rows, plus a slim utility
   rail (popular + channel index). Mobile-first & dense. Fully self-contained under
   .fwl-* so it never touches hero-grid or magazine-split (other families safe).
   ========================================================================== */

.fwl { padding-top: var(--sp-4); --fwl-thumb: 120px; --fwl-radius: var(--radius-sm); }

/* ---- quick category bar ---- */
.fwl-bar { display: flex; align-items: center; gap: var(--sp-3); padding-bottom: var(--sp-3); border-bottom: 2px solid var(--c-border); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.fwl-bar::-webkit-scrollbar { display: none; }
.fwl-bar__live { flex: none; display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-ui); font-weight: 800; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--c-accent); }
.fwl-bar__live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c-accent); }
.fwl-chips { display: flex; gap: var(--sp-1); flex: 1; }
.fwl-chips a { flex: none; font-family: var(--font-ui); font-size: .82rem; font-weight: 600; color: var(--c-text-muted); padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.fwl-chips a:hover { background: var(--c-surface-2); color: var(--c-primary); text-decoration: none; }

/* ---- trending strip ----
   A1d: HIDDEN. Operator incognito visual showed the A1c marquee rendering
   inconsistently (Tera appeared static, Kabar looked cluttered) — decision is to
   hide the whole Trending row rather than keep chasing the animation. ALL A1c
   marquee/animation CSS is removed here, so nothing animates or lingers. The row
   is simply not displayed (display:none → no box, no orphan spacing); the channel
   bar (.fwl-bar) above and Berita Terbaru (.fwl-grid) below are unaffected.
   To re-enable later, flip display:none→flex — the A1a rules on .fwl-trending__list
   (single number, no double marker, roomier truncation) are kept below so it would
   return as a clean static strip. .rank, header .ticker (Garuda) and other
   archetypes are untouched. */
.fwl-trending { display: none; }
.fwl-trending__label { flex: none; font-family: var(--font-ui); font-weight: 800; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--c-accent); }
/* A1a (kept, dormant while the strip is hidden): list-style:none + margin/padding
   reset kill the native <ol> marker & UA indent so only the single CSS counter
   (a::before) shows — no "1. 1". Scoped to .fwl-trending__list; base.css still
   resets ul-only, .rank/.prose ordered lists untouched. */
.fwl-trending__list { display: flex; gap: var(--sp-4); counter-reset: tr; margin: 0; padding: 0; list-style: none; }
.fwl-trending__list li { flex: none; max-width: 42ch; }
.fwl-trending__list a { font-family: var(--font-ui); font-size: .9rem; font-weight: 600; color: var(--c-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; max-width: 40ch; vertical-align: bottom; }
.fwl-trending__list a::before { counter-increment: tr; content: counter(tr); color: var(--c-accent); font-weight: 800; margin-right: 6px; }

/* ---- main grid ---- */
.fwl-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); padding-top: var(--sp-4); }

.fwl-section-title { display: flex; align-items: center; gap: var(--sp-3); font-family: var(--font-ui); font-size: .95rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--c-text); margin: 0 0 var(--sp-2); }
.fwl-section-title::before { content: ""; width: 4px; align-self: stretch; min-height: 1em; background: var(--c-accent); border-radius: 2px; }
.fwl-section-title::after { content: ""; flex: 1; height: 2px; background: var(--c-border); }

/* ---- the news river ---- */
.fwl-list { display: flex; flex-direction: column; }
.fwl-item { display: grid; grid-template-columns: 1fr var(--fwl-thumb); gap: var(--sp-4); padding: var(--sp-3) var(--sp-2); border-bottom: 1px solid var(--c-border); align-items: start; border-radius: var(--radius-sm); transition: background .15s ease; }
.fwl-item:hover { background: var(--c-surface-2); }
.fwl-item__thumb { grid-column: 2; aspect-ratio: 16 / 9; border-radius: var(--fwl-radius); overflow: hidden; background: var(--c-surface-2); }
.fwl-item__thumb img { width: 100%; height: 100%; object-fit: cover; }
.fwl-item__body { min-width: 0; }
.fwl-item__cat { font-family: var(--font-ui); font-weight: 800; font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: var(--c-accent); }
.fwl-item__title { font-family: var(--font-display); font-size: 1.08rem; line-height: 1.3; margin: 4px 0 0; font-weight: 700; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fwl-item__title a { color: var(--c-text); }
.fwl-item__title a:hover { color: var(--c-primary); text-decoration: none; }
.fwl-item__meta { font-family: var(--font-ui); font-size: var(--fs-meta); color: var(--c-text-muted); margin-top: 6px; }
.fwl-item__meta time { font-weight: 700; color: var(--c-text); }
.fwl-item__dek { display: none; color: var(--c-text-muted); font-size: .94rem; line-height: 1.5; margin: 6px 0 0; }

/* lead row = top story: more presence + an accent baseline, but still a row */
.fwl-item--lead { grid-template-columns: 1fr 240px; gap: var(--sp-5); padding-bottom: var(--sp-4); margin-bottom: var(--sp-2); border-bottom: 2px solid var(--c-accent); }
.fwl-item--lead:hover { background: transparent; }
.fwl-item--lead .fwl-item__title { font-size: 1.6rem; -webkit-line-clamp: 3; }
.fwl-item--lead .fwl-item__dek { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 1.02rem; }

/* ---- utility rail: modular cards for a clearer hierarchy ---- */
.fwl-rail { display: flex; flex-direction: column; gap: var(--sp-4); }
.fwl-rail > section { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); padding: var(--sp-4); }
.fwl-rail__title { font-family: var(--font-ui); font-size: .8rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 var(--sp-3); padding-bottom: var(--sp-2); border-bottom: 2px solid var(--c-accent); }
.fwl-rail .rank__item { padding-block: var(--sp-2); }
.fwl-rail .rank__item + .rank__item { border-top: 1px solid var(--c-border); }
.fwl-rail .rank__item::before { font-size: 1.7rem; }
.fwl-index { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.fwl-index a { font-family: var(--font-ui); font-size: .82rem; font-weight: 600; color: var(--c-text); background: var(--c-surface-2); padding: 5px 11px; border-radius: 999px; }
.fwl-index a:hover { background: var(--c-primary); color: var(--c-on-primary); text-decoration: none; }

/* ---- small screens: keep rows compact & very scannable ---- */
@media (max-width: 599px) {
  .fwl { --fwl-thumb: 96px; }
  .fwl-item--lead { grid-template-columns: 1fr; }
  .fwl-item--lead .fwl-item__thumb { grid-column: 1; order: -1; aspect-ratio: 16 / 9; margin-bottom: var(--sp-2); }
  .fwl-item--lead .fwl-item__title { font-size: 1.25rem; }
  /* tighter, proportional header on mobile (full-width-list brands only) */
  :root { --header-h: 54px; }
  .brand img, .brand .custom-logo { height: 34px; }
  .brand__name { font-size: 1.04rem; }
}

/* ---- tablet+ ---- */
@media (min-width: 600px) { .fwl { --fwl-thumb: 168px; } .fwl-item__title { font-size: 1.14rem; } }

/* ---- desktop: richer rows fill the width; river + slim rail ---- */
@media (min-width: 900px) {
  .fwl { --fwl-thumb: 196px; }
  .fwl-grid { grid-template-columns: minmax(0, 1fr) 310px; gap: var(--sp-7); align-items: start; }
  .fwl-rail { position: sticky; top: calc(var(--header-h) + var(--sp-4)); }
  .fwl-item--lead { grid-template-columns: 1fr 300px; }
  .fwl-item--lead .fwl-item__dek { -webkit-line-clamp: 2; }
  /* one-line dek on every row from desktop up → no more thin/empty rows */
  .fwl-item:not(.fwl-item--lead) .fwl-item__dek { display: -webkit-box; -webkit-line-clamp: 1; line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
}