@layer reset, base, site, layout;

@layer layout {
  #featured-projects-heading ~ article {
    display: grid;
    grid-template-columns: minmax(10rem, 15rem) minmax(0, 1fr);
    column-gap: var(--space-5);
    row-gap: var(--space-3);
    align-items: start;
    position: relative;
    background:
      linear-gradient(135deg, color-mix(in srgb, var(--surface-strong) 54%, transparent), var(--surface-subtle));
    border: 1px solid var(--border-muted);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;

    &:hover {
      border-color: color-mix(in srgb, var(--project-title-hover) 36%, var(--border));
      box-shadow: var(--shadow-soft);
      transform: translateY(-2px);
    }

    & > :not(img) {
      grid-column: 2;
    }

    & h3 {
      margin-top: 0;
      font-size: clamp(1.15rem, 2vw, 1.45rem);

      & a {
        color: var(--project-title);
        text-decoration: none;

        &::after {
          content: "";
          position: absolute;
          inset: 0;
          border-radius: var(--radius-lg);
        }

        &:hover {
          color: var(--project-title-hover);
        }
      }
    }

    & p {
      max-width: 52ch;
    }

    & ul,
    & ol {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-2);
      padding: 0;
      list-style: none;

      & li {
        padding: 0.25rem 0.6rem;
        color: var(--text);
        background: var(--surface-subtle);
        border: 1px solid var(--border-muted);
        border-radius: 999px;
        font-size: 0.9rem;
      }
    }

    & img {
      grid-column: 1;
      grid-row: 1 / span 6;
      width: 100%;
      max-width: 15rem;
      aspect-ratio: 1;
      object-fit: cover;
      border-radius: var(--radius-md);
      border: 1px solid var(--border);
      box-shadow: var(--shadow-soft);
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    #featured-projects-heading ~ article {
      & img {
        transition: filter 220ms ease, transform 220ms ease;
      }

      &:hover img {
        filter: saturate(1.12) contrast(1.04);
        transform: scale(1.025);
      }
    }
  }

  @media (max-width: 60rem) {
    #featured-projects-heading ~ article {
      display: block;

      & img {
        float: left;
        width: min(42%, 9rem);
        margin: var(--space-2) var(--space-4) var(--space-3) 0;
      }

      & h3 {
        margin-bottom: var(--space-2);
      }

      & p {
        max-width: none;
      }

      & ul,
      & ol {
        clear: both;
      }
    }
  }
}