/*
===========================================
  📱 responsive-styles.css – Media Queries
  Portfolio-Templates / Minimalist_Professional
  Author: Madhurima Rawat
  Description:
    This file defines responsive styling rules to 
    ensure the layout adapts smoothly across various 
    screen sizes and devices — from desktops and tablets 
    to mobile phones. Includes layout scaling, spacing 
    adjustments, and font resizing to maintain 
    accessibility and visual consistency.
===========================================
*/

/* -------------------------------------------
   Responsive Media Queries
------------------------------------------- */

/* Laptop screens (1025px - 1440px) */
@media (max-width: 1440px) {

    /* Adjust section card width for better spacing */
    .section-card {
        width: 48%;
        /* Slightly wider cards for larger screens */
    }

    /* Limit bio width slightly */
    .bio {
        max-width: 500px;
        /* Narrower text for better readability */
    }
}

/* Tablets and small laptops (769px - 1024px) */
@media (max-width: 1024px) {

    /* Stack navbar links tighter */
    nav ul {
        gap: 0.8rem;
        /* Reduce spacing between links */
    }

    .section-card {
        width: 48%;
        /* Keep two cards per row */
    }

    .name {
        font-size: 2.5rem;
        /* Reduce heading size slightly */
    }

    .role {
        font-size: 1.3rem;
        /* Adjust role font size */
    }

    .bio {
        font-size: 1rem;
        /* Slightly smaller for better fit */
        max-width: 90%;
        /* Take more space on smaller screens */
    }

    .section-heading {
        font-size: 1.75rem;
        /* Slightly smaller headings */
    }

    .section-description {
        font-size: 1rem;
        /* Reduce text size for comfort */
    }

    .skills-list {
        gap: 0.75rem;
        /* Tighter spacing between skill pills */
    }
}

@media (min-width: 501px) and (max-width: 768px) {

    /* Stack navbar links tighter */
    nav ul {
        gap: 0.3rem;
        /* Reduce spacing between links */
    }

    .name {
        font-size: 2rem;
        /* Smaller name heading */
    }

    .role {
        font-size: 1.1rem;
        /* Smaller role text */
    }

    .bio {
        font-size: 0.95rem;
        /* Compact text */
    }

    .section-heading {
        font-size: 1.5rem;
        /* Smaller section title */
    }

    .section-card {
        width: 100%;
        /* Full width cards for vertical stacking */
    }

    .skills-list {
        display: block;
        flex-direction: row;
        /* Place items in a row */
        flex-wrap: wrap; 
        /* Center the entire row of items */
        gap: 0;
        /* Optional: space between items */
        padding: 0;
        list-style: none;
    }

    .skills-list li {
        flex: none;
        /* Allow 3 items per row with gap adjustment */
        max-width: none;
        /* Restrict width to roughly 1/3 */
        text-align: center;
        /* Center the text inside */
    }
    .skills-group-list {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        justify-content: flex-start;
    }

    .social-links {
        display: flex;
        flex-direction: row;
        /* Arrange social links in a row */
        flex-wrap: wrap;
        /* Wrap on smaller screens */
        justify-content: center;
        /* Center all social buttons */
        gap: 1rem;
        /* Space between buttons */
        padding: 0;
        list-style: none;
    }

    .social-links li {
        flex: 1 1 28%;
        /* Take about 1/3 of the row */
        max-width: 28%;
        text-align: center;
        /* Center button content */
    }

    .section-image {
        height: 160px;
        /* Reduce image height */
    }

    .footer {
        padding: 0.75rem 0;
    }
}

/* Mobile phones (up to 500px) */
@media (max-width: 500px) {

    nav ul {
        display: flex;
        flex-wrap: wrap;
        gap: 0.6rem 0;
        /* smaller vertical gap */
        height: auto;
        justify-content: space-between;
        padding: 0 0rem;
        /* small horizontal padding */
        margin: 0;
        list-style: none;
    }

    nav ul li {
        width: 50%;
        display: flex;
        justify-content: flex-start;
    }

    nav ul li:nth-child(2n) {
        justify-content: flex-end;
    }

    nav a.nav-link {
        font-size: 0.85rem;
        padding: 0rem 0rem;
        /* less vertical and horizontal padding */
        display: inline-block;
    }

    .name {
        font-size: 2rem;
        /* Smaller name heading */
    }

    .role {
        font-size: 1.1rem;
        /* Smaller role text */
    }

    .bio {
        font-size: 0.95rem;
        /* Compact text */
    }

    .section-heading {
        font-size: 1.5rem;
        /* Smaller section title */
    }

    .section-card {
        width: 100%;
        /* Full width cards for vertical stacking */
    }

    .skills-list {
        display: block;
        flex-direction: row;
        /* Place items in a row */
        /* Center the buttons horizontally */
        flex-wrap: wrap;
        /* Wrap if needed for responsiveness */
        gap: 0;
        /* Optional: adds spacing between buttons */
        padding: 0;
        list-style: none;
    }

    .skills-list li {
        flex: none;
        /* Make each item take around 45% width */
        max-width: none;
        text-align: center;
    }

    .social-links {
        display: flex;
        flex-direction: row;
        /* Arrange items in a row */
        justify-content: center;
        /* Center them horizontally */
        flex-wrap: wrap;
        /* Allow wrapping on smaller screens */
        gap: 1rem;
        /* Optional spacing between buttons */
        padding: 0;
        list-style: none;
    }

    .social-links li {
        flex: 1 1 45%;
        /* Each item takes up about half the row */
        max-width: 45%;
        text-align: center;
    }

    .section-image {
        height: 160px;
        /* Reduce image height */
    }

    .footer {
        padding: 0.75rem 0;
    }
}

/* 📱 Mobile styles for devices ≤ 431px width (e.g., iPhone 12 Pro, Pixel 7, iPhone 14 Pro Max) */
@media (max-width: 431px) {
    nav ul {
        display: flex !important;
        /* Ensure flex layout is enforced */
        flex-wrap: wrap !important;
        /* Allow wrapping of items */
        gap: 0.4rem 0 !important;
        /* Small vertical gap between rows */
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    nav ul li {
        flex: 1 1 50% !important;
        /* Each item takes up half the row */
        display: flex !important;
        align-items: center !important;
    }

    nav ul li:nth-child(odd) {
        justify-content: flex-start !important;
        /* Left-align odd-numbered links */
    }

    nav ul li:nth-child(even) {
        justify-content: flex-end !important;
        /* Right-align even-numbered links */
    }

    nav a.nav-link {
        font-size: 0.85rem !important;
        /* Smaller readable font */
        padding: 0.2rem 0.4rem !important;
        /* Tap-friendly padding */
        white-space: nowrap !important;
        /* Prevent wrapping of text */
    }
}


/* 🎯 Surface Duo (540px × 720px) one-liner navbar */
@media screen and (device-width: 540px) and (device-height: 720px),
screen and (max-width: 550px) and (min-height: 700px) {

    nav ul {
        flex-wrap: nowrap;
        gap: 0.1rem;
        justify-content: center;
        padding: 0 0.25rem;
        overflow-x: auto;
        scrollbar-width: none;
        /* Firefox */
    }

    nav ul::-webkit-scrollbar {
        display: none;
        /* Chrome, Safari */
    }

    nav ul li {
        flex: 0 0 auto;
    }

    nav a.nav-link {
        font-size: 0.65rem;
        padding: 0.25rem 0.5rem;
    }
}