/* ==========================================================================
   CONTACT
   ========================================================================== */

.contacts { position: relative; z-index: var(--z-content); padding: var(--section-py) 0; text-align: center; }
.contacts .section-label, .contacts .section-sub { margin-inline: auto; }
.contacts__title { margin-inline: auto; }
.contacts .section-sub { margin-bottom: 3rem; }

.email-cta {
    display: inline-flex; align-items: center; gap: .8rem;
    font-family: var(--font-display); font-weight: 600;
    font-size: clamp(1.4rem, 5vw, 2.6rem);
    padding-bottom: .3rem;
    border-bottom: 2px solid var(--border);
    color: var(--text);
    margin-bottom: 3.5rem;
    transition: color .35s, border-color .35s;
}
.email-cta i { font-size: .6em; color: var(--accent); transition: transform .35s var(--ease); }
.email-cta:hover { color: var(--accent); border-color: var(--accent); }
.email-cta:hover i { transform: translate(4px, -4px); }

.contact-boxes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; text-align: left; }
@media (max-width: 820px) { .contact-boxes { grid-template-columns: 1fr; } }
.contact-box {
    position: relative; overflow: hidden;
    padding: 1.6rem; border-radius: var(--radius-md);
    background: var(--panel); border: 1px solid var(--border-soft);
    display: flex; flex-direction: column; gap: 1rem;
    transition: transform .35s var(--ease-soft), border-color .35s;
}
.contact-box:hover { transform: translateY(-6px); border-color: rgba(var(--accent-rgb), .4); }
.contact-box .icon {
    width: 44px; height: 44px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(var(--accent-rgb), .12); color: var(--accent); font-size: 1.15rem;
}
.contact-box .info { display: flex; flex-direction: column; gap: .2rem; }
.contact-box .contact-type { font-size: .68rem; color: var(--text-faint); letter-spacing: .08em; text-transform: uppercase; }
.contact-box .data { font-size: .95rem; word-break: break-word; }
.contact-box a, .contact-box .copy-btn {
    align-self: flex-start; font-size: .85rem; color: var(--accent);
    display: inline-flex; align-items: center; gap: .4rem; background: none; border: none; padding: 0;
}
.contact-box a:hover, .contact-box .copy-btn:hover { text-decoration: underline; }