/**
 * Composant  : Study
 * Description : Section étude de cas avec chiffres clés, citation et photo
 * Auteur      : Équipe Marketing
 * URL         : linkavie.com
 * Thème       : Linkavie terra
 * Tags        : étude de cas, chiffres, citation, client
 * Version     : 1.0
 */

/* ─────────────────────────────────────────
   lk-study — BLOCK
   ───────────────────────────────────────── */
.lk-study {
  padding: var(--lk-section-padding-y) clamp(20px, 4vw, 48px);
  background: var(--lk-color-page);
  transition: background var(--lk-transition-normal);
}

/* ─────────────────────────────────────────
   lk-study — ELEMENTS
   ───────────────────────────────────────── */
.lk-study__card {
  display: flex;
  flex-direction: column;
  max-width: var(--lk-container-max);
  margin: 0 auto;
  border-radius: var(--lk-border-radius-lg);
  background: var(--lk-color-marine);
  color: var(--lk-color-white);
  overflow: hidden;
  transition: background var(--lk-transition-normal);
}

body.dark .lk-study__card {
  background: var(--lk-color-dark-section-alt);
}

body.dark .lk-study__num {
  color: var(--lk-color-terra);
}

.lk-study__content {
  flex: 1 1 50%;
  padding: 28px 24px;
}

.lk-study__tag {
  font-size: 11px;
  color: var(--lk-color-terra);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-weight: var(--lk-font-weight-medium);
  margin-bottom: 6px;
}

.lk-study__title {
  font-size: clamp(22px, 3vw, 28px);
  font-weight: var(--lk-font-weight-semibold);
  line-height: var(--lk-line-height-tight);
  color: var(--lk-color-cream);
  margin-bottom: 35px;
}

.lk-study__stats {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 30px;
  padding: 0;
  list-style: none;
}

.lk-study__stat {
  text-align: center;
}

.lk-study__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0 auto 6px;
  border-radius: 50%;
  color: var(--lk-color-cream);
}

.lk-study__img {
  width: 44px;
  height: 44px;
}

.lk-study__num {
  display: block;
  font-size: 22px;
  font-weight: var(--lk-font-weight-bold);
  color: var(--lk-color-cream);
  line-height: 1.1;
}

.lk-study__lbl {
  display: block;
  font-size: 14px;
  color: var(--lk-color-white);
  margin-top: 2px;
  text-wrap: balance;
}

.lk-study__quote {
  padding: 28px 24px;
  border-radius: var(--lk-border-radius-lg);
  background: var(--lk-color-peach);
}

.lk-study__quote-badge {
  display: inline-block;
  margin-bottom: 14px;
  padding: 3px 12px;
  border-radius: var(--lk-border-radius-full);
  background: var(--lk-color-terra);
  color: var(--lk-color-white);
  font-size: 11px;
}

.lk-study__quote-body {
  display: flex;
  gap: 14px;
}

.lk-study__quote-mark {
  flex-shrink: 0;
  color: var(--lk-color-terra);
  font-size: 56px;
  font-weight: var(--lk-font-weight-bold);
  line-height: 0.9;
}

.lk-study__quote-text {
  font-size: 18px;
  font-weight: var(--lk-font-weight-semibold);
  color: var(--lk-color-text-hi);
  line-height: 1.6;
  font-style: italic;
}

.lk-study__quote-author {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
  margin-top: 16px;
}

.lk-study__quote-name {
  color: var(--lk-color-text-hi);
  font-size: 14px;
  font-weight: var(--lk-font-weight-bold);
}

.lk-study__quote-role {
  color: var(--lk-color-text-lo);
  font-size: 13px;
}

body.dark .lk-study__quote {
  background: var(--lk-color-dark-surface);
}

.lk-study__cta {
  margin-top: 24px;
  color: var(--lk-color-white);
}

.lk-study__media {
  position: relative;
  flex: 1 1 50%;
  min-height: 180px;
}

.lk-study__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ─────────────────────────────────────────
   RESPONSIVE — mobile-first
   ───────────────────────────────────────── */
@media (min-width: 1025px) {
  .lk-study__stats {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px 20px;
  }

  .lk-study__stat {
    flex: 1 1 120px;
  }
}

@media (min-width: 769px) {
  .lk-study__card {
    flex-direction: row;
  }

  .lk-study__content {
    padding: 40px 44px;
  }
}