/**
 * This element is using CSS from the following:
 *
 * - opengemeenten_site/Components/Cards/OpenGemeentenSite-Cards.css
 * - opengemeenten_site/Components/Cards/OpenGemeentenSite-Card.css
 * - opengemeenten_linkhandling/Components/Typolink/OpenGemeentenLinkHandling-Typolink.css
 *
 * Variables can be set there globally or override them here!
 */
.top-subjects {
    --font-size: var(--root-font-size); /* Reset, use REM */
}

.top-subjects__header {
    /*--color-text: var(--root-color-text);*/
    /*--font-family: initial;*/
    /*--font-size: initial;*/
    /*--font-style: initial;*/
    /*--font-weight: initial;*/
    /*--line-height: initial;*/
}

@media (min-width: 30em) {
    .top-subjects__header {
        --line-height: 3rem; /* Keep the same height as a button on other card lists */
    }
}

/**
 * Cards
 */
.top-subjects .cards {
    --column-gap: 3rem;
    --row-gap: 3rem;
}

.top-subjects .cards[data-maximum-columns="2"] {
    --column-gap: 3rem;
}

.top-subjects .cards[data-maximum-columns="3"] {
    --column-gap: 3rem;
}

@media (min-width: 48rem) {
    .top-subjects .cards[data-maximum-columns="2"] {
        --column-gap: 4rem;
        --row-gap: 4rem;
    }

    .top-subjects .cards[data-maximum-columns="3"] {
        --column-gap: 4rem;
        --row-gap: 4rem;
    }
}

/**
 * Card
 */
.top-subjects .card {
    --box-shadow: none;
    --color-background: transparent;
    --color-border-top: transparent;
    --font-size: var(--root-font-size); /* Reset, use REM */
    --width-border-top: 0;
}

.top-subjects .card__icon {
    --color-icon: var(--root-color--primary);
}

.top-subjects .card__title-link {
    --text-decoration-color: var(--root-heading-3-color);
}

.top-subjects .card__title-link:active,
.top-subjects .card__title-link:focus,
.top-subjects .card__title-link:hover {
    --text-decoration-color: var(--root-heading-3-color-link);
}

.top-subjects .card__title-link:active .card__title,
.top-subjects .card__title-link:focus .card__title,
.top-subjects .card__title-link:hover .card__title {
    --color: var(--root-heading-3-color-link);
}

.top-subjects .card__title-link.link .icon {
    --fill: var(--root-color--secondary);
}

.top-subjects .card__title {
    /*--color: var(--root-heading-3-color);*/
    /*--font-family: var(--root-heading-3-family);*/
    /*--font-size: var(--root-heading-3-size);*/
    /*--font-style: var(--root-heading-3-style);*/
    /*--font-weight: var(--root-heading-3-weight);*/
    /*--line-height: var(--root-heading-3-line-height);*/
    /*--order: 1;*/
}


.top-subjects__header {
    margin-top: 0;
}

/**
 * Cards
 */
.top-subjects .top-subjects__header + .cards {
    margin-top: 2rem;
}

/**
 * Card
 */
.top-subjects .card--button {
    border-radius: 0;
}

.top-subjects .card__body,
.top-subjects .card__footer {
    padding: 0;
}

.top-subjects .card__body {
    padding-top: 1rem;
}

.top-subjects .card__icon {
    width: 4rem;
    pointer-events: none;
}

.top-subjects .card__visual {
    aspect-ratio: 16 / 9;
    width: 61%;
}

.top-subjects.section:not(.section--color) .card:not(.card--color).card--image-none .card__body {
    padding-top: 0;
}

.top-subjects .card__button {
    margin-top: 0;
}

.top-subjects .card__title-link {
    align-items: center;
    display: flex;
    padding: 0 0.5rem;
}

.top-subjects .card__title {
    margin-top: 0;
}

.top-subjects .card__title-link .card__title {
    flex-grow: 1;
    order: 0;
}

@media (min-width: 62rem) {
    .top-subjects .card__visual {
        width: 66%;
    }
}

.top-subjects {
    font-size: var(--font-size, 1rem);
}

/**
 * Card
 */
.top-subjects .card__icon {
    fill: var(--color-icon, black);
}

.top-subjects .card__title {
    order: var(--order, 1);
}

.top-subjects__links {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
}

.top-subjects__links {
    order: var(--order, 2);
}

.top-subjects__link {
    --color-border: var(--root-color-border);
    --width-border: var(--root-border-width);
    --font-family: inherit;
    --font-size: 1em;
    --font-style: normal;
    --font-weight: var(--root-font-weight--bold);
    --line-height: inherit;
}

.top-subjects__link a {
    --color-background: transparent;
    --color: var(--root-color-text);
}

.top-subjects__link a:active,
.top-subjects__link a:focus,
.top-subjects__link a:hover {
    --color-background: var(--root-color-interaction);
    --color: var(--root-color--primary);
}

.top-subjects__link-icon {
    --color-icon: var(--root-color--secondary);
}

.top-subjects__link {
    border-style: solid;
    list-style: none;
}

.top-subjects__link a {
    align-items: center;
    display: flex;
    padding: 1rem 0.5rem;
    text-decoration: none;
}

.top-subjects__link-title {
    flex-grow: 1;
}

.top-subjects__link-icon {
    flex-shrink: 0;
    height: 1em;
    width: 1em;
}

.top-subjects__link {
    border-color: var(--color-border, hsla(0, 0%, 0%, 0.2));
    border-width: 0 0 var(--width-border, 0.063rem);
    font-family: var(--font-family, inherit);
    font-size: var(--font-size, 1em);
    font-style: var(--font-style, normal);
    font-weight: var(--font-weight, bold);
    line-height: var(--line-height, inherit);
}

.top-subjects__link:first-child {
    border-top-width: var(--width-border, 0.063rem);
}

.top-subjects__link a {
    background-color: var(--color-background, transparent);
    color: var(--color, #022979);
}

.top-subjects__link-icon {
    fill: var(--color-icon, #456bd1);
}