/* Responsive Card Layout Tool Styles */

/* Layout Preview Container */
.layout-preview-container {
    background-color: #f8f9fa;
    border: 1px dashed #dee2e6;
    padding: 20px;
    margin-bottom: 20px;
    min-height: 300px;
}

/* Generated Card Styles */
.generated-card {
    margin-bottom: 1rem;
    transition: all 0.3s ease;
}

/* Card Style: Basic */
.card-style-basic {
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    overflow: hidden;
}

.card-style-basic .card-img-top {
    height: 120px;
    background-color: #6c757d;
}

.card-style-basic .card-body {
    padding: 1rem;
}

/* Card Style: Modern */
.card-style-modern {
    border: none;
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.card-style-modern .card-img-top {
    height: 150px;
    background: linear-gradient(45deg, #6c757d, #495057);
}

.card-style-modern .card-body {
    padding: 1.5rem;
}

/* Card Style: Minimal */
.card-style-minimal {
    border: 1px solid #e9ecef;
    border-radius: 0;
    background-color: white;
}

.card-style-minimal .card-img-top {
    height: 100px;
    background-color: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
}

.card-style-minimal .card-body {
    padding: 1rem;
}

/* Grid Layout Classes */
.grid-layout {
    display: grid;
    gap: 1rem;
}

.grid-gap-none {
    gap: 0;
}

.grid-gap-sm {
    gap: 0.5rem;
}

.grid-gap-md {
    gap: 1rem;
}

.grid-gap-lg {
    gap: 1.5rem;
}

.grid-gap-xl {
    gap: 2rem;
}

/* Column Classes */
.grid-cols-1 {
    grid-template-columns: repeat(1, 1fr);
}

.grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

.grid-cols-6 {
    grid-template-columns: repeat(6, 1fr);
}

/* Equal Height Cards */
.equal-height-cards {
    align-items: stretch;
}

.equal-height-cards .generated-card {
    height: 100%;
}

/* Responsive Behavior */
.responsive-cols {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

/* Responsive Preview Mode */
@media (max-width: 767.98px) {
    .responsive-preview .grid-cols-2,
    .responsive-preview .grid-cols-3,
    .responsive-preview .grid-cols-4,
    .responsive-preview .grid-cols-6 {
        grid-template-columns: repeat(1, 1fr);
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .responsive-preview .grid-cols-3,
    .responsive-preview .grid-cols-4,
    .responsive-preview .grid-cols-6 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .responsive-preview .grid-cols-4,
    .responsive-preview .grid-cols-6 {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Animation for copy buttons */
@keyframes flash {
    0% { background-color: transparent; }
    50% { background-color: rgba(25, 135, 84, 0.2); }
    100% { background-color: transparent; }
}

.copied {
    animation: flash 1s;
}