/**
 * Block Utilities - Universal patterns for Gutenberg blocks
 * NOTE: box-sizing already set globally in critical.css
 *
 * Loaded conditionally only on pages with Gutenberg blocks
 */

/* ==========================================================================
   Block Section Base - Universal wrapper
   ========================================================================== */

.block-section {
    isolation: isolate;
    position: relative;
}

/* ==========================================================================
   Block Padding - Responsive vertical padding (48 -> 64 -> 80)
   ========================================================================== */

.block-padding {
    padding-top: 48px;
    padding-bottom: 48px;
}

@media (min-width: 768px) {
    .block-padding {
        padding-top: 64px;
        padding-bottom: 64px;
    }
}

@media (min-width: 1024px) {
    .block-padding {
        padding-top: 80px;
        padding-bottom: 80px;
    }
}

/* ==========================================================================
   Block Header Pattern - Centered header section
   ========================================================================== */

.block-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
    width: 100%;
}

/* ==========================================================================
   Block Title - Responsive typography (28 -> 36 -> 42)
   ========================================================================== */

.block-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 800;
    font-size: 28px;
    line-height: 1.2;
    color: var(--color-text-dark, #292929);
    margin: 0;
}

@media (min-width: 768px) {
    .block-title {
        font-size: 36px;
    }
}

@media (min-width: 1024px) {
    .block-title {
        font-size: 42px;
    }
}

/* ==========================================================================
   Block Subtitle - Responsive typography (14 -> 15 -> 16)
   ========================================================================== */

.block-subtitle {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.4;
    color: var(--color-text-dark, #292929);
    margin: 0;
}

@media (min-width: 768px) {
    .block-subtitle {
        font-size: 15px;
    }
}

@media (min-width: 1024px) {
    .block-subtitle {
        font-size: 16px;
    }
}

/* ==========================================================================
   Default Image Placeholder
   ========================================================================== */

.default-image {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F8F9FA;
    border-radius: 8px;
}

.default-image svg {
    width: 48px;
    height: 48px;
    opacity: 0.5;
}

/* ==========================================================================
   Block Card Base - Common card styles
   ========================================================================== */

.block-card {
    background: var(--color-text-white, #ffffff);
    border-radius: 8px;
    box-shadow: 0px 16px 32px -4px rgba(41, 156, 231, 0.1);
}

.block-card-elevated {
    background: var(--color-text-white, #ffffff);
    border-radius: 8px;
    box-shadow: 10px 8px 28px var(--color-shadow, rgba(0, 0, 0, 0.25));
}

/* ==========================================================================
   Container Max-Widths - Block-specific widths
   ========================================================================== */

.container-sm {
    max-width: 1247px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}

.container-md {
    max-width: 1340px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}

.container-lg {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}

/* ==========================================================================
   Animation Keyframes - Common animations
   ========================================================================== */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Animation utility classes */
.animate-fade-in-up {
    animation: fadeInUp 0.4s ease-out forwards;
}

.animate-fade-in-scale {
    animation: fadeInScale 0.3s ease-out forwards;
}

.animate-fade-in {
    animation: fadeIn 0.3s ease-out forwards;
}