/*
 * Fichier : abs-podcast-archive.css
 * Emplacement : assets/css/
 *
 * Responsabilité :
 * Présente la page qui rassemble les épisodes de podcast : barre de
 * navigation, grille des cartes, épisode mis en avant, rubriques en forme de
 * dossiers, pagination.
 *
 * Une feuille par domaine :
 *   Chaque domaine du plugin porte sa propre feuille, et chaque règle est
 *   portée par le conteneur du domaine. Les podcasts, les fictions et les
 *   livres audio partagent la disposition de leurs archives et se distinguent
 *   par leur ambiance visuelle.
 *
 *   Le cloisonnement rend cette indépendance effective : deux domaines
 *   nomment leurs éléments de la même façon, et une règle sans conteneur
 *   s'applique à l'un comme à l'autre selon l'ordre de chargement.
 *
 * Échelles :
 *   Les espacements et les tailles de texte viennent de variables, non de
 *   valeurs posées au cas par cas. Une échelle tient les proportions d'un
 *   élément à l'autre, et se règle en un point.
 *
 * Forme des couvertures :
 *   Les couvertures ne sont pas recadrées à l'enregistrement : une image qui
 *   n'est pas carrée garde ses proportions, et les cartes d'une même ligne
 *   prennent alors des hauteurs différentes.
 *
 *   Le cadrage se fait à l'affichage : la couverture occupe une forme
 *   constante, et l'image la remplit en gardant ses proportions. La forme se
 *   règle par une variable, ce qui laisse un domaine adopter une autre
 *   proportion.
 *
 * Couleurs :
 *   Les couleurs viennent des variables du thème Discovery, avec une valeur
 *   de repli pour chacune. Sous un autre thème, les valeurs de repli
 *   s'appliquent et la page reste lisible.
 *
 *   Aucune couleur n'est posée en dur : changer la palette du thème change
 *   celle de la page.
 *
 * Nombre de colonnes :
 *   La grille lit la variable --abs-colonnes, posée par le gabarit depuis les
 *   réglages. Les paliers d'écran la plafonnent, un écran étroit ne pouvant
 *   présenter le nombre de colonnes réglé pour un écran large.
 *
 * Accessibilité :
 *   - Le focus clavier est visible sur tout élément interactif, avec un tracé
 *     décollé de son bord.
 *   - Les cibles tactiles mesurent au moins quarante-quatre pixels de côté.
 *   - Les transitions sont retirées sous prefers-reduced-motion.
 *   - Le contraste des textes atteint le rapport exigé au niveau AA, y
 *     compris pour la ligne d'informations qui emploie une couleur atténuée.
 *   - Sous prefers-contrast, les bordures s'épaississent et les fonds
 *     atténués disparaissent.
 *   - La grille ne repose pas sur la couleur seule pour distinguer une carte :
 *     la bordure et le fond y concourent.
 *
 * Dossiers des rubriques :
 *   La forme de dossier est dessinée en CSS, sans image. L'onglet est un
 *   pseudo-élément posé au-dessus du corps.
 *
 *   Le pseudo-élément porte aria-hidden dans le gabarit : il est décoratif et
 *   n'a pas à être annoncé.
 *
 * @package AB_Story_Reader
 */

