/**
 * msp-index.css — Styles de l'index des types de contenu ([msp_index]).
 *
 * Base neutre pensée pour s'intégrer à ton architecture CSS en couches.
 * Surcharge les variables au niveau .msp-index si besoin.
 *
 * @version 1.0.0
 */

.msp-index {
	--msp-index-gap: 2rem;
	--msp-index-list-gap: 0.35rem;
	--msp-index-title-color: #1a1a1a;
	--msp-index-link-color: #222;
	--msp-index-link-hover: #333;
	--msp-index-empty-color: #777;
    --msp-index-list-column: repeat(3, 1fr);
    --msp-index-column-gap: 2rem;

	display: grid;
	gap: var(--msp-index-gap);
}

.msp-index__group {
	margin: 0;
}

.msp-index__group-title {
	margin: 0 0 0.75rem;
	color: var(--msp-index-title-color);
}

.msp-index__group-link {
	color: inherit;
	text-decoration: none;
}

.msp-index__group-link:hover,
.msp-index__group-link:focus-visible {
	text-decoration: underline;
}

.msp-index__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	column-gap: var(--msp-index-column-gap);
    grid-template-columns: var(--msp-index-list-column);
}

.msp-index__link {
	color: var(--msp-index-link-color);
	text-decoration: none;
}

.msp-index__link:hover,
.msp-index__link:focus-visible {
	color: var(--msp-index-link-hover);
	text-decoration: underline!important;
	font-weight:500 ;
}

.msp-index__empty {
	margin: 0;
	color: var(--msp-index-empty-color);
	font-style: italic;
}

h2.msp-index__group-title{
	text-decoration: underline;
}

@media(max-width: 1300px){
    .msp-index__list {
        --msp-index-column-gap: 1.5rem;
        --msp-index-list-column: repeat(2, 1fr);
    }
}

@media(max-width: 650px){
    .msp-index__list {
        --msp-index-list-column:  minmax(0, 1fr);
    }
}