/*
 * Contact page — Figma "Kontaktai" (2623:7164, designer-review copy of 2391:8154). Full-bleed band
 * between header and footer: barrel photo bleeding off the left, form + requisites in the right
 * container column, brand monograms in the top-right and bottom-left corners. All px/hex from the
 * frame.
 *
 * The band is LIGHT (#faf8f7 = --neutrali, the frame fill on BOTH copies of the frame) with #1e1e1e
 * body text — it was built black with cream text, which is what made the intro unreadable where the
 * cream #f0ebe9 monogram overlaps it (designer pin). Every signal in the frame agrees it is a light
 * page: body text/consent/requisites #1e1e1e, inputs #ffffff with an #f0ebe9 hairline, the top
 * monogram #f0ebe9 as a tone-on-tone watermark, the bottom one #6a1414. (The PNG export of this
 * frame comes back with an alpha-0 band — a Figma export quirk of its two top-level masks; the JPEG
 * export and the REST `fills` both give #faf8f7, and the sibling "Apie mus" frame 2623:7038 with the
 * identical fill exports it opaque.)
 */
.pv-contact {
    position: relative;
    overflow: hidden;
    background: var(--neutrali);
    color: var(--juoda);
    /* Container gutter on 1728: content lives in the 294→1434 (1140px) band. */
    --contact-gutter: max(var(--container-pad), calc((100% - var(--container-max)) / 2));
    /* Band height = Figma frame band (frame-rel 88 → 1304 footer = 1216px). */
    min-height: 1216px;
}

/* Head — breadcrumb + KONTAKTAI title, at the container's left edge, above the photo.
   Design breadcrumb sits 16px below the band top (Figma frame-rel 104 − 88 header). */
.pv-contact__head {
    position: relative;
    z-index: 2;
    padding: 16px var(--contact-gutter) 0;
}

.pv-contact__head .pv-breadcrumbs {
    margin-bottom: 9px;
}

.pv-contact__title {
    margin: 0;
    font-size: 32px;
    line-height: 40.96px;
    letter-spacing: 1.6px;
    font-weight: 700;
    font-style: italic;
    color: var(--ryski-raudona);
}

/* Photo — bleeds to the viewport left edge, 949px wide, 160px below the band top
   (Figma frame-rel 248 − 88 header). */
.pv-contact__photo {
    position: absolute;
    left: 0;
    top: 160px;
    width: 949px;
    max-width: 55vw;
    z-index: 1;
}

.pv-contact__photo img {
    display: block;
    width: 100%;
    height: auto;
}

/* Brand monograms — 5-lobe "SS" marks bleeding off the corners. */
.pv-contact__mono {
    position: absolute;
    display: block;
    width: 501px;
    height: auto;
    pointer-events: none;
    z-index: 1;
}

/* Figma 2623:7165: x=1226 w=501.7 => right edge 1727.7, i.e. flush with the 1728 frame edge, NOT
   bleeding past it. The mark was pushed 84px out (right edge 1812 at a 1728 viewport), so
   overflow:hidden cut 84px off the mark that the comp shows in full. */
.pv-contact__mono--top {
    top: 0;
    right: 0;
}

.pv-contact__mono--bottom {
    left: -1px;
    top: 782px;
    z-index: 2;
}

/* Right column — heading, form, requisites. Right-aligned in the container, 364px wide. */
.pv-contact__panel {
    position: relative;
    z-index: 2;
    width: 364px;
    max-width: 100%;
    margin-left: auto;
    margin-right: var(--contact-gutter);
    padding-top: 120px;
    padding-bottom: 100px;
}

/* Figma 2391:8154: line 1 "Turite" bold-italic (the em), line 2 "klausimų?" upright regular. */
.pv-contact__heading {
    margin: 0 0 24px;
    font-size: 40px;
    line-height: 51.2px;
    letter-spacing: 2px;
    font-weight: 500;
    font-style: normal;
    color: var(--ryski-raudona);
}

.pv-contact__heading-em {
    display: block;
    font-weight: 700;
    font-style: italic;
}

