/* ================================================================
   Voctos — Contact Hero block
   hero (values measured from the
   live reference page: grid 2 cols, min-h 297, gradient 270deg,
   h1 46px/400, phones 12px, btn 14px r10, msgs 50px r12)
   ================================================================ */

.voctos-contact-hero {
    position: relative;
    padding-top: 100px;
    padding-bottom: 24px;
}
/* Dark vignette behind the header, fading into the page grey — exact match of the
   original: black→transparent, opacity .6, 134px tall, pinned to the top. */
.voctos-contact-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 134px;
    background: linear-gradient(180deg, #000 0%, rgba(137, 137, 137, 0) 100%);
    opacity: .6;
    pointer-events: none;
    z-index: 0;
}
/* Keep the page content above the vignette */
.voctos-contact-hero > .container { position: relative; z-index: 1; }

/* ── Breadcrumb (ref: 16px, white links, grey current, dot sep) ── */
.voctos-contact-hero .chero-crumbs {
    margin-bottom: 32px;
}
.voctos-contact-hero .chero-crumbs ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}
@media (min-width: 1024px) {
    .voctos-contact-hero .chero-crumbs ul { justify-content: flex-start; }
}
.voctos-contact-hero .chero-crumbs li {
    position: relative;
    font-family: 'Unbounded', sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
}
/* dot separator */
.voctos-contact-hero .chero-crumbs li:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -12px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #0d172d;
    transform: translateY(-50%);
}
.voctos-contact-hero .chero-crumbs a {
    text-decoration: none;
    transition: opacity .18s;
}
.voctos-contact-hero .chero-crumbs a:hover { opacity: .75; }
.voctos-contact-hero .chero-crumbs__current { color: #737373e6; }

/* ── Card (ref: radius 30, gradient 270deg, min-h 297, overflow visible) ── */
.voctos-contact-hero .chero-card {
    position: relative;
    border-radius: 30px;
    /* mobile: dark navy top → light blue-grey bottom (matches original 2-stop) */
    background: linear-gradient(180deg, #101A2F 0%, #7B8DAF 100%);
    overflow: hidden;
    padding: 32px 32px 0;
    display: flex;
    flex-direction: column;
    gap: 28px;
}
@media (min-width: 1024px) {
    .voctos-contact-hero .chero-card {
        /* desktop: dark navy left → light blue-grey right (matches original) */
        background: linear-gradient(90deg, #101A2F 0%, #7B8DAF 100%);
        overflow: visible;
        min-height: 297px;
        padding: 0;
        flex-direction: row;
        gap: 0;
    }
}

/* ── Left content (ref: pt 32 / pl 56 / pb 72) ── */
.voctos-contact-hero .chero-content {
    position: relative;
    z-index: 2;
    flex: 1 1 70%;
}
@media (min-width: 1024px) {
    .voctos-contact-hero .chero-content {
        padding: 32px 0 32px 56px;
    }
}

/* ── Title (ref: 46px / 400 / tight / mb 20) ── */
.voctos-contact-hero .chero-title {
    font-family: 'Unbounded', sans-serif;
    font-weight: 400;
    color: #ffffff;
    font-size: 36px;
    line-height: 1.25;
    margin: 0 0 12px;
}
@media (min-width: 1024px) {
    .voctos-contact-hero .chero-title { font-size: 46px; margin-bottom: 20px; }
}

/* ── Intro paragraph (under heading, above phones) ── */
.voctos-contact-hero .chero-intro {
    margin: 0 0 24px;
}
.voctos-contact-hero .chero-intro p {
    font-family: 'Unbounded', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .9);
    margin: 0 0 12px;
}
.voctos-contact-hero .chero-intro p:last-child { margin-bottom: 0; }

/* ── Phones (ref: 12px, label white/60, number white, mb 24) ── */
.voctos-contact-hero .chero-phones {
    margin-bottom: 24px;
}
.voctos-contact-hero .chero-phone {
    font-family: 'Unbounded', sans-serif;
    font-size: 12px;
    line-height: 1.5;
    margin: 0 0 4px;
}
.voctos-contact-hero .chero-phone:last-child { margin-bottom: 0; }
.voctos-contact-hero .chero-phone__label {
    font-weight: 400;
    color: rgba(255, 255, 255, .6);
}
.voctos-contact-hero .chero-phone__num {
    color: #ffffff;
    font-weight: 400;
    text-decoration: none;
    transition: opacity .18s;
}
a.chero-phone__num:hover { opacity: .8; }

/* ── Actions row (ref: gap 14px) ── */
.voctos-contact-hero .chero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 14px;
}

/* button (ref: 14px / 400, padding 16 20, radius 10, hover → dark) */
.voctos-contact-hero .chero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 20px;
    background: #7616f4;
    color: #ffffff;
    font-family: 'Unbounded', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    border-radius: 10px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background .18s;
}
.voctos-contact-hero .chero-btn:hover { background: #0d172d; }

/* messengers (ref: 50×50, radius 12, TG #71A3FF, WA #00BB7E) */
.voctos-contact-hero .chero-msg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 12px;
    color: #ffffff;
    text-decoration: none;
    transition: transform .18s, filter .18s;
}
.voctos-contact-hero .chero-msg:hover { filter: brightness(1.08); transform: translateY(-1px); }
.voctos-contact-hero .chero-msg--tg { background: #71a3ff; }
.voctos-contact-hero .chero-msg--wa { background: #00bb7e; }
.voctos-contact-hero .chero-msg svg { display: block; }

/* ── Illustration (ref: right column, img 440×324 anchored to bottom) ── */
.voctos-contact-hero .chero-illustration {
    position: relative;
    z-index: 1;
    flex: 1 1 30%;
    display: flex;
    justify-content: center;
}
.voctos-contact-hero .chero-illustration img {
    max-width: 440px;
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}
@media (min-width: 1024px) {
    .voctos-contact-hero .chero-illustration img {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        height: 324px;
        width: 100%;
    }
    /* No-paragraph card is shorter → let the image sit in-flow (like the
       original Contacts hero) so the card grows to it instead of overflowing. */
    .voctos-contact-hero--no-intro .chero-illustration {
        align-items: flex-end;
    }
    .voctos-contact-hero--no-intro .chero-illustration img {
        position: static;
        transform: none;
        height: 324px;
        width: 100%;
        object-position: bottom right;
    }
}

/* ── Mobile ── */
@media (max-width: 767px) {
    .voctos-contact-hero { padding-top: 120px; }
    .voctos-contact-hero .chero-card { padding: 28px 22px 0; }
}

/* ── Mobile / tablet only (<1024px): put the CTA button on its own full
   line so the Telegram + WhatsApp icons always land together on the next
   line, side by side, instead of the button pushing WhatsApp onto a
   lonely row by itself. */
@media (max-width: 1023px) {
    .voctos-contact-hero .chero-btn { flex: 1 1 100%; }
}