/* Ampera · Kontaktų forma (Figma 1103:2008 desktop / 1103:6946 mobile).
Violet panel left (heading + manager card + overhanging portrait), the live
CF7 form right. The facet disclosure inside the form is styled globally
(style.css .ampera-facets); this file skins the raw CF7 controls. */
.ampera-kontaktai {
position: relative;
font-family: var(--wp--preset--font-family--telegraf);
}
/* Violet panel: full band height, bleeds to the viewport's left edge; its
right edge is anchored 616px into the centred 1440px design frame. */
.ampera-kontaktai::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: max(calc((100% - 1440px) / 2 + 616px), 42.8%);
background: var(--wp--preset--color--violetine);
}
.ampera-kontaktai__inner {
position: relative; /* paints above the ::before panel */
max-width: 1296px;
margin-inline: auto;
padding-block: 56px;
padding-inline: 72px;
display: grid;
grid-template-columns: minmax(0, 629px) minmax(0, 500px);
grid-template-rows: auto auto;
column-gap: clamp(48px, 10.28vw, 148px);
justify-content: start;
align-items: start;
}
/* Sub-1440 laptops: the FORM column drives the section height there and
missed the fold by a hair — tighter band padding closes it (client
2026-08-10: the section must fit one screen). */
@media (max-width: 1366px) {
.ampera-kontaktai__inner {
padding-block: 40px;
}
}
/* ---- Left: heading + manager card ---- */
.ampera-kontaktai__intro {
grid-column: 1;
grid-row: 1;
}
.ampera-kontaktai__heading {
margin: 0 0 36px;
font-weight: 800;
font-size: clamp(36px, 5vw, 60px);
line-height: 1.2;
}
.ampera-kontaktai__manager {
margin: 0;
}
.ampera-kontaktai__name {
margin: 0 0 8px;
font-weight: 800;
font-size: 20px;
line-height: 28px;
}
.ampera-kontaktai__role {
margin: 0;
font-size: 14px;
line-height: 20px;
}
.ampera-kontaktai__contacts {
display: flex;
flex-wrap: wrap;
gap: 16px 40px;
margin-top: 24px;
}
.ampera-kontaktai__contact {
display: inline-flex;
align-items: center;
gap: 12px;
color: inherit; /* keep juoda; global link colour must not bleed in */
text-decoration: none;
font-weight: 800;
font-size: 16px;
line-height: 24px;
}
.ampera-kontaktai__contact:hover span {
text-decoration: underline;
}
.ampera-kontaktai__contact svg {
width: 24px;
height: 24px;
flex: none;
}
/* ---- Portrait: fixed 701x510 dark frame, bleeding left past the gutter to
the viewport edge (701 > 616, so it overhangs onto balta on the right). ---- */
.ampera-kontaktai__photo {
grid-column: 1;
grid-row: 2;
box-sizing: border-box;
/* Second pass per Domantas: the frame keeps the Figma 701:510 proportion
(never flat) but STOPS growing past the 1440 design width, so the whole
section fits one screen on wide laptops. */
width: calc(100% + 72px);
margin: 16px 0 0 -72px;
height: auto;
aspect-ratio: 701 / 510;
min-height: 300px;
/* Client 2026-08-10: the whole section must fit ONE screen — the photo
yields height first (480px = the section's non-photo parts + the 114px
sticky header + slack). Floor 300px: with the 330px floor the section
still missed the fold by ~15px on 1280×800 laptops. */
max-height: max(300px, calc(100vh - 480px));
background: var(--wp--preset--color--juoda);
overflow: hidden;
}
.ampera-kontaktai__photo img {
display: block;
width: 100%;
/* Client 2026-08-10 (3rd pass): the source is head-at-top (grey cropped
in the file), so the anchor must be TOP — with the viewport height cap
the frame can become WIDER than the image ratio, and a bottom anchor
then crops from the TOP, i.e. her head. Top-anchored, a too-wide frame
crops her lower body instead, which is always safe. */
height: 100%;
object-fit: cover;
object-position: center top;
}
/* ---- Right: the CF7 form column, vertically centred in the band ---- */
.ampera-kontaktai__form {
grid-column: 2;
grid-row: 1 / 3;
align-self: center;
min-width: 0;
max-width: 500px;
width: 100%;
}
.ampera-kontaktai__placeholder {
margin: 0;
opacity: 0.5;
}
/* CF7 wraps every template line in a . ONE rhythm for every row (client
2026-08-24: "eilutėse reikia vienodumo tarp tarpų"): the rows inside the
fields group already sat on 20px, while the groups around them used 16px and
the checkbox row 24px, so the form visibly changed pace going down.
Everything is 20px now — change it here and the whole form follows. */
.ampera-kontaktai .wpcf7-form p {
margin: 0 0 20px;
font-size: 14px;
line-height: 20px;
}
.ampera-kontaktai .wpcf7-form p:last-of-type {
margin-bottom: 0;
}
/* El. paštas + Tel. numeris in ONE row (client 2026-08-26). The wrapper comes
from the CF7 template; CF7's autop puts BOTH field lines into a single
separated by
(measured, not assumed - the first pass styled per-field
s that do not exist). So the
is the flex container, the
is
hidden, and the two control-wrap spans are the halves. The validation tip
lands inside its control-wrap, so it stays under its own field. */
.ampera-kontaktai .ampera-form__duo {
margin: 0 0 20px;
}
.ampera-kontaktai .ampera-form__duo p {
display: flex;
gap: 24px;
margin: 0;
}
.ampera-kontaktai .ampera-form__duo br {
display: none;
}
.ampera-kontaktai .ampera-form__duo .wpcf7-form-control-wrap {
flex: 1 1 0;
min-width: 0;
}
@media (max-width: 640px) {
.ampera-kontaktai .ampera-form__duo p {
flex-direction: column;
gap: 20px;
}
}
/* "Jus domina:" line inside the CF7 template (class on the template markup). */
.ampera-kontaktai .wpcf7-form .ampera-form-title {
display: block;
font-weight: 800;
font-size: 20px;
line-height: 28px;
}
.ampera-kontaktai .wpcf7-form p:has(.ampera-form-title) {
margin-bottom: 28px;
}
/* The