/* Portfolio grid alignment.
 *
 * The cards sit in a plain three-column layout with no row synchronisation, so
 * each one is as tall as its own contents. Measured on /projects/ before this
 * file existed: card heights ran 212, 234, 249, 261, 276 and 314px, and rows
 * three onward started at 1041, 1053 and 1068px instead of a shared top.
 *
 * Two independent causes, both fixed here:
 *
 *   1. Thumbnails carry whatever aspect ratio their source had — measured
 *      between 1.50 and 2.25 — so image heights ranged 160px to 240px. The
 *      video stills are 16:9 but the older photographs are not.
 *   2. Titles wrap to either one or two lines, moving everything below them.
 *
 * Fixing only one of the two still leaves rows out of step, which is why both
 * the image box and the title box are pinned.
 */

.portfolio-item .thumb-info-wrapper,
.portfolio-item .thumb-info {
  display: block;
  width: 100%;
}

/* 1. One aspect ratio for every thumbnail.
 * object-fit: cover crops to fill rather than distorting, so a 1.50 photograph
 * and a 2.25 still both present as 16:9 without stretching faces or text. */
.portfolio-item img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  object-position: center;
  border-radius: 8px;
}

/* 2. A fixed title box, two lines tall whether the title needs one or two.
 * The clamp also stops an unusually long title from pushing to three lines and
 * reintroducing the misalignment this is meant to remove. */
.portfolio-item .portfolio-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
  margin: .85em 0 0;
  font-size: 15.5px;
  line-height: 1.35;
  font-weight: 600;
  color: #2e353e;
}

.portfolio-item .portfolio-title a {
  color: inherit;
}

.portfolio-item .portfolio-title a:hover {
  color: #b0903b;
}

/* Consistent gap below each card so the rows breathe evenly. */
.portfolio-item {
  margin-bottom: 34px;
  vertical-align: top;
}

/* A subtle lift on hover, matching the treatment used elsewhere on the site. */
.portfolio-item img {
  transition: transform .25s ease, box-shadow .25s ease;
}

.portfolio-item a:hover img {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -12px rgba(16, 22, 30, .45);
}

@media (prefers-reduced-motion: reduce) {
  .portfolio-item img,
  .portfolio-item a:hover img {
    transition: none;
    transform: none;
  }
}

/* On phones the columns stack, so the clamp is relaxed — there is room for a
 * full title and nothing to stay aligned with. */
@media (max-width: 767px) {
  .portfolio-item .portfolio-title {
    -webkit-line-clamp: 3;
    line-clamp: 3;
    min-height: 0;
  }
}