/* responsive-styles.css */
@media (min-width: 0) and (max-width: 1237px) {
    .list-item-container {
        display: block;
    }

    .repo-links-container {
        padding-top: clamp(0.2%, 1vw, 0.30%);
    }

    .repo-arrow {
        font-size: clamp(1em, 3vw, 1.2em);
    }
}

/* --- Mobile Viewport Adjustments (1-column grid & card styling) --- */

/* Tablet & Large Mobile (Standard viewport width up to 768px) */
@media (max-width: 768px) {
    .repo-list {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .repo-item {
        margin: 0;
        padding: 20px;
        border-radius: 12px; /* enhanced card look */
    }

    .list-item-container {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
    
    .repo-name {
        max-width: 100%;
        display: block;
        margin-bottom: 8px;
        font-size: 1.4em;
    }

    .repo-description {
        margin-right: 0;
        font-size: 1em;
    }

    .repo-links-container {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        margin-top: 15px;
        width: 100%;
    }
    
    .repo-arrow {
        align-self: center;
        margin-top: 10px;
        font-size: 1.5em;
    }
}

/* Large Phones (Standard viewport width 428px - e.g., iPhone Pro Max) */
@media (max-width: 428px) {
    .repo-item {
        padding: 16px;
    }
    .repo-name {
        font-size: 1.3em;
    }
    .repo-description {
        font-size: 0.95em;
    }
    .repo-links-container {
        gap: 10px;
    }
}

/* Medium Phones (Standard viewport width 414px - e.g., iPhone XR/11) */
@media (max-width: 414px) {
    .repo-item {
        padding: 15px;
    }
    .repo-name {
        font-size: 1.25em;
    }
    .repo-links-container {
        gap: 10px;
    }
}

/* Medium Phones (Standard viewport width 390px - e.g., iPhone 12/13/14) */
@media (max-width: 390px) {
    .repo-item {
        padding: 14px;
    }
    .repo-name {
        font-size: 1.2em;
    }
}

/* Standard Phones (Standard viewport width 375px - e.g., iPhone 6/7/8/SE) */
@media (max-width: 375px) {
    .repo-item {
        padding: 12px;
    }
    .repo-name {
        font-size: 1.15em;
    }
    .repo-description {
        font-size: 0.9em;
    }
    .repo-links-container {
        gap: 8px;
    }
}

/* Small Phones (Standard viewport width 320px - e.g., iPhone 5/SE Gen 1) */
@media (max-width: 320px) {
    .repo-item {
        padding: 10px;
    }
    .repo-name {
        font-size: 1.1em;
    }
    .repo-description {
        font-size: 0.85em;
    }
    .repo-links-container {
        gap: 6px;
    }
    .repo-arrow {
        font-size: 1.2em;
    }
}

/* Handle short viewports (landscape mobile) */
@media (max-height: 480px) and (orientation: landscape) {
    .repo-item {
        padding: 10px;
    }
    .repo-name {
        font-size: 1.2em;
    }
    .repo-description {
        font-size: 0.9em;
    }
}