/* “Text & image box” Elementor widget. Colors overridable from the widget (Style tab).
   Default: for a dark background (white); .jits-tib--light: for a light background. */

.jits-tib {
    --jits-tib-image-width: 56%;
    --jits-tib-min-height: 330px;
    --jits-tib-border: rgba(255, 255, 255, 0.85);
    --jits-tib-title: #ffffff;
    --jits-tib-text: #ffffff;

    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--jits-tib-image-width);
    grid-template-areas: "content media";
    min-height: var(--jits-tib-min-height);
    overflow: hidden;
    border: 1px solid var(--jits-tib-border);
    border-radius: 5px;
}

/* For a light background: dark blue text, light border (custom colors still win). */
.jits-tib--light {
    --jits-tib-border: color-mix(in srgb, var(--footer-bg, #0e1b56) 20%, transparent);
    --jits-tib-title: var(--footer-bg, #0e1b56);
    --jits-tib-text: var(--footer-bg, #0e1b56);
}

.jits-tib--image-left {
    grid-template-columns: var(--jits-tib-image-width) minmax(0, 1fr);
    grid-template-areas: "media content";
}

.jits-tib__content {
    grid-area: content;
    align-self: center;
    padding: 2.75rem 3.25rem 2.75rem 2.75rem;
}

.jits-tib--image-left .jits-tib__content {
    padding: 2.75rem 2.75rem 2.75rem 3.25rem;
}

.jits-tib__title {
    margin: 0 0 1.125rem;
    color: var(--jits-tib-title);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.15;
}

.jits-tib__text {
    color: var(--jits-tib-text);
    font-size: 1rem;
    line-height: 1.25;

    p {
        margin: 0 0 1em;
    }

    > :last-child {
        margin-bottom: 0;
    }

    a {
        color: inherit;
        text-decoration: underline;
    }
}

/* The image fills its side of the box, whatever the text height. */
.jits-tib__media {
    position: relative;
    grid-area: media;
    min-height: 15rem;
}

.jits-tib__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}

/* Mobile: image on top, text below. */
@media (max-width: 767px) {
    .jits-tib,
    .jits-tib--image-left {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "media" "content";
        min-height: 0;
    }

    .jits-tib__media {
        min-height: 0;
        aspect-ratio: 16 / 10;
    }

    .jits-tib__content,
    .jits-tib--image-left .jits-tib__content {
        padding: 1.75rem 1.5rem 2rem;
    }

    .jits-tib__title {
        font-size: 1.375rem;
    }
}