/**
 * Block: Partners — « En activité avec »
 *
 * Références commerciales actives, sur fond crème :
 *   - eyebrow doré + titre serif + paragraphe Spectral à droite (grammaire
 *     partagée avec `services`)
 *   - trois plaques FERMÉES : fond blanc, bordure beige 1 px, angles droits,
 *     aucune ombre portée (dossier de passation v1.0, §04)
 *
 * Deux points à ne pas « corriger » :
 *
 *   1. Aucun filtre sur les logos. La version signataires de ce bloc les
 *      passait en `grayscale(1)` à 62 % d'opacité. Le dossier interdit
 *      d'altérer un logo, et deux des trois références sont des emblèmes
 *      d'ambassade : les désaturer serait une modification d'armoiries
 *      officielles, pas un parti pris graphique.
 *
 *   2. Le nom ne se tronque jamais. Pas de `line-clamp`, pas de
 *      `text-overflow`, pas de hauteur fixe sur la plaque : « Ambassade de la
 *      République populaire de Chine au Bénin » doit rester lisible en entier,
 *      y compris à 320 px.
 *
 * Reuse design tokens (--cauris-*) declared in style.css.
 */

/* ---------------------------------------------------------------
 * Section frame
 * --------------------------------------------------------------- */

.partners-block {
  position: relative;
  padding: 6.5rem 0 6rem;
  background: var(--cauris-bg, #F8F4EC);
  color: var(--cauris-ink, #1B1B1B);

  --pb-plaque-bg:  #FFF;    /* « fond beige ou blanc » — blanc, pour détacher
                               la plaque du crème de la section */
  --pb-border:     #E4D9C3; /* beige discret, un cran sous --cauris-bg */
  --pb-gap:        1.5rem;  /* 24 px */
  --pb-pad:        1.75rem; /* 28 px, dans la fourchette 24–32 */
  --pb-visual-h:   120px;   /* zone visuelle commune, fourchette 112–128 */
  --pb-logo-h:     80px;    /* hauteur logo, fourchette 72–88 */
}

/* ---------------------------------------------------------------
 * Header — eyebrow + titre + description
 * --------------------------------------------------------------- */

.partners-block__header {
  align-items: end;
  margin: 0 0 3.5rem;
}

.partners-block__head {
  max-width: 720px;
}

.partners-block__side {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding-bottom: .25rem;
}

.partners-block__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  margin: 0 0 1rem;
  font-family: var(--cauris-font-sans);
  font-size: var(--cauris-eyebrow-fs, .75rem);
  font-weight: var(--cauris-eyebrow-weight, 600);
  letter-spacing: var(--cauris-eyebrow-tracking, .2em);
  text-transform: uppercase;
  color: var(--cauris-gold-dark, #8E6C28);
}
.partners-block__eyebrow::before {
  content: "";
  display: inline-block;
  width: 1.75rem;
  height: 1px;
  background: var(--cauris-gold-1, #BF953F);
}

.partners-block__heading {
  margin: 0;
  font-family: var(--cauris-font-serif);
  font-weight: 700;
  font-size: clamp(1.9rem, 3.6vw, 2.85rem);
  line-height: 1.15;
  letter-spacing: -.01em;
  /* Encre par défaut ; bascule en bleu profond si le H2 porte
     .cauris-heading--deep (voir style.css). */
  color: var(--cauris-heading-color, var(--cauris-ink, #1B1B1B));
}

.partners-block__description {
  margin: 0;
  font-family: var(--cauris-font-spectral, Georgia, serif);
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--cauris-ink-soft, #4A4A4A);
}
.partners-block__description p { margin: 0; }
.partners-block__description p + p { margin-top: .65rem; }

/* ---------------------------------------------------------------
 * Grille des plaques — 3 / 3 / 1
 * --------------------------------------------------------------- */

.partners-block__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: var(--pb-gap);
  margin: 0;
  padding: 0;
}

.partners-block__card {
  display: flex;
  background: var(--pb-plaque-bg);
  border: 1px solid var(--pb-border);
  border-radius: 0; /* angles droits, explicitement */
  box-shadow: none;
}

/* La plaque entière est cliquable quand un lien est renseigné ; sinon le même
   conteneur est rendu en <div>, d'où la classe partagée. */
.partners-block__card-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: .75rem;
  width: 100%;
  padding: var(--pb-pad);
  color: var(--cauris-ink, #1B1B1B);
  text-decoration: none;
  text-align: center;
}

/* Zone visuelle commune : hauteur réservée pour que les noms s'alignent d'une
   plaque à l'autre, même quand un logo manque. Absente du DOM lorsque aucune
   référence de la série ne porte de logo (cf. template.php). */
.partners-block__visual {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--pb-visual-h);
}

.partners-block__logo {
  display: block;
  max-height: var(--pb-logo-h);
  max-width: 80%;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: center center;
}

.partners-block__name {
  font-family: var(--cauris-font-sans);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -.005em;
  color: var(--cauris-ink, #1B1B1B);
  /* Dénomination complète, jamais tronquée : pas de line-clamp ni d'ellipse. */
  overflow-wrap: break-word;
  text-wrap: balance;
}

.partners-block__country {
  font-family: var(--cauris-font-sans);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cauris-gold-dark, #8E6C28);
}

/* Hover : la bordure se réchauffe, rien d'autre. Pas d'ombre (interdite), pas
   de filtre sur le logo. */
@media (hover: hover) {
  .partners-block__card:hover {
    border-color: var(--cauris-gold-1, #BF953F);
  }
}

.partners-block__card:focus-within {
  border-color: var(--cauris-gold-dark, #8E6C28);
}
.partners-block__card-link:focus-visible {
  outline: 2px solid var(--cauris-gold-dark, #8E6C28);
  outline-offset: -4px;
}

.partners-block__card,
.partners-block__card-link {
  transition: border-color var(--cauris-dur-base, .25s) var(--cauris-ease, cubic-bezier(.22, .61, .36, 1));
}

/* ---------------------------------------------------------------
 * Brouillon — rendu dans l'éditeur uniquement
 * --------------------------------------------------------------- */

.partners-block__card--draft {
  border-style: dashed;
}

.partners-block__draft-badge {
  display: inline-block;
  margin-top: .25rem;
  padding: .2rem .55rem;
  font-family: var(--cauris-font-sans);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cauris-gold-dark, #8E6C28);
  background: rgba(191, 149, 63, .1);
  border: 1px solid rgba(191, 149, 63, .35);
}

/* ---------------------------------------------------------------
 * Responsive — 3 colonnes jusqu'à 768 px, 1 colonne en dessous
 * --------------------------------------------------------------- */

@media (max-width: 991.98px) {
  /* Tablette : toujours trois plaques, gouttière resserrée à 16 px. */
  .partners-block {
    padding: 5rem 0 4.5rem;
    --pb-gap:      1rem;
    --pb-pad:      1.5rem;
    --pb-visual-h: 112px;
    --pb-logo-h:   72px;
  }
  .partners-block__header {
    align-items: start;
    margin-bottom: 2.5rem;
  }
  .partners-block__side { margin-top: 1.25rem; padding-bottom: 0; }
}

@media (max-width: 767.98px) {
  .partners-block {
    --pb-gap: 1.25rem; /* 20 px, fourchette mobile 16–24 */
    --pb-pad: 1.5rem;
  }
  .partners-block__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 575.98px) {
  .partners-block { padding: 4rem 0; }
  /* Pas de réduction du titre ici : la clamp du §08 plafonne déjà à 30,4 px
     en mobile, soit le bas de la fourchette 28–32 px. La rabaisser sortirait
     du gabarit. */
  .partners-block__description { font-size: .98rem; }
  .partners-block__name { font-size: .95rem; }
}

/* ---------------------------------------------------------------
 * Réduction des animations
 * --------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .partners-block__card,
  .partners-block__card-link {
    transition: none;
  }
}