/* ==========================================================================
   Competences — horizontal scroll-snap slider with progress bar + arrows
   ========================================================================== */

.competences { padding: 96px 0; }
.competences .section-head { margin-bottom: 40px; }
.competences__lead { max-width: 720px; margin-top: 16px; }

.competences__slider { position: relative; }

/* Horizontal track */
.competences__track {
  display: flex; gap: 24px; align-items: flex-start; /* cards hug their own content */
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 4px; margin: -4px; /* room for card shadow on hover */
}
.competences__track::-webkit-scrollbar { display: none; }

/* Card */
.comp-card {
  position: relative; overflow: hidden;
  flex: 0 0 500px; scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 16px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 32px;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.comp-card:hover { border-color: var(--red); box-shadow: var(--shadow-sm); }
/* Decorative flat circle (red @ 20%) bottom-right */
.comp-card::after {
  content: ""; position: absolute; right: -30px; bottom: -30px;
  width: 96px; height: 96px; border-radius: 50%;
  background: var(--red); opacity: .2;
  pointer-events: none;
}

.comp-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.comp-card__label { color: var(--red); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.comp-card__num {
  font-family: "Inter", "Inter Fallback", system-ui, sans-serif;
  font-size: 40px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
  color: var(--red); opacity: .2; letter-spacing: -.02em;
}

.comp-card h3 { font-size: 20px; font-weight: 700; color: var(--heading); letter-spacing: -.01em; line-height: 1.2; }
.comp-card p { font-size: 14px; line-height: 22px; color: var(--text-soft); }
.comp-card__link { margin-top: 8px; align-self: flex-start; }
/* Stretched link — the whole card is clickable, but the visible CTA keeps the
   accessible link text. Overlay sits above card content (z-index) so clicks
   land on the link; the decorative circle is pointer-events:none anyway. */
.comp-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }

/* Controls — progress bar (left, aligned with first card text) + arrows (right) */
.competences__controls {
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px; margin-top: 28px; padding-left: 32px;
}
.competences__progress {
  position: relative; flex: none; width: 250px; height: 6px;
  background: var(--border); border-radius: 999px; overflow: hidden;
  cursor: pointer; touch-action: none;
}
.competences__progress-bar {
  position: absolute; left: 0; top: 0; height: 100%;
  width: 30%; min-width: 48px;
  background: var(--red); border-radius: 999px;
  will-change: transform;
}

.competences__nav { display: flex; gap: 12px; flex: none; }
.competences__btn {
  width: 44px; height: 44px; flex: none; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease, opacity .15s ease;
}
.competences__btn:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
.competences__btn:disabled { opacity: .3; cursor: default; }
.competences__btn:disabled:hover { background: var(--surface); border-color: var(--border); color: var(--text); }
.competences__btn svg { width: 20px; height: 20px; }

@media (max-width: 720px) {
  .competences { padding: 56px 0; }
  .comp-card { flex-basis: 85vw; }
  .competences__controls { padding-left: 0; }
  .competences__progress { width: 160px; }
}