/* F&K — Advice Library
   Collection des conseils.

   Responsabilités :
   - largeur de la collection ;
   - barre de recherche et CTA ;
   - grille ;
   - état vide ;
   - responsive.

   La géométrie et l'apparence d'une carte appartiennent
   exclusivement au composant advice-card.
*/

/* =========================================
   SECTION / FOUNDATION CONTRACT
   ========================================= */

.fk-advice-library {
    width:100%;
    max-width:1180px;
    margin:0 auto;
    padding:38px 22px 56px;
}

/* =========================================
   TOOLBAR
   ========================================= */

.fk-advice-library__toolbar {
    width:100%;
    max-width:980px;
    margin:0 auto 42px;
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto;
    align-items:center;
    gap:18px;
}

.fk-advice-library__search {
    min-width:0;
}

.fk-advice-library__search-field {
    position:relative;
}

.fk-advice-library__search-field input {
    display:block;
    width:100%;
    height:58px;
    padding:0 64px 0 22px;
    border:1px solid #d5d5d5;
    border-radius:0;
    outline:none;
    background:#fff;
    color:var(--fk-black);
    font:inherit;
    font-size:16px;
    font-weight:600;
    appearance:none;
}

.fk-advice-library__search-field input::placeholder {
    color:#555;
    opacity:1;
}

.fk-advice-library__search-field input:focus {
    border-color:var(--fk-black);
}

.fk-advice-library__search-field svg {
    position:absolute;
    top:50%;
    right:22px;
    width:23px;
    height:23px;
    transform:translateY(-50%);
    fill:none;
    stroke:var(--fk-black);
    stroke-width:1.8;
    pointer-events:none;
}

/* =========================================
   CTA
   ========================================= */

.fk-advice-library__more {
    margin:0;
}

.fk-advice-library__more[hidden] {
    display:none;
}

.fk-advice-library__more-button {
    min-height:54px;
    padding:0 20px 0 12px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:11px;
    box-sizing:border-box;
    appearance:none;
    border:1.5px solid var(--fk-red);
    border-radius:9px;
    background:#fff;
    color:var(--fk-red);
    font:inherit;
    font-size:13px;
    font-weight:800;
    line-height:1;
    text-transform:uppercase;
    white-space:nowrap;
    cursor:pointer;
    transition:
        background-color .18s ease,
        border-color .18s ease,
        color .18s ease;
}

.fk-advice-library__more-icon {
    width:32px;
    height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 32px;
    box-sizing:border-box;
    border:1px solid var(--fk-red);
    border-radius:50%;
    color:var(--fk-red);
    font-size:27px;
    line-height:1;
    font-weight:300;
}

.fk-advice-library__more-button:hover,
.fk-advice-library__more-button:focus-visible {
    background:#fafafa;
    border-color:#a90010;
    color:#a90010;
}

.fk-advice-library__more-button:hover
.fk-advice-library__more-icon,
.fk-advice-library__more-button:focus-visible
.fk-advice-library__more-icon {
    border-color:#a90010;
    color:#a90010;
}

/* =========================================
   COLLECTION
   ========================================= */

.fk-advice-library__grid {
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    column-gap:32px;
    row-gap:48px;
}

.fk-advice-library__item {
    min-width:0;
}

.fk-advice-library__item[hidden] {
    display:none;
}

/* =========================================
   EMPTY STATE
   ========================================= */

.fk-advice-library__empty {
    margin:50px 0;
    color:#555;
    text-align:center;
    font-size:16px;
}

/* =========================================
   RESPONSIVE
   ========================================= */

@media(max-width:800px) {

    .fk-advice-library__toolbar {
        grid-template-columns:1fr;
        gap:14px;
    }

    .fk-advice-library__more-button {
        width:100%;
    }

}

@media(max-width:700px) {

    .fk-advice-library {
        padding:28px 22px 52px;
    }

    .fk-advice-library__toolbar {
        margin-bottom:32px;
    }

    .fk-advice-library__grid {
        grid-template-columns:1fr;
        row-gap:32px;
    }

}