@media (max-width: 1200px) {
	.container {
		padding: 22px 16px;
		gap: 18px;
	}

	.navbar {
		padding: 0 16px;
	}

	.nav-search {
		max-width: 280px;
	}

	.kpi-row,
	.grid-3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 1024px) {
	.container {
		grid-template-columns: 220px 1fr;
	}

	.sidebar-right {
		display: none;
	}

	.section-card,
	.hero-card {
		padding: 16px;
	}

	.messages-layout {
		grid-template-columns: 240px 1fr;
	}
}

@media (max-width: 900px) {
	.nav-search,
	.nav-links {
		display: none;
	}

	.hamburger {
		display: flex;
	}

	.mobile-menu {
		padding: 12px 14px;
	}

	.container {
		grid-template-columns: 1fr;
		gap: 14px;
		padding: 16px 12px;
	}

	.sidebar-left,
	.sidebar-right {
		display: none;
		position: static;
		max-height: none;
	}

	.landing-grid,
	.settings-grid,
	.grid-2,
	.create-grid,
	.messages-layout {
		grid-template-columns: 1fr;
	}

	.chat-list {
		max-height: 220px;
	}

	.auth-shell {
		padding: 18px 12px;
	}

	.auth-card {
		width: min(100%, 720px);
		padding: 16px;
	}

	.profile-meta {
		min-width: 0;
	}

	.create-upload-preview {
		grid-template-columns: 88px 1fr;
	}

	.create-upload-preview img {
		width: 88px;
		height: 78px;
	}
}