.abs-archive-podcast {
    --abs-espace-mince: var(--discovery-space-1, 0.25rem);
    --abs-espace-court: var(--discovery-space-3, 0.75rem);
    --abs-espace: var(--discovery-space-6, 1.5rem);

    --abs-texte-menu: var(--discovery-text-sm, 0.875rem);
    --abs-texte-normal: var(--discovery-text-base, 1rem);

    --abs-rayon: var(--discovery-radius-md, 0.5rem);
    --abs-ligne-serree: var(--discovery-line-tight, 1.2);

    --abs-duree: var(--discovery-duration-fast, 120ms);
    --abs-graisse-forte: var(--discovery-weight-semibold, 600);
    --abs-colonnes: 3;
    --abs-forme-couverture: 1 / 1;

    --abs-texte: var(--discovery-color-text, #1a1a1a);
    --abs-attenue: var(--discovery-color-muted, #595959);
    --abs-fond: var(--discovery-color-background, #ffffff);
    --abs-surface: var(--discovery-color-surface, #f2f2f2);
    --abs-bordure: var(--discovery-color-border, #767676);
    --abs-lien: var(--discovery-color-link, #0b5cad);
    --abs-lien-survol: var(--discovery-color-link-hover, #083f77);
    --abs-accent: var(--discovery-color-accent, #6b3fa0);

    color: var(--abs-texte);
}

/* =========================================================================
   En-tête
   ========================================================================= */

.abs-archive-podcast .abs-archive-entete {
    margin-block-end: var(--abs-espace);
}

.abs-archive-podcast .abs-archive-titre {
    margin-block: 0 var(--abs-espace-court);
}

.abs-archive-podcast .abs-archive-description {
    color: var(--abs-attenue);
    max-inline-size: 65ch;
}

/* =========================================================================
   Barre de navigation
   ========================================================================= */

.abs-archive-podcast .abs-archive-barre {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--abs-espace);
    margin-block-end: var(--abs-espace);
    padding-block-end: var(--abs-espace-court);
    border-block-end: 1px solid var(--abs-bordure);
}

.abs-archive-podcast .abs-archive-onglets {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

/*
 * L'onglet chevauche la ligne basse de la barre : sa bordure basse et cette
 * ligne se confondent.
 */
.abs-archive-podcast .abs-archive-onglet-element {
    margin-block-end: calc(var(--abs-espace-court) * -1 - 1px);
}

.abs-archive-podcast .abs-archive-onglet {
    display: inline-flex;
    align-items: center;

    /* Cible tactile d'au moins quarante-quatre pixels de côté. */
    min-block-size: 44px;
    min-inline-size: 44px;
    padding-inline: var(--abs-espace);
    padding-block: var(--abs-espace-court);

    color: var(--abs-texte);
    font: inherit;
    background: none;
    border: 1px solid transparent;
    border-block-end-width: 3px;
    cursor: pointer;
    transition: border-color var(--abs-duree) ease;
}

.abs-archive-podcast .abs-archive-onglet:hover,
.abs-archive-podcast .abs-archive-onglet:focus-visible {
    border-block-end-color: var(--abs-bordure);
}

/*
 * L'onglet sélectionné porte une bordure basse épaisse et une graisse plus
 * forte. Sa couleur ne le distingue pas seule.
 */
.abs-archive-podcast .abs-archive-onglet[aria-selected="true"] {
    color: var(--abs-lien);
    font-weight: var(--abs-graisse-forte);
    border-block-end-color: currentColor;
}

/* Le formulaire des onglets ne porte que des champs cachés. */
.abs-archive-podcast .abs-archive-vues-formulaire {
    display: contents;
}

/* Le panneau enveloppe la vue présentée sans former de boîte propre. */
.abs-archive-podcast .abs-archive-panneau {
    display: contents;
}

/* =========================================================================
   Boutons
   ========================================================================= */

.abs-archive-podcast .abs-bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    /* Cible tactile d'au moins quarante-quatre pixels de côté. */
    min-block-size: 44px;
    min-inline-size: 44px;
    padding-inline: var(--abs-espace-court);
    padding-block: var(--abs-espace-court);

    border: 1px solid var(--abs-bordure);
    border-radius: var(--abs-rayon);
    background-color: transparent;
    color: var(--abs-texte);
    font: inherit;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--abs-duree) ease,
                border-color var(--abs-duree) ease;
}

.abs-archive-podcast .abs-bouton:hover,
.abs-archive-podcast .abs-bouton:focus-visible {
    background-color: var(--abs-surface);
    border-color: var(--abs-texte);
}

.abs-archive-podcast .abs-bouton[aria-current] {
    background-color: var(--abs-surface);
    border-color: var(--abs-accent);
    font-weight: var(--abs-graisse-forte);
}

.abs-archive-podcast .abs-bouton-envoi {
    border-color: var(--abs-accent);
}

/* =========================================================================
   Formulaires de tri et de filtre
   ========================================================================= */

.abs-archive-podcast .abs-archive-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--abs-espace-court);
    margin-block-end: var(--abs-espace);
}

.abs-archive-podcast .abs-archive-label {
    font-weight: var(--abs-graisse-forte);
}

.abs-archive-podcast .abs-archive-form select {
    min-block-size: 44px;
    padding-inline: var(--abs-espace-court);
    padding-block: var(--abs-espace-mince);
    border: 1px solid var(--abs-bordure);
    border-radius: var(--abs-rayon);
    background-color: var(--abs-fond);
    color: var(--abs-texte);
    font: inherit;
    max-inline-size: 100%;
}

/* =========================================================================
   Nombre de résultats
   ========================================================================= */

.abs-archive-podcast .abs-archive-resultats {
    margin-block: 0 var(--abs-espace);
    color: var(--abs-attenue);
}

.abs-archive-podcast .abs-archive-vide {
    padding: var(--abs-espace);
    border: 1px dashed var(--abs-bordure);
    border-radius: var(--abs-rayon);
    text-align: center;
}

/* =========================================================================
   Épisode mis en avant
   ========================================================================= */

.abs-archive-podcast .abs-avant {
    margin-block-end: calc(var(--abs-espace) * 1.5);
    padding: var(--abs-espace);
    border: 1px solid var(--abs-bordure);
    border-radius: var(--abs-rayon);
    background-color: var(--abs-surface);
}

.abs-archive-podcast .abs-avant-surtitre {
    margin-block: 0 var(--abs-espace-court);
    font-size: var(--abs-texte-menu);
    font-weight: var(--abs-graisse-forte);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--abs-attenue);
}

.abs-archive-podcast .abs-avant-corps {
    display: flex;
    flex-wrap: wrap;
    gap: var(--abs-espace);
    align-items: flex-start;
}

.abs-archive-podcast .abs-avant-image {
    flex: 0 0 min(320px, 100%);
}

.abs-archive-podcast .abs-avant-couverture {
    display: block;
    aspect-ratio: var(--abs-forme-couverture);
    object-fit: cover;
    inline-size: 100%;
    block-size: auto;
    border-radius: var(--abs-rayon);
}

.abs-archive-podcast .abs-avant-texte {
    flex: 1 1 20rem;
    min-inline-size: 0;
}

.abs-archive-podcast .abs-avant-titre {
    margin-block: 0 var(--abs-espace-court);
}

.abs-archive-podcast .abs-avant-titre a {
    color: var(--abs-lien);
    text-decoration: none;
}

.abs-archive-podcast .abs-avant-titre a:hover,
.abs-archive-podcast .abs-avant-titre a:focus-visible {
    color: var(--abs-lien-survol);
    text-decoration: underline;
}

.abs-archive-podcast .abs-avant-resume {
    color: var(--abs-texte);
    max-inline-size: 65ch;
}

.abs-archive-podcast .abs-avant-resume p:last-child {
    margin-block-end: 0;
}

/* =========================================================================
   Grille des épisodes
   ========================================================================= */

.abs-archive-podcast .abs-grille {
    display: grid;
    grid-template-columns: repeat(var(--abs-colonnes), minmax(0, 1fr));
    gap: var(--abs-espace);
    margin: 0 0 var(--abs-espace);
    padding: 0;
    list-style: none;
}

.abs-archive-podcast .abs-carte {
    display: flex;
}

.abs-archive-podcast .abs-carte-lien {
    display: flex;
    flex-direction: column;
    inline-size: 100%;
    border: 1px solid var(--abs-bordure);
    border-radius: var(--abs-rayon);
    background-color: var(--abs-surface);
    color: var(--abs-texte);
    text-decoration: none;
    overflow: hidden;
    transition: border-color var(--abs-duree) ease,
                transform var(--abs-duree) ease;
}

.abs-archive-podcast .abs-carte-lien:hover,
.abs-archive-podcast .abs-carte-lien:focus-visible {
    border-color: var(--abs-accent);
    transform: translateY(-2px);
}

.abs-archive-podcast .abs-carte-image {
    display: block;
    inline-size: 100%;
    background-color: var(--abs-fond);
}

/*
 * Les couvertures ne sont pas recadrées à l'enregistrement : une image qui
 * n'est pas carrée garde ses proportions, et les cartes d'une même ligne
 * prennent alors des hauteurs différentes.
 *
 * Le cadrage se fait donc à l'affichage : la couverture occupe une forme
 * constante, et l'image la remplit en gardant ses proportions.
 */
.abs-archive-podcast .abs-carte-couverture {
    display: block;
    aspect-ratio: var(--abs-forme-couverture);
    object-fit: cover;
    inline-size: 100%;
    block-size: auto;
}

.abs-archive-podcast .abs-carte-texte {
    display: flex;
    flex-direction: column;
    gap: var(--abs-espace-mince);
    padding: var(--abs-espace-court);
}

.abs-archive-podcast .abs-carte-titre {
    font-size: var(--abs-texte-normal);
    font-weight: var(--abs-graisse-forte);
    line-height: var(--abs-ligne-serree);
}

.abs-archive-podcast .abs-carte-lien:hover .abs-carte-titre,
.abs-archive-podcast .abs-carte-lien:focus-visible .abs-carte-titre {
    text-decoration: underline;
}

/* =========================================================================
   Ligne d'informations
   ========================================================================= */

.abs-archive-podcast .abs-meta {
    font-size: var(--abs-texte-menu);
    color: var(--abs-attenue);
}

/* =========================================================================
   Rubriques en forme de dossiers
   ========================================================================= */

.abs-archive-podcast .abs-dossiers {
    display: grid;
    grid-template-columns: repeat(var(--abs-colonnes), minmax(0, 1fr));
    gap: var(--abs-espace);
    margin: 0 0 var(--abs-espace);
    padding: 0;
    list-style: none;
}

.abs-archive-podcast .abs-dossier {
    display: flex;
}

.abs-archive-podcast .abs-dossier-lien {
    position: relative;
    display: block;
    inline-size: 100%;
    padding-block-start: var(--abs-espace);
    color: var(--abs-texte);
    text-decoration: none;
}

/*
 * Onglet du dossier.
 *
 * Posé au-dessus du corps, il en reprend la bordure et le fond pour que les
 * deux formes n'en fassent qu'une.
 */
.abs-archive-podcast .abs-dossier-onglet {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: 45%;
    block-size: 1.5rem;
    border: 1px solid var(--abs-bordure);
    border-block-end: 0;
    border-start-start-radius: var(--abs-rayon);
    border-start-end-radius: var(--abs-rayon);
    background-color: var(--abs-surface);
}

.abs-archive-podcast .abs-dossier-corps {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--abs-espace-mince);
    min-block-size: 5.5rem;
    padding: var(--abs-espace-court);
    border: 1px solid var(--abs-bordure);
    border-start-end-radius: var(--abs-rayon);
    border-end-start-radius: var(--abs-rayon);
    border-end-end-radius: var(--abs-rayon);
    background-color: var(--abs-surface);
    transition: border-color var(--abs-duree) ease,
                transform var(--abs-duree) ease;
}

.abs-archive-podcast .abs-dossier-lien:hover .abs-dossier-corps,
.abs-archive-podcast .abs-dossier-lien:focus-visible .abs-dossier-corps {
    border-color: var(--abs-accent);
    transform: translateY(-2px);
}

.abs-archive-podcast .abs-dossier-lien:hover .abs-dossier-onglet,
.abs-archive-podcast .abs-dossier-lien:focus-visible .abs-dossier-onglet {
    border-color: var(--abs-accent);
}

.abs-archive-podcast .abs-dossier-nom {
    font-size: var(--abs-texte-normal);
    font-weight: var(--abs-graisse-forte);
    line-height: var(--abs-ligne-serree);
}

.abs-archive-podcast .abs-dossier-lien:hover .abs-dossier-nom,
.abs-archive-podcast .abs-dossier-lien:focus-visible .abs-dossier-nom {
    text-decoration: underline;
}

.abs-archive-podcast .abs-dossier-compte {
    font-size: var(--abs-texte-menu);
    color: var(--abs-attenue);
}

/* =========================================================================
   Pagination
   ========================================================================= */

.abs-archive-podcast .abs-pagination {
    margin-block: var(--abs-espace);
}

.abs-archive-podcast .abs-pagination-liste {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--abs-espace-court);
    margin: 0;
    padding: 0;
    list-style: none;
}

.abs-archive-podcast .abs-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 44px;
    min-inline-size: 44px;
    padding-inline: var(--abs-espace-court);
    border: 1px solid var(--abs-bordure);
    border-radius: var(--abs-rayon);
    color: var(--abs-texte);
    text-decoration: none;
}

