/* The industries' pages (CAD › Industries and each trade's landing page) */
.industry-grid {
    --min-column-size: 19rem;
}

.industry-card {
    align-items: center;
}

.site-header.industry-hero {
    height: auto;
    min-block-size: 320px;
}

.industry-back {
    display: inline-flex;
    align-items: center;
    gap: var(--wa-space-2xs);
    color: inherit;
    font-size: var(--wa-font-size-s);
    text-decoration: none;
    opacity: 0.85;
}

    .industry-back:hover {
        opacity: 1;
        text-decoration: underline;
    }

.industry-hero-icon {
    flex: 0 0 auto;
    inline-size: 64px;
    block-size: 64px;
    padding: var(--wa-space-xs);
    border-radius: var(--wa-border-radius-l);
    background: #fff;
}

.industry-hero h1 {
    margin: 0;
}

/* the library's designs: a picture of each, as the library draws it */
.design-grid {
    --min-column-size: 14rem;
}

.design-card {
    display: flex;
    flex-direction: column;
    border: var(--wa-border-width-s) solid var(--wa-color-surface-border);
    border-radius: var(--wa-border-radius-m);
    background: var(--wa-color-surface-raised);
    color: var(--wa-color-text-normal);
    overflow: hidden;
    transition: border-color 150ms ease, background-color 150ms ease;
}

    .design-card:hover,
    .design-card:focus-within {
        border-color: var(--wa-color-brand-border-normal);
        background: var(--wa-color-surface-lowered);
    }

/* the card's picture and text: opens the design in the viewer */
.design-open {
    display: flex;
    flex: 1;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
}

/* View in 3D, under a design that makes something in 3D */
.design-3d {
    display: inline-flex;
    align-items: center;
    gap: var(--wa-space-2xs);
    align-self: flex-start;
    margin: 0 var(--wa-space-m) var(--wa-space-s);
    padding: var(--wa-space-3xs) var(--wa-space-s);
    border: var(--wa-border-width-s) solid var(--wa-color-brand-border-normal);
    border-radius: var(--wa-border-radius-pill);
    color: var(--wa-color-brand);
    font-size: var(--wa-font-size-s);
    text-decoration: none;
    white-space: nowrap;
}

    .design-3d:hover,
    .design-3d:focus-visible {
        background: var(--wa-color-brand-fill-quiet);
    }

.design-picture {
    display: flex;
    align-items: center;
    justify-content: center;
    block-size: 11rem;
    padding: var(--wa-space-s);
    background: #fff;
}

    .design-picture img {
        display: block;
        inline-size: 100%;
        block-size: 100%;
        object-fit: contain;
    }

.design-text {
    padding: var(--wa-space-s) var(--wa-space-m);
}

.industry-columns {
    --min-column-size: 22rem;
    align-items: start;
}

.format-chip {
    display: inline-block;
    padding: var(--wa-space-3xs) var(--wa-space-s);
    border: var(--wa-border-width-s) solid var(--wa-color-surface-border);
    border-radius: var(--wa-border-radius-pill);
    color: var(--wa-color-text-normal);
    font-size: var(--wa-font-size-s);
    text-decoration: none;
    white-space: nowrap;
}

    .format-chip:hover {
        border-color: var(--wa-color-brand-border-normal);
        color: var(--wa-color-brand);
    }

.format-chip-own {
    border-color: var(--wa-color-brand-border-normal);
    background: var(--wa-color-brand-fill-quiet);
}

.industry-list {
    margin: 0;
    padding-inline-start: 1.25em;
}

    .industry-list li + li {
        margin-block-start: var(--wa-space-s);
    }

    .industry-list .format-chip {
        margin-inline-start: var(--wa-space-2xs);
        padding-block: 0;
        font-size: var(--wa-font-size-xs);
    }

/* a design the site couldn't draw: its card without a picture */
.design-picture-none {
    display: none;
}

/* phones: the heroes' long lines in a smaller size, the hero as tall as its text */
@media (max-width: 600px) {
    .site-header.industry-hero {
        min-block-size: 0;
        padding: var(--wa-space-2xl) var(--wa-space-l);
    }

        .industry-hero h2 {
            font-size: var(--wa-font-size-l);
        }

    .site-content:has(.industry-grid),
    .site-content:has(.design-grid) {
        padding: var(--wa-space-xl) var(--wa-space-l);
    }
}