/* a gallery design's page: its picture in the hero, its drawing on paper beside the form of its sizes, related designs */

.gallery-design-hero .wa-split > :first-child {
    flex: 1 1 22rem;
}

.gallery-design-hero a {
    color: inherit;
}

.gallery-design-picture {
    inline-size: min(100%, 26rem);
    block-size: auto;
    border-radius: var(--wa-border-radius-l);
    background: var(--wa-color-surface-default);
    box-shadow: var(--wa-shadow-m);
}

.gallery-design-work {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(16rem, 2fr);
    gap: var(--wa-space-xl);
    align-items: start;
}

.gallery-design-drawing {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--wa-space-s);
}

/* the drawing is drawn for a light background, in either theme */
.gallery-design-paper {
    background: #fff;
    border: var(--wa-border-width-s) solid var(--wa-color-surface-border);
    border-radius: var(--wa-border-radius-l);
    padding: var(--wa-space-l);
    display: flex;
    align-items: center;
    justify-content: center;
    min-block-size: 20rem;
}

    .gallery-design-paper img {
        inline-size: 100%;
        max-block-size: 70vh;
        object-fit: contain;
    }

.gallery-design-inputs {
    display: grid;
    gap: var(--wa-space-s);
}

.gallery-design-input {
    display: grid;
    gap: var(--wa-space-3xs);
}

    .gallery-design-input label {
        font-size: var(--wa-font-size-s);
        font-weight: var(--wa-font-weight-semibold);
    }

    .gallery-design-input input[type=number],
    .gallery-design-input input[type=text],
    .gallery-design-input select {
        font: inherit;
        color: var(--wa-color-text-normal);
        background: var(--wa-form-control-background-color, var(--wa-color-surface-default));
        border: var(--wa-border-width-s) solid var(--wa-form-control-border-color, var(--wa-color-neutral-border-loud));
        border-radius: var(--wa-form-control-border-radius, var(--wa-border-radius-m));
        padding: var(--wa-space-2xs) var(--wa-space-s);
        min-block-size: 2.5rem;
        box-sizing: border-box;
        inline-size: 100%;
    }

    .gallery-design-input.invalid input,
    .gallery-design-input.invalid select {
        border-color: var(--wa-color-danger-border-loud, #c62828);
    }

.gallery-design-toggle input[type=checkbox] {
    inline-size: 1.25rem;
    block-size: 1.25rem;
}

.gallery-design-error {
    color: var(--wa-color-danger-on-quiet, #c62828);
    font-size: var(--wa-font-size-s);
}

.gallery-design-button {
    font: inherit;
    font-weight: var(--wa-font-weight-semibold);
    cursor: pointer;
    padding: var(--wa-space-xs) var(--wa-space-m);
    min-block-size: 2.5rem;
    border-radius: var(--wa-border-radius-m);
    border: var(--wa-border-width-s) solid var(--wa-color-brand-border-loud, var(--wa-color-brand));
    background: transparent;
    color: var(--wa-color-brand-on-quiet, var(--wa-color-text-normal));
}

    .gallery-design-button.brand {
        background: var(--wa-color-brand-fill-loud, var(--wa-color-brand));
        color: var(--wa-color-brand-on-loud, #fff);
    }

    .gallery-design-button:focus-visible {
        outline: var(--wa-focus-ring);
        outline-offset: var(--wa-focus-ring-offset);
    }

.gallery-related {
    display: flex;
    flex-direction: column;
    gap: var(--wa-space-xs);
    color: inherit;
    text-decoration: none;
    font-weight: var(--wa-font-weight-semibold);
}

    .gallery-related img {
        inline-size: 100%;
        block-size: auto;
        border-radius: var(--wa-border-radius-m);
        border: var(--wa-border-width-s) solid var(--wa-color-surface-border);
    }

    .gallery-related:hover span,
    .gallery-related:focus-visible span {
        text-decoration: underline;
    }

/* a gallery card's name: a link to its page */
.gallery-design-link {
    color: inherit;
    text-decoration: none;
}

    .gallery-design-link:hover,
    .gallery-design-link:focus-visible {
        text-decoration: underline;
    }

@media (max-width: 760px) {
    .gallery-design-work {
        grid-template-columns: minmax(0, 1fr);
    }

    .gallery-design-paper {
        min-block-size: 12rem;
        padding: var(--wa-space-s);
    }
}

.gallery-design a[slot=media] img {
    display: block;
    inline-size: 100%;
    block-size: auto;
}