/* Figma 2623:7195: 16/24 Regular #1e1e1e. The comp deliberately runs this line UNDER the cream
   monogram — dark ink on the watermark stays readable; cream-on-cream did not. */
.pv-contact__intro {
    margin: 0 0 24px;
    font-size: 16px;
    line-height: 24px;
    color: var(--juoda);
}

/* Contact links under the intro — same panel type scale as .pv-contact__intro. */
.pv-contact__details {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 16px;
    line-height: 24px;
    color: var(--juoda);
}

.pv-contact__details a {
    color: inherit;
    text-decoration: underline;
}

.pv-contact__form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pv-contact__input {
    width: 100%;
    /* 10px pad + 24 line-height + 2 border = 46px (Figma pill ~44-46; was 14px pad → 54px). */
    padding: 10px 20px;
    border: 1px solid #f0ebe9;
    border-radius: 48px;
    background: var(--balta);
    color: var(--juoda);
    font: inherit;
    font-size: 14px;
}

.pv-contact__input::placeholder {
    color: var(--sub-pilka);
}

.pv-contact__input--message {
    height: 92px;
    /* The multi-line message box is a rounded rectangle (16px), not a pill (Figma cornerRadius 16). */
    border-radius: 16px;
    resize: vertical;
}

.pv-contact__consent {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    font-size: 14px;
    /* Figma 2623:7188 — consent label #1e1e1e. */
    color: var(--juoda);
    cursor: pointer;
}

.pv-contact__consent input {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    accent-color: var(--ryski-raudona);
}

/* Full-width dark-red block button (Figma 2391:8369: #6a1414, white 14px/600). */
.pv-contact__submit {
    width: 100%;
    height: 44px;
    margin-top: 8px;
    border-radius: 40px;
    background: var(--sodri-raudona);
    color: var(--balta);
    font-weight: 600;
}

/* Success confirmation — replaces the button after a send (Figma 2492:5482): green check +
   green text (#07c881 = the frame's success green, node 2492:5510/5618) where the button sat. */
.pv-contact__success {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 8px 0 0;
    color: #07c881;
    font-size: 14px;
    line-height: 17.92px;
    font-weight: 600;
    letter-spacing: 0.7px;
}

.pv-contact__success img {
    display: block;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
}

/* Requisites block — sits below the form, same 364px column. */
.pv-contact__requisites {
    margin-top: 64px;
}

.pv-contact__requisites .pv-contact__heading {
    margin-bottom: 30px;
    font-weight: 700;
    font-style: italic;
}

/* Figma 2623:7197-7201 — 14/17.92 Medium #1e1e1e. */
.pv-contact__requisites p {
    margin: 0 0 16px;
    font-size: 14px;
    line-height: 18px;
    font-weight: 500;
    color: var(--juoda);
}

.pv-contact__requisites p:last-child {
    margin-bottom: 0;
}

/* ── Responsive: collapse to a single column, photo stacks above the form ── */
@media (max-width: 900px) {
    .pv-contact {
        min-height: 0;
    }

    .pv-contact__head {
        padding-top: 32px;
    }

    .pv-contact__head .pv-breadcrumbs {
        margin-bottom: 24px;
    }

    .pv-contact__photo {
        position: static;
        width: 100%;
        max-width: 100%;
        margin-top: 24px;
    }

    .pv-contact__mono--top {
        display: none;
    }

    .pv-contact__mono--bottom {
        display: none;
    }

    .pv-contact__panel {
        width: 100%;
        margin-right: 0;
        padding: 48px var(--contact-gutter);
    }

    /* iOS Safari zooms on focus below 16px. The 24px line box is pinned so 10px + 24 + 2 still
       makes the 46px pill. */
    .pv-contact__input {
        font-size: 16px;
        line-height: 24px;
    }

    .pv-contact__consent {
        min-height: 44px;
        padding-block: 10px;
    }

    .pv-contact__consent input {
        width: 24px;
        height: 24px;
    }
}

/* The band is light (see the file header), so the breadcrumb keeps Component 32's own colours
   (#6a1414 root + the AA-shaded grey trail) exactly like every other page — no override needed. */