/**
 * Composant  : Sector
 * Description : Grille de secteurs d'activité avec CTA terra
 * Auteur      : Équipe Marketing
 * URL         : linkavie.com
 * Thème       : Linkavie terra
 * Tags        : sector, secteurs, grille, hover
 * Version     : 1.0
 */

/* ─────────────────────────────────────────
   lk-sector — BLOCK
   ───────────────────────────────────────── */
.lk-sector {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ─────────────────────────────────────────
   lk-sector — ELEMENTS
   ───────────────────────────────────────── */
.lk-sector__item {
  flex: 1 1 160px;
  background: var(--lk-color-card-bg);
  border: 0.5px solid var(--lk-color-border);
  border-radius: 9px;
  padding: 16px 18px;
  text-decoration: none;
  display: block;
  transition:
    background var(--lk-transition-normal),
    border-color 0.2s,
    transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.22s;
}

.lk-sector__item:hover {
  border-color: var(--lk-color-terra);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px var(--lk-color-terra-light-shadow);
}

.lk-sector__title {
  font-size: 15px;
  font-weight: var(--lk-font-weight-semibold);
  color: var(--lk-color-text-hi);
  margin-bottom: 4px;
  text-wrap: balance;
}

.lk-sector__desc {
  font-size: 14px;
  color: var(--lk-color-text-lo);
  text-wrap: balance;
}

body.dark .lk-sector__item:not(.lk-sector__item--cta) .lk-sector__title,
body.dark .lk-sector__item:not(.lk-sector__item--cta) .lk-sector__desc {
  color: var(--lk-color-white);
}

.lk-sector__arrow {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--lk-color-white);
  color: var(--lk-color-terra);
  font-size: 18px;
  line-height: 1;
  text-decoration: none;
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.22s;
}

/* Tout le bloc est le lien : la flèche réagit au survol et au focus du bloc */
.lk-sector__item--cta:hover .lk-sector__arrow,
.lk-sector__item--cta:focus-visible .lk-sector__arrow {
  transform: scale(1.1);
  box-shadow: 0 4px 12px var(--lk-color-terra-shadow);
}

.lk-sector__item--cta:focus-visible {
  outline: 2px solid var(--lk-color-text-hi);
  outline-offset: 3px;
}

/* ─────────────────────────────────────────
   lk-sector — MODIFIERS
   ───────────────────────────────────────── */
.lk-sector__item--cta {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  flex: 2 1 320px;
  /* dégradé orange (100 % à gauche → 0 % à droite) posé sur l'image */
  background-color: var(--lk-color-terra);
  background-image:
    linear-gradient(to right, var(--lk-color-terra) 0%, var(--lk-color-terra-transparent) 90%),
    url('../../img/secteurs2.webp');
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  border: none;
}

.lk-sector__item--cta:hover {
  border-color: transparent;
  transform: none;
  box-shadow: none;
}

.lk-sector__item--cta .lk-sector__title {
  font-size: 16px;
  color: var(--lk-color-white);
}

.lk-sector__item--cta .lk-sector__desc {
  max-width: 15em;
  font-size: 15px;
  color: var(--lk-color-white);
}

/* ─────────────────────────────────────────
   RESPONSIVE — mobile-first
   ───────────────────────────────────────── */
@media (min-width: 641px) {
  .lk-sector__item--cta {
    flex: 2 1 320px;
  }
}

/* ─────────────────────────────────────────
   ACCESSIBILITÉ — mouvement réduit
   ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .lk-sector__item,
  .lk-sector__arrow {
    transition: none;
  }

  .lk-sector__item:hover,
  .lk-sector__item--cta:hover .lk-sector__arrow,
  .lk-sector__item--cta:focus-visible .lk-sector__arrow {
    transform: none;
  }
}