/*
 * Copyright 2026 Element Creations Ltd.
 *
 * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
 * Please see LICENSE files in the repository root for full details.
 */

.thumbnail {
    /* Thumbnails are always limited to a maximum of 100px */
    max-width: 100px;
    max-height: 100px;
    /* Ensure we don't stretch the image */
    object-fit: cover;
}

.link {
    color: var(--cpd-color-text-link-external);
    text-decoration-line: none;
}

.container {
    display: inline flex;
    column-gap: var(--cpd-space-1x);
    border-inline-start: 2px solid var(--cpd-color-bg-subtle-primary);
    border-radius: 2px;
    color: var(--cpd-color-gray-900);

    .wrapImageCaption {
        display: inline-flex;
        flex-direction: row;
        flex-wrap: wrap;
        row-gap: var(--cpd-space-2x);
        flex: 1;
    }

    .image,
    .caption {
        display: inline-flex;
        flex-direction: column;
        margin-inline-start: var(--cpd-space-4x);
        min-width: 0; /* Prevent blowout */
    }

    .image {
        /* Clear default <button> styles */
        padding: 0;
        border: none;
        background: none;

        /* Consistent image size */
        flex: 0 0 100px;
    }

    .caption {
        flex: 1;
        overflow: hidden; /* cause it to wrap rather than clip */
    }

    .title,
    .description {
        display: inline-block;
        -webkit-box-orient: vertical;
        overflow: hidden;
        white-space: normal;
    }

    .title {
        display: inline-block;
        line-clamp: 2;
        -webkit-line-clamp: 2;
        margin: var(--cpd-space-1x) 0;

        > a {
            font-weight: var(--cpd-font-weight-semibold);
            text-decoration: none;
        }
    }

    .description {
        margin: var(--cpd-space-1x) 0;
        word-wrap: break-word;
        line-clamp: 3;
        -webkit-line-clamp: 3;
    }
}
