/* Figma 40000253:78107. Reuse shared fonts, BaseContent and Secondary buttons. */
.home-page h1, .home-page h2, .home-page h3, .home-page p {
  margin: 0;
}

.home-intro {
  padding-block: var(--space-56) var(--space-40);
}

.home-work {
  padding-top: var(--space-8);
}

.home-work > h2, .home-resources > h2 {
  margin-bottom: var(--space-24);
}

.project-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--space-16);
}

.home-resources {
  padding-top: var(--space-60);
}

/* A rounded hover surface behind each resource, preserving the text grid. */
.home-page .resource-row {
  position: relative;
  isolation: isolate;
  text-decoration: none;
}

.home-page .resource-row::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: var(--space-8) calc(-1 * var(--space-16)) 0;
  border-radius: var(--radius-20);
  background: var(--background-hover);
  opacity: 0;
  transition: opacity 160ms ease-out;
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .home-page .resource-row:hover::before {
    opacity: 1;
  }
}

.home-page .resource-row:focus-visible::before {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .home-page .resource-row::before {
    transition: none;
  }
}

/* Homepage-only keyline experiment, pending owner review. */
.home-page {
  --home-card-bleed: 16px;
}

.home-page .project-grid {
  margin-inline: calc(-1 * var(--home-card-bleed));
}

.home-page .project-card {
  padding-inline: calc(var(--home-card-bleed) - 0.55px);
}

.home-draft .contact-footer {
  width: calc(100% + 2 * var(--space-20));
  margin-inline: calc(-1 * var(--space-20));
  padding-inline: calc(var(--space-20) - 1px);
}

@media (min-width: 1064px) {
  .home-page {
    --home-card-bleed: 32px;
  }
}

@media (max-width: 1000px) {
  .project-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .home-intro {
    padding-block: var(--space-40) var(--space-24);
  }

  .home-resources {
    padding-top: var(--space-56);
  }
}
