/* ==========================================================================
   Projects preview section — solid canvas, centered heading,
   3-card paginated grid with token-drawn SVG visuals. No gradients.
   ========================================================================== */

/* Section container: solid active-mode canvas, anchor offset for fixed header */
.projects-preview {
  padding: var(--space-huge);
  background-color: var(--c-canvas);
  scroll-margin-top: calc(var(--space-huge) + var(--space-sm));
}

/* Inner width cap — matches Lab preview rhythm */
.projects-preview__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-huge);
  max-width: 80em;
  margin: 0 auto;
}

/* Heading group — centered (screenshot cue) */
.projects-preview__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  max-width: 40em;
  text-align: center;
}

/* Section title — display-xl */
.projects-preview__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 36px;      /* display-xl */
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.8px;
  color: var(--c-text-primary);
}

/* Section subtitle — body-lg */
.projects-preview__subtitle {
  margin: 0;
  font-family: var(--font-body);
  font-size: 18px;      /* body-lg */
  font-weight: 360;
  line-height: 1.55;
  color: var(--c-text-secondary);
}

/* Card grid — 3 columns; JS shows one page of 3 at a time */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-xl);
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.projects-grid > li {
  display: flex;
}

/* Explicit hidden rule — overrides display:flex above */
.projects-grid > li[hidden] {
  display: none;
}

/* Page-change fade (only after first render) */
.projects-grid.is-paging > li:not([hidden]) {
  animation: project-card-in 0.25s ease-out;
}

@keyframes project-card-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* --------------------------------------------------------------------------
   Project card — card-light / card-dark, whole card clickable
   -------------------------------------------------------------------------- */

.project-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  width: 100%;
  box-sizing: border-box;
  padding: var(--space-xl);
  background-color: var(--c-canvas-soft);
  color: var(--c-text-primary);
  border: 1px solid var(--c-hairline);
  border-radius: var(--rounded-lg);
}

/* Card hover / keyboard focus: accent border */
.project-card:hover,
.project-card:focus-within {
  border-color: var(--c-accent);
}

/* Visual image area — engineered SVG on canvas, dot-grid backdrop */
.project-card__visual {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background-color: var(--c-canvas);
  border: 1px solid var(--c-hairline);
  border-radius: var(--rounded-md);
}

.project-card__visual svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Tag pill — pill-accent-light / pill-accent-dark, overlaid bottom-left */
.project-card__tag {
  position: absolute;
  left: var(--space-md);
  bottom: var(--space-md);
  padding: var(--space-xxs) var(--space-sm);
  font-family: var(--font-body);
  font-size: 14px;      /* body-sm */
  font-weight: 360;
  line-height: 1.45;
  text-transform: uppercase;
  color: var(--c-text-primary);
  background-color: var(--c-accent);
  border-radius: var(--rounded-full);
}

/* Text block */
.project-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  flex: 1;
}

/* Card title — display-md */
.project-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 22px;      /* display-md */
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.3px;
  color: var(--c-text-primary);
}

/* Two-sentence description — body-md */
.project-card__text {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;      /* body-md */
  font-weight: 360;
  line-height: 1.5;
  color: var(--c-text-secondary);
}

/* Arrow link — stretched over the whole card via ::after */
.project-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: auto;
  padding-top: var(--space-md);
  font-family: var(--font-body);
  font-size: 16px;      /* body-md */
  font-weight: 360;
  line-height: 1.5;
  color: var(--c-accent-strong);
  text-decoration: none;
}

.project-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--rounded-lg);
}

.project-card__link:focus-visible {
  outline: none;
}

.project-card__link:focus-visible::after {
  outline: 2px solid var(--c-accent);
  outline-offset: var(--space-xxs);
}

/* Arrow nudges right on hover */
.project-card__link svg {
  width: var(--space-lg);
  height: var(--space-lg);
  transition: transform 0.2s ease-out;
}

.project-card:hover .project-card__link svg,
.project-card__link:focus-visible svg {
  transform: translateX(var(--space-xs));
}

/* --------------------------------------------------------------------------
   SVG visual primitives — all strokes/fills from active-mode tokens
   -------------------------------------------------------------------------- */

