/* Client Stories Detail — critical layout styles for editor + frontend.
   Colour/type rules live in the shared SCSS; structural layout rules that
   must be guaranteed inside the block editor are duplicated here. */

.technical-project-detail-items-reversed-pattern {
    padding-top: 48px;
    padding-bottom: 10px;
}

/* Two-column flex row */
.technical-project-detail-item-reversed > .wp-block-group__inner-container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
}

/* Content column — 60%, left */
.technical-project-detail-item-reversed__content-column {
    flex: 0 0 60%;
    max-width: 60%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-right: 64px;
    box-sizing: border-box;
}

/* Image column — 40%, right */
.technical-project-detail-item-reversed__image-column {
    flex: 0 0 40%;
    max-width: 40%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    box-sizing: border-box;
}

/* Image figure */
.technical-project-detail-item-reversed__image-column figure {
    margin: 0;
    height: 380px;
    border-radius: 75px 75px 30px 30px;
    overflow: hidden;
    background: #e5e7eb;
}

.technical-project-detail-item-reversed__image-column figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Heading colour */
.technical-project-detail-item-reversed__content-column .technical-project-detail-item__heading {
    color: #005C52;
    font-weight: 500;
    margin-bottom: 17px;
}

/* Override margin-bottom for this block only — shared SCSS sets 40px */
.technical-project-detail-items-reversed-pattern .technical-project-detail-item-reversed {
    margin-bottom: 64px;
}

@media (max-width: 767px) {
    .technical-project-detail-items-reversed-pattern .technical-project-detail-item-reversed {
        margin-bottom: 45px;
    }
}

/* Stack on mobile */
@media (max-width: 767px) {
    .technical-project-detail-item-reversed__content-column,
    .technical-project-detail-item-reversed__image-column {
        flex: 0 0 100%;
        max-width: 100%;
        padding-right: 0;
    }
}