/* CSS khusus read-post.blade.php (resources/views/livewire/guest-page). Dimuat di <head> lewat partials/page-css. */
.rp-narrow { max-width: 820px; }
.rp-hero { padding-bottom: 2.5rem; }
.rp-back { display: inline-flex; align-items: center; gap: .5rem; color: var(--ugs-fg-2); font-size: .88rem; text-decoration: none; margin-bottom: 1.5rem; }
.rp-back:hover { color: var(--ugs-accent-text); }
/* judul artikel bisa panjang: Inter tebal huruf biasa agar mudah dibaca (bukan display kapital) */
.rp-title { font-family: var(--ugs-font-body); font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; color: var(--ugs-fg); margin: 0 0 1.25rem; text-wrap: balance; }
.rp-meta { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; font-size: .9rem; color: var(--ugs-fg-2); }
.rp-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.rp-author { font-weight: 500; color: var(--ugs-fg); }
.rp-body { padding-top: 2.5rem; }
.rp-cover { width: 100%; max-height: 480px; object-fit: cover; border-radius: 22px; margin-bottom: 2.25rem; display: block; }
.rp-content { font-size: 1.05rem; }
.rp-content > :first-child { margin-top: 0; }
.rp-foot { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--ugs-hairline); }
.rp-related { background: var(--ugs-surface); border-top: 1px solid var(--ugs-hairline); }
.rp-rel-img { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ugs-card-2); }
.rp-rel-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.ugs-pg-card:hover .rp-rel-img img { transform: scale(1.04); }
.rp-rel-ph { position: absolute; inset: 0; display: grid; place-items: center; font-size: 2rem; color: var(--ugs-fg-3); }
.rp-rel-body { display: flex; flex-direction: column; gap: .45rem; padding: 1.2rem 1.4rem 1.4rem; flex: 1; }
.rp-rel-date { font-size: .8rem; color: var(--ugs-fg-3); }