/* =========================================================================
   Card Clapasson & Fils — composant réutilisable image + texte + bouton opt.
   Basé sur :
     - Frame Figma 4001:2003 (variante DARK — sur fond noir : titre blanc,
       description blanche)
     - Frame Figma 4019:2281 (variante LIGHT — sur fond clair : titre + desc
       en color-secondary noir)
   Le composant ne pose pas de fond lui-même : il s'adapte au fond hérité.
   ========================================================================= */

.cf-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4); /* 40 → 32 → 32 px aux 3 BP */
  font-family: var(--font-sans);
}

/* ---- Media : image tiltée (même clip-path que le callout hero) --------- */
.cf-card__media {
  width: 100%;
  aspect-ratio: 676 / 411;
}
.cf-card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Polygone tilté — vertices Figma 4001:2004 / 4019:2282 sur canvas 676×412. */
  clip-path: polygon(16.5% 0, 100% 38.3%, 90.9% 100%, 0 100%);
}
/* Effet miroir horizontal sur l'image (Figma : scaleX -1 sur le node IMAGE
   — cf. amenagements 4019:2274 cards). Le clip-path reste inchangé. */
.cf-card--image-flip .cf-card__image {
  transform: scaleX(-1);
}

/* ---- Body : titre + description (gap 20 dans Figma) -------------------- */
.cf-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3); /* 20 px tous BP */
}

.cf-card__title {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
}

.cf-card__description {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.cf-card__description p {
  margin: 0 0 var(--sp-2);
}
.cf-card__description p:last-child {
  margin-bottom: 0;
}
.cf-card__description strong {
  font-weight: var(--fw-bold);
}

/* ---- Bouton optionnel — wrap pour le décoller du body ------------------ */
.cf-card__action {
  display: flex;
}

/* ---- Variante LIGHT (par défaut) — titre + desc en color-secondary ---- */
.cf-card--light .cf-card__title,
.cf-card--light .cf-card__description {
  color: var(--color-secondary, #1d1d1b);
}

/* ---- Variante DARK — titre + description blancs ----------------------- */
.cf-card--dark .cf-card__title,
.cf-card--dark .cf-card__description {
  color: var(--color-white, #fff);
}

/* =========================================================================
   Wrapper `cf-cards-row` — rangée de cards côte-à-côte (Figma 4019:2274).
   Section autonome avec padding-block, grille 2-col → 1-col ≤1024.
   ========================================================================= */
.cf-cards-row {
  padding-block: var(--section-py);
  background: var(--color-white, #fff);
}
/* Variante dark — fond noir, cartes utilisées en `variant: 'dark'`
   (titre + description blancs gérés par .cf-card--dark) */
.cf-cards-row--theme-dark {
  background: var(--color-secondary, #1d1d1b);
}
.cf-cards-row__inner {
  margin-inline: auto;
  padding-inline: var(--page-px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 80px;
}
@media (max-width: 1024px) {
  .cf-cards-row__inner {
    grid-template-columns: 1fr;
    gap: var(--sp-5);
  }
}