/*
 * GD Image widget
 *
 * Custom property you can override from the theme:
 *   --gd-image-radius   corner radius when rounded (default 1.25rem / 20px)
 */

.gd-image {
    display: block;
    position: relative;
    line-height: 0;   /* removes gap below inline img */
}

.gd-image a {
    display: block;
}

.gd-image__img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

.gd-image--rounded {
    border-radius: var(--gd-image-radius, 1.25rem);
}

.gd-image--rounded .gd-image__img {
    border-radius: var(--gd-image-radius, 1.25rem);
}

.gd-image--rounded .gd-image__shape {
    border-radius: var(--gd-image-radius, 1.25rem);
}

.gd-image--fit-cover .gd-image__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gd-image--fit-contain {
    background-color: var(--gd-dark-blueish-grey, #3B4F5B);
}

.gd-image--fit-contain .gd-image__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.gd-image__caption {
    line-height: 1.4;
    font-size: 0.875rem;
    color: var(--gd-dark-blueish-grey, #3B4F5B);
    margin-top: 0.5rem;
    padding: 0 0.25rem;
    text-align: center;
}

/* Shape overlay */

.gd-image__shape {
    position: absolute;
    line-height: 0;
    pointer-events: none;
}

.gd-image__shape svg {
    display: block;
    width: 100%;
    height: auto;
}

/* Bottom: full width, centered, positioned at bottom */
.gd-image__shape--bottom {
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 180px;
}

/* Corner: Top Left (flip vertically so wave points down into image) */
.gd-image__shape--corner-top-left {
    top: -1px;
    left: -1px;
    width: 58px;
    transform: scaleY(-1);
}

/* Corner: Top Right (flip both so wave points down and is mirrored) */
.gd-image__shape--corner-top-right {
    top: -1px;
    right: -1px;
    width: 58px;
    transform: scaleX(-1) scaleY(-1);
}

/* Corner: Bottom Left (no flip, wave points up naturally) */
.gd-image__shape--corner-bottom-left {
    bottom: -1px;
    left: -1px;
    width: 58px;
}

/* Corner: Bottom Right (flip horizontally only) */
.gd-image__shape--corner-bottom-right {
    bottom: -1px;
    right: -1px;
    width: 58px;
    transform: scaleX(-1);
}

.gd-image__shape--color-white { color: var(--gd-white, #ffffff); }
.gd-image__shape--color-grey  { color: var(--gd-grey, #e5e7eb); }
.gd-image__shape--color-blue  { color: var(--gd-blue, #6EC1E4); }
.gd-image__shape--color-dark  { color: var(--gd-dark-blueish-grey, #3B4F5B); }