/* ========================================
   Hero Split Layout - Diagram on Right
   ======================================== */

/* Hero Split Container */
.di-hero-split {
    display: grid;
    grid-template-columns: 45% 55%;
    gap: var(--di-space-8);
    align-items: center;
    min-height: 600px;
}

/* Left Column - Hero Content */
.di-hero-content {
    padding-right: var(--di-space-3);
}

/* Right Column - Visual/Diagram */
.di-hero-visual {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-left: var(--di-space-4);
}

/* Diagram Wrapper */
.di-hero-diagram-wrapper {
    width: 100%;
    max-width: 700px;
}

/* Diagram Label */
.di-hero-diagram-label {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--di-secondary);
    margin-bottom: var(--di-space-2);
    text-align: center;
}

/* Diagram Container with White Background */
.di-hero-diagram-container {
    background: white;
    padding: var(--di-space-5);
    border-radius: var(--di-radius-lg);
    box-shadow: var(--di-shadow-xl);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.di-hero-diagram-container:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 60px rgba(10, 22, 40, 0.2);
}

/* Diagram Image */
.di-hero-diagram {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--di-radius-md);
}

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

.di-hero-diagram-wrapper {
    animation: fadeInUp 0.8s ease-out 0.3s both;
}

/* ========== Responsive Breakpoints ========== */

/* Tablet (1024px and below) */
@media (max-width: 1024px) {
    .di-hero-split {
        grid-template-columns: 55% 45%;
        gap: var(--di-space-4);
        min-height: 550px;
    }
    
    .di-hero-content {
        padding-right: var(--di-space-2);
    }
    
    .di-hero-diagram-wrapper {
        max-width: 500px;
    }
    
    .di-hero-diagram-container {
        padding: var(--di-space-3);
    }
}

/* Small Tablet (768px and below) - Stack Layout */
@media (max-width: 768px) {
    .di-hero-split {
        grid-template-columns: 1fr;
        gap: var(--di-space-5);
        min-height: auto;
    }
    
    .di-hero-content {
        padding-right: 0;
        text-align: center;
    }
    
    .di-hero-visual {
        order: 2;
        margin-top: var(--di-space-4);
    }
    
    .di-hero-diagram-wrapper {
        max-width: 100%;
    }
    
    .di-hero-diagram-container {
        padding: var(--di-space-3);
    }
    
    /* Center CTAs on mobile */
    .di-hero-cta {
        justify-content: center;
    }
    
    /* Stack CTA buttons on mobile */
    .di-hero-cta a {
        width: 100%;
        text-align: center;
    }
}

/* Mobile (480px and below) */
@media (max-width: 480px) {
    .di-hero-split {
        gap: var(--di-space-4);
    }
    
    .di-hero-diagram-container {
        padding: var(--di-space-2);
    }
    
    .di-hero-diagram-label {
        font-size: 0.75rem;
        margin-bottom: var(--di-space-1);
    }
}

/* Prefers Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .di-hero-diagram-wrapper {
        animation: none;
    }
    
    .di-hero-diagram-container:hover {
        transform: none;
    }
}