/* Tutorials of a help topic as tiles (#88): plain CSS loaded by the template MenuAbstract.html, like helpNavigation.css.
   auto-fill decides the number of columns from the width of the content, not from the screen, so the tiles also fit
   beside the open topic menu. */

.vo-umbrella-help-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
    padding: 0;
}

.vo-umbrella-help-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 1.5rem;
    background-color: var(--bs-white);
    border: 1px solid color-mix(in srgb, var(--color-primary) 25%, transparent);
    border-radius: var(--bs-border-radius-lg);
    transition: box-shadow 0.15s, border-color 0.15s;
}

.vo-umbrella-help-tile:hover,
.vo-umbrella-help-tile:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0.25rem 1rem color-mix(in srgb, var(--color-primary) 20%, transparent);
}

/* the icon is a file of the page; the mask paints it in the colour of the site */
.vo-umbrella-help-tile-icon {
    display: block;
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: 0.5rem;
    background-color: var(--color-primary);
    -webkit-mask: var(--vo-umbrella-help-tile-icon) center / contain no-repeat;
    mask: var(--vo-umbrella-help-tile-icon) center / contain no-repeat;
}

/* the title keeps the link colour of the site; the line under links is left out with the class "without-style" of
   3-Base/_links.scss, the whole tile is the link */
.vo-umbrella-help-tile-title {
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.3;
}

.vo-umbrella-help-tile-text {
    margin: 0;
    font-size: 0.95rem;
    color: var(--bs-secondary-color);
}

/* topic of a search hit (ResultRow.html): small badge above the title, in the colour of the site */
.vo-umbrella-help-tile-topic {
    position: relative;
    z-index: 2;
    align-self: flex-start;
    color: var(--color-primary);
    background-color: var(--color-primary-opacity_10);
    font-weight: 600;
}

.vo-umbrella-help-tile-topic:hover,
.vo-umbrella-help-tile-topic:focus-visible {
    color: var(--color-primary-textColor);
    background-color: var(--color-primary);
}

/* search word marked in the title of a hit (span.hit from ke_search), like in the teaser (helpSearch.css) */
.vo-umbrella-search-result .vo-umbrella-help-tile-title .hit {
    color: inherit;
    font-weight: inherit;
}