@media (max-width: 768px) {
	:root {
		--navbar-h: 58px;
	}

	.navbar {
		padding: 0 12px;
	}

	.nav-logo span {
		display: none;
	}

	.nav-avatar {
		width: 34px;
		height: 34px;
	}

	.hero-card,
	.section-card,
	.auth-card {
		padding: 14px;
	}

	.profile-hero {
		margin-top: -24px;
		padding: 0 12px 14px;
		align-items: center;
	}

	.profile-avatar-lg {
		width: 72px;
		height: 72px;
		font-size: 1.1rem;
	}

	.profile-media-edit-btn {
		width: 28px;
		height: 28px;
	}

	.grid-3,
	.kpi-row {
		grid-template-columns: 1fr;
	}

	.notification-item,
	.request-item,
	.expert-rating-item-head {
		flex-wrap: wrap;
	}

	.notification-meta-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
	}

	.notification-time {
		white-space: normal;
	}

	.chat-bubble {
		max-width: 86%;
	}

	.post-card {
		padding: 14px;
	}

	.post-actions {
		gap: 2px;
	}

	.action-btn {
		padding: 7px 8px;
		font-size: 0.74rem;
	}

	/* Register + Settings skill controls */
	.skills-input-field {
		grid-template-columns: 1fr;
	}

	#registerStepTracker {
		display: grid;
		grid-template-columns: 1fr;
		gap: 6px;
	}

	.auth-dialog-card,
	.forgot-card {
		width: min(94vw, 520px);
	}

	.auth-dialog-actions {
		flex-wrap: wrap;
	}

	.auth-dialog-actions .btn-primary,
	.auth-dialog-actions .btn-secondary {
		flex: 1;
		min-width: 120px;
	}

	.auth-login-actions {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {
	.landing-illustration-shell {
		display: none;
	}

	.landing-illustration {
		width: 100%;
		transform: none;
	}

	.nav-avatar {
		display: none;
	}

	.mobile-menu .nav-link {
		font-size: 0.86rem;
		padding: 9px 12px;
	}

	.profile-follow-stats span {
		font-size: 0.74rem;
	}

	.create-upload-preview {
		grid-template-columns: 1fr;
	}

	.create-upload-preview img {
		width: 100%;
		height: auto;
		max-height: 220px;
	}

	body[data-page="login"] .inline-actions,
	body[data-page="register"] .inline-actions,
	body[data-page="settings"] .register-actions .inline-actions {
		width: 100%;
	}

	body[data-page="login"] .inline-actions .btn-primary,
	body[data-page="login"] .inline-actions .btn-secondary,
	body[data-page="register"] .inline-actions .btn-primary,
	body[data-page="register"] .inline-actions .btn-secondary,
	body[data-page="register"] .inline-actions button,
	body[data-page="settings"] .register-actions .inline-actions .btn-primary,
	body[data-page="settings"] .register-actions .inline-actions .btn-secondary,
	body[data-page="settings"] .register-actions .inline-actions button {
		width: 100%;
		justify-content: center;
	}
}

@media (max-width: 480px) {
	.container {
		padding: 12px 8px;
	}

	.section-card,
	.auth-card,
	.post-card {
		padding: 12px;
		border-radius: 12px;
	}

	.field-wrap input,
	.field-wrap select,
	.field-wrap textarea {
		padding: 9px 10px;
		font-size: 0.9rem;
	}

	.btn-primary,
	.btn-secondary {
		padding: 8px 12px;
		font-size: 0.78rem;
	}

	.post-card .post-header {
		gap: 8px;
	}

	.post-card .avatar,
	.create-post-top .avatar,
	.comment-input-row .avatar {
		width: 36px;
		height: 36px;
		font-size: 0.72rem;
	}

	.action-btn i {
		font-size: 0.85rem;
	}

	.action-btn span {
		display: none;
	}
}

/* =====================================================
	   PAGE-SCOPED FIXES (Feed/Post/Profile/Register)
	===================================================== */
@media (max-width: 900px) {
	body[data-page="feed"] .content-column,
	body[data-page="saved-posts"] .content-column,
	body[data-page="post-view"] .content-column,
	body[data-page="my-profile"] .content-column,
	body[data-page="user-profile"] .content-column {
		min-width: 0;
	}

	body[data-page="feed"] .post-card,
	body[data-page="saved-posts"] .post-card,
	body[data-page="post-view"] .post-card,
	body[data-page="post-view"] .section-card {
		overflow: hidden;
	}

	body[data-page="feed"] .post-card .post-header,
	body[data-page="saved-posts"] .post-card .post-header,
	body[data-page="post-view"] .post-card .post-header {
		flex-wrap: wrap;
	}

	body[data-page="feed"] .post-card .user-info,
	body[data-page="saved-posts"] .post-card .user-info,
	body[data-page="post-view"] .post-card .user-info,
	body[data-page="feed"] .post-desc,
	body[data-page="saved-posts"] .post-desc,
	body[data-page="post-view"] .post-desc,
	body[data-page="post-view"] .hero-subtitle {
		min-width: 0;
		overflow-wrap: anywhere;
		word-break: break-word;
	}

	body[data-page="feed"] .post-media-inner,
	body[data-page="saved-posts"] .post-media-inner {
		height: auto;
		min-height: 200px;
	}

	body[data-page="feed"] .post-media-inner.image-ratio,
	body[data-page="saved-posts"] .post-media-inner.image-ratio,
	body[data-page="post-view"] .post-media-inner.image-ratio {
		aspect-ratio: 1 / 1;
	}

	body[data-page="post-view"] .section-head {
		flex-wrap: wrap;
		align-items: flex-start;
	}

	body[data-page="post-view"] .hero-title {
		font-size: 1rem;
		line-height: 1.45;
		overflow-wrap: anywhere;
	}

	body[data-page="my-profile"] .profile-hero > .inline-actions {
		margin-left: 0;
		width: 100%;
	}

	body[data-page="my-profile"] .profile-hero > .inline-actions .btn-primary,
	body[data-page="my-profile"] .profile-hero > .inline-actions .btn-secondary,
	body[data-page="user-profile"] .profile-hero > .inline-actions .btn-primary,
	body[data-page="user-profile"] .profile-hero > .inline-actions .btn-secondary {
		padding: 7px 12px;
		font-size: 0.75rem;
	}
}

@media (max-width: 640px) {
	body[data-page="feed"] .create-post,
	body[data-page="feed"] .post-card,
	body[data-page="saved-posts"] .post-card,
	body[data-page="saved-posts"] .hero-card,
	body[data-page="post-view"] .post-card,
	body[data-page="post-view"] .section-card {
		padding: 12px;
	}

	body[data-page="feed"] .post-actions,
	body[data-page="saved-posts"] .post-actions,
	body[data-page="post-view"] .post-actions {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 4px;
	}

	body[data-page="feed"] .action-btn,
	body[data-page="saved-posts"] .action-btn,
	body[data-page="post-view"] .action-btn {
		padding: 7px 6px;
		font-size: 0.7rem;
	}

	body[data-page="my-profile"] .profile-hero,
	body[data-page="user-profile"] .profile-hero {
		gap: 10px;
	}

	body[data-page="my-profile"] .profile-hero > .inline-actions,
	body[data-page="user-profile"] .profile-hero > .inline-actions {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
	}

	body[data-page="my-profile"] .profile-hero > .inline-actions .btn-primary,
	body[data-page="my-profile"] .profile-hero > .inline-actions .btn-secondary,
	body[data-page="user-profile"] .profile-hero > .inline-actions .btn-primary,
	body[data-page="user-profile"] .profile-hero > .inline-actions .btn-secondary {
		width: 100%;
		text-align: center;
		justify-content: center;
	}

	body[data-page="register"] .auth-card {
		width: min(96vw, 760px);
	}

	body[data-page="register"] .register-actions {
		flex-direction: column-reverse;
		align-items: stretch;
	}

	body[data-page="register"] #registerStepTracker {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 420px) {
	body[data-page="feed"] .post-card .avatar,
	body[data-page="saved-posts"] .post-card .avatar,
	body[data-page="post-view"] .post-card .avatar {
		width: 34px;
		height: 34px;
		font-size: 0.68rem;
	}
}