/* Contacts reveal-on-click — keeps the original card/row look; the value shows on interaction. */

.hg-contact { cursor: pointer; }

/* the actionable value (number / email / handle), hidden until the row is opened */
.hg-contact .hg-contact-value { display: block; text-decoration: none; color: inherit; }
.hg-contact .hg-contact-value[hidden] { display: none !important; }
.hg-contact.is-open .hg-contact-value { animation: hg-contact-reveal .28s ease both; }
@keyframes hg-contact-reveal { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* the arrow is the affordance: it turns when the row is open */
.hg-contact .arrow { transition: transform .3s ease; }
.hg-contact.is-open .arrow { transform: rotate(90deg); }

/* keyboard focus */
.hg-contact:focus-visible { outline: 2px solid var(--dark-teal); outline-offset: 3px; }
.hg-contact .hg-contact-value:focus-visible { outline: 2px solid var(--dark-teal); outline-offset: 2px; border-radius: 4px; }

/* the footer contact cards are tall (min-height 150) with the value pinned to the
   bottom; before opening, show a subtle "покажи" hint in the value's place so the
   card does not look empty. */
.hg-contact::after {
	content: attr(data-hg-hint);
	display: none;
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
	.hg-contact.is-open .hg-contact-value { animation: none; }
	.hg-contact .arrow { transition: none; }
}