/* ---------------------------------------------------------------
   Portfolio Section — spacer-first version (clean)
   Strategy: prepend <li class="card-spacer"> and size it in CSS (no margin hack, no mask)
---------------------------------------------------------------- */

/* Tokens */
.portfolio-section {
  --container-max: 1040px;
  /* your standard container width */
  --card-gap: 24px;
  /* system gutter */
  --card-shadow-bleed: 12px;
  --arrow-offset: 24px;
  --section-min-h: 560px;
  --track-pad-left: var(--card-shadow-bleed);
  /* left padding on track */
  --card-w: 260px;
  /* single source of truth for card width */

  background: var(--col-bg-light);
  position: relative;
  overflow-x: hidden;
  /* clip extra cards at right fold */
  min-height: var(--section-min-h);
}

/* Text content (constrained to container, below rail) */
.portfolio-content {
  position: relative;
  z-index: 0;
  /* text BELOW the rail */
  height: var(--section-min-h);
  display: grid;
  align-content: center;
  pointer-events: auto;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-inline: 16px;
}

.portfolio-txt {
  margin: 0;
  color: var(--col-secondary);
  max-width: 312px;
  display: grid;
  gap: 12px;
  transition: opacity 0.25s ease;
}

#portfolio-txt h2 {
  font: var(--h2-font);
  letter-spacing: var(--tracking--035);
  margin: 0;
}

#portfolio-txt p {
  font: var(--body-font);
  margin: 0;
}

/* When the rail is engaged (not at the start), fade the text */
#portfolio.is-engaged .portfolio-txt,
.portfolio-section.is-engaged .portfolio-txt {
  opacity: 0;
}

@media (max-width: 900px) {
  .portfolio-txt {
    max-width: none;
  }
}

/* ---------------------------------------------------------------
   Full-bleed rail
---------------------------------------------------------------- */
.portfolio-rail-bleed {
  position: absolute;
  inset: 0;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  pointer-events: auto;
}

.portfolio-rail {
  position: relative;
  z-index: 10;
  /* rail ABOVE text */
  display: flex;
  align-items: center;
  height: 100%;
}

/* Horizontal track */
.card-track {
  display: flex;
  gap: var(--card-gap);
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  padding: var(--card-shadow-bleed)
    calc(var(--arrow-offset) + var(--card-shadow-bleed))
    var(--card-shadow-bleed) var(--track-pad-left);
  margin: 0;
  list-style: none;
  -webkit-overflow-scrolling: touch;
  /* iOS momentum scrolling */
  overflow-anchor: none;
  overscroll-behavior-x: contain;
  /* prevent page fling while swiping */
  /* Wash panel over text: default off */
  background-color: transparent;
  transition:
    background-color 0.3s ease,
    backdrop-filter 0.3s ease;
}

/* Hide scrollbar visuals (still scrollable) */
.card-track::-webkit-scrollbar {
  display: none;
}

.card-track {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* Real lead-in spacer before the first real card */
.card-track > .card-spacer {
  flex: 0 0
    clamp(
      0px,
      calc(
        50vw - (var(--card-w) / 2) - var(--card-gap) - var(--track-pad-left)
      ),
      100vw
    );
  width: clamp(
    0px,
    calc(50vw - (var(--card-w) / 2) - var(--card-gap) - var(--track-pad-left)),
    100vw
  );
  min-width: clamp(
    0px,
    calc(50vw - (var(--card-w) / 2) - var(--card-gap) - var(--track-pad-left)),
    100vw
  );
  list-style: none;
  pointer-events: none;
  scroll-snap-align: start;
  /* anchor initial snap at the spacer (scrollLeft:0) */
}

/* Rail background wash when engaged (covers text beneath the rail) */
#portfolio.is-engaged .card-track {
  background-color: rgba(255, 255, 255, 0.92);
  /* tune alpha to taste */
  backdrop-filter: blur(4px);
  /* optional frosted effect */
}

/* Fallback scope */
.portfolio-section.is-engaged .card-track {
  background-color: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(4px);
}

/* (removed) engaged spacer shrink — keep spacer static to avoid jitter */

@media (prefers-reduced-motion: reduce) {
  .card-track > .card-spacer {
    transition: none;
  }

  #portfolio #portfolio-txt {
    transition: none;
  }
}

/* On small screens, start flush */
@media (max-width: 767px) {
  .card-track > .card-spacer {
    flex-basis: 0;
    width: 0;
    min-width: 0;
  }
}

/* Each item snaps and stays fixed width to match card size */
.card-item {
  scroll-snap-align: start;
  flex: 0 0 var(--card-w);
}

/* Arrows pinned to viewport edge within the full-bleed rail */
.rail-arrow {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  z-index: 5;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--col-border-cards);
  background: var(--col-white);
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  pointer-events: auto;
}

.rail-arrow--right {
  right: var(--arrow-offset);
}

.rail-arrow--left {
  left: var(--arrow-offset);
}

/* Edge fade hint */
.rail-edge-fade--right {
  position: absolute;
  inset: 0 0 0 auto;
  width: calc(var(--arrow-offset) + var(--card-shadow-bleed));
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0),
    var(--col-bg-light)
  );
}

/* ---------------------------------------------------------------
   Cards (base + elements)
---------------------------------------------------------------- */
.card {
  width: var(--card-w);
  height: 330px;
  border: 1px solid var(--col-border-cards);
  border-radius: 8px;
  background-color: var(--col-white);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease;
}

.card:hover {
  transform: translateY(1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.card__logo {
  width: 60px;
  height: 60px;
  border: 1px solid var(--col-border-cards);
  border-radius: 6px;
  background-color: var(--col-white);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin: 16px 0 0 16px;
  overflow: hidden;
}

.card__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.card__title {
  font: var(--card-header-font);
  color: var(--col-dark-blue);
  margin: 24px 16px 0 16px;
}

.card__sub {
  font: var(--card-sub-font);
  color: var(--col-primary);
  font-style: italic;
  margin: 4px 16px 0 16px;
}

.card__body {
  font: var(--card-body-font);
  color: var(--col-dark-grey);
  margin: 10px 16px 0 16px;
  display: -webkit-box;
  line-clamp: 5;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}