/* =============================================================================
   OUR OWN PRODUCTS — the homepage band printed by inc/projects.php.

   Its own stylesheet rather than an append to local-seo.css: that file is
   enqueued only when bemuar_local_current() matches, i.e. on the 57 registry
   pages, and the homepage is not one of them — it would never have loaded here.

   The section chrome (.bmx-sec, .bmx-wrap, .bmx-head, .bmx-eyebrow) comes from
   bmx.css, which the homepage already loads, so only the cards are defined
   below. Card geometry deliberately matches .work-card on the landing pages:
   same 16:10 shot, same radius, same hairline. Two different card shapes for
   the same kind of content would read as two different sites.
   ========================================================================== */

.proj-grid{
  display:grid;
  gap:clamp(18px,2.4vw,28px);
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  margin-top:clamp(24px,3.5vw,40px);
}

.proj-card{
  display:flex;
  flex-direction:column;
  background:var(--surface,#fff);
  border:1px solid var(--border,#E2E5EA);
  border-radius:12px;
  overflow:hidden;
  transition:border-color .25s, transform .25s, box-shadow .25s;
}
.proj-card:hover,
.proj-card:focus-within{
  border-color:var(--primary,#3B55E6);
  transform:translateY(-3px);
  box-shadow:0 10px 30px rgba(10,16,22,.09);
}

.proj-shot{
  position:relative;
  display:block;
  aspect-ratio:720/450;
  background:var(--surface-2,#F5F6F8);
  overflow:hidden;
  text-decoration:none;
}
.proj-shot img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top center;
  transition:transform .4s ease;
}
.proj-card:hover .proj-shot img{ transform:scale(1.035); }

.proj-badge{
  position:absolute;
  left:10px; bottom:10px;
  padding:5px 10px;
  border-radius:999px;
  font-size:.74rem;
  line-height:1.3;
  color:#fff;
  /* A hairline keeps the chip readable as a chip on a dark screenshot, where
     the translucent fill alone melts into the image. */
  background:rgba(12,20,30,.72);
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}

.proj-body{
  padding:clamp(15px,2vw,21px);
  display:flex;
  flex-direction:column;
  gap:7px;
  /* Push the visit link to the bottom so the three cards line up even when the
     descriptions are different lengths — which they always are. */
  flex:1 1 auto;
}
.proj-body h3{
  margin:0;
  font-size:1.12rem;
  line-height:1.3;
  letter-spacing:-.01em;
  color:var(--text,#0A1016);
}
.proj-body p{
  margin:0;
  font-size:.94rem;
  line-height:1.6;
  color:var(--muted,#5F6B79);
}
.proj-domain{ font-size:.85rem !important; }
.proj-domain a{
  color:var(--primary,#3B55E6);
  text-decoration:none;
  border-bottom:1px solid transparent;
}
.proj-domain a:hover,
.proj-domain a:focus-visible{ border-bottom-color:currentColor; }

.proj-visit{
  margin-top:auto;
  padding-top:6px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  align-self:flex-start;
  font-size:.9rem;
  font-weight:600;
  color:var(--primary,#3B55E6);
  text-decoration:none;
}
.proj-visit svg{ width:15px; height:15px; flex:0 0 15px; }
.proj-visit:hover,
.proj-visit:focus-visible{ color:var(--text,#0A1016); }

@media (prefers-reduced-motion:reduce){
  .proj-card,
  .proj-shot img{ transition:none; }
  .proj-card:hover{ transform:none; }
  .proj-card:hover .proj-shot img{ transform:none; }
}