/**
 * @file contact-card.css
 * @author Jouni Miikki
 * SPDX-License-Identifier: MIT
 * @description The contact card ("Talk to a human", components/ContactCard.js): the node's own
 *   people in the large dashed aside (.poster-aside--large), centred, the heading in the showroom
 *   face, each person's name, role and links (phone, email, profile) in a column, two people side by
 *   side on a wide screen and stacked on a phone, one grey line under them.
 *   NOTE: this file must be linked in spa.html, where landing.css is.
 * @version-history
 *   v1.0.0 — 2026-09-27 — Moved unchanged out of css/views/landing.css under the component's own
 *     names: .ld-contact → .contact-card and its parts .ld-contact-title/-people/-person/-role/-name/
 *     -links/-sub → .contact-card-* (a move: the same declarations, the same selector shapes).
 */

/* The dashed box that says the thing out loud (business + pricing only). */
.contact-card { max-width: 560px; margin: 3rem auto 0; text-align: center; }
.contact-card-title { font-family: var(--font-showroom); font-weight: 400; text-transform: uppercase; font-size: 1.4rem; letter-spacing: .01em; margin-bottom: .75rem; }
/* Two people side by side on a wide screen, stacked on a phone. */
.contact-card-people { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: .5rem; }
.contact-card-person { display: flex; flex-direction: column; gap: .2rem; }
.contact-card-role { font-size: .8rem; color: var(--text-dim); margin-bottom: .2rem; }
.contact-card-name { font-weight: 600; margin-bottom: .35rem; }
.contact-card-person .contact-card-name { margin-bottom: 0; }
.contact-card-person .contact-card-links { flex-direction: column; gap: .15rem; margin-bottom: 0; }
.contact-card-links { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-bottom: .45rem; }
.contact-card-links a { color: var(--accent); text-decoration: none; font-weight: 600; }
.contact-card-links a:hover { text-decoration: underline; }
.contact-card-sub { color: var(--text-dim); font-size: .88rem; }