/* Geotest.ru — Контакты page styles.
   Shared primitives (container, page-lines, corner-mark, section-boxed,
   site-header, eyebrow, buttons, footer) come from style.css / components.css
   — this file only adds page-specific layout, following the same
   "bordered grid of cards" visual grammar as the other product/content pages.
   Sourced from Figma frame 5796:25564 ("Контакты") — the only frame in the
   file, no separate mobile variant found. */

.contacts-hero__inner { display: flex; flex-direction: column; gap: var(--space-24); padding: 56px var(--space-40) var(--space-40); }
.contacts-hero__title { font: var(--text-h1-desktop); color: var(--color-grey-20); }
.contacts-hero__subtitle { font: var(--text-large-desktop); color: var(--color-grey-20); }

/* ===================== Contact info row (3 cards) ===================== */
.contacts-info-section.section-boxed { border-top: none; }
.contact-info-row { display: flex; }
.contact-info-item { flex: 1; padding: var(--space-40); border-left: 1px solid var(--color-card-border); display: flex; flex-direction: column; gap: var(--space-20); }
.contact-info-row .contact-info-item:first-child { border-left: none; }
.contact-info-item__icon {
    width: 56px; height: 56px;
    border-radius: 6px;
    background: var(--color-info-bg);
    color: var(--color-blue-80);
    display: flex; align-items: center; justify-content: center;
}
.contact-info-item__title { font: var(--text-h5-desktop); color: var(--color-grey-20); }
.contact-info-item__details { display: flex; flex-direction: column; gap: var(--space-8); }
.contact-info-item__details p { font: var(--text-large-desktop); color: var(--color-grey-20); }
.contact-info-item__details a { font: var(--text-large-desktop); color: var(--color-grey-20); text-decoration: underline; }
.contact-info-item__details a:hover { color: var(--color-blue-80); }

/* ===================== Feedback form section ===================== */
.contact-form-row { display: flex; border-left: 1px solid var(--color-card-border); border-right: 1px solid var(--color-card-border); }
.contact-form-copy { flex: 1; padding: var(--space-40); display: flex; flex-direction: column; gap: var(--space-20); }
.contact-form-copy__title { font: var(--text-h2-desktop); color: var(--color-grey-20); }
.contact-form-copy__subtitle { font: var(--text-medium-desktop); color: var(--color-grey-40); }
.contact-form-wrap { flex-shrink: 0; width: 760px; padding: var(--space-8); border-left: 1px solid var(--color-card-border); }

/* ===================== Responsive — Контакты (мобайл ≤767 / планшет 768–1199) ===================== */

@media (max-width: 1199px) {
    .contacts-hero__inner { padding: 56px var(--container-gutter) var(--space-40); }

    /* ---------- Контактная информация: 3 карточки в одну колонку ---------- */
    .contact-info-row { flex-direction: column; }
    .contact-info-item {
        border-left: none;
        border-top: 1px solid var(--color-card-border);
        padding: var(--space-24) var(--container-gutter);
    }
    .contact-info-row .contact-info-item:first-child { border-top: none; }

    /* ---------- Обратная связь: текст над формой ---------- */
    .contact-form-row { flex-direction: column; }
    .contact-form-copy { padding: var(--space-24) var(--container-gutter); }
    .contact-form-wrap { width: auto; border-left: none; border-top: 1px solid var(--color-card-border); }

    /* ---------- Уголки-плюсики: один вложенный акцент вместо четырёх враспор ---------- */
    .section-boxed .corner-mark--tr,
    .section-boxed .corner-mark--bl,
    .section-boxed .corner-mark--br { display: none; }
    .section-boxed .corner-mark--tl { left: 6px; --corner-mark-color: var(--color-blue-80); }
}

@media (max-width: 767px) {
    /* ---------- Типографика: мобильная шкала ---------- */
    .contacts-hero__title { font: var(--text-h1-mobile); }
    .contacts-hero__subtitle { font: var(--text-large-mobile); }
    .contacts-hero__inner { gap: var(--space-12); padding-top: var(--space-24); }
    .contact-info-item__title { font: var(--text-h5-mobile); }
    .contact-info-item__details p,
    .contact-info-item__details a { font: var(--text-large-mobile); }
    .contact-form-copy__title { font: var(--text-h2-mobile); }
    .contact-form-copy__subtitle { font: var(--text-large-mobile); }
    .contact-form__row { flex-direction: column; gap: var(--space-12); }
    .contact-form { padding: var(--space-24); gap: var(--space-16); }
}

@media (max-width: 480px) {
    .contact-form { padding: var(--space-16); }
}