/* =========================================================
   contact.css — Pertamina Foundation style
   ========================================================= */

.contact__grid{
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px){ .contact__grid{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px){ .contact__grid{ grid-template-columns: repeat(4, 1fr); } }

.contact__card{
  padding: 30px 24px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  background: var(--white);
  transition: all .3s var(--ease);
}
.contact__card:hover{
  transform: translateY(-5px);
  box-shadow: 0 20px 40px -18px rgba(0,0,0,.12);
  border-color: var(--pf-red);
}

.contact__icon{
  width: 50px; height: 50px;
  display: flex; align-items: center; justify-content: center;
  background: var(--pf-red);
  border-radius: 50%;
  margin-bottom: 18px;
}
.contact__icon svg{ width: 22px; height: 22px; color: var(--white); }

.contact__card h3{ font-size: 16px; margin-bottom: 6px; color: var(--gray-900); }
.contact__card p{ font-size: 13.5px; color: var(--gray-500); margin-bottom: 14px; }
.contact__card a.contact__value{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 14.5px;
  color: var(--pf-blue);
}
.contact__card a.contact__value:hover{ color: var(--pf-red); }