/* ============================================================
   AALIN — Kapcsolat oldal
   Az elérhetőségek rombusz-motívumos kártyákban futnak
   (ügyfélkérés, 2026-08-05: „töltsük fel élettel").
   ============================================================ */

.contact-aside {
  position: relative;
  padding-left: clamp(0rem, 2vw, 2rem);
}

.contact-aside__mark {
  margin-bottom: var(--space-lg);
}

.contact-aside__mark svg {
  margin-inline: 0;   /* itt balra igazítva, nem középen */
}

.contact-aside__title {
  margin-top: var(--space-xs);
  font-size: var(--text-2xl);
  letter-spacing: var(--tracking-tight);
}

.contact-aside__intro {
  margin-top: var(--space-md);
  max-width: 34ch;
  font-size: var(--text-sm);
  color: var(--color-walnut);
  line-height: var(--leading-loose);
}

/* ── Kártyák ── */
.contact-cards {
  margin-top: var(--space-2xl);
  display: grid;
  gap: var(--space-md);
  list-style: none;
}

.contact-card {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-lg) var(--space-lg) var(--space-lg) var(--space-md);
  background: var(--color-white);
  border: 1px solid rgba(90, 62, 44, 0.14);
  transition: border-color var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}

.contact-card:hover {
  border-color: rgba(90, 62, 44, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(36, 31, 27, 0.07);
}

/* Az ikon rombuszban ül — az arculati A-monogram formája */
.contact-card__gem {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  color: var(--color-almond-dark);
  border: 1px solid rgba(90, 62, 44, 0.35);
  transform: rotate(45deg);
  transition: border-color var(--duration-base) var(--ease-out),
              background var(--duration-base) var(--ease-out);
}

.contact-card__gem > * {
  transform: rotate(-45deg);   /* az ikon marad egyenesen */
}

.contact-card__gem svg {
  width: 19px;
  height: 19px;
  fill: currentColor;
}

/* a telefon/e-mail ikon kontúros, ne kapjon kitöltést */
.contact-card__gem svg[stroke] { fill: none; }

.contact-card:hover .contact-card__gem {
  border-color: var(--color-almond-dark);
  background: rgba(90, 62, 44, 0.06);
}

.contact-card__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.contact-card__label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-walnut);
}

.contact-card__value {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  color: var(--color-onyx);
  word-break: break-word;
  transition: color var(--duration-fast) var(--ease-out);
}

.contact-card:hover .contact-card__value {
  color: var(--color-almond-dark);
}

/* ── Helyszín-sor ── */
.contact-aside__place {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid rgba(90, 62, 44, 0.14);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-walnut);
}

.contact-aside__place span {
  color: var(--color-almond-dark);
  font-size: 0.7em;
  margin-right: 0.5em;
}

@media (max-width: 900px) {
  .contact-aside {
    padding-left: 0;
    margin-top: var(--space-3xl);
  }
  .contact-card {
    padding: var(--space-md);
    gap: var(--space-md);
  }
  .contact-card__gem { width: 40px; height: 40px; }
}