/* Featured Projects collection (projects.html). Loaded after styles.css and shared.css. */

/* The first project's photo morphs into the full-screen hero on its detail page. One way only: js/projects.js names the photo just as you leave for the project, and the detail page names its hero just as it opens, so going back doesn't shrink it. */
@view-transition { navigation: auto; }
::view-transition-group(project-hero) { animation-duration: .8s; animation-timing-function: var(--ease); }
::view-transition-old(project-hero), ::view-transition-new(project-hero) { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: normal; }
::view-transition-group(root) { animation-duration: .5s; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
.site-header { view-transition-name: site-header; } /* the nav stays put instead of fading with the page */

/* ---------- Collection: two columns. Each project is a photo with its name underneath. ---------- */
.pgrid { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--gap) * 2) var(--gap); }

/* Same look as the home page's Recent Custom Homes: photo on top, then a bar with an accent stroke holding the name left and an outline button right */
.pitem { display: block; }
.pitem__img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--secondary); }
.pitem__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.pitem__cap {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: clamp(20px, 2vw, 32px);
  border: 1px solid var(--accent); border-top: 0;
}
.pitem__cap h3 { text-align: left; }
.pitem__cap .label { display: block; margin-top: 6px; }
.pitem__cap .btn { padding: 14px 24px; }
.pitem:hover .btn--outline { background: var(--accent); color: var(--white); }
.pitem[href] { cursor: pointer; }

/* Hover (mouse devices only): the photo zooms in slightly inside its frame, same as the other photos on the site */
@media (hover: hover) {
  .pitem:hover .pitem__img img, .pitem:focus-visible .pitem__img img { transform: scale(1.04); }
}
.pitem:focus-visible { outline-offset: 6px; }

@media (max-width: 1100px) { .pitem__cap { flex-direction: column; align-items: flex-start; } } /* two narrow columns on tablets: stack the name above the button */
@media (max-width: 700px) {
  .pgrid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .pitem__img img { transition: none; } }