/* layout_as_clubs — annuaire (clubs et catégories) en cartes */

.svi-directory-grid {
    display:               grid;
    grid-template-columns: 1fr;
    gap:                   2rem;
    margin:                2rem 0;
}

@media (min-width: 576px) {
    .svi-directory-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 992px) {
    .svi-directory-grid { grid-template-columns: repeat(4, 1fr); }
}

/* --- Carte --- */
.svi-directory-card {
    display:           flex;
    flex-direction:    column;
    background-color:  #FFF;
    border:            1px solid #D9E1EB;
    border-radius:     4px;
    box-shadow:         0 1px 3px rgba(22, 35, 59, .10);
    overflow:          hidden;
    transition:        box-shadow .15s, transform .15s;
}

.svi-directory-card:hover {
    box-shadow: 0 4px 12px rgba(22, 35, 59, .12);
    transform:  translateY(-2px);
}

.svi-directory-card-media {
    display:          block;
    aspect-ratio:      16 / 10;
    overflow:          hidden;
    background-color: #D9E9F8;
}

.svi-directory-card-media img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
    transition: transform .3s ease;
}

/* icones sport (petits pictogrammes) : ne pas les etirer/rogner comme une photo */
.svi-directory-card-media img[src*="/icon/"],
.svi-directory-card-media img[src$=".png"],
.svi-directory-card-media img[src$=".svg"] {
    object-fit: contain;
    padding:    1.2rem;
    background-color: #F2F5F9;
}

.svi-directory-card:hover .svi-directory-card-media img {
    transform: scale(1.05);
}

.svi-directory-card-body {
    display:        flex;
    flex-direction: column;
    flex:           1;
    padding:        1.4rem;
}

.svi-directory-card-body h2 {
    margin:         0 0 .6rem;
    border-bottom:  none;
    padding-bottom: 0;
    font-size:      1.6rem;
    line-height:    1.3;
}

.svi-directory-card-body h2 a {
    color:           #16233B;
    text-decoration: none;
}

.svi-directory-card-body h2 a:hover,
.svi-directory-card-body h2 a:focus {
    color:           #1E5FBE;
    text-decoration: underline;
}

.svi-directory-card-intro {
    margin:      0 0 1rem;
    color:       #57647A;
    font-size:   1.35rem;
    line-height: 1.5;
    flex:        1;
}

.svi-directory-card-meta {
    margin:         0;
    padding-top:    1rem;
    border-top:     1px solid #D9E1EB;
    color:          #57647A;
    font-size:      1.15rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .05em;
}