/* =====================================================================
   «Επικοινωνία» (Figma "Επικοινωνία" + "Contact Card")
   Two cards side by side, stacked when they no longer fit (300px minimum each).
   ===================================================================== */

#contact[version="1"] {
  background-color: var(--sf-surface-alt);
}

#contact[version="1"] .contact-container {
  display: flex;
  flex-direction: column;
  gap: var(--sf-gap-xl);
}

#contact[version="1"] .contact-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--sf-gap-xl);
}

#contact[version="1"] .contact-card {
  display: flex;
  flex: 1 1 300px;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sf-gap-md);
  min-width: 0;
}

#contact[version="1"] .contact-card-heading {
  margin: 0;
  color: var(--sf-text);
  font-size: var(--sf-fs-h3);
  font-weight: 700;
  line-height: var(--sf-lh-card);
}

#contact[version="1"] .contact-card-row {
  display: flex;
  align-items: flex-start;
  gap: var(--sf-gap-md);
  width: 100%;
}

#contact[version="1"] .contact-photo {
  flex-shrink: 0;
  width: clamp(120px, 3.5vw + 93px, 160px);
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--sf-radius);
}

#contact[version="1"] .contact-info {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--sf-gap-md);
  min-width: 0;
  overflow-wrap: anywhere;
}

#contact[version="1"] .contact-person {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#contact[version="1"] .contact-name {
  margin: 0;
  color: var(--sf-text);
  font-size: var(--sf-fs-md);
  font-weight: 700;
  line-height: var(--sf-lh-body);
}

#contact[version="1"] .contact-role {
  margin: 0;
  color: var(--sf-text-muted);
  font-size: var(--sf-fs-sm);
  line-height: var(--sf-lh-small);
}

#contact[version="1"] .contact-details {
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--sf-text);
  font-size: var(--sf-fs-sm);
  line-height: 1.7;
}

#contact[version="1"] .contact-details a {
  color: var(--sf-text);
  font-size: inherit;
  text-decoration: none;
}

#contact[version="1"] .contact-details a:hover {
  color: var(--sf-brand-dark);
  text-decoration: underline;
}

#contact[version="1"] .contact-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sf-gap-sm);
}

#contact[version="1"] .contact-empty {
  margin: 0;
}