/**
 * Page « Exécutif provincial » — Gouvernorat de Kinshasa
 *
 * Chargée par page--executif-provincial.html.twig, via la bibliothèque
 * gouvernoratkin/executif, qui dépend de gouvernoratkin/composants pour
 * l'entête de page et les briques communes.
 *
 * Le corps de la page reste le contenu saisi dans l'éditeur, rendu par la vue
 * executif_provincial. Cette feuille reprend les classes de ce contenu
 * (.presentation, .team-card, …) que l'injecteur d'actifs habillait jusqu'ici
 * hors du thème, et les remet sur la charte.
 */

/* ==========================================================================
   Corps de page
   ========================================================================== */

.ex-corps {
  padding: 3rem 0 4.5rem;
}

/* Le contenu de l'éditeur est enveloppé par la vue : ses conteneurs Bootstrap
   apportent déjà leurs gouttières, inutile d'en rajouter. */
.ex-corps > .container > .views-element-container {
  margin: 0;
}

/* ==========================================================================
   Présentation
   ========================================================================== */

.presentation {
  background-color: #f6f8fc;
  border-radius: 14px;
  padding: 2.5rem 2rem;
  margin-bottom: 3rem;
  text-align: center;
}

.presentation h2 {
  font-family: var(--fontFamily-heading);
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  font-weight: 700;
  color: var(--mainColor);
  margin: 0 0 1.25rem;
  text-wrap: balance;
}

.presentation p {
  font-family: var(--fontFamily-body);
  font-size: 1.05rem;
  line-height: 1.8;
  font-weight: 400;
  color: var(--paragraphColor);
  max-width: 78ch;
  margin: 0 auto 1rem;
}

.presentation p:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   Titres de groupe
   ========================================================================== */

/* Le contenu de l'éditeur ouvre trois groupes — gouverneur et vice-gouverneur,
   ministres provinciaux, secrétariat exécutif — avec des titres qui n'étaient
   habillés par rien : ils prenaient les h2 par défaut du navigateur. */
.ex-corps h2 {
  font-family: var(--fontFamily-heading);
  font-size: clamp(1.45rem, 2.6vw, 1.95rem);
  font-weight: 700;
  color: var(--mainColor);
  text-align: center;
  margin: 3.5rem 0 0.5rem;
  text-wrap: balance;
}

.ex-corps .presentation h2 {
  margin-top: 0;
}

/* Un filet court sous le titre de groupe, pour marquer la coupure sans
   ajouter de fond ni de bandeau. */
.ex-corps h2::after {
  content: '';
  display: block;
  width: 64px;
  height: 3px;
  margin: 0.9rem auto 0;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    var(--secondaryColor) 0%,
    var(--highlightColor) 50%,
    var(--accentColor) 100%
  );
}

.ex-corps .presentation h2::after {
  content: none;
}

/* ==========================================================================
   Cartes des membres
   ========================================================================== */

.team-card {
  position: relative;
  height: 100%;
  margin-top: 30px;
  border: none;
  border-radius: 14px;
  overflow: hidden;
  background-color: var(--whiteColor);
  box-shadow: 0 10px 26px rgba(9, 36, 46, 0.09);
  transition: transform var(--transition), box-shadow var(--transition);
}

.team-card:hover,
.team-card:focus-within {
  transform: translateY(-5px);
  box-shadow: 0 20px 44px rgba(9, 36, 46, 0.16);
}

/* Liseré aux couleurs de la charte, comme sur les autres cartes du site. */
.team-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  z-index: 2;
  background: linear-gradient(
    90deg,
    var(--secondaryColor) 0%,
    var(--highlightColor) 50%,
    var(--accentColor) 100%
  );
}

/* Hauteur bornée plutôt qu'un rapport de forme : à pleine largeur de colonne,
   un 3/4 donnait des portraits de près de 500 px, qui écrasaient le nom et la
   fonction et n'en laissaient que trois par écran. Le clamp suit la largeur
   disponible sans jamais dépasser 300 px. */
.team-card .team-card-img {
  position: relative;
  width: 100%;
  height: clamp(230px, 24vw, 300px);
  display: grid;
  place-items: center;
  overflow: hidden;
  background-color: #dfe5ee;
}

/* Le cadrage est légèrement décalé vers le haut : les visages y tiennent sans
   que le sommet du crâne touche le bord. */
.team-card .team-card-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%;
}

.team-card .team-card-text {
  text-align: center;
  padding: 1.5rem 1.4rem 1.6rem;
}

.team-card .team-card-text h4 {
  font-family: var(--fontFamily-heading);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--mainColor);
  margin: 0 0 0.5rem;
  text-wrap: balance;
}

/* La fonction était écrite en cyan de la charte et en italique : 3,42:1 sur
   blanc, sous le seuil WCAG de 4,5:1 pour du petit texte, et l'italique en
   dégradait encore la lecture. Elle passe au gris de texte du site. */
.team-card .team-card-text p {
  font-family: var(--fontFamily-body);
  font-size: 0.92rem;
  line-height: 1.55;
  font-weight: 500;
  font-style: normal;
  color: var(--paragraphColor);
  margin: 0;
}

/* Deux membres n'ont pas encore de portrait : Drupal affiche alors une icône
   générique, qui ne remplit pas le cadre et décalait la carte. Le conteneur
   ci-dessus impose la hauteur et centre ce qu'il reçoit ; l'icône
   n'a plus qu'à être mise à l'échelle. */
.team-card .team-card-img > svg,
.team-card .team-card-img > i {
  font-size: 5rem;
  color: #b9c4d4;
}

/* ==========================================================================
   Réseaux sociaux des membres
   ========================================================================== */

/* Les icônes n'apparaissaient qu'au survol, superposées à la photo : elles
   étaient hors d'atteinte au doigt comme au clavier, et le voile noir qui les
   accompagnait masquait le portrait. Elles descendent sous le nom, visibles
   en permanence. */
.team-card .team-card-img .team-social-icons {
  position: static;
  opacity: 1;
  width: auto;
}

.team-card .team-social-icons {
  margin-top: 1rem;
  text-align: center;
}

.team-card .team-social-icons ul {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.team-card .team-social-icons ul li {
  display: block;
  margin: 0;
}

.team-card .team-social-icons ul li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 0.9rem;
  color: var(--mainColor);
  background-color: #eef2f9;
  text-decoration: none;
  transition: color var(--transition), background-color var(--transition);
}

.team-card .team-social-icons ul li a:hover,
.team-card .team-social-icons ul li a:focus-visible {
  color: var(--whiteColor);
  background-color: var(--mainColor);
}

/* Le voile sombre n'a plus d'objet : il ne servait qu'à faire ressortir les
   icônes au survol. */
.team-card .team-card-img::before {
  content: none;
}

/* ==========================================================================
   Adaptations
   ========================================================================== */

@media (max-width: 991.98px) {
  .ex-corps {
    padding: 2.25rem 0 3.25rem;
  }

  .presentation {
    padding: 2rem 1.4rem;
    margin-bottom: 2.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .team-card:hover,
  .team-card:focus-within {
    transform: none;
  }
}