/* Profile page — mobile-first */
.pf-card, .pf-posts { max-width: 760px; margin: 0 auto 24px; }
.pf-card { background: var(--container-bg); border-radius: var(--border-radius); box-shadow: var(--shadow); padding: 20px; text-align: left; }
.pf-top { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; align-items: center; }
.pf-avatar-wrap { grid-row: span 2; }
.profile-picture.pf-avatar { width: 88px; height: 88px; margin: 0; border-radius: 50%; border: 3px solid var(--header-bg); }
.pf-identity { min-width: 0; }
.pf-name { margin: 0; font-family: Georgia, serif; font-size: clamp(1.4rem, 6vw, 2rem); line-height: 1.2; overflow-wrap: anywhere; }
.pf-stats { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 4px 0 0; font-size: .9rem; color: var(--text-secondary); }
.pf-actions { grid-column: 2; display: flex; flex-wrap: wrap; gap: 8px; }
.pf-actions form, .pf-banner-actions form { margin: 0; }

.pf-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 18px; border: 1px solid var(--link-color); border-radius: 999px; background: transparent; color: var(--link-color); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.pf-btn:hover { background: var(--header-bg); color: var(--header-color); }
.pf-btn.primary { background: var(--button-bg); color: var(--button-text); }
.pf-btn.primary:hover { background: var(--button-hover); color: var(--button-hover-text); }

.pf-bio { margin: 16px 0 0; }
.pf-bio p { padding-right: 28px; overflow-wrap: anywhere; }
.pf-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding: 12px 16px; border-radius: 10px; background: var(--info-bg); color: var(--info-text); border: 1px solid var(--info-border); }
.pf-banner-actions { display: flex; gap: 8px; }

.pf-compose { display: grid; gap: 10px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border-color); }
.pf-compose label:first-child { font-weight: 600; }
.pf-compose textarea { width: 100%; min-height: 96px; padding: 12px; border: 1px solid var(--border-color); border-radius: 10px; }
.pf-compose-actions { display: flex; gap: 8px; justify-content: space-between; }

.pf-posts-heading { margin: 0 0 12px; font-size: 1.15rem; }
.pf-posts ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 16px; }
.pf-posts .blog-post-card { margin: 0; padding: 16px; border-radius: var(--border-radius); border: 1px solid var(--border-color); overflow-wrap: anywhere; }
.pf-posts .blog-post-card img { max-width: 100%; height: auto; }

@media (min-width: 640px) {
    .pf-card { padding: 28px; }
    .pf-top { grid-template-columns: auto 1fr auto; gap: 16px 24px; }
    .pf-avatar-wrap { grid-row: auto; }
    .profile-picture.pf-avatar { width: 112px; height: 112px; }
    .pf-actions { grid-column: auto; justify-content: flex-end; }
}
@media (max-width: 639px) {
    .pf-card { border-radius: 0; margin-inline: -12px; }
    .pf-posts .blog-post-card { border-left: 0; border-right: 0; border-radius: 0; margin-inline: -12px; }
    .pf-actions .pf-btn { flex: 1 1 auto; }
    .pf-compose-actions .pf-btn { flex: 1; }
}