/* 1. Section & Container */
.blu-about-hero-section {
    background-color: #ffffff;
    padding-top: 32px;    /* py-8 */
    padding-bottom: 32px; /* py-8 */
}

.blu-about-hero-container {
    margin-left: 95px;
    margin-right: 95px;
}

/* 2. Mobile Layout (Flex Column) */
.blu-about-hero-grid {
    display: flex;
    flex-direction: column;
    gap: 24px; /* space-y-6 */
    text-align: left; /* Default LTR alignment */
}

/* ARABIC OVERRIDE: Right Align Text */
:lang(ar) .blu-about-hero-grid {
    text-align: right;
}

/* 
   MOBILE MAGIC: 
   display: contents removes the wrapper from the visual tree.
   This allows the children (Title and Desc) to be direct flex items
   alongside the Image, so we can reorder them individually.
*/
.blu-about-hero-text-wrapper {
    display: contents; 
}

/* Mobile Ordering */
.blu-about-hero-title { order: 1; }
.blu-about-hero-image { order: 2; }
.blu-about-hero-desc  { order: 3; }

/* 3. Image Styling */
.blu-about-hero-image {
    width: 100%;
}
.blu-about-hero-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 20px; /* rounded-[20px] */
    display: block;
}

/* 4. Typography */
.blu-about-hero-title {
    font-size: 30px; /* text-3xl */
    font-weight: 500;
    color: #111827; /* text-gray-900 */
    line-height: 1.2;
    margin: 0;
}

/* ARABIC OVERRIDE: Remove negative letter spacing for Arabic script */
:lang(ar) .blu-about-hero-title {
font-weight:100 !important;
      font-family: Inter, "Inter Fallback", system-ui, -apple-system, sans-serif !important;

}
h1.blu-about-hero-title
 {
    margin: 0px !important;
   font-family: Inter, "Inter Fallback", system-ui, -apple-system, sans-serif;
   color: #101828;

}
.blu-about-hero-desc {
    font-size: 16px; /* text-base */
    color: #374151; /* text-gray-700 */
    line-height: 1.4;
}

:lang(ar) .blu-about-hero-desc {
    font-weight:300;
}

/* Remove default WP paragraph margins to keep spacing strict */
.blu-about-hero-desc p:first-child { margin-top: 0; }
.blu-about-hero-desc p:last-child { margin-bottom: 0; }

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

@media (min-width: 640px) { /* sm */
    .blu-about-hero-title { font-size: 36px; }
    .blu-about-hero-desc { font-size: 18px; }
}

@media (min-width: 768px) { /* md (Desktop View) */
    .blu-about-hero-section {
        padding-top: 64px;    
        padding-bottom: 64px; 
    }

    .blu-about-hero-container {
        padding-left: 64px;   
        padding-right: 64px;  
    }

    /* DESKTOP LAYOUT: 2-Column Grid */
    .blu-about-hero-grid {
        display: grid;
        grid-template-columns: 1fr 1fr; /* Equal columns */
        align-items: center; /* Vertically Center */
        gap: 48px; /* lg:gap-12 */
        /* Note: CSS Grid handles RTL automatically. 
           Col 1 (Text) moves to Right, Col 2 (Image) moves to Left automatically */
    }

    /* 
       Reset the text wrapper to be a real block again.
       This groups the Title and Desc tightly together.
    */
    .blu-about-hero-text-wrapper {
        display: flex;
        flex-direction: column;
        order: unset; /* Reset order */
        /* Gap logic handles spacing here, inherited from grid gap or add specific if needed */
        gap: 24px; 
    }

    /* Reset individual orders */
    .blu-about-hero-title, 
    .blu-about-hero-image, 
    .blu-about-hero-desc { 
        order: unset; 
    }

    .blu-about-hero-title {
        font-size: 48px; /* lg:text-5xl */
    }
    
    .blu-about-hero-desc {
        font-size: 20px; /* lg:text-xl */
        font-weight: 300;
    }

    .blu-about-hero-image {
        min-height: 325px;
        display: flex;
        align-items: center;
        /* Ensure image aligns correctly in RTL/LTR context */
        justify-content: center; 
    }
}

@media (max-width: 768px) {
    .blu-about-hero-container {
        margin-left: 16px;
        margin-right: 16px;
    }
}