/* ============================================================
   PAGE MEMBERS
   Structure : .grid.wrapper[data-grid="flex"][data-column="3"]
               > .column.member-card
   Avatar positionné comme card_inspiration :
     top: -size/2  → centre sur le bord supérieur
     left: -size/4 → déborde légèrement à gauche
   ============================================================ */

/* ── Variables ────────────────────────────────────────────────── */

:root {
  --member-avatar-size: 120px;
}

/* ── Wrapper / grille ─────────────────────────────────────────── */

.members-wrapper {
  /* Espace en haut pour les avatars de la première rangée */
  padding-block-start: calc(var(--member-avatar-size) / 2);
  /* Masonry via CSS multi-column */
  columns: 3 17rem;
  column-gap: var(--space-2xl);
}

/* ── Colonne = carte membre ───────────────────────────────────── */

/*
  On passe par les variables --column-* lues par .grid .column
  pour éviter le conflit de spécificité (0,2,0 vs 0,1,0).
*/
.member-card {
  --column-border:               2px solid currentColor;
  --column-border-radius:        var(--radius-m, 0.75em);
  --column-box-shadow:           5px 5px 0 0 currentColor;
  --column-bg-color:             var(--body-background-color);
  --column-padding-block-start:  calc(var(--member-avatar-size) / 2 + var(--space-s));
  --column-padding-block-end:    var(--space-m);
  --column-padding-inline-start: var(--space-m);
  --column-padding-inline-end:   var(--space-m);
  --column-hover-box-shadow:     7px 7px 0 0 currentColor;
  --column-hover-transform:      translate(-2px, -2px);

  /* Masonry : empêche la coupure d'une card entre deux colonnes */
  break-inside: avoid;
  /* Espacement vertical entre cards (remplace --grid-row-gap) */
  margin-block-end: calc(var(--member-avatar-size) / 2 + var(--space-l));

  /* display:flex n'est plus fourni par .grid[data-grid="flex"] .column */
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow: visible; /* permet à l'avatar de déborder hors du bord supérieur */
  gap: var(--space-xs);
}

/* ── Avatar circulaire ────────────────────────────────────────── */
/*
  Logique card_inspiration :
    width: 120px → top: -60px (= -size/2), left: -30px (= -size/4)

  Spécificité (0,2,0) nécessaire : .grid .column > * { position: relative }
  a la même spécificité et s'applique à l'avatar (enfant direct de .column).
  En chargeant après grid.css, .member-card .member-card__avatar l'écrase.
*/
.member-card .member-card__avatar {
  position: absolute;
  top: calc(-1 * var(--member-avatar-size) / 2);
  left: calc(-1 * var(--member-avatar-size) / 4);

  width: var(--member-avatar-size);
  height: var(--member-avatar-size);
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid currentColor;
  background-color: var(--body-background-color);
  margin: 0;
  z-index: 2;
  color-scheme: light;
}

.member-card__avatar picture {
  display: block;
  width: 100%;
  height: 100%;
}

.member-card__avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.member-card__avatar-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: calc(var(--member-avatar-size) * 0.4);
  font-weight: var(--font-bold, 700);
  color: color-mix(in srgb, currentColor 40%, transparent);
  background-color: color-mix(in srgb, currentColor 8%, transparent);
}

/* < 500px : léger décalage vers la droite, sans débordement gauche */
@media (max-width: 31.25rem) {
  .member-card .member-card__avatar {
    left: var(--space-s);
  }
}

/* ── Mode logo ────────────────────────────────────────────────── */

.member-card--logo .member-card__avatar {
  border-radius: var(--radius-m);
}

.member-card--logo .member-card__avatar picture {
  padding: var(--space-xs);
  box-sizing: border-box;
}

.member-card--logo .member-card__avatar img {
  object-fit: contain;
  object-position: center;
}

/* ── Nom ──────────────────────────────────────────────────────── */

.member-card__name {
  font-size: var(--text-md);
  margin-block: 0;
  line-height: var(--leading-fine, 1.2);
}

/* ── Hashtags ─────────────────────────────────────────────────── */

.member-card__hashtags {
  font-size: var(--text-sm);
  opacity: 0.65;
  margin-block: 0;
}

/* ── Description ──────────────────────────────────────────────── */

.member-card__description-wrapper {
  --flow-space: 0;
}

.member-card__description {
  font-size: var(--text-sm);
  line-height: var(--leading-standard, 1.5);
  margin-block: 0;
}

/* ── Liens sociaux ────────────────────────────────────────────── */

.member-card__social {
  margin-block-start: auto;
  padding-block-start: var(--space-xs);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  border-block-start: 1px solid color-mix(in srgb, currentColor 15%, transparent);
}

