/**
 * 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;
}

.top-subjects .link-list {
    margin-top: 1rem;
}

@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 .link-list {
    order: var(--order, 2);
}