/**
 * Composant  : Card
 * Description : Cartes d'expertises numérotées avec titre, description et lien
 * Auteur      : Équipe Marketing
 * URL         : linkavie.com
 * Thème       : Linkavie terra
 * Tags        : card, expertise, hover, animation
 * Version     : 1.0
 */

/* ─────────────────────────────────────────
   lk-card — BLOCK
   ───────────────────────────────────────── */
.lk-card {
  background: var(--lk-color-card-bg);
  border: 0.5px solid var(--lk-color-border);
  border-radius: 11px;
  padding: 24px;
  flex: 1 1 210px;
  transition:
    background var(--lk-transition-normal),
    border-color var(--lk-transition-normal),
    transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.25s;
}

body:not(.dark) .lk-card {
  border-top: 2.5px solid var(--lk-color-terra);
}

.lk-card {
  position: relative;
  cursor: pointer;
}

.lk-card:hover {
  background: var(--lk-color-terra);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px var(--lk-color-terra-hover-shadow);
  border-color: var(--lk-color-terra);
}

/* ─────────────────────────────────────────
   lk-card — ELEMENTS
   ───────────────────────────────────────── */
.lk-card__num {
  font-size: 11px;
  color: var(--lk-color-terra);
  font-weight: var(--lk-font-weight-medium);
  margin-bottom: 10px;
  letter-spacing: 0.5px;
}

/* TODO: ajouter dans le main */
.lk-card__icon {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  width: 44px;
  height: 44px;
  margin : 8px;
 }


.lk-card__title {
  font-size: 17px;
  font-weight: var(--lk-font-weight-semibold);
  color: var(--lk-color-text-hi);
  margin-bottom: 8px;
}

.lk-card__desc {
  font-size: 15px;
  color: var(--lk-color-text-lo);
  line-height: 1.6;
}

.lk-card__link {
  font-size: 12px;
  color: var(--lk-color-terra);
  margin-top: 14px;
  display: block;
  text-decoration: none;
  transition: color var(--lk-transition-fast);
}

/* Lien étendu : toute la carte est cliquable via le lien « En savoir plus » */
.lk-card__link::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.lk-card__link:focus-visible::after {
  outline: 2px solid var(--lk-color-terra);
  outline-offset: 2px;
}

.lk-card__link:hover {
  color: var(--lk-color-text-hi);
}

body.dark .lk-card__title,
body.dark .lk-card__desc {
  color: var(--lk-color-white);
}

body.dark .lk-card__link:hover {
  color: #ffffff;
}

/* ─────────────────────────────────────────
   lk-card — HOVER : fond orange, texte blanc
   ───────────────────────────────────────── */
.lk-card__num,
.lk-card__title,
.lk-card__desc {
  transition: color 0.4s ease;
}

.lk-card .lk-card__icon {
  transition: filter 0.4s ease;
}

.lk-card:hover .lk-card__icon {
  filter: brightness(0) invert(1);
}

.lk-card:hover .lk-card__num,
.lk-card:hover .lk-card__title,
.lk-card:hover .lk-card__desc,
.lk-card:hover .lk-card__link {
  color: var(--lk-color-white);
}

/* ─────────────────────────────────────────
   ACCESSIBILITÉ — mouvement réduit
   ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .lk-card,
  .lk-card__num,
  .lk-card__title,
  .lk-card__desc,
  .lk-card__link,
  .lk-card .lk-card__icon {
    transition: none;
  }

  .lk-card:hover {
    transform: none;
  }
}