/* Mobile-responsive CSS for Beast Mode SLD Grid */

/* Default grid: 3 columns on desktop */
.sld-grid,
[class*="sld-grid"],
.sld-container .grid,
.sld-ideas-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
    margin-top: 10px !important;
}

/* Tablet: 2 columns */
@media (max-width: 768px) {
    .sld-grid,
    [class*="sld-grid"],
    .sld-container .grid,
    .sld-ideas-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
}

/* Mobile: 1 column */
@media (max-width: 480px) {
    .sld-grid,
    [class*="sld-grid"],
    .sld-container .grid,
    .sld-ideas-grid {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }
    
    /* Ensure SLD items are full width on mobile */
    .sld-item,
    [class*="sld-item"] {
        width: 100% !important;
        padding: 12px 16px !important;
        font-size: 14px !important;
    }
}

/* Fix viewport for mobile devices */
@media (max-width: 768px) {
    /* Ensure proper spacing on mobile */
    .container,
    [class*="container"] {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    /* Fix domain cards on mobile */
    .domain-card,
    [class*="domain-card"] {
        margin: 8px 0 !important;
        padding: 12px !important;
    }
    
    /* Adjust button sizes on mobile */
    .sld-toggle-btn,
    [class*="toggle-btn"] {
        font-size: 12px !important;
        padding: 6px 12px !important;
    }
}

/* Ensure text doesn't overflow on small screens */
@media (max-width: 480px) {
    .domain-name,
    [class*="domain-name"] {
        font-size: 1.1rem !important;
        word-break: break-word !important;
    }
    
    .domain-punycode,
    [class*="punycode"] {
        font-size: 11px !important;
        word-break: break-all !important;
    }
}

/* Bootstrap responsive utilities override */
.row > [class*="col-"] {
    padding-right: 15px;
    padding-left: 15px;
}

/* Fix any flex containers that might be forcing 3 columns */
.d-flex,
.flex-row {
    flex-wrap: wrap !important;
}

@media (max-width: 768px) {
    .d-flex > *,
    .flex-row > * {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}

@media (max-width: 480px) {
    .d-flex > *,
    .flex-row > * {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}