/* laman utama: builds on forum.css tokens (.forum scope); only frontpage layout here */
.fp { --fp-stage: #0B0B12; display: flex; flex-direction: column; gap: 20px; }
.fp-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: stretch; }
.fp-row > * { min-width: 0; }

/* shared tile parts */
.forum .fp-tile { padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.fp-tile-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.forum .fp-h2 { margin: 0; font-size: 15px; font-weight: 700; color: var(--fx-muted); }
.forum a.fp-more { font-size: 13px; font-weight: 600; color: var(--fx-primary); }
.fp-kosong { padding: 14px 16px; border-radius: 12px; background: var(--fx-raised); color: var(--fx-muted); font-size: 14px; }

/* pinned poster: the highlight */
.forum .fp-poster { flex: 6 1 560px; overflow: hidden; display: flex; flex-direction: column; }
/* min-height: chrome grows a ratio box to fit its content, the whole poster, unless it may shrink */
.fp-poster-img { display: block; aspect-ratio: 16 / 9; min-height: 0; background: var(--fp-stage); }
.fp-poster-img img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.fp-poster-foot { padding: 18px 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.fp-poster-teks { flex: 1 1 300px; font-size: 14.5px; line-height: 1.55; color: var(--fx-text2); }
.fp-poster-teks p:last-child { margin-bottom: 0; }

/* artikel terkini */
.forum .fp-artikel { flex: 4 1 380px; gap: 0; padding-bottom: 8px; }
.forum .fp-artikel .fp-h2 { font-size: 18px; color: var(--fx-text); }
.fp-artikel .fp-tile-head { margin-bottom: 12px; }
.forum a.fp-artikel-row { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 15px 0;
  border-top: 1px solid var(--fx-line); color: var(--fx-text); }
.forum a.fp-artikel-row:hover .fp-artikel-tajuk { color: var(--fx-primary); }
.fp-artikel-tajuk { font-size: 14.5px; font-weight: 600; line-height: 1.45; overflow-wrap: anywhere; }
.fp-artikel-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }

/* stats */
.fp-stats { flex: 3 1 260px; display: flex; flex-direction: column; gap: 20px; }
.forum .fp-stat { flex: 1; padding: 24px; display: flex; flex-direction: column; justify-content: flex-end; }
.fp-stat-n { font-size: 44px; font-weight: 700; letter-spacing: -.02em; line-height: 1; color: var(--fx-text); }
.fp-stat-l { font-size: 14px; color: var(--fx-muted); margin-top: 8px; }
.forum .fp-stat-utama { background: var(--fx-primary-soft); border-color: transparent; }
.fp-stat-utama .fp-stat-n { font-size: 38px; }
.fp-stat-utama .fp-stat-l { color: var(--fx-text2); }
.fp-stat-pair { display: flex; gap: 20px; }
.forum .fp-stat-kecil { min-width: 0; padding: 18px 20px; }
.fp-stat-kecil .fp-stat-n { font-size: 26px; letter-spacing: 0; }
.fp-stat-kecil .fp-stat-l { font-size: 12.5px; margin-top: 6px; }

/* galeri */
.forum .fp-galeri { flex: 5 1 480px; }
.fp-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.forum a.fp-thumb { aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: var(--fp-stage);
  display: flex; align-items: center; justify-content: center; color: #A3A9D6; font-size: 14px; font-weight: 600; }
.fp-thumb img, .fp-aktiviti-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.forum a.fp-album { font-weight: 600; color: var(--fx-text); }

/* aktiviti */
.forum .fp-aktiviti { flex: 3 1 300px; }
.fp-kosong-tengah { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  text-align: center; color: var(--fx-muted); font-size: 14px; }
.fp-kosong-tengah i { font-size: 30px; color: inherit; }
.forum a.fp-aktiviti-item { display: flex; flex-direction: column; gap: 12px; color: var(--fx-text); }
/* the shape the upload form asks for (1200x630); anything else is cropped to it */
.fp-aktiviti-poster { display: block; aspect-ratio: 1200 / 630; margin-bottom: 4px; border-radius: 10px; overflow: hidden; background: var(--fp-stage); }
.fp-kira { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; font-size: 15px; font-weight: 600; color: var(--fx-text2); }
.fp-kira b { font-size: 46px; font-weight: 700; letter-spacing: -.02em; line-height: 1; color: var(--fx-primary); }
.fp-aktiviti-tajuk { font-size: 15px; font-weight: 600; line-height: 1.4; }

/* hari lahir: bottom right, low key */
.forum .fp-lahir { flex: 4 1 340px; gap: 10px; }
.forum .fp-lahir-ikon { color: var(--fx-warning); margin-right: 6px; }
.fp-lahir-row { padding: 9px 0; border-bottom: 1px solid var(--fx-line); font-size: 13.5px; line-height: 1.4; }
.fp-lahir-row b { font-weight: 600; color: var(--fx-text); }
.fp-lahir-row span { color: var(--fx-muted); }
/* logged-in staff: full name over grade + klinik */
.fp-lahir-penuh b { display: block; font-size: 14px; }
.fp-lahir-penuh span { display: block; font-size: 12.5px; margin-top: 2px; }
.fp-lahir-nota { margin-top: auto; padding-top: 6px; font-size: 12px; font-style: italic; color: var(--fx-muted); }