/* ==========================================================================
   About Us Overlapping Images Styling
   Supports both LTR (English) and RTL (Persian) natively using logical properties.
   ========================================================================== */

.bkhc-about-section {
	background:
		var(--bkhc-landing-wash-alt),
		var(--bkhc-landing-bg-alt);
	box-sizing: border-box;
	margin-left: 0 !important;
	margin-right: 0 !important;
	max-width: 100% !important;
	overflow-x: hidden;
	padding-bottom: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	width: 100% !important;
}

.bkhc-about-section > .bkhc-contact-section.alignfull {
	margin-top: 0 !important;
}

.bkhc-about-section > .wp-block-columns {
	box-sizing: border-box;
	margin-left: auto !important;
	margin-right: auto !important;
	max-width: var(--wp--style--global--content-size, 1200px);
	padding-left: 20px;
	padding-right: 20px;
	width: 100%;
}

/* Overlapping Gallery Container */
.wp-block-group.beauty-overlap-container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    justify-content: center !important;
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding: 20px 0;
    box-sizing: border-box;
}

/* Individual Image Wrappers & Interactive Effects */
.beauty-overlap-container .beauty-overlap-item-1,
.beauty-overlap-container .beauty-overlap-item-2,
.beauty-overlap-container .beauty-overlap-item-3 {
    position: relative;
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-sizing: border-box;
}

/* Subtle premium lift animations on hover */
.beauty-overlap-container .beauty-overlap-item-1:hover,
.beauty-overlap-container .beauty-overlap-item-2:hover,
.beauty-overlap-container .beauty-overlap-item-3:hover {
    transform: translateY(-10px) scale(1.03);
    z-index: 10 !important;
}

/* 1. First Portrait Image (Left in LTR / Right in RTL) */
.beauty-overlap-container .beauty-overlap-item-1 {
    flex: 1 1 33% !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-inline-end: -60px !important; /* Overlap into the center cover */
    margin-inline-start: 0 !important;
    z-index: 2;
}

.beauty-overlap-container .beauty-overlap-item-1 img,
.beauty-overlap-container .beauty-overlap-item-1 figure {
    width: 100% !important;
    height: auto !important;
    border-radius: 20px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    display: block;
}

/* 2. Elevated Middle Cover (Center) */
.beauty-overlap-container .beauty-overlap-item-2 {
    flex: 0 0 200px !important;
    width: 200px !important;
    height: 200px !important;
    min-height: 200px !important;
    margin-top: 50px !important;
    z-index: 3;
    border: 8px solid #ffffff !important;
    box-shadow: 0 15px 35px rgba(29, 186, 158, 0.15), 0 5px 15px rgba(0, 0, 0, 0.08) !important;
    border-radius: 24px !important;
    overflow: hidden;
    position: relative;
}

.beauty-overlap-container .beauty-overlap-item-2 img,
.beauty-overlap-container .beauty-overlap-item-2 figure {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    margin: 0 !important;
}

/* 3. Third Portrait Image (Right in LTR / Left in RTL) */
.beauty-overlap-container .beauty-overlap-item-3 {
    flex: 1 1 33% !important;
    margin-top: 110px !important;
    margin-inline-start: -60px !important; /* Overlap from the center cover */
    margin-inline-end: 0 !important;
    z-index: 1;
}

.beauty-overlap-container .beauty-overlap-item-3 img,
.beauty-overlap-container .beauty-overlap-item-3 figure {
    width: 100% !important;
    height: auto !important;
    border-radius: 20px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    display: block;
}

/* Adjust standard figure layouts */
.beauty-overlap-container figure.wp-block-image {
    margin: 0 !important;
}

/* Responsive adjustments for tablet & mobile views */
@media (max-width: 991px) {
    .beauty-overlap-container .beauty-overlap-item-2 {
        flex: 0 0 160px !important;
        width: 160px !important;
        height: 160px !important;
        min-height: 160px !important;
        margin-top: 40px !important;
    }
    
    .beauty-overlap-container .beauty-overlap-item-3 {
        margin-top: 90px !important;
    }
}

@media (max-width: 767px) {
    .bkhc-about-section > .wp-block-columns {
        padding-left: 16px;
        padding-right: 16px;
    }

    .wp-block-group.beauty-overlap-container {
        flex-direction: column !important;
        align-items: center !important;
        gap: 30px !important;
        padding: 10px 0 !important;
    }
    
    .beauty-overlap-container .beauty-overlap-item-1,
    .beauty-overlap-container .beauty-overlap-item-2,
    .beauty-overlap-container .beauty-overlap-item-3 {
        flex: 1 1 auto !important;
        width: 100% !important;
        max-width: 300px !important;
        margin-inline-start: 0 !important;
        margin-inline-end: 0 !important;
        margin-top: 0 !important;
        height: auto !important;
        min-height: auto !important;
    }

    .beauty-overlap-container .beauty-overlap-item-2 {
        height: 200px !important; /* Force visual consistency on mobile */
        order: 1;
        border-width: 6px !important;
    }
    
    .beauty-overlap-container .beauty-overlap-item-1 {
        order: 2;
    }
    
    .beauty-overlap-container .beauty-overlap-item-3 {
        order: 3;
    }
}