/* ===========================================================
   FACILITIES PAGE — MASONRY LAYOUT
   =========================================================== */
.masonry{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 10px;
  gap: var(--sp-sm);
}
.fac-card{
  border-radius: var(--r-md);
  background:#fff;
  border:1px solid var(--line-soft);
  box-shadow: var(--shadow-sm);
  padding: 1.8rem;
  display:flex; flex-direction:column;
  transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease;
  position:relative;
  overflow:hidden;
}
.fac-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.fac-card .fac-visual{
  border-radius: var(--r-sm);
  background: var(--grad-card);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:18px; flex-shrink:0;
}
.fac-card p{ color: var(--text-muted); font-size:0.88rem; line-height:1.65; }
.fac-card h4{ font-size:1.04rem; margin-bottom:8px; }

/* Span variations for masonry feel */
.fac-card.span-tall{ grid-row: span 34; }
.fac-card.span-mid{ grid-row: span 28; }
.fac-card.span-short{ grid-row: span 24; }
.fac-card.span-tall .fac-visual{ height:160px; }
.fac-card.span-mid .fac-visual{ height:110px; }
.fac-card.span-short .fac-visual{ height:80px; }

.fac-card.wide{ grid-column: span 2; }

@media (max-width: 1100px){
  .masonry{ grid-template-columns: repeat(2,1fr); }
  .fac-card.wide{ grid-column: span 2; }
}
@media (max-width: 620px){
  .masonry{ grid-template-columns: 1fr; }
  .fac-card.wide{ grid-column: span 1; }
  .fac-card{ grid-row:auto !important; }
}