/* Contact page — key contact cards, same visiting-card style as the
   main sevana.com site (ported from its .key-contact-* rules). Loaded
   only by contact/index.php, so portal.css and its cache-busting
   version number don't change for every other page. */

/* Main customer-care line */
.contact-main { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 0 0 32px; }
.contact-main__label { font-weight: 700; color: var(--ink-muted); font-size: .9rem; }
.contact-main__number { font-size: 1.6rem; font-weight: 800; letter-spacing: .01em; }

/* Grid: 3 columns, 2 on tablets, 1 on phones */
.key-contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 820px) { .key-contact-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .key-contact-grid { grid-template-columns: 1fr; } }

/* Card */
.key-contact-card {
  display: grid; grid-template-columns: 86px 1fr; gap: 16px; padding: 20px;
  background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--card-radius);
  overflow: hidden;
  transition: transform .18s cubic-bezier(.23,1,.32,1), box-shadow .18s cubic-bezier(.23,1,.32,1), border-color .18s cubic-bezier(.23,1,.32,1);
}

/* Photo circle. Initials sit underneath and the image covers them, so a
   missing or unreachable photo just shows the initials — no broken-image
   icon, and no JavaScript needed for the fallback. */
.key-contact-card__photo {
  position: relative; width: 86px; height: 86px; border-radius: 50%; overflow: hidden;
  background: var(--panel); color: var(--ink-muted);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.5rem; letter-spacing: .04em;
}
.key-contact-card__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.key-contact-card h3 { margin-bottom: .45rem; }
.key-contact-card p { margin-bottom: .35rem; font-size: .9rem; word-break: break-word; }
.key-contact-card a { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }

/* Hover (mouse devices only) */
@media (hover: hover) {
  .key-contact-card:hover { border-color: var(--ink); box-shadow: 0 12px 28px rgba(21,29,37,.10); transform: translateY(-2px); }
}

/* Phones: smaller photo */
@media (max-width: 560px) {
  .key-contact-card { grid-template-columns: 76px 1fr; }
  .key-contact-card__photo { width: 76px; height: 76px; font-size: 1.3rem; }
}