/* container */
.md-typeset .projects { display: grid; gap: 28px; }

/* row */
.projects .proj {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-areas: "media body";
  gap: 20px;
  align-items: center;
  padding: 16px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
}

/* alternating background */
.projects .proj:nth-child(odd) { background: #ffffff; }
.projects .proj:nth-child(even) { background: #f2f2f2; }
[data-md-color-scheme="slate"] .projects .proj:nth-child(even) { background: rgba(255,255,255,.06); }

/* image and text placement */
.projects .proj > img { grid-area: media; width: 100%; height: 120px; object-fit: cover; border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.projects .proj > .txt { grid-area: body; }

/* tidy heading spacing */
.projects .proj > .txt > :first-child { margin-top: 0; }

/* mobile */
@media (max-width: 800px) {
  .projects .proj {
    grid-template-columns: 1fr;
    grid-template-areas:
      "media"
      "body";
  }
  .projects .proj > img { height: auto; }
}

/* ===== Home page: intro text + profile photo ===== */
.home-hero{
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(220px, 28vw, 320px);
  column-gap: 2.5rem;
  align-items: start;
  margin-bottom: 1rem;
}

.home-hero__text{
  min-width: 0;
}

.home-hero__photo{
  justify-self: end;
  align-self: center;
}

/* Responsive image: fills the right column */
.home-hero__photo img{
  width: 100%;
  aspect-ratio: 4 / 5;      /* controls “portrait” shape */
  object-fit: cover;
  object-position: 50% 25%;
  border-radius: 14px;
  display: block;
  box-shadow: 0 1px 8px rgba(0,0,0,.14);
}

/* Stack only on truly small screens */
@media (max-width: 700px){
  .home-hero{
    grid-template-columns: 1fr;
    row-gap: 1rem;
  }
  .home-hero__photo{
    justify-self: start;
    align-self: start;
  }
  .home-hero__photo img{
    width: 220px;
    aspect-ratio: 4 / 5;
  }
}