/* =========================================================
   Shrang Responsive Styles
   ========================================================= */

@media (max-width: 900px) {
    .sharang-recent-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sharang-my-clips-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 800px) {
    .shrang-home-hero {
        margin-top: 34px;
        padding: 42px 22px;
        border-radius: 22px;
    }

    .shrang-home-how {
        grid-template-columns: 1fr;
    }

    .shrang-home-actions {
        flex-direction: column;
    }

    .shrang-home-primary,
    .shrang-home-secondary {
        width: 100%;
    }
}

@media (max-width: 700px) {
    .sharang-generator-wrap {
        margin: 24px auto;
        padding: 22px;
    }

    .shrang-account-toolbar {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        margin: 12px 0 16px;
        padding: 12px;
        border-radius: 14px;
    }

    .shrang-account-toolbar-actions {
        width: 100% !important;
    }

    .shrang-info-page {
        margin: 24px auto;
        padding: 24px;
    }

    .shrang-info-page h2 {
        font-size: 21px;
    }

    .sharang-rename-row {
        flex-direction: column;
    }

    .sharang-rename-row input,
    .sharang-rename-row button {
        width: 100%;
    }
}

@media (max-width: 600px) {
    .sharang-recent-grid {
        grid-template-columns: 1fr;
    }

    .sharang-generation-box {
        padding: 24px;
    }

    .sharang-generation-box h3 {
        font-size: 21px;
    }

    .sharang-result,
    .sharang-recent-card,
    .sharang-my-clip-card {
        padding: 18px;
        border-radius: 16px;
    }

    .sharang-recent-card h3,
    .sharang-my-clip-card h3 {
        font-size: 18px;
    }
}