/* ==========================================================================
   RESPONSIVE STYLES - Mobile and Tablet Adaptations
   ========================================================================== */

/* All styles triggered at specific screen widths using @media queries */

/* ==========================================================================
   TABLET AND MOBILE NAVIGATION (Max width: 1024px)
   ========================================================================== */

/* Tablet/mobile viewport adjustment: Navigation bar adjusts height to content, reduced padding, wrap enabled */
@media (max-width: 1024px) {
    
    .social img {
        width: 20px !important;
        height: 20px !important;
    }

    nav {
        height: auto;
        padding: 15px 20px;
        flex-wrap: wrap;
    }

    /* Logo size reduction on tablet */
    nav .left {
        font-size: 1.2rem;
    }

    /* Show hamburger menu on tablet/mobile: Display flex, relative position, z-index above others */
    .hamburger {
        display: flex;
        position: relative;
        z-index: 1001;
    }

    /* Navigation menu dropdown: Absolute position below nav, full width, dark purple background, vertical flex direction, centered items, hidden by default (translateY -150%, opacity 0, visibility hidden), smooth transition, shadow */
    .nav-menu {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: #0f172a;
        flex-direction: column;
        align-items: center;
        padding: 20px 0;
        transform: translateY(-150%);
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        z-index: 999;
        box-shadow: 0 2px 5px #a8bbe7;
    }

    /* Active state: Menu slides into view, becomes visible and clickable */
    .nav-menu.active {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }

    /* Menu list items: Vertical margin (10px), full width, centered text */
    .nav-menu li {
        margin: 10px 0;
        width: 100%;
        text-align: center;
    }

    /* Menu links: Block display for full clickable area, larger padding for touch targets */
    .nav-menu li a {
        display: block;
        padding: 10px 20px;
        width: 100%;
    }

    /* Hamburger animation: First line rotates -45deg and translates to form X */
    .hamburger.active span:nth-child(1) {
        transform: rotate(-45deg) translate(-5px, 6px);
    }

    /* Hamburger animation: Second line opacity becomes 0 (disappears) */
    .hamburger.active span:nth-child(2) {
        opacity: 0;
    }

    /* Hamburger animation: Third line rotates 45deg to form X */
    .hamburger.active span:nth-child(3) {
        transform: rotate(45deg) translate(-5px, -6px);
    }

    /* Hero section: Changes to vertical column layout, auto height, reduced padding and margin */
    .firstSection {
        flex-direction: column;
        min-height: auto;
        padding: 100px 20px 40px 20px;
        margin: 40px 20px;
    }

    /* Left and right sections: Full width (100%), vertical margin (30px), centered text */
    .leftSection,
    .rightSection {
        width: 100%;
        margin: 30px 0;
        text-align: center;
    }

    /* Intro text: Smaller font size (1.5rem), centered text */
    .introText {
        font-size: 1.5rem;
        text-align: center;
    }

    /* Passionate text: Inline display to flow with other text, no margin */
    .introText .passionate-text {
        display: inline;
        margin: 0;
    }

    /* Button container: Centers buttons horizontally */
    .introText .button {
        justify-content: center;
    }

    /* Profile image: Smaller dimensions (250px width and height) */
    .rightSection img {
        width: 250px;
        height: 250px;
    }

    /* Footer: Reduced padding (15px) */
    footer {
        padding: 15px;
    }

    /* Footer paragraph: Smaller font size (0.8rem) */
    .footer-content p {
        font-size: 0.8rem;
    }

    /* Social links: Wrap enabled, smaller gap (10px) */
    .social-links {
        flex-wrap: wrap;
        gap: 10px;
    }

    /* Social links: Smaller padding (8px 10px), smaller font (0.8rem) */
    .social-links a {
        padding: 8px 10px;
        font-size: 0.8rem;
    }

    /* Social link span: Inline display to show text next to icon */
    .social-links a span {
        display: inline;
    }

    /* Horizontal rule: Smaller margins (30px 20px) */
    main hr {
        margin: 30px 20px;
    }

    /* Sections: Reduced padding (40px vertical, 5% horizontal) */
    .workSection,
    .skillsSection,
    .projectsSection {
        padding: 40px 5%;
    }

    /* Section titles: Smaller font size (2rem) */
    .workSection .work-title,
    .skillsSection .section-title,
    .projectsSection .section-title {
        font-size: 2rem;
    }
}

/* ==========================================================================
   RESPONSIVE GRID FOR WORK EXPERIENCE CARDS
   ========================================================================== */

/* Large desktop (max 1400px): 3 columns instead of 4 */
@media (max-width: 1400px) {
    .workSection .container {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Tablet landscape (max 1024px): 2 columns, max width constraint (800px) */
@media (max-width: 1024px) {
    .workSection .container {
        grid-template-columns: repeat(2, 1fr);
        max-width: 800px;
    }
}

/* Tablet portrait and larger phones (max 768px): 2 columns, reduced gap (20px) */
@media (max-width: 768px) {
    .workSection .container {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    /* Work card: Reduced padding (20px) */
    .workSection .card {
        padding: 20px;
    }
}

/* ==========================================================================
   SMALL MOBILE PHONES (Max width: 480px)
   ========================================================================== */

/* Small mobile viewport adjustments: Further reduced sizes */
@media (max-width: 480px) {
    
    .social img {
        width: 18px !important;
        height: 18px !important;
    }

    /* Navigation: Even smaller padding (12px 15px) */
    nav {
        padding: 12px 15px;
    }

    /* Logo: Smallest size (1rem) */
    nav .left {
        font-size: 1rem;
    }

    /* Hero section: Minimal padding (90px 15px 30px 15px), minimal margin (30px 15px) */
    .firstSection {
        padding: 90px 15px 30px 15px;
        margin: 30px 15px;
    }

    /* Intro text: Smallest heading size (1.2rem) */
    .introText {
        font-size: 1.2rem;
    }

    /* Profile image: Smallest dimensions (200px width and height) */
    .rightSection img {
        width: 200px;
        height: 200px;
    }

    /* Button: Smaller padding (10px 18px), smaller font (0.9rem) */
    .btn {
        padding: 10px 18px;
        font-size: 0.9rem;
    }

    /* Section titles: Smallest size (1.8rem) */
    .workSection .work-title,
    .skillsSection .section-title,
    .projectsSection .section-title {
        font-size: 1.8rem;
    }

    /* Work container: Single column (1fr) for full width cards, hide LEARN MORE button */
    .workSection .container {
        grid-template-columns: 1fr;
    }
    .workSection .btn-card {
        display: none;
    }

    /* Skills and projects grids: Single column layout */
    .skills-container,
    .projects-grid {
        grid-template-columns: 1fr;
    }

    /* Cards: Reduced padding (20px) */
    .skill-category,
    .project-card {
        padding: 20px;
    }

    /* Social links: Minimal gap (8px) */
    .social-links {
        gap: 8px;
    }

    /* Social links: Minimal padding (6px 8px), smallest font (0.75rem) */
    .social-links a {
        padding: 6px 8px;
        font-size: 0.75rem;
    }

    /* Social link icon: Same size as text (1em) */
    .social-links a i {
        font-size: 1em;
    }
}