/* Reusable "Information & Overview" card component.
   Used on profile.php; link this file from any other page that needs
   the same card: heading + a 2-column responsive label/value grid. */

.info-card { background: #ffffff; border: 1px solid var(--border-line, #e2e8f0); border-radius: 8px; padding: 24px; margin-bottom: 24px; box-shadow: 0 2px 8px rgba(0,0,0,0.02); }
.section-heading { font-family: 'Barlow Condensed', sans-serif; font-size: 22px; font-weight: 700; margin: 0 0 16px; border-bottom: 2px solid var(--border-light, #f1f5f9); padding-bottom: 10px; color: var(--text-main, #1e293b); }

.detail-list-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.detail-item-label { font-size: 11.5px; text-transform: uppercase; color: #64748b; font-weight: 600; letter-spacing: 0.05em; margin-bottom: 4px; }
.detail-item-val { font-size: 14.5px; font-weight: 500; color: var(--text-muted, #64748b); }

@media (max-width: 768px) {
  .detail-list-grid { grid-template-columns: 1fr; }
}