/**
 * JA Enterprise Child - Layout & Design Utilities
 *
 * @package JA_Enterprise_Child
 */

/* Container Helpers */
.ja-container {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: 20px;
    padding-left: 20px;
    max-width: 1200px;
}

.ja-section {
    padding-top: 80px;
    padding-bottom: 80px;
}

/* Card Styling */
.ja-card {
    background-color: var(--ja-light, #F9FAFB);
    border-radius: var(--ja-radius, 10px);
    border: 1px solid var(--ja-border, #E5E7EB);
    padding: 30px;
    transition: var(--ja-transition, 0.3s ease);
}

.ja-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--ja-shadow, 0 6px 18px rgba(0,0,0,.08));
}

/* Spacing Helpers */
.mt-10 { margin-top: 10px !important; }
.mt-20 { margin-top: 20px !important; }
.mt-30 { margin-top: 30px !important; }
.mt-40 { margin-top: 40px !important; }
.mt-60 { margin-top: 60px !important; }
.mt-80 { margin-top: 80px !important; }

.mb-10 { margin-bottom: 10px !important; }
.mb-20 { margin-bottom: 20px !important; }
.mb-30 { margin-bottom: 30px !important; }
.mb-40 { margin-bottom: 40px !important; }
.mb-60 { margin-bottom: 60px !important; }
.mb-80 { margin-bottom: 80px !important; }

.py-20 { padding-top: 20px !important; padding-bottom: 20px !important; }
.py-40 { padding-top: 40px !important; padding-bottom: 40px !important; }
.py-60 { padding-top: 60px !important; padding-bottom: 60px !important; }
.py-80 { padding-top: 80px !important; padding-bottom: 80px !important; }

.px-20 { padding-left: 20px !important; padding-right: 20px !important; }
.px-40 { padding-left: 40px !important; padding-right: 40px !important; }

/* Flex Helpers */
.d-flex { display: flex !important; }
.align-center { align-items: center !important; }
.justify-between { justify-content: space-between !important; }
.justify-center { justify-content: center !important; }
.flex-column { flex-direction: column !important; }
.gap-10 { gap: 10px !important; }
.gap-20 { gap: 20px !important; }

/* Grid Helpers */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

/* Border Radius */
.rounded { border-radius: 6px !important; }
.rounded-md { border-radius: var(--ja-radius, 10px) !important; }
.rounded-lg { border-radius: 20px !important; }
.rounded-full { border-radius: 9999px !important; }

/* Shadow Helpers */
.shadow { box-shadow: var(--ja-shadow, 0 6px 18px rgba(0,0,0,.08)) !important; }
.shadow-lg { box-shadow: 0 10px 30px rgba(0,0,0,0.12) !important; }
.shadow-none { box-shadow: none !important; }

/* Width / Height */
.w-full { width: 100% !important; }
.h-full { height: 100% !important; }