/* ── Contacts ───────────────────────────────────────────────────────────── */

.contacts {
    padding: 60px 0 64px;
}

.contacts__header {
    text-align:    center;
    margin-bottom: 48px;
}

.contacts__heading {
    color:          var(--color-primary);
    font-size:      42px;
    text-transform: uppercase;
    margin:         0;
}

.contacts__wrp {
    display:   flex;
    gap:       24px;
}

.contacts__card {
    flex:           1;
    background:     var(--color-bg-alt);
    border-radius:  16px;
    padding:        32px 24px;
    text-align:     center;
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            8px;
}

.contacts__card .icon {
    color:         var(--color-secondary);
    margin-bottom: 4px;
}

.contacts__card-title {
    color:          var(--color-primary);
    font-family:    var(--font-body);
    font-size:      13px;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin:         0;
}

.contacts__card-value {
    color:       var(--color-primary);
    font-size:   16px;
    line-height: 1.5;
    margin:      0;
}

.contacts__card-link {
    text-decoration: none;
    font-weight:     600;
    transition:      color var(--transition);
}
.contacts__card-link:hover {
    color: var(--color-secondary);
}

/* Socials */
.contacts__socials {
    display:         flex;
    justify-content: center;
    gap:             12px;
    margin-top:      40px;
}

.contacts__social {
    width:           48px;
    height:          48px;
    border-radius:   50%;
    border:          1px solid var(--color-border);
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           var(--color-primary);
    text-decoration: none;
    transition:      border-color var(--transition), background var(--transition), color var(--transition);
}
.contacts__social:hover {
    border-color: var(--color-secondary);
    background:   var(--color-secondary);
    color:        #ffffff;
}

/* ── Map ───────────────────────────────────────────────────────────────── */

.contacts-map {
    background: var(--color-bg-alt);
}

.contacts-map__inner {
    height: 450px;
}

.contacts-map__inner iframe {
    display:       block;
    width:         100%;
    height:        100%;
    border:        0;
    border-radius: 0;
}

/* ── Tablet ────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .contacts__heading { font-size: 34px; }
    .contacts__wrp { flex-wrap: wrap; }
    .contacts__card { flex: 0 0 calc(50% - 12px); }
    .contacts-map__inner { height: 380px; }
}

/* ── Mobile ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .contacts { padding: 40px 0 32px; }
    .contacts__heading { font-size: 26px; }
    .contacts__header { margin-bottom: 32px; }
    .contacts__wrp { flex-direction: column; gap: 16px; }
    .contacts__card { padding: 24px 20px; border-radius: 12px; }
    .contacts__card-value { font-size: 15px; }

    .contacts__socials { margin-top: 28px; }
    .contacts__social { width: 44px; height: 44px; }

    .contacts-map__inner { height: 300px; }
}