.pv-dots { fill: var(--c-hairline); }
.pv-line { fill: none; stroke: var(--c-hairline-strong); stroke-width: 1.5; }
.pv-accent { fill: none; stroke: var(--c-accent); stroke-width: 2; }
.pv-node { fill: var(--c-canvas-soft); stroke: var(--c-hairline-strong); stroke-width: 1.5; }
.pv-node-accent { fill: var(--c-accent); stroke: var(--c-accent); stroke-width: 1.5; }
.pv-fill-strong { fill: var(--c-accent-strong); }
.pv-bar { fill: var(--c-hairline-strong); }
.pv-label {
  fill: var(--c-text-secondary);
  font-family: var(--font-code);
  font-size: 12px;      /* SVG user units, scales with viewBox */
}
.pv-label-strong { fill: var(--c-text-primary); }
.pv-stroke-strong { stroke: var(--c-accent-strong); }
.pv-stroke-bold { stroke-width: 3; }

/* Hidden SVG defs container (shared dot pattern); kept renderable for <pattern> */
.svg-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Pagination — prev / page numbers / next (screenshot cue)
   -------------------------------------------------------------------------- */

.projects-pagination[hidden] {
  display: none;
}

.projects-pagination__list {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Shared control base — 44px tap target, secondary-button styling */
.projects-pagination button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-width: calc(var(--space-xxl) + var(--space-md));
  min-height: calc(var(--space-xxl) + var(--space-md));
  padding: 0 var(--space-md);
  font-family: var(--font-body);
  font-size: 16px;      /* body-md */
  font-weight: 360;
  line-height: 1.5;
  color: var(--c-text-secondary);
  background: transparent;
  border: 1px solid var(--c-hairline-strong);
  border-radius: var(--rounded-sm);
  cursor: pointer;
}

.projects-pagination button:hover:not(:disabled),
.projects-pagination button:focus-visible {
  color: var(--c-text-primary);
  border-color: var(--c-accent);
}

.projects-pagination button:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: var(--space-xxs);
}

/* Active page — accent fill */
.projects-pagination button[aria-current="page"] {
  color: var(--c-text-primary);
  background-color: var(--c-accent);
  border-color: var(--c-accent);
}

/* Prev/Next at edge */
.projects-pagination button:disabled {
  color: var(--c-text-muted);
  border-color: var(--c-hairline);
  cursor: default;
}

.projects-pagination svg {
  width: var(--space-lg);
  height: var(--space-lg);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

/* Large tablet: tighter padding, display-lg title */
@media (max-width: 1024px) {
  .projects-preview {
    padding: var(--space-huge) var(--space-xxl);
  }

  .projects-preview__title {
    font-size: 28px;    /* display-lg */
    line-height: 1.2;
    letter-spacing: -0.5px;
  }

  .projects-grid {
    gap: var(--space-lg);
  }

  .project-card {
    padding: var(--space-lg);
    gap: var(--space-lg);
  }
}

/* Small tablet: cards stack 1-up, anchor offset for two-row header */
@media (max-width: 768px) {
  .projects-preview {
    scroll-margin-top: calc(var(--space-huge) * 2);
  }

  .projects-preview__inner {
    gap: var(--space-xxl);
  }

  .projects-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Mobile: smaller type, Prev/Next text hidden (arrows remain) */
@media (max-width: 480px) {
  /* Extra bottom space keeps pagination clear of Back to Top icon */
  .projects-preview {
    padding: var(--space-xxl) var(--space-lg) calc(var(--space-huge) + var(--space-lg));
  }

  .projects-preview__header {
    gap: var(--space-md);
  }

  .projects-preview__title {
    font-size: 22px;    /* display-md */
    line-height: 1.25;
    letter-spacing: -0.3px;
  }

  .projects-preview__subtitle {
    font-size: 16px;    /* body-md */
    line-height: 1.5;
  }

  .projects-grid {
    gap: var(--space-md);
  }

  .project-card {
    gap: var(--space-md);
  }

  /* Card title → body-lg, description → body-sm */
  .project-card__title {
    font-family: var(--font-body);
    font-size: 18px;    /* body-lg */
    font-weight: 360;
    line-height: 1.55;
    letter-spacing: 0;
  }

  .project-card__text {
    font-size: 14px;    /* body-sm */
    line-height: 1.45;
  }

  .project-card__tag {
    left: var(--space-sm);
    bottom: var(--space-sm);
  }

  .projects-pagination__label {
    display: none;
  }
}

/* Reduced motion: no fade, no arrow nudge */
@media (prefers-reduced-motion: reduce) {
  .projects-grid.is-paging > li:not([hidden]) {
    animation: none;
  }

  .project-card__link svg {
    transition: none;
  }
}