/* Grid */
.zmt-pcards{
  --zmt-cols: 4;
  --zmt-gap: 24px;
  --zmt-card-h: 380px;

  display: grid;
  grid-template-columns: repeat(var(--zmt-cols), minmax(0, 1fr));
  gap: var(--zmt-gap);
  justify-items: start;
}

/* Card base */
.zmt-card{
  position: relative;
  height: var(--zmt-card-h);
  border-radius: var(--zmt-radius, 20px);
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  background: transparent;
  transition: transform .2s ease;
}
.zmt-card:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

/* Image layer (absolute cover) */
.zmt-card__media{
  position:absolute; inset:0;
  background-position:center center;
  background-size:cover;
  background-repeat:no-repeat;
}

/* Shade/overlay (gradient) */
.zmt-card__shade{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top, rgba(0,0,0,var(--zmt-shade-base,.45)) 0%, rgba(0,0,0,0) 60%);
  transition:background .25s ease;
}
.zmt-card:hover .zmt-card__shade,
.zmt-card.is-active .zmt-card__shade,
.zmt-card:focus-within .zmt-card__shade{
  background:linear-gradient(to top, rgba(0,0,0,var(--zmt-shade-hover,.65)) 0%, rgba(0,0,0,0) 60%);
}

/* Inner & text */
.zmt-card__inner{ position:relative; z-index:2; height:100%; padding:24px; }
.zmt-card__copy{
  position:absolute; left:24px; right:24px; bottom:24px; z-index:2;
  transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
}
.zmt-card__title{ margin:0 0 6px; color:#fff; font-weight:800; line-height:1.15; font-size:clamp(18px,2.2vw,28px); }
.zmt-card__desc{ margin:0; color:rgba(255,255,255,.85); }

/* Hide copy while actions appear */
.zmt-card:hover .zmt-card__copy,
.zmt-card.is-active .zmt-card__copy,
.zmt-card:focus-within .zmt-card__copy{
  opacity:0; visibility:hidden; transform:translateY(6px);
}

/* Actions slide to center */
.zmt-card__actions{
  --zmt-actions-enter:24px;
  position:absolute; left:50%; bottom:12px;
  transform:translate(-50%, calc(100% + var(--zmt-actions-enter)));
  display:flex; flex-direction:column; gap:12px; align-items:center; justify-content:center;
  transition: transform var(--zmt-slide-dur,300ms) cubic-bezier(.2,.7,.2,1), opacity var(--zmt-slide-dur,300ms);
  opacity:0; z-index:3;
}
.zmt-card:hover .zmt-card__actions,
.zmt-card.is-active .zmt-card__actions,
.zmt-card:focus-within .zmt-card__actions{
  top:50%; bottom:auto; transform:translate(-50%, -50%); opacity:1;
}

/* Buttons */
.zmt-btn{ font-weight:700; padding:12px 22px; border-radius:999px; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; white-space:nowrap; }
.zmt-btn--primary{ background:var(--zmt-primary,#ffcf2d); color:#111; }
.zmt-btn--ghost{ background:rgba(255,255,255,.1); color:#fff; border:2px solid rgba(255,255,255,.45); }

/* Active inner border */
.zmt-card::after{
  content:""; position:absolute; pointer-events:none; inset:var(--zmt-b-offset,10px);
  border-radius:var(--zmt-b-radius,16px);
  border:var(--zmt-b-width,3px) solid var(--zmt-b-color,#ffcf2d);
  opacity:0; transition:opacity .25s ease; z-index:4;
}
.zmt-card:hover::after,
.zmt-card.is-active::after,
.zmt-card:focus-within::after{ opacity:1; }
.zmt-no-active-border::after{ display:none !important; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .zmt-card__actions, .zmt-card__shade{ transition:none; }
}