/* ========================================
   SPACING UTILITIES - Reusable System
   ======================================== */

/* Padding utilities */
.pt-120 { padding-top: 120px; }
.pb-120 { padding-bottom: 120px; }
.pt-90 { padding-top: 90px; }
.pb-90 { padding-bottom: 90px; }
.pt-60 { padding-top: 60px; }
.pb-60 { padding-bottom: 60px; }
.py-120 { padding-top: 120px; padding-bottom: 120px; }
.py-90 { padding-top: 90px; padding-bottom: 90px; }

/* Margin utilities */
.mt-40 { margin-top: 40px; }
.mt-60 { margin-top: 60px; }
.mb-30 { margin-bottom: 30px; }
.mb-40 { margin-bottom: 40px; }
.mb-60 { margin-bottom: 60px; }

/* Responsive spacing - Mobile */
@media (max-width: 991px) {
    .pt-120 { padding-top: 80px; }
    .pb-120 { padding-bottom: 80px; }
    .pt-90 { padding-top: 60px; }
    .pb-90 { padding-bottom: 60px; }
    .py-120 { padding-top: 80px; padding-bottom: 80px; }
    .py-90 { padding-top: 60px; padding-bottom: 60px; }
}

@media (max-width: 767px) {
    .pt-120 { padding-top: 60px; }
    .pb-120 { padding-bottom: 60px; }
    .pt-90 { padding-top: 40px; }
    .pb-90 { padding-bottom: 40px; }
    .py-120 { padding-top: 60px; padding-bottom: 60px; }
    .py-90 { padding-top: 40px; padding-bottom: 40px; }
}

/* ========================================
   FLEXBOX UTILITIES
   ======================================== */

.d-flex-column { display: flex; flex-direction: column; }
.flex-grow-1 { flex-grow: 1; }
.align-items-stretch { align-items: stretch; }

/* Equal height cards */
.equal-height-row > [class*="col-"] {
    display: flex;
}

.equal-height-row > [class*="col-"] > * {
    width: 100%;
}

/* ========================================
   GRID SPACING SYSTEM
   ======================================== */

/* Use g-* classes from Bootstrap 5 for consistent spacing */
/* g-4 = 1.5rem (24px) gap between columns */
/* g-5 = 3rem (48px) gap between columns */

/* Custom gap sizes if needed */
.gap-30 { gap: 30px; }
.gap-40 { gap: 40px; }
.gap-50 { gap: 50px; }

/* ========================================
   SECTION BACKGROUNDS
   ======================================== */

.section-bg-light {
    background: var(--section-bg, #f8f9fa);
}

.section-bg-white {
    background: #fff;
}

.section-bg-primary {
    background: linear-gradient(135deg, var(--primary-color, #3b7ddd) 0%, var(--primary-color-dark, #2d5ba8) 100%);
    color: #fff;
}

/* ========================================
   CARD SPACING
   ======================================== */

/* Ensure cards fill their container height */
.card-fill-height {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.card-fill-height > .card-body,
.card-fill-height > .blog-post__content,
.card-fill-height > .pricing-card__features {
    flex-grow: 1;
}

/* ========================================
   TEXT UTILITIES
   ======================================== */

.text-balance {
    text-wrap: balance;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ========================================
   SHADOW UTILITIES
   ======================================== */

.shadow-sm-hover {
    transition: box-shadow 0.3s ease;
}

.shadow-sm-hover:hover {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.shadow-lg-hover {
    transition: box-shadow 0.3s ease;
}

.shadow-lg-hover:hover {
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
}

/* ========================================
   ANIMATION UTILITIES
   ======================================== */

.transition-all {
    transition: all 0.3s ease;
}

.hover-lift {
    transition: transform 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-5px);
}