.member-card__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--color-mid, #888);
  transition: color 200ms ease, transform 200ms ease;
}

.member-card__social-link:hover {
  color: var(--color-dark);
  transform: scale(1.2);
}

.member-card__social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  color: inherit;
}

.member-card__social-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ── Intro page ───────────────────────────────────────────────── */

.members-intro {
  max-width: var(--line-width-m, 60ch);
  /* font-size: var(--text-md); */
}

/* ── Toolbar tri + toggle vue ─────────────────────────────────── */

.members-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  margin-block-end: var(--space-m);
}

.members-toolbar__sort,
.view-toggle {
  display: flex;
  gap: var(--space-2xs);
}

/* Base dans button.css — spécificités membres uniquement */
.members-toolbar .filter-btn {
  --button-radius: var(--radius-s);
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
}

.members-toolbar .filter-btn:hover {
  background-color: color-mix(in srgb, currentColor 6%, transparent);
}

.members-toolbar .filter-btn[aria-pressed="true"] {
  border-color: currentColor;
  background-color: color-mix(in srgb, currentColor 12%, transparent);
}

.members-toolbar .filter-btn svg {
  width: 1.1rem;
  height: 1.1rem;
  display: block;
  fill: currentColor;
}

/* ── Mode trié : grille régulière (ordre lisible ligne par ligne) ── */

.members-wrapper--sorted {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  columns: unset;
  column-gap: unset;
  gap: var(--space-2xl);
  align-items: start;
}

/* En grille, le gap gère l'espacement — supprimer la marge masonry */
.members-wrapper--sorted .member-card {
  margin-block-end: 0;
}

/* ── Vue liste ─────────────────────────────────────────────────── */
/* Base (conteneur, séparateur, hover, container query) → list-view.css */

/* Annule le padding avatar du conteneur + le mode grille "sorted" */
.members-wrapper[data-view="list"] {
  padding-block-start: 0;
}

.members-wrapper--sorted[data-view="list"] {
  display: flex;
  grid-template-columns: unset;
  gap: 0;
  align-items: stretch;
}

/* Surcharges spécifiques membres — grille interne */
.members-wrapper[data-view="list"] .member-card {
  --column-border:               none;
  --column-border-radius:        0;
  --column-box-shadow:           none;
  --column-padding-block-start:  var(--space-s);
  --column-padding-block-end:    var(--space-s);
  --column-padding-inline-start: var(--space-s);
  --column-padding-inline-end:   var(--space-2xs);
  --column-hover-box-shadow:     none;
  --column-hover-transform:      none;
  --list-avatar-size:            clamp(83px, 16.67cqi, var(--member-avatar-size));

  display: grid;
  grid-template-columns: var(--list-avatar-size) 1fr auto;
  grid-template-rows: auto auto auto; /* lignes statiques — pas d'animation ici */
  column-gap: var(--space-m);
  row-gap: 0;
  align-items: start;
  overflow: hidden;
}

/* Curseur pointer uniquement si une description existe */
.members-wrapper[data-view="list"] .member-card:has(.member-card__description:not(:empty)) {
  cursor: pointer;
}

/* État ouvert */
.members-wrapper[data-view="list"] .member-card.is-open {
  border-inline-start-color: currentColor;
  background-color: color-mix(in srgb, currentColor 4%, transparent);
}

/* Avatar — colonne 1, lignes 1-2, aligné en haut */
.members-wrapper[data-view="list"] .member-card .member-card__avatar {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: start;
  position: static;
  width: var(--list-avatar-size);
  height: var(--list-avatar-size);
  top: unset;
  left: unset;
}

/* Nom — colonne 2, ligne 1 */
.members-wrapper[data-view="list"] .member-card .member-card__name {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  font-size: var(--text-md);
  margin-block: 0;
}

/* RS — colonne 3, ligne 1 */
.members-wrapper[data-view="list"] .member-card .member-card__social {
  grid-column: 3;
  grid-row: 1;
  align-self: center;
  margin-block-start: 0;
  padding-block-start: 0;
  border-block-start: none;
}

/* Hashtags — colonne 2 uniquement, ligne 2 (col 3 réservée à l'icône accordéon) */
.members-wrapper[data-view="list"] .member-card .member-card__hashtags {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  display: block;
  margin-block: 0;
}

/* Wrapper accordéon — colonnes 2-3, ligne 3
   C'est lui qui anime, pas la carte — les lignes 1+2 ne bougent jamais */
