/**
 * The few rules of this site that the design system does not cover.
 *
 * The CSP in .htaccess sets style-src 'self', so a style="..." attribute never
 * reaches the layout - custom rules have to come from a file. Values come from
 * css/tokens.css.
 */

/* Carousel for the project cards: two of them side by side, a strip of the
   neighbours left and right. lb-site.js clones the cards to make the loop
   endless; without it the rail stays a plain horizontal scroller. */
.lb-rail {
  position: relative;
  /* Two cards, three gaps and two strips fill the rail exactly. */
  --lb-card-width: calc((100% - 3 * var(--space-5)) / 2.5);
  --lb-peek: calc(var(--lb-card-width) / 4);
}

.lb-project-rail {
  display: flex;
  gap: var(--space-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* A card snaps in behind the strip on the left. */
  scroll-padding-left: calc(var(--lb-peek) + var(--space-5) + var(--space-1));
  scrollbar-width: thin;
  scrollbar-color: var(--border-control) transparent;
  /* Room for the focus ring, which sits 4px outside the card. */
  padding: var(--space-1);
  margin: calc(var(--space-1) * -1);
}

/* Once the arrows are there the scrollbar only gives the clones away. */
.lb-rail-ready .lb-project-rail {
  scrollbar-width: none;
}

/* Grows only while fewer cards than fit are there, so two of them still fill
   the row instead of leaving a gap. */
.lb-project-rail > * {
  position: relative;
  flex: 1 0 var(--lb-card-width);
  scroll-snap-align: start;
}

/* Arrows on the left and right edge, over the cards that are cut off there.
   They stay hidden until lb-site.js has wired them up and there is something
   to scroll - without JavaScript the rail still scrolls by touch and wheel. */
.lb-rail-btn {
  display: none;
  position: absolute;
  top: 50%;
  z-index: 1;
  /* The label is visually hidden, so the gap would sit empty. */
  gap: 0;
  padding: 0 var(--space-3);
  box-shadow: var(--shadow-md);
}

.lb-rail-ready .lb-rail-btn {
  display: inline-flex;
}

/* Centred on the strip of the neighbouring card. */
.lb-rail-prev {
  left: calc(var(--lb-peek) / 2 + var(--space-1));
  transform: translate(-50%, -50%);
}

.lb-rail-next {
  right: calc(var(--lb-peek) / 2 + var(--space-1));
  transform: translate(50%, -50%);
}

/* Cards that are only partly visible step back. lb-site.js sets the class;
   without it every card stays fully opaque. */
.lb-project-aside {
  opacity: 0.7;
}

@media (prefers-reduced-motion: no-preference) {
  .lb-project-rail > * {
    transition: opacity 0.2s;
  }
}

.lb-rail-prev svg {
  transform: rotate(180deg);
}

/* One card, two gaps and two strips fill the rail on a phone. */
@media (max-width: 640px) {
  .lb-rail {
    --lb-card-width: calc((100% - 2 * var(--space-5)) / 1.25);
    --lb-peek: calc(var(--lb-card-width) / 8);
  }
}

.lb-project-shot {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-xl);
  background: var(--surface);
}

.lb-project-domain {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line);
  color: var(--text-muted);
}

/* Visually hidden, still read out by screen readers. The element is taken out
   of the flow, so its parent needs position: relative - otherwise it hangs on
   the viewport and drags the page sideways inside a horizontal scroller. */
.lb-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* The error summary and the send failure stand above the form as its siblings,
   and .lb-form spaces only its own children. The script that moves the focus
   sits in between, so the selector has to be the general sibling one. */
.lb-error-summary ~ .lb-form,
.lb-send-failure ~ .lb-form {
  margin-top: var(--space-6);
}

/* Same width and focus ring as the error summary. */
.lb-send-failure {
  max-width: var(--content);
}

.lb-send-failure:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}