/**
 * PlayAwale — Le jeu, en quelques mots
 * -----------------------------------------------------------------------------
 * Un court texte sur l'awalé et ce que la page permet, et le chemin des règles :
 * sous les deux colonnes de l'accueil, sous le choix des modes, sous le plateau
 * de la partie à deux, sous le salon du réseau. Le balisage est écrit une fois,
 * dans inc/partials/about.php.
 *
 * La même matière que l'encart des actualités de l'accueil — c'est aussi un
 * texte qu'on lit —, sur une largeur de lecture : au-delà de soixante-dix signes
 * par ligne, l'œil perd le fil.
 *
 * @package   PlayAwale
 * @version   2.0
 * @author    Nicolas Lion — Développeur web — https://nlion.fr
 * @copyright 2026 Nicolas Lion
 */

.about-block {
  width: 100%;
  max-width: 48rem;
  margin: 0 auto;
  padding: var(--space-md) var(--space-lg);
  text-align: left;

  background-color: rgba(240, 225, 209, 0.42);
  background-image: var(--gradient-panel);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-raised);

  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

/* Le titre porte le même filet que celui des actualités. */
.about-block__title {
  display: flex;
  align-items: center;
  gap: var(--space-sm);

  margin: 0 0 var(--space-xs);

  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 400;
  line-height: var(--line-height-tight);
  color: var(--color-text);
}

.about-block__title::after {
  content: '';
  flex: 1;
  height: 1px;
  background-image: linear-gradient(90deg, rgba(184, 169, 149, 0.8), rgba(184, 169, 149, 0));
}

.about-block__text {
  margin: 0 0 var(--space-xs);

  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--color-text-muted);
}

.about-block__link {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.about-block__link:hover,
.about-block__link:focus-visible {
  color: var(--color-focus-ring);
}

/* Sur une page de jeu, la barre d'outils est posée en bas de l'écran : le texte,
   dernier de la page, garde de quoi ne pas passer dessous. */
.game-page .about-block {
  margin-bottom: calc(var(--tool-size, 40px) + 2 * var(--space-md));
}
@media (max-width: 46rem) {

  .about-block {
    padding: var(--space-sm) var(--space-md);
  }
}