/* 1. Base Layout & Spacing (Mobile-First) */
.blu-hero-section {
    background-color: #f2f9fe;
    padding: 48px 24px;
    overflow: hidden;
}

/* Arabic Font Support */
:lang(ar) .blu-hero-section {
    font-family: 'Noto Sans Arabic', sans-serif;
}

.blu-container {
    max-width: 1200px;
    margin-inline-start: auto; /* Logical Property */
    margin-inline-end: auto;   /* Logical Property */
}
.blu-hero-grid {
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: center;
}

/* Mobile Ordering */
.blu-hero-text-content {
    order: 1; 
    text-align: center;
}
.blu-hero-image-wrapper { order: 2; }
.blu-hero-button-wrapper { order: 3; }

/* 2. Typography */
.blu-hero-title {
    font-size: 32px;
    line-height: 1.2;
    font-weight: 500;
    color: #111827;
    margin-bottom: 16px;
    letter-spacing: -0.02em;
}
:lang(ar) .blu-hero-title {
    font-weight: 300; 
    letter-spacing: 0;
}

.blu-hero-subtitle {
    font-size: 18px;
    line-height: 1.5;
    color: #374151;
    margin-bottom: 0; 
    max-width: 500px;
    margin-inline-start: auto;
    margin-inline-end: auto;
}

/* 3. Button */
.blu-gradient-btn {
    position: relative; overflow: hidden; display: inline-block; padding: 12px 25px 12px 28px; 
    border-radius: 12px; border: 1px solid rgb(42, 127, 255); text-decoration: none;
    background: linear-gradient(256deg, rgb(6, 87, 208) 0%, rgb(31, 120, 255) 148%);
}
/* ARABIC FIX: Move Icon to the Right side */
:lang(ar) .blu-gradient-btn-content {
    flex-direction: row-reverse;
}
.blu-gradient-btn-content {
    position: relative; z-index: 2; display: flex; align-items: center; gap: 12px;
    color: rgb(242, 249, 254); font-weight: 500; font-size: 16px;
}
/* ARABIC FIX: Points Top-Left */
:lang(ar) .btn-icon-slider svg {
    transform: rotate(-135deg); 
}
.blu-gradient-btn::after {
    content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1;
    border-radius: 12px; background: linear-gradient(256deg, rgb(26, 107, 228) 0%, rgb(51, 140, 255) 100%);
    opacity: 0; transition: opacity 0.3s ease;
}
.blu-gradient-btn:hover::after { opacity: 1; }

.btn-icon-wrapper { width: 20px; height: 20px; overflow: hidden; }
.btn-icon-slider { display: flex; flex-direction: column; transition: transform 0.3s cubic-bezier(0.7, 0, 0.3, 1); }
.btn-icon-slider svg { 
    flex-shrink: 0; 
    width: 20px; 
    height: 20px; 
    transform: rotate(-45deg); /* Default LTR: Points Top-Right */
}

/* ARABIC FIX: Points Top-Left */
:lang(ar) .btn-icon-slider svg {
    transform: rotate(-135deg); 
}

.blu-gradient-btn:hover .btn-icon-slider { transform: translateY(-50%); }

/* 4. Image */
.blu-hero-image-wrapper { 
    width: 100%; display: flex; justify-content: center; 
}
.blu-hero-image-wrapper img { 
    width: 100%; height: auto; 
    max-width: 400px;
    display: block; 
}

/* 5. Media Queries */
@media (min-width: 768px) {
    .blu-hero-section { padding: 64px 40px; }
    .blu-hero-title { font-size: 42px; }
    .blu-hero-subtitle { font-size: 20px; }
    .blu-hero-image-wrapper img { max-width: 500px; }
}

@media (max-width: 768px) { 
    .blu-container{ padding: 0 10px;} 
    .blu-hero-section{ padding:0px !important;}
}

.content-container.site-container { padding: 0px; }

/* 6. Desktop Grid */
@media (min-width: 1024px) {
    .blu-hero-section { padding: 64px 64px; }

    .blu-hero-grid {
        display: grid;
        grid-template-columns: 45% 1fr; 
        grid-template-rows: auto 1fr; 
        grid-template-areas:
            "text image"
            "button image";
        gap: 0 60px; 
    }

    .blu-hero-text-content {
        grid-area: text;
        text-align: start; /* Automatic Left/Right based on Language */
        margin-bottom: 32px; 
        margin-top:40px;
    }
    .blu-hero-subtitle {
        margin-inline-start: 0;
        margin-inline-end: 0;
    }
    .blu-hero-button-wrapper { grid-area: button; }
    
    .blu-hero-image-wrapper {
        grid-area: image;
        align-self: stretch; 
        justify-content: flex-end; /* In RTL, this aligns to Left, which is correct (outer edge) */
    }
    
    /* Specific check to ensure image stays on outer edge in RTL */
    :lang(ar) .blu-hero-image-wrapper {
         justify-content: flex-end;
    }

    .blu-hero-image-wrapper img {
        max-width: 110%;
        height: 100%;
        width: auto;
        object-fit: contain; 
    }

    .blu-hero-title { font-size: 60px; }
}