/* Projects grid — dynamic grid of project posts.
   Ported from the Bricks template (id 373). */

.projects {
  background-color: var(--white);
}

.projects__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: var(--space-xl);
}

.projects__container-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: var(--space-xs);
}

.projects__heading {
  font-size: var(--h1);
  text-align: center;
}

.projects__description {
  max-width: 65ch;
  font-size: var(--text-l);
  text-align: center;
}

.projects__grid {
  display: grid;
  grid-template-columns: var(--grid-12);
  gap: var(--space-m);
  margin: 0;
  padding-left: 0;
  list-style: none;
  align-content: stretch;
}

.card-projects__wrapper {
  height: 100%;
  grid-column: span 7;
  border-radius: var(--radius-m);
  overflow: hidden;
}

/* Feature cards (1st, then every 4th) span wider with a landscape ratio. */
.card-projects__wrapper:nth-child(1),
.card-projects__wrapper:nth-child(4n),
.card-projects__wrapper:nth-child(4n + 1) {
  grid-column: span 5;
}

.card-projects__wrapper:nth-child(1) .card-projects,
.card-projects__wrapper:nth-child(4n) .card-projects,
.card-projects__wrapper:nth-child(4n + 1) .card-projects {
  aspect-ratio: 4 / 3;
}

.card-projects {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  row-gap: var(--space-xs);
  height: 100%;
  padding: var(--space-l);
}

.card-projects__img {
  position: absolute;
  inset: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.card-projects__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50%;
  transition: transform 0.2s;
}

.card-projects:hover .card-projects__img img {
  transform: scale(1.1);
}

.card-projects__overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-color: color-mix(in srgb, var(--black) 40%, transparent);
  z-index: -1;
}

.card-projects__tax {
  padding: 4px 8px;
  border-radius: var(--radius-xs);
  background-color: var(--accent);
}

.card-projects__tax-info {
  font-size: var(--text-s);
  font-weight: 700;
  color: var(--primary);
}

.card-projects__heading {
  font-size: var(--text-l);
  color: var(--white);
}

.card-projects__heading .card-projects__link {
  color: inherit;
  text-decoration: none;
}

/* Clickable-parent: stretch the title link across the whole card. */
.card-projects__heading .card-projects__link::after {
  content: '';
  position: absolute;
  inset: 0;
}

.projects__grid {
  grid-template-columns: var(--grid-12);
}

@media (max-width: 1024px) {
  .projects__grid {
    grid-template-columns: var(--grid-1);
  }

  .card-projects__wrapper,
  .card-projects__wrapper:nth-child(1),
  .card-projects__wrapper:nth-child(4n),
  .card-projects__wrapper:nth-child(4n + 1) {
    grid-column: auto;
  }

  .card-projects {
    aspect-ratio: 3 / 4;
  }
}

@media (max-width: 767px) {
  .card-projects__wrapper:nth-child(1) .card-projects,
  .card-projects__wrapper:nth-child(4n) .card-projects,
  .card-projects__wrapper:nth-child(4n + 1) .card-projects {
    aspect-ratio: 3 / 4;
  }
}