/* Mobile-First Responsive Styles */

/* Small Mobile (320px - 480px) */
@media (max-width: 480px) {

    /* Typography */
    .hero-title {
        font-size: 1.8rem !important;
        line-height: 1.2;
    }

    .hero-subtitle {
        font-size: 0.95rem;
    }

    .section-title {
        font-size: 1.8rem;
    }

    .section-desc {
        font-size: 0.95rem;
    }

    /* Navigation */
    .navbar {
        padding: 15px 20px;
    }

    .logo {
        font-size: 1.3rem;
    }

    .nav-links {
        display: none;
    }

    /* Hero - FIXED BUTTON OVERLAP */
    .hero {
        min-height: 70vh;
        padding: 60px 0 40px;
    }

    .hero-cta {
        flex-direction: column;
        gap: 15px;
        width: 100%;
    }

    .btn-primary,
    .btn-secondary {
        width: 100%;
        text-align: center;
        padding: 14px 24px;
        display: block;
    }

    /* Container */
    .container {
        padding: 0 20px;
    }

    /* Grid layouts */
    .grid-3 {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* Cards */
    .card {
        padding: 25px 20px;
    }

    .card h3 {
        font-size: 1.2rem;
    }

    .card p {
        font-size: 0.95rem;
    }

    /* Case Study */
    .case-study-flow {
        flex-direction: column;
        gap: 20px;
    }

    .arrow {
        transform: rotate(90deg);
        font-size: 1.5rem;
    }

    .step {
        padding: 20px;
    }

    /* Tech Stack */
    .tech-stack-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .tool-card {
        padding: 20px;
    }

    .tool-card.expanded {
        grid-column: span 1;
    }

    .tool-icon {
        font-size: 2rem;
    }

    /* Portfolio */
    .portfolio-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .project-thumbnail {
        height: 180px;
    }

    .project-content {
        padding: 20px;
    }

    .project-tags {
        gap: 8px;
    }

    .tag {
        font-size: 0.7rem;
        padding: 3px 8px;
    }

    /* Constellation - EXPANDED ORBITS FOR BETTER SPACING */
    .constellation-container {
        max-width: 320px;
        height: 320px;
        margin: 40px auto;
    }

    .core-system {
        width: 70px;
        height: 70px;
        font-size: 0.65rem;
    }

    /* Expanded orbits to prevent overlap */
    .orbit-1 {
        width: 160px !important;
        height: 160px !important;
    }

    .orbit-2 {
        width: 210px !important;
        height: 210px !important;
    }

    .orbit-3 {
        width: 260px !important;
        height: 260px !important;
    }

    .orbit-4 {
        width: 310px !important;
        height: 310px !important;
    }

    .orbit-5,
    .orbit-6 {
        display: none;
    }

    .planet {
        width: 32px;
        height: 32px;
    }

    .planet-label {
        font-size: 0.6rem;
    }

    .planet-tooltip {
        display: none !important;
    }

    /* Certifications */
    .cert-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .cert-card {
        padding: 25px 20px;
    }

    .cert-icon {
        font-size: 2rem;
    }

    /* About Me */
    .about-content {
        grid-template-columns: 1fr;
        gap: 30px;
        text-align: center;
    }

    .about-text p {
        font-size: 0.95rem;
    }

    .profile-img {
        width: 200px !important;
        height: 200px !important;
        margin: 0 auto;
    }

    /* CTA */
    .cta-section h2 {
        font-size: 1.6rem;
    }

    .cta-section p {
        font-size: 0.95rem;
    }

    .cta-buttons {
        flex-direction: column;
    }

    .cta-buttons .btn-primary {
        width: 100%;
    }

    /* Footer */
    .footer-content {
        flex-direction: column;
        gap: 25px;
        text-align: center;
    }

    .footer-col {
        width: 100%;
    }

    .copyright {
        font-size: 0.75rem;
    }
}

/* Tablet (481px - 768px) */
@media (min-width: 481px) and (max-width: 768px) {
    .hero-title {
        font-size: 2.2rem;
    }

    .nav-links {
        display: none;
    }

    .grid-3 {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .tech-stack-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .portfolio-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .case-study-flow {
        flex-direction: column;
    }

    .arrow {
        transform: rotate(90deg);
    }

    .constellation-container {
        max-width: 400px;
        height: 400px;
    }

    .orbit-5,
    .orbit-6 {
        display: none;
    }

    .about-content {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 40px;
    }

    .profile-img {
        margin: 0 auto;
    }

    .cert-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-content {
        flex-wrap: wrap;
        justify-content: center;
        gap: 30px;
    }

    .footer-col {
        flex: 1 1 45%;
        text-align: center;
    }
}

/* Small Desktop (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .container {
        max-width: 900px;
    }

    .hero-title {
        font-size: 2.8rem;
    }

    .tech-stack-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .constellation-container {
        max-width: 500px;
        height: 500px;
    }

    .cert-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Large Desktop (1025px+) */
@media (min-width: 1025px) {
    .container {
        max-width: 1200px;
    }

    .hero-title {
        font-size: 3.5rem;
    }

    .tech-stack-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .portfolio-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Landscape Mobile */
@media (max-height: 500px) and (orientation: landscape) {
    .hero {
        min-height: auto;
        padding: 40px 0;
    }

    .constellation-container {
        max-width: 350px;
        height: 350px;
    }
}

/* ── New sections: mobile ── */
@media (max-width: 480px) {

    /* Stats */
    .stats-section {
        padding: 36px 0;
    }

    /* Featured project cards */
    .featured-projects-list {
        gap: 24px;
    }

    .featured-project-card {
        padding: 20px 16px;
    }

    .project-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .project-title-main {
        font-size: 1.15rem;
        margin-bottom: 16px;
    }

    .story-step {
        font-size: 0.68rem;
    }

    .story-block {
        padding: 14px 16px;
    }

    .story-block p {
        font-size: 0.85rem;
    }

    /* Video slot — keep 16:9 naturally */
    .project-video-slot {
        margin-top: 16px;
    }

    /* Coming soon badge */
    .coming-soon-badge {
        font-size: 0.72rem;
        padding: 6px 14px;
    }
}

/* Print Styles */
@media print {

    .navbar,
    .hero-cta,
    .cta-section,
    .footer {
        display: none;
    }

    body {
        background: white;
        color: black;
    }

    .section {
        page-break-inside: avoid;
    }
}