/* Image Teaser Component Styles */

/* Clean, modern image teaser implementation with proper alignment */

.image-teaser {
    display: block;
    background-color: #F5F5F5;
    overflow: hidden;
    min-height: var(--image-teaser-height, 400px);
    box-sizing: border-box;
    min-height: 500px;
}

/* Images */

/* Image wrapper for padding */
.image-teaser__img-wrapper {
    padding: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    box-sizing: border-box;
}

.image-teaser img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: contain;
    background-color: #dddddd;
    border-radius: 8px;
    padding: 1rem;
    box-shadow: 0 6px 24px 0 rgba(40, 40, 40, 0.20), 0 2px 8px 0 rgba(255, 255, 255, 0.7);
    border: 2px solid #d9d9d9;
}

/* Image description/copyright below image */
.image-teaser__img-description {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: #888;
    text-align: center;
    font-style: italic;
    line-height: 1.3;
    word-break: break-word;
}

/* Content area */
.image-teaser>div {
    padding: 1.875rem;
    text-align: left;
    /* Default text alignment */
}

.image-teaser>div h2,
.image-teaser>div p {
    text-align: inherit;
    /* Inherit from parent div */
}

/* Desktop layout - side by side using CSS Grid */
@media screen and (min-width: 56.25rem) {
    .image-teaser {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr;
        align-items: stretch;
        /* Fixed height for consistency */
        min-height: 600px;
        /* Maximum height constraint */
        gap: 0;
    }


    .image-teaser__img-wrapper {
        grid-row: 1;
        grid-column: 1;
        height: 100%;
        /* Padding is now on the wrapper */
    }

    .image-teaser>div {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 2rem 6rem;
        grid-row: 1;
        grid-column: 2;
        overflow-y: auto;
        /* Allow scrolling if content is too tall */
        min-height: 600px;
        /* Ensure consistent minimum height */
        height: 100%;
        /* Force full height of grid cell */
    }
}

@media screen and (max-width: 56.24rem) {
    .image-teaser {
        min-height: var(--image-teaser-height-mobile, 260px);
    }
}

/* Keep fixed height even with tall content - content will scroll instead */
@media screen and (min-width: 56.25rem) {
    .image-teaser[data-tall-content] {
        /* height: 600px !important; */
        /* Maintain fixed height */
    }

    .image-teaser[data-tall-content]>img {
        height: 100% !important;
        /* Keep image height consistent */
    }
}

/* Image positioning variants */
@media screen and (min-width: 56.25rem) {

    /* Image on the right, text on the left */
    .image-teaser.image-teaser--image-right>.image-teaser__img-wrapper {
        grid-column: 2;
    }

    .image-teaser.image-teaser--image-right>div {
        grid-column: 1;
    }

    /* Image on the left, text on the right (default) */
    .image-teaser.image-teaser--image-left>.image-teaser__img-wrapper {
        grid-column: 1;
    }

    .image-teaser.image-teaser--image-left>div {
        grid-column: 2;
    }
}

/* Text alignment - clean and simple */
.image-teaser.image-teaser--text-left>div,
.image-teaser.image-teaser--text-left>div h2,
.image-teaser.image-teaser--text-left>div p {
    text-align: left !important;
}

.image-teaser.image-teaser--text-right>div,
.image-teaser.image-teaser--text-right>div h2,
.image-teaser.image-teaser--text-right>div p {
    text-align: right !important;
}

.image-teaser.image-teaser--text-center>div,
.image-teaser.image-teaser--text-center>div h2,
.image-teaser.image-teaser--text-center>div p {
    text-align: center !important;
}

/* Content styling */
.image-teaser h2 {
    margin-top: 0;
    margin-bottom: 1rem;
    font-weight: bold;
    font-family: 'RidleyGrotesk-Regular';
}

.image-teaser p {
    line-height: 1.6;
    margin-bottom: 1rem;
}

.image-teaser p:last-child {
    margin-bottom: 0;
}

.image-teaser .button {
    margin-top: 1.25rem;
    display: inline-block;
}

/* Responsive typography */
@media screen and (min-width: 43rem) {
    .image-teaser p {
        font-size: 1rem;
    }
}

@media screen and (min-width: 62rem) {
    .image-teaser p {
        font-size: 1.1rem;
    }
}

@media screen and (min-width: 75rem) {
    .image-teaser p {
        font-size: 1.2rem;
    }
}

.image-teaser.image-teaser--transparent img {
    box-shadow: none;
    background-color: transparent;
    border: none;
}