.members-wrapper[data-view="list"] .member-card .member-card__description-wrapper {
  grid-column: 2 / span 2;
  grid-row: 3;
  display: grid;
  grid-template-rows: 0fr;
  align-items: start;
  margin-block-start: 0; /* neutralise la règle flow du .column parent */
  padding-inline-end: var(--space-m);
  transition: grid-template-rows 250ms ease;
}

.members-wrapper[data-view="list"] .member-card.is-open .member-card__description-wrapper {
  grid-template-rows: 1fr;
}

/* Description — enfant du wrapper, se compresse à 0 */
.members-wrapper[data-view="list"] .member-card .member-card__description {
  min-height: 0;
  overflow: hidden;
  margin-block: 0;
  opacity: 0;
  transition: opacity 200ms ease;
}

.members-wrapper[data-view="list"] .member-card.is-open .member-card__description {
  opacity: 1;
}

/* ── Mode sans accordéon (data-no-accordion) ──────────────────── */

.members-wrapper[data-no-accordion][data-view="list"] .member-card .member-card__description-wrapper {
  grid-template-rows: 1fr;
  transition: none;
}

/* Sans hashtags : description remonte en ligne 2 avec petit espacement */
.members-wrapper[data-no-accordion][data-view="list"] .member-card:not(:has(.member-card__hashtags)) .member-card__description-wrapper {
  grid-row: 2;
  padding-block-start: var(--space-s);
}

.members-wrapper[data-no-accordion][data-view="list"] .member-card .member-card__description {
  opacity: 1;
  overflow: visible;
}

.members-wrapper[data-no-accordion][data-view="list"] .member-card .member-card__accordion-icon {
  display: none;
}

.members-wrapper[data-no-accordion][data-view="list"] .member-card {
  cursor: default;
}

/* ── Indicateur accordéon (arrow-right SVG) — col 3, row 2 ───── */

.member-card__accordion-icon {
  display: none; /* masqué en mode card */
}

.members-wrapper[data-view="list"] .member-card .member-card__accordion-icon {
  grid-column: 3;
  grid-row: 2;
  align-self: center;
  justify-self: end;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  opacity: 0.4;
  transition: transform 250ms ease, opacity 200ms ease;
  flex-shrink: 0;
}

.members-wrapper[data-view="list"] .member-card .member-card__accordion-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.members-wrapper[data-view="list"] .member-card.is-open .member-card__accordion-icon {
  transform: rotate(90deg);
  opacity: 0.8;
}

/* < 500px : colonne unique, avatar en premier */
@container (max-width: 31.25rem) {
  .members-wrapper[data-view="list"] .member-card {
    grid-template-columns: 1fr;
    row-gap: 0;
  }

  .members-wrapper[data-view="list"] .member-card .member-card__avatar {
    grid-column: 1;
    grid-row: 1;
  }

  .members-wrapper[data-view="list"] .member-card .member-card__name {
    grid-column: 1;
    grid-row: 2;
    margin-block-start: var(--space-xs);
  }

  .members-wrapper[data-view="list"] .member-card .member-card__hashtags {
    grid-column: 1;
    grid-row: 3;
  }

  .members-wrapper[data-view="list"] .member-card .member-card__social {
    grid-column: 1;
    grid-row: 4;
    margin-block-start: var(--space-xs);
  }

  .members-wrapper[data-view="list"] .member-card .member-card__description-wrapper {
    grid-column: 1;
    grid-row: 5;
    margin-block-start: var(--space-2xs);
  }

  /* no-accordion sans hashtags : description après le nom (row 3) */
  .members-wrapper[data-no-accordion][data-view="list"] .member-card:not(:has(.member-card__hashtags)) .member-card__description-wrapper {
    grid-row: 3;
    padding-block-start: 0;
  }

  /* Icône en coin haut-droit de la carte (zone vide sur mobile) */
  .members-wrapper[data-view="list"] .member-card .member-card__accordion-icon {
    position: absolute;
    top: var(--space-s);
    right: var(--space-s);
    grid-column: unset;
    grid-row: unset;
    justify-self: unset;
    align-self: unset;
  }
}

/* ── Bouton CTA — style card ──────────────────────────────────── */

.members-cta .button {
  border: 2px solid currentColor !important;
  border-radius: var(--radius-m, 0.75em) !important;
  padding-inline: var(--space-s);
  padding-block: var(--space-xs);
  box-shadow: 4px 4px 0 0 currentColor;
  text-decoration: none !important;
  transition: box-shadow 100ms ease, transform 100ms ease,
              background-color 150ms ease, color 150ms ease;
}

.members-cta .button:hover {
  box-shadow: 1px 1px 0 0 currentColor;
  transform: translate(3px, 3px);
}

.members-cta .button svg {
  display: none;
}