/* Utility classes for layout */
.grid {
    display: grid;
}

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

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

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

.gap-6 {
    gap: 1.5rem;
}

.gap-4 {
    gap: 1rem;
}

.space-y-6 > * + * {
    margin-top: 1.5rem;
}

.space-y-3 > * + * {
    margin-top: 0.75rem;
}

.mb-6 {
    margin-bottom: 1.5rem;
}

.mb-4 {
    margin-bottom: 1rem;
}

.mt-8 {
    margin-top: 2rem;
}

.p-3 {
    padding: 0.75rem;
}

.p-4 {
    padding: 1rem;
}

.text-center {
    text-align: center;
}

.w-full {
    width: 100%;
}

.flex {
    display: flex;
}

.items-center {
    align-items: center;
}

.justify-between {
    justify-content: space-between;
}

@media (min-width: 1024px) {
    .lg\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .lg\:col-span-2 {
        grid-column: span 2 / span 2;
    }
}

/* ========================================
   MOBILE RESPONSIVE UTILITIES
   ======================================== */
@media (max-width: 768px) {
    /* Form page headers - stack vertically */
    .flex.justify-between.items-center.mb-8,
    .flex.justify-between.items-center.mb-6 {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 1rem;
    }

    /* Multi-column layouts to single column */
    .grid.grid-cols-2,
    .grid.grid-cols-3 {
        grid-template-columns: 1fr !important;
    }

    /* Flex row to column */
    .flex.gap-4 {
        flex-direction: column;
    }

    /* Form actions - stack or space evenly */
    .form-actions {
        flex-direction: column;
        gap: 0.75rem;
    }

    .form-actions .btn {
        width: 100%;
        justify-content: center;
    }

    /* Cards narrower max-width on mobile */
    .card[style*="max-width"],
    .clay-card[style*="max-width"] {
        max-width: 100% !important;
        padding: 1.5rem !important;
    }
}

@media (max-width: 480px) {
    /* Smaller padding on very small screens */
    .card {
        padding: 1rem;
    }

    .mb-8 {
        margin-bottom: 1.5rem;
    }

    .mb-6 {
        margin-bottom: 1rem;
    }

    .gap-6 {
        gap: 1rem;
    }

    .gap-4 {
        gap: 0.75rem;
    }
}