/* GRID */
.grid-4{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:30px;
  margin-top:50px;
}

/* CARD */
.card{
  background:var(--color-surface);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:transform var(--transition-base), box-shadow var(--transition-base);
}

.card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-lg);
}

.card img{
  width:100%;
  height:220px;
  object-fit:cover;
}

.card-content{
  padding:20px;
}

/* BUTTON */
.btn-primary,
.btn-ghost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:0 22px;
  border-radius:var(--radius-pill);
  text-decoration:none;
  font-weight:500;
  transition:all var(--transition-base);
}

.btn-primary{
  background:#111827;
  color:#fff;
  border:1px solid #111827;
}

.btn-primary:hover{
  transform:translateY(-1px);
  background:#0b1220;
}

.btn-ghost{
  background:transparent;
  color:inherit;
  border:1px solid rgba(255,255,255,.22);
}

/* REVEAL */
.reveal{
  opacity:0;
  transform:translateY(40px);
  transition:all .6s ease;
  animation:reveal-fallback 0.3s 2.5s forwards;
}

.reveal.active{
  opacity:1;
  transform:none;
}

@keyframes reveal-fallback{
  to{ opacity:1; transform:none; }
}

/* BREADCRUMB */
.breadcrumb{
  max-width:var(--container);
  margin:40px auto 0;
  padding:0 20px;
  font-size:14px;
  color:#777;
}

.breadcrumb a{
  text-decoration:none;
  color:#777;
}

.breadcrumb span{
  margin:0 8px;
}