/* =========================================================
   CONTACTS.CSS — страница Контактов (матовый тёмный)
   ========================================================= */

body.body-contacts,
body.body-contacts main{ background-color:var(--bg-page); }

/* === База страницы === */
.contacts-page{ background:var(--bg-page); color:var(--text-primary); }
.contacts-page h2,.contacts-page h4{ color:var(--text-bright); text-shadow:0 2px 16px rgba(0,0,0,.35); }

/* Карточная подложка для фото (мягкая тень) */
.card-like{
    background:var(--bg-card);
    border:1px solid var(--border-light);
    border-radius:16px;
    box-shadow:var(--shadow-md);
    padding:12px;
}

/* Колонки */
.photo-col,.form-col,.right-col{ position:relative; z-index:0; }
.form-col{ z-index:1; }
.right-col{ padding-left:.5rem; }

/* Адаптив — на планшете/мобиле: форма первой */
@media (max-width:991.98px){
    .form-col{ order:1 !important; }
    .right-col{ order:2 !important; }
}

/* ===== Контактный список ===== */
.contact-list{
    border:1px solid var(--border-subtle);
    border-radius:16px;
    overflow:hidden;
    box-shadow:var(--shadow-md);
    max-width:100%;
}
.contact-list .list-group-item{
    position:relative;
    background:var(--bg-card);
    border-color:var(--border-subtle);
    color:var(--text-primary);
    display:flex;
    align-items:flex-start;
    gap:.75rem;
    line-height:1.25;
    padding-right:2rem;
    transition:background .18s ease;
}
.contact-list .list-group-item:hover{ background:#2b3137; }

/* Иконки слева */
.contact-list .list-group-item i{
    color:#9aa3ab;
    font-size:1.05rem;
    width:1.25rem; min-width:1.25rem;
    text-align:center;
    transition:color .18s ease, transform .18s ease;
}
.contact-list .list-group-item:hover i{
    color:#f3f4f6; transform:translateY(-1px);
}

/* Значение-ссылка (без ярлыков) */
.contact-list .value-link{
    color:var(--text-primary); text-decoration:none;
    display:inline-flex; align-items:center; gap:.25rem;
    min-width:0; white-space:normal; overflow:visible;
    transition:color .18s ease, text-decoration-color .18s ease;
}
.contact-list .value-link:hover{ color:#fff; text-decoration:underline; }

/* Текст переносится аккуратно */
.contact-list .value-link .link-text{
    overflow-wrap:anywhere;
    word-break:break-word;
    min-width:0; max-width:100%;
}

/* Стрелка справа */
.contact-list .ext-link{
    position:absolute;
    right:.75rem;
    top:50%;
    transform:translateY(-50%);
    font-size:.95rem;
    opacity:.85;
    color:#9aa3ab;
    pointer-events:none;
}
.contact-list .list-group-item:hover .ext-link{
    color:#f3f4f6; opacity:1;
}

/* ===== QR-карточка ===== */
.qr-card{
    background:var(--bg-card);
    border:1px solid var(--border-light);
    border-radius:16px;
    box-shadow:var(--shadow-md);
    padding:18px;
    color:var(--text-primary);
    display:block;
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.qr-card:hover{
    transform:translateY(-2px);
    box-shadow:0 14px 32px rgba(0,0,0,.45);
    border-color:rgba(255,255,255,.16);
    background:#2a2f34;
}
.qr-inner{ display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; }
.qr-image{
    width:100%; max-width:260px; height:auto;
    border-radius:12px; background:var(--bg-deep);
    border:1px solid var(--border-light);
    box-shadow:0 6px 14px rgba(0,0,0,.35);
}
.qr-caption{ display:flex; flex-direction:column; gap:2px; }
.qr-title{ font-weight:800; letter-spacing:.3px; color:var(--text-bright); }
.qr-sub{ font-size:.9rem; color:#c6ccd2; }
.qr-cta{ margin-top:4px; display:inline-flex; align-items:center; gap:.35rem; font-weight:700; color:var(--text-primary); }
.qr-card:hover .qr-cta{ color:#fff; text-decoration:underline; }

/* ===== Фото и карта ===== */
.contact-photo{ width:100%; height:auto; border-radius:12px; }
.contacts-page .ratio{
    border-radius:16px;
    box-shadow:0 10px 24px rgba(0,0,0,.45);
    border:1px solid var(--border-light);
    overflow:hidden;
}
.map-wrap iframe{
    filter:grayscale(1) contrast(1.05) brightness(.95);
    -webkit-filter:grayscale(1) contrast(1.05) brightness(.95);
    transition:filter .3s ease;
}
.map-wrap:hover iframe{
    filter:grayscale(1) contrast(1.1) brightness(.92);
}

/* ===== Поля формы и кнопка ===== */
.contacts-page .form-control,
.contacts-page .form-select{
    background:var(--bg-input); color:var(--text-primary); border:1px solid var(--border-light);
}
.contacts-page .form-control::placeholder{ color:#a9b0b6; }
.contacts-page .form-control:hover,
.contacts-page .form-select:hover,
.contacts-page textarea:hover{ border-color:rgba(255,255,255,.28); }

.contacts-page .form-control,
.contacts-page .form-select,
.contacts-page textarea{
    transition:border-color .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.contacts-page .form-control:focus,
.contacts-page .form-control:focus-visible,
.contacts-page .form-select:focus,
.contacts-page .form-select:focus-visible,
.contacts-page textarea:focus,
.contacts-page textarea:focus-visible{
    outline:none; background:var(--bg-input-focus); color:var(--text-bright); border-color:var(--accent);
    box-shadow:0 0 0 3px var(--accent-ring), var(--shadow-md);
}

/* Кнопка */
.contacts-page .btn.btn-dark{
    background:var(--btn-bg) !important; color:var(--btn-text) !important;
    border:1px solid var(--btn-border) !important;
    box-shadow:0 6px 14px rgba(0,0,0,.35);
    font-weight:800; letter-spacing:.3px; text-transform:uppercase;
    border-radius:13px; padding:.55rem 1.25rem;
    transition:background .18s ease, transform .14s ease, box-shadow .14s ease, color .14s ease;
}
.contacts-page .btn.btn-dark:hover{
    background:var(--btn-hover) !important; transform:translateY(-1px);
    box-shadow:0 10px 20px rgba(0,0,0,.45);
}
.contacts-page .btn.btn-dark:active{
    background:var(--btn-active) !important; transform:translateY(0);
    box-shadow:0 5px 12px rgba(0,0,0,.35);
}

/* Autofill */
.contacts-page input:-webkit-autofill,
.contacts-page input:-webkit-autofill:hover,
.contacts-page input:-webkit-autofill:focus{
    -webkit-text-fill-color:var(--text-primary);
    -webkit-box-shadow:0 0 0 30px var(--bg-input) inset;
    transition: background-color 5000s ease-in-out 0s;
}

/* Типографика на узких */
@media (max-width:575.98px){
    .contact-list{ font-size:.95rem; }
    .contact-list .list-group-item{ line-height:1.3; }
    .qr-image{ max-width:200px; }
}
@media (max-width:991.98px){
    .qr-image{ max-width:220px; }
}

/* =========================================================
   ПРАВКИ ПО ЗАДАЧЕ
   1) Убрать «рамку» у фото.
   2) Ещё уменьшить фото на 20% (итого ~64% исходника).
   3) Подогнать ширину контактного списка и QR-карточки под фото.
   ========================================================= */

/* 1) Убираем подложку/рамку вокруг блока с фото */
.card-like{
    background: transparent;
    border: none;
    padding: 0;
    box-shadow: none;
}

/* 2) Фото теперь 64% от исходного и центрировано */
.contact-photo{
    width: 64%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* 3) Контакты и QR по ширине фото */
.right-col{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}
.contact-list,
.qr-card{
    width: 64%;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}

/* Адаптив */
@media (max-width:991.98px){
    .contact-photo,
    .contact-list,
    .qr-card{ width: 80%; }
}
@media (max-width:575.98px){
    .contact-photo,
    .contact-list,
    .qr-card{ width: 100%; }
}

/* =========================================================
   Контраст подзаголовка под "Свяжитесь со мной"
   ========================================================= */
.contacts-page .contact-sub{
    color:var(--text-primary) !important;
    opacity:1 !important;
    text-shadow:0 1px 8px rgba(0,0,0,.35);
    font-weight:500;
    letter-spacing:.2px;
}
@media (prefers-contrast: more){
    .contacts-page .contact-sub{ color:#ffffff !important; }
}