/* .contact-info, .contact-item*, .grid--contact, .form-*, .wpcf7-* —
   спільні з PHP-шаблонами, визначені в style.css глобально.
   Усі правила тут scoped через .contact--block, щоб не впливати
   на контакт-секції у PHP-шаблонах. */

section.contact--block .container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
}

section.contact--block .section-label,
section.contact--block .section-title,
section.contact--block .section-description {
    text-align: left;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

/* Блок має ширшу праву колонку ніж стандартний .grid--contact у templates.
   width: 100% обов'язковий: контейнер — flex-колонка з align-items: flex-start,
   без нього грід (і форма в ньому) стискається до ширини контенту. */
.contact--block .grid--contact {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 80px;
    margin-top: 60px;
    width: 100%;
}

/* Відступи масштабуються пропорційно розміру екрана:
   секція/відступ-гріда/gap: 80/60/80 → 64/40/40 → 50/32/32 → 40/24/28 */
@media (max-width: 992px) {
    section.contact--block.section {
        padding: 64px 0;
    }

    .contact--block .grid--contact {
        grid-template-columns: 1fr;
        gap: 40px;
        margin-top: 40px;
    }
}

@media (max-width: 768px) {
    .contact--block .grid--contact {
        gap: 32px;
        margin-top: 32px;
    }

    section.contact--block .section-description {
        margin-bottom: 0;
    }
}

@media (max-width: 480px) {
    .contact--block .grid--contact {
        gap: 28px;
        margin-top: 24px;
    }
}