.abs-archive-podcast .abs-pagination a.page-numbers:hover,
.abs-archive-podcast .abs-pagination a.page-numbers:focus-visible {
    background-color: var(--abs-surface);
    border-color: var(--abs-texte);
}

.abs-archive-podcast .abs-pagination .page-numbers.current {
    border-color: var(--abs-accent);
    background-color: var(--abs-surface);
    font-weight: var(--abs-graisse-forte);
}

/* =========================================================================
   Paliers d'écran
   ========================================================================= */

/*
 * Un écran étroit ne présente pas le nombre de colonnes réglé pour un écran
 * large. Les paliers plafonnent la valeur sans la remplacer : un réglage à
 * deux colonnes reste à deux colonnes sur un écran de tablette.
 */
@media (max-width: 1024px) {

    .abs-archive-podcast .abs-grille,
    .abs-archive-podcast .abs-dossiers {
        grid-template-columns: repeat(min(var(--abs-colonnes), 3), minmax(0, 1fr));
    }
}

@media (max-width: 768px) {

    .abs-archive-podcast .abs-grille,
    .abs-archive-podcast .abs-dossiers {
        grid-template-columns: repeat(min(var(--abs-colonnes), 2), minmax(0, 1fr));
    }

    .abs-archive-podcast .abs-archive-barre {
        align-items: stretch;
    }
}

