/* ==========================================================================
   Section: Projects — Figma 69:660
   Centred heading, then a 300px-card slider that bleeds past the container,
   with arrows and a progress bar beneath.
   ========================================================================== */

.trustav-projects {
  padding-block: clamp(3rem, 6vw, 5.625rem);
  overflow: hidden;
}

/* Updated Figma 69:660 — heading left (wraps at ~506px), text link right,
   both sitting on one baseline row 70px above the slider. */
.trustav-projects__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-lg) var(--space-2xl);
  margin-block-end: clamp(2.5rem, 5vw, 4.375rem);
}

.trustav-projects__title {
  flex: 0 1 36rem;
  margin: 0;
  color: var(--c-black);
}

.trustav-projects__head .trustav-text-link {
  flex: 0 0 267px; /* Figma 69:664 */
}

@media (max-width: 640px) {
  .trustav-projects__head .trustav-text-link {
    flex-basis: 100%;
  }
}

.trustav-projects__slider {
  display: flex;
  flex-direction: column;
  gap: 60px;
}

/* --- Track --------------------------------------------------------------- */
/* Two classes deep so the reset's ul[role="list"] { padding: 0 } loses. */
.trustav-projects .trustav-projects__track {
  display: flex;
  gap: 20px;
  margin: 0;
  /* Align the first card with the container's content edge, let the rest run
     off-screen — Figma 176:2501 starts the row at x = 100. */
  padding: 0 max(var(--gutter), calc((100% - var(--container)) / 2));
  scroll-padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2));
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.trustav-projects__track::-webkit-scrollbar {
  display: none;
}

.trustav-projects__card {
  flex: 0 0 300px;
  scroll-snap-align: start;
}

.trustav-projects__link {
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: var(--c-black);
}

.trustav-projects__media {
  display: block;
  height: 397px;
  overflow: hidden;
  background-color: var(--c-neutral-4);
}

.trustav-projects__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}

.trustav-projects__link:hover .trustav-projects__media img {
  transform: scale(1.04);
}

/* Figma: single line, ellipsis on overflow. */
.trustav-projects__label {
  display: block;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Controls ------------------------------------------------------------ */
.trustav-projects__controls {
  display: flex;
  align-items: center;
  gap: 38px;
}

.trustav-projects__progress {
  position: relative;
  flex: 1;
  height: 1px;
  background-color: var(--c-neutral-3);
  overflow: hidden;
}

.trustav-projects__progress-bar {
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 25%;
  background-color: var(--c-accent);
  transition: transform var(--dur) var(--ease), width var(--dur) var(--ease);
}

/* Arrow component — Figma 67:38: square, accent border, chevron rotated. */
.trustav-arrow {
  flex-shrink: 0;
  border-color: var(--c-accent);
  border-radius: 0;
}

.trustav-arrow svg {
  width: 16px;
  height: 16px;
}

.trustav-arrow--prev svg {
  transform: rotate(90deg);
}

.trustav-arrow--next svg {
  transform: rotate(-90deg);
}

.trustav-arrow:hover:not(:disabled) {
  background-color: var(--c-accent);
  border-color: var(--c-accent);
}

.trustav-arrow:hover:not(:disabled) svg path {
  stroke: var(--c-white);
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 768px) {
  .trustav-projects__slider {
    gap: var(--space-2xl);
  }

  .trustav-projects__card {
    flex-basis: 260px;
  }

  .trustav-projects__media {
    height: 344px;
  }

  .trustav-projects__controls {
    gap: var(--space-lg);
  }
}

@media (max-width: 480px) {
  .trustav-projects__card {
    flex-basis: 78vw;
  }

  .trustav-projects__media {
    height: 60vw;
  }
}