/*
Theme Name: Lab Zero Child Theme - About us
Description: Specific styles for the About us page.
*/

/* OVER ONS PAGINA - Ensure the nested row layout is the anchor point */
/* 1. Turn the Kadence column wrapper into a Grid */
.perfect-overlap .kt-inside-inner-col {
    display: grid ;
    align-items: center ; /* THIS is the magic that perfectly vertically centers both images */
}

/* 2. Force BOTH images to occupy the exact same Grid space */
.perfect-overlap .kt-inside-inner-col > .wp-block-kadence-image {
    grid-column: 1 / -1 ;
    grid-row: 1 / -1 ;
    margin: 0 ; /* Kills any default Kadence spacing */
}

/* 3. The Portrait Image (The Base) */
.perfect-overlap .kt-inside-inner-col > .wp-block-kadence-image:nth-child(1) {
    width: 80%; /* Leaves 20% room on the right */
    justify-self: start ; /* Locks it to the left */
    z-index: 1;
}

/* 4. The Square Image (The Overlap) */
.perfect-overlap .kt-inside-inner-col > .wp-block-kadence-image:nth-child(2) {
    width: 65%; 
    justify-self: end; /* Pushes it to the right edge of the column */
    
    /* This pushes it OUT of bounds to the right, exactly overlapping the edge */
    transform: translateX(10%); 
    z-index: 10;
}

/* 5. Force the Square shape and styling */
.perfect-overlap .kt-inside-inner-col > .wp-block-kadence-image:nth-child(2) img {
    object-fit: cover;
    box-shadow: 0 15px 30px rgba(0,0,0,0.15);
}

/* 6. Mobile adjustments */
@media (max-width: 842px) {
    .perfect-overlap .kt-inside-inner-col > .wp-block-kadence-image:nth-child(2) {
        width: 65%;
		justify-self: center;
		transform: translateX(25%);
    }
}