/* Generic card — used by the blog grid and any container that needs a panel. */
.ctr-card{
  background:var(--c-surface); border:1px solid var(--c-line); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .18s ease, box-shadow .18s ease;
}
.ctr-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md) }
/* The blog card has a real wrapper around its photo, so the wash can live on
   that wrapper: one box, one clipping context, nothing to fall out of step. */
.ctr-card-img{
  position:relative; display:block; aspect-ratio:3/2;
  overflow:hidden; background:var(--c-surface-2);
}
.ctr-card-img img{
  width:100%; height:100%; object-fit:cover;
  transition:filter .3s ease;
}
.ctr-card-img::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(42,31,23,0) 38%,
    rgba(58,43,32,.42) 72%,
    rgba(74,56,44,.86) 100%);
  opacity:0; transition:opacity .3s ease;
  transform:translateZ(0); will-change:opacity; backface-visibility:hidden;
}
.ctr-card:hover .ctr-card-img::after,
.ctr-card:focus-within .ctr-card-img::after{ opacity:1 }
.ctr-card:hover .ctr-card-img img,
.ctr-card:focus-within .ctr-card-img img{
  filter:sepia(.35) saturate(1.15) hue-rotate(-14deg) brightness(.78);
}
@media (prefers-reduced-motion:reduce){
  .ctr-card-img img, .ctr-card-img::after{ transition:none }
}
.ctr-card-body{ padding:1.25rem; display:flex; flex-direction:column; gap:.4rem; flex:1 }
.ctr-card-title{ font-size:1.1rem; margin:0 }
.ctr-card-title a{ text-decoration:none; color:var(--c-ink) }
.ctr-card-title a:hover{ color:var(--c-primary) }
.ctr-card-body p{ font-size:.94rem; color:var(--c-ink-2); margin:0; flex:1 }
@media (prefers-reduced-motion:reduce){ .ctr-card,.ctr-card-img img{ transition:none } }


/* The whole card is clickable, the way the service cards are. The title link
   does the work, so the tab order and the accessible name are unchanged. */
.ctr-card{ position:relative }
.ctr-card-title a::after{ content:''; position:absolute; inset:0; z-index:2 }
.ctr-card-body{ position:relative }
.ctr-card-body > *{ position:relative; z-index:3 }
.ctr-card-title a{ position:static }