/* portfolio-docs.css — downloadable project briefs / proposals on the
 * vitrine detail page. Companion to portfolio.css; kept separate to stay
 * under the per-file CSS budget. Themed via the same token slots as the
 * rest of the site, so every skin gets a coherent treatment for free. */

.portfolio-docs {
  margin-top: var(--sp-6);
}

.portfolio-doc {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-3);
  text-decoration: none;
  color: inherit;
  min-height: 100%;
}

.portfolio-doc__title {
  margin: var(--sp-1) 0 0;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
}

.portfolio-doc__desc {
  color: var(--ink-mid);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  margin: 0;
  flex: 1;
}

.portfolio-doc__cta {
  margin-top: var(--sp-4);
  pointer-events: none; /* the whole card is the link */
}

/* The brief cards lean into the brand: a soft primary wash + a crisp
 * accent rule on top so they read as "official documents", distinct
 * from screenshot/gallery tiles. The hover-tilt from .card carries over. */
.portfolio-doc {
  background:
    linear-gradient(180deg,
      color-mix(in oklab, var(--color-primary) 7%, var(--surface-1)),
      var(--surface-1));
  border: var(--theme-border-width) solid var(--line-mid);
  position: relative;
  overflow: hidden;
}
.portfolio-doc::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
}

@media (max-width: 720px) {
  .portfolio-doc__cta { align-self: stretch; text-align: center; }
}