@media (max-width: 480px) {

    .abs-archive-podcast .abs-grille,
    .abs-archive-podcast .abs-dossiers {
        grid-template-columns: minmax(0, 1fr);
    }

    .abs-archive-podcast .abs-archive-form,
    .abs-archive-podcast .abs-archive-onglets {
        inline-size: 100%;
    }

    .abs-archive-podcast .abs-archive-onglet-element,
    .abs-archive-podcast .abs-archive-form .abs-bouton {
        flex: 1 1 auto;
    }

    .abs-archive-podcast .abs-archive-onglet {
        inline-size: 100%;
        justify-content: center;
    }

    .abs-archive-podcast .abs-avant-image {
        flex-basis: 100%;
    }
}

/* =========================================================================
   Préférences d'affichage
   ========================================================================= */

/* Contraste renforcé : bordures épaissies, fonds atténués retirés. */
@media (prefers-contrast: more) {

    .abs-archive-podcast .abs-bouton,
    .abs-archive-podcast .abs-carte-lien,
    .abs-archive-podcast .abs-dossier-corps,
    .abs-archive-podcast .abs-dossier-onglet,
    .abs-archive-podcast .abs-avant,
    .abs-archive-podcast .abs-pagination .page-numbers {
        border-width: 2px;
    }

    .abs-archive-podcast .abs-carte-lien,
    .abs-archive-podcast .abs-dossier-corps,
    .abs-archive-podcast .abs-dossier-onglet,
    .abs-archive-podcast .abs-avant {
        background-color: transparent;
    }

    .abs-archive-podcast .abs-meta,
    .abs-archive-podcast .abs-dossier-compte,
    .abs-archive-podcast .abs-archive-resultats,
    .abs-archive-podcast .abs-archive-description {
        color: var(--abs-texte);
    }
}

/* Mouvement réduit : les transitions et les déplacements sont retirés. */
@media (prefers-reduced-motion: reduce) {

    .abs-archive-podcast .abs-bouton,
    .abs-archive-podcast .abs-carte-lien,
    .abs-archive-podcast .abs-dossier-corps,
    .abs-archive-podcast .abs-dossier-onglet {
        transition: none;
    }

    .abs-archive-podcast .abs-carte-lien:hover,
    .abs-archive-podcast .abs-carte-lien:focus-visible,
    .abs-archive-podcast .abs-dossier-lien:hover .abs-dossier-corps,
    .abs-archive-podcast .abs-dossier-lien:focus-visible .abs-dossier-corps {
        transform: none;
    }
}

/* Impression : les fonds et les éléments de navigation sont retirés. */
@media print {

    .abs-archive-podcast .abs-archive-barre,
    .abs-archive-podcast .abs-archive-form,
    .abs-archive-podcast .abs-pagination {
        display: none;
    }

    .abs-archive-podcast .abs-carte-lien,
    .abs-archive-podcast .abs-dossier-corps,
    .abs-archive-podcast .abs-avant {
        background-color: transparent;
        border-color: #000000;
    }
}