/**
 * Recherche RA — résultats groupés par type
 *
 * Mobile first. Les pastilles ont une taille fixe et les lignes une hauteur
 * stable : la liste se remplit sans décaler ce qui est déjà affiché.
 *
 * @package RugbyAmateur
 * @since 2.74.0
 */

.ra-search {
    /*
     * Le meme rendu sert dans le modal Blocksy, dont le fond est noir a 95 %,
     * et sur la page de resultats, dont le fond est clair. Les couleurs passent
     * donc par des variables surchargees selon le contexte.
     */
    --ra-s-titre:  var(--theme-headings-color, #192a3d);
    --ra-s-detail: var(--theme-palette-color-3, #7f8c9a);
    --ra-s-survol: var(--theme-palette-color-6, #f2f5f7);
    --ra-s-onglet-bg: var(--theme-palette-color-6, #f2f5f7);
    --ra-s-onglet-txt: var(--theme-text-color, #192a3d);
    --ra-s-fond: var(--theme-palette-color-8, #fff);

    width: 100%;
    max-width: 680px;
    margin: 18px auto 0;
    text-align: left;
}

.ra-search.is-charge {
    opacity: .55;
    transition: opacity .12s ease;
}

/* ------------------------------------------------------------------ onglets */

/*
 * Onglets collants : la vue « Tous » se fait defiler, et sans cela le filtre
 * sort du champ de vision des la premiere liste parcourue.
 */
.ra-search__onglets {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 18px;
    padding: 10px 0;
    background: var(--ra-s-fond);
}

.ra-search__onglet {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    font-size: .85rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--ra-s-onglet-txt);
    background: var(--ra-s-onglet-bg);
    border: 1px solid transparent;
    border-radius: 100px;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.ra-search__onglet:hover {
    background: var(--theme-palette-color-5, #e1e8ed);
}

.ra-search__onglet.is-actif {
    color: var(--theme-palette-color-4, #192a3d);
    background: var(--theme-palette-color-1, #b3e43f);
}

.ra-search__nb {
    display: inline-block;
    min-width: 18px;
    padding: 1px 6px;
    font-size: .76rem;
    font-weight: 700;
    text-align: center;
    color: var(--theme-palette-color-3, #7f8c9a);
    background: var(--theme-palette-color-8, #fff);
    border-radius: 100px;
}

.ra-search__onglet.is-actif .ra-search__nb {
    color: var(--theme-palette-color-4, #192a3d);
}

/* ------------------------------------------------------------------ groupes */

.ra-search__groupe {
    margin-bottom: 22px;
}

.ra-search__groupe-titre {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    /* Intertitre de type : il structure la lecture, il doit se voir */
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--theme-headings-color, #192a3d);
}

.ra-search__liste {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ra-search__lien {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 10px;
    text-decoration: none;
    border-radius: 3px;
    transition: background-color .12s ease;
}

.ra-search__lien:hover,
.ra-search__lien:focus-visible {
    background: var(--ra-s-survol);
}

/* Pastille : dimensions fixes pour que la ligne ne bouge pas au chargement */
.ra-search__img,
.ra-search__ini {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--theme-palette-color-6, #f2f5f7);
}

.ra-search__ini {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--theme-palette-color-4, #192a3d);
    background: var(--theme-palette-color-1, #b3e43f);
}

.ra-search__txt {
    flex: 1 1 auto;
    min-width: 0;
}

.ra-search__titre {
    display: block;
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ra-s-titre);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ra-search__detail {
    display: block;
    font-size: .78rem;
    line-height: 1.3;
    color: var(--ra-s-detail);
}

.ra-search__type {
    flex: 0 0 auto;
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--theme-palette-color-3, #7f8c9a);
}

/* ------------------------------------------------------------------ actions */

.ra-search__plus,
.ra-search__tout {
    display: inline-block;
    margin-top: 6px;
    padding: 7px 13px;
    font-size: .82rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--theme-palette-color-9, #4338CA);
    background: none;
    border: 1px solid var(--theme-border-color, #e1e8ed);
    border-radius: 100px;
    cursor: pointer;
}

.ra-search__plus:hover,
.ra-search__tout:hover {
    color: var(--theme-palette-color-10, #3730A3);
    border-color: var(--theme-palette-color-9, #4338CA);
}

.ra-search__tout {
    display: block;
    margin: 16px 0 6px;
    text-align: center;
}

.ra-search__vide {
    padding: 26px 16px;
    text-align: center;
    color: var(--theme-palette-color-3, #7f8c9a);
}

/* Le type est redondant avec le titre de groupe sur les petits écrans */
@media (max-width: 599px) {
    .ra-search__type { display: none; }
    .ra-search__img,
    .ra-search__ini { flex-basis: 38px; width: 38px; height: 38px; }
}

/* ------------------------------------------- neutralisation du rendu natif */

/*
 * Blocksy affiche sa propre liste de resultats, qui ferait doublon avec la
 * notre. La classe n'est posee que si le script RA tourne : sans lui, la
 * recherche native reste visible et fonctionnelle.
 */
.ra-search-actif .ct-search-results {
    display: none !important;
}

/* ------------------------------------------------ contexte du modal sombre */

/*
 * Le panel Blocksy est en rgba(0,0,0,.95) : les couleurs prevues pour un fond
 * clair y seraient illisibles. On ne surcharge que les variables.
 */
.ct-panel .ra-search {
    --ra-s-titre:  #fff;
    --ra-s-detail: rgba(255, 255, 255, .62);
    --ra-s-survol: rgba(255, 255, 255, .09);
    --ra-s-onglet-bg: rgba(255, 255, 255, .12);
    --ra-s-onglet-txt: #fff;
    --ra-s-fond: #0a0a0a;
}

.ct-panel .ra-search__groupe-titre {
    color: #fff;
}

.ct-panel .ra-search__type {
    color: rgba(255, 255, 255, .55);
}

.ct-panel .ra-search__nb {
    color: var(--theme-palette-color-4, #192a3d);
    background: rgba(255, 255, 255, .85);
}

.ct-panel .ra-search__plus,
.ct-panel .ra-search__tout {
    color: var(--theme-palette-color-1, #b3e43f);
    border-color: rgba(255, 255, 255, .25);
}

.ct-panel .ra-search__plus:hover,
.ct-panel .ra-search__tout:hover {
    color: #fff;
    border-color: var(--theme-palette-color-1, #b3e43f);
}

.ct-panel .ra-search__vide {
    color: rgba(255, 255, 255, .7);
}

/* ----------------------------------------------- page de resultats /search/ */

.ra-search--page {
    max-width: var(--theme-normal-container-max-width, 1240px);
    margin: 0 auto;
}

.ra-search__form {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
}

.ra-search__form input[type="search"] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 12px 16px;
    font-size: 1rem;
    border: 2px solid var(--theme-border-color, #e1e8ed);
    border-radius: 2px;
}

.ra-search__form input[type="search"]:focus {
    outline: none;
    border-color: var(--theme-palette-color-1, #b3e43f);
}

.ra-search__form button {
    flex: 0 0 auto;
    padding: 12px 20px;
    font-weight: 700;
    color: var(--theme-palette-color-4, #192a3d);
    background: var(--theme-palette-color-1, #b3e43f);
    border: none;
    border-radius: 2px;
    cursor: pointer;
}

.ra-search__compte {
    margin: 0 0 16px;
    font-size: .9rem;
    color: var(--theme-palette-color-3, #7f8c9a);
}

/* Sur la page, les onglets sont des liens et non des boutons */
.ra-search--page .ra-search__onglet {
    text-decoration: none;
}

/*
 * Le nombre de colonnes vient du reglage « Colonnes & publications » du
 * personnalisateur, transmis en variables par le modele : le curseur Blocksy
 * garde la main sur notre rendu.
 */
.ra-search--page .ra-search__liste {
    display: grid;
    grid-template-columns: var(--ra-s-col-mobile, repeat(1, minmax(0, 1fr)));
    gap: 2px 18px;
}

@media (min-width: 600px) {
    .ra-search--page .ra-search__liste {
        grid-template-columns: var(--ra-s-col-tablet, repeat(2, minmax(0, 1fr)));
    }
}

@media (min-width: 900px) {
    .ra-search--page .ra-search__liste {
        grid-template-columns: var(--ra-s-col-desktop, repeat(2, minmax(0, 1fr)));
    }
}

/* -------------------------------------- raccourcis de vue d'une competition */

.ra-search__raccourcis {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 6px 66px;   /* aligne sous le titre, apres la pastille */
}

.ra-search__raccourci {
    padding: 3px 11px;
    font-size: .76rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--ra-s-detail);
    border: 1px solid var(--theme-border-color, #e1e8ed);
    border-radius: 100px;
    transition: color .12s ease, border-color .12s ease;
}

.ra-search__raccourci:hover,
.ra-search__raccourci:focus-visible {
    color: var(--theme-palette-color-4, #192a3d);
    background: var(--theme-palette-color-1, #b3e43f);
    border-color: var(--theme-palette-color-1, #b3e43f);
}

.ct-panel .ra-search__raccourci {
    border-color: rgba(255, 255, 255, .28);
}

@media (max-width: 599px) {
    .ra-search__raccourcis { margin-left: 50px; }
}

/* ------------------------------------------------ lisibilite dans le modal */

/* Densite : 12 lignes tenaient sur 1216 px pour un ecran de 950 px */
.ra-search__lien {
    gap: 10px;
    padding: 6px 10px;
}

.ra-search__img,
.ra-search__ini {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
}

.ra-search__ini { font-size: .74rem; }

.ra-search__titre { font-size: .9rem; }

.ra-search__detail { font-size: .74rem; }

.ra-search__groupe { margin-bottom: 14px; }

.ra-search__groupe-titre { margin-bottom: 4px; }

.ra-search__plus,
.ra-search__tout {
    margin-top: 4px;
    padding: 5px 12px;
    font-size: .78rem;
}

.ra-search__raccourcis { margin: 2px 0 4px 56px; }

@media (max-width: 599px) {
    .ra-search__img,
    .ra-search__ini { flex-basis: 32px; width: 32px; height: 32px; }
    .ra-search__raccourcis { margin-left: 46px; }
}

/* ------------------------------------------------- mise en page epuree */

/*
 * L'etiquette de type a disparu des lignes : le titre de groupe la repetait et
 * elle creusait un vide sur toute la largeur. Le « Voir les N » remonte sur la
 * ligne du titre, ce qui rend une ligne par groupe.
 */
.ra-search__entete {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
}

.ra-search__entete .ra-search__groupe-titre {
    margin: 0;
}

.ra-search__entete .ra-search__plus {
    flex: 0 0 auto;
    margin: 0;
    padding: 2px 0;
    font-size: .78rem;
    text-decoration: none;
    white-space: nowrap;
    color: var(--theme-palette-color-9, #4338CA);
    background: none;
    border: none;
}

.ct-panel .ra-search__entete .ra-search__plus {
    color: var(--theme-palette-color-1, #b3e43f);
}

.ra-search__entete .ra-search__plus:hover {
    text-decoration: underline;
}

/* Le titre peut desormais occuper toute la largeur disponible */
.ra-search__type { display: none; }

/* ------------------------------------- page /search/ : onglets puis resultats */

/*
 * Les onglets passent devant le decompte : ils ne filtrent plus une vue
 * d'ensemble, ils choisissent ce qui est affiche. Le decompte porte desormais
 * sur le seul type actif, il se lit donc apres.
 */
.ra-search--page .ra-search__onglets {
    margin-bottom: 10px;
}

.ra-search--page .ra-search__compte {
    margin: 0 0 18px;
}

/*
 * Articles et annonces sont rendus par blocksy_render_archive_cards() : la
 * grille, les colonnes et la carte viennent du personnalisateur. On ne reprend
 * la main que sur la marge qui la separe des onglets, le gabarit natif etant
 * prevu pour demarrer en haut d'une archive.
 */
.ra-search--page .entries {
    margin-top: 0;
}

.ra-search--page .ct-pagination {
    margin-top: 30px;
}

/* ------------------------------------------------------ garde anti-debordement */

/*
 * Un element de grille prend par defaut la largeur de son contenu : un titre
 * long en nowrap elargissait sa cellule et debordait sur la barre laterale,
 * malgre le minmax(0, 1fr) des colonnes. min-width: 0 autorise la troncature.
 */
.ra-search__item,
.ra-search__lien {
    min-width: 0;
}

.ra-search__liste {
    max-width: 100%;
}