/** * Responsive Media Queries - All Adaptive Styles */ /* Container adjustments */ @media (max-width: 768px) { .container { padding: 0 var(--space-md); } } /* Navigation - Tablets & Mobile */ @media (max-width: 992px) { .nav-toggle { display: flex; } .nav-menu { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--bg-dark); flex-direction: column; justify-content: center; padding: var(--space-2xl); gap: var(--space-sm); transform: translateX(100%); transition: var(--transition); z-index: var(--z-modal); } .nav-menu.active { transform: translateX(0); } .nav-link { width: 100%; padding: var(--space-md); font-size: 1.1rem; justify-content: center; } .nav-auth { position: fixed; bottom: var(--space-2xl); left: 50%; transform: translateX(-50%); z-index: var(--z-modal); opacity: 0; pointer-events: none; transition: var(--transition); } .nav-menu.active ~ .nav-auth, body.nav-open .nav-auth { opacity: 1; pointer-events: auto; } .nav-user-name, .btn-text { display: none; } } /* Bento Grid - Large Screens */ @media (max-width: 1200px) { .bento-profile { grid-column: span 12; } .bento-quick { grid-column: span 12; flex-direction: row; } .bento-socials { grid-column: span 6; } .bento-skills, .skills-full { grid-column: span 6; } .project-card.featured { grid-column: span 12; } .project-card.regular { grid-column: span 6; } .project-card.small { grid-column: span 4; } .about-bio { grid-column: span 12; } .about-stats { grid-column: span 12; } .timeline-card { grid-column: span 12; } .languages-card { grid-column: span 6; } .footer-grid { grid-template-columns: repeat(2, 1fr); } } /* Tablets */ @media (max-width: 992px) { .bento-profile { flex-direction: column; text-align: center; padding: var(--space-xl); } .profile-photo img { width: 160px; height: 160px; } .profile-buttons { justify-content: center; } .bento-quick { flex-wrap: wrap; } .quick-card { flex: 1 1 calc(33.333% - var(--space-lg)); min-width: 150px; } .bento-socials, .bento-skills, .skills-full { grid-column: span 12; } .project-card.featured { grid-template-columns: 1fr; } .project-card.featured .project-image { min-height: 200px; } .project-card.small { grid-column: span 6; } .contact-bento { grid-template-columns: 1fr; } .about-bento > .bento-card { grid-column: span 12 !important; } } /* Mobile */ @media (max-width: 768px) { :root { --container-padding: 1rem; } .bento-hero { padding-top: 80px; } .page-header { padding-top: calc(80px + var(--space-xl)); } .article-full { padding-top: 80px; } .project-card.regular, .project-card.small { grid-column: span 12; } .github-cta { grid-column: span 12; } .blog-grid { grid-template-columns: 1fr; } .achievements-grid { grid-template-columns: 1fr; } .achievement-card { flex-direction: column; text-align: center; } .article-meta-full { flex-direction: column; align-items: flex-start; } .article-footer-full { flex-direction: column; align-items: flex-start; } .footer-grid { grid-template-columns: 1fr; text-align: center; } .footer-brand p { max-width: none; } .footer-socials { justify-content: center; } .footer-bottom { flex-direction: column; text-align: center; } .filters-wrapper { flex-direction: column; align-items: flex-start; } .filter-group { width: 100%; } .filter-buttons { flex-wrap: wrap; } .filter-select { width: 100%; } .search-form { flex-direction: column; } .cta-section { padding: var(--space-xl); } .cta-buttons { flex-direction: column; width: 100%; } .cta-buttons .btn { width: 100%; } .messages-container { right: var(--space-md); left: var(--space-md); max-width: none; } .back-to-top { bottom: var(--space-md); right: var(--space-md); width: 44px; height: 44px; } .github-cta-card { flex-direction: column; text-align: center; } .footer-minimal-content { flex-direction: column; text-align: center; gap: var(--space-md); } } /* Small Mobile */ @media (max-width: 576px) { .quick-card { flex: 1 1 100%; } .socials-grid { grid-template-columns: 1fr; } .stats-grid { grid-template-columns: 1fr; } .skills-categories { grid-template-columns: 1fr; } .profile-buttons { flex-direction: column; width: 100%; } .profile-buttons .btn { width: 100%; } .about-bio-header { flex-direction: column; text-align: center; } .about-bio-actions { flex-direction: column; } .about-bio-actions .btn { width: 100%; } .share-buttons { flex-wrap: wrap; } .related-grid { grid-template-columns: 1fr; } .pagination-numbers { flex-wrap: wrap; justify-content: center; } .error-code { font-size: 5rem; } .social-icon-link { font-size: 1.5rem; padding: var(--space-xs); } .social-icons-inline { gap: var(--space-lg); } .form-row { grid-template-columns: 1fr; } .carousel-container { min-height: 250px; } .carousel-slide img { max-height: 250px; } .gallery-collage { grid-template-columns: repeat(2, 1fr); } .links-grid { grid-template-columns: 1fr; } }