/* Kontaktai — frame `Kontaktai` (347:12541), canvas 1728x2318. Offsets are frame-absolute
   values from design/figma-cache/frames/kontaktai.json, rebased on the section start (the
   header bottom, y72); the footer sits at 1958, so the section is 1886px tall.
   Text tops are ink tops (Figma cap-trims). The form, the „Kitais klausimais“ title and the
   cards are IN FLOW (quirk 36): a growing message, an error line or the Turnstile challenge
   pushes everything under it down. Their margins put them at the comp's offsets at rest. */

.ct { position: relative; min-height: 1886px; padding-bottom: 120px; }  /* cards 1766 → 1886 */

/* ---- Hero: Rectangle 6 (image) @0,72 + Rectangle 12 (gradient @70%) @0,156 ---- */
.ct__hero { position: relative; height: 809px; overflow: hidden; }
.ct__hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ct__hero::after {                                    /* Rectangle 12 — 1728x725 from y84 */
  content: ""; position: absolute; left: 0; right: 0; top: 84px; height: 725px; opacity: 0.7;
  background: linear-gradient(180deg, rgba(44, 36, 32, 0) 0%, #2c2420 100%);
}
.ct__block { position: absolute; left: 294px; top: 492px; width: 313px; z-index: 1; }
.ct__title {                                          /* 435:5515 @294,564 — 80/72 display */
  margin: 0; color: var(--cream); font-family: var(--font-display);
  font-weight: 500; font-size: 80px; line-height: 72px;
}
.ct__subtitle {                                       /* 435:5516 @294,660 — 16/20.8 */
  margin: 19.1px 0 0; color: var(--cream);
  font-weight: 400; font-size: 16px; line-height: 20.832px;
}
.ct__cta {                                            /* Frame 2 @294,711 — 141x50 pill */
  margin-top: 35.1px; display: inline-flex; align-items: center; justify-content: center;
  width: 141px; height: 50px; border-radius: var(--r-pill);
  background: var(--ink); color: var(--cream);
  text-transform: uppercase; font-weight: 400; font-size: 16px; line-height: 20.832px;
  transition: background var(--t-tint) var(--ease-out), transform var(--t-move) var(--ease-out);
}
.ct__cta:hover, .ct__cta:focus-visible { background: var(--ink-hover); transform: translateY(var(--lift)); }

.ct__crumbs {                                         /* Group 5360 @294,905 — 12/15.6 */
  position: absolute; left: 294px; top: 833px; height: 16px;
  display: flex; align-items: center; gap: 16px;
  font-weight: 300; font-size: 12px; line-height: 15.6px;
}
.ct__crumbs a { color: var(--sand); transition: color var(--t-tint) var(--ease-out); }
.ct__crumbs a:hover { color: var(--accent); }
.ct__crumbs [aria-current] { color: var(--muted); font-weight: 400; }
.ct__crumbs img { width: 5px; height: 8px; margin: -0.5px -0.75px; flex: none; }

.ct__photo {                                          /* Rectangle 11 @864,945 — 864x686 */
  position: absolute; left: 864px; top: 873px; width: 864px; height: 686px; object-fit: cover;
}

/* ---- Form: Group 5537 @294,1076 — 461 wide, fields 461x50 every 66px ---- */
.ct__form { position: relative; margin: 185.2px 0 0 294px; width: 461px; }  /* 994.2 − hero 809 */
.ct__form-title {                                     /* 367:5163 @294,1076 — 32/41.7 ls3.2 */
  margin: 0 0 30.2px; text-transform: uppercase; color: var(--accent);
  font-weight: 200; font-size: 32px; line-height: 41.66px; letter-spacing: 3.2px;
}

/* The fields are the shared ASSETS input (`.fld`, css/app.css) — also the comp's gold 9px
   caption (367:5171) gives way to the sheet's 10/500 #b0a191 one (design/DEVIATIONS.md). An
   errored field's message takes a 24px line under it, so the rows below move down by it. */
.ct__field { margin-bottom: 16px; }
.ct__field.fld--error { margin-bottom: 40px; }
/* Comment 52: the message grows with its text, never a scrollbar (field-sizing where
   supported, motion.js sets the height from scrollHeight elsewhere). */

.ct__consent {                                        /* Group 5536 @294,1410 — 18px box */
  display: flex; align-items: flex-start; gap: 14px; margin-top: 24px;   /* the box grew into the gap */
  color: var(--ink); font-weight: 400; font-size: 16px; line-height: 20.832px;
}
.ct__check {                                          /* the one checkbox, on the 18px box's centre */
  flex: none; width: var(--check); height: var(--check); margin: -1px 0; appearance: none;
  background: var(--white); border: 1px solid var(--sand); border-radius: var(--r-check);
  transition: background var(--t-tint) var(--ease-out), border-color var(--t-tint) var(--ease-out);
}
.ct__check:checked { background: var(--accent) url("../img/icons/icon-check-white.svg") no-repeat 4.5px 5.5px / 10px 7px; border-color: var(--accent); }  /* checked box — 468:4362, comment 53 */
/* R2-22: no top margin — the line box starts at the box top, which puts the cap top 3px under
   it and the cap centre 0.5px over the box centre, as 367:5181 sits against 367:5182 (the old
   3px margin dropped the words 3px low). R2-23: „privatumo politika" is the comp's own override
   (367:5181 chars 11–28: #8b6355, underline) and links to the privacy page. */
.ct__consent a {
  color: var(--accent); text-decoration: underline;
  transition: color var(--t-tint) var(--ease-out);
}
.ct__consent a:hover, .ct__consent a:focus-visible { color: var(--ink); }

.ct__trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.ct__submit {                                         /* Frame 4 @294,1452 — 461x47 pill */
  margin-top: 21.168px;   /* 1452 − 1410 − the 20.832 consent line (R2-22: no 3px span margin) */
  width: 100%; height: 47px; border: 0; border-radius: 40px;
  background: var(--ink); color: var(--cream); cursor: pointer; font-family: var(--font-body);
  text-transform: uppercase; font-weight: 500; font-size: 14px; line-height: 18.2px;
  transition: background var(--t-tint) var(--ease-out), transform var(--t-move) var(--ease-out);
}
.ct__submit:hover, .ct__submit:focus-visible { background: var(--ink-hover); transform: translateY(var(--lift)); }
.ct__error { margin: 0; color: var(--danger); font-size: 12px; line-height: 24px; }  /* the field's error line */
.ct__refusal { margin-top: 16px; line-height: 18px; }  /* bot-check refusal, above the button */
/* api.js always fills the div (a wrapper + the hidden response input) yet keeps it 0 tall at
   rest, so the gap belongs to the VISIBLE challenge only: `is-shown` comes from the widget's
   before-interactive callback (contacts.html). At rest the button stays at the comp's y1452. */
.ct__captcha.is-shown { margin-top: 16px; }

/* ---- „Kitais klausimais galite rašyti“ + the three cards ---- */
.ct__other {                                          /* 435:5522 @294,1690 — 32/41.7 ls3.2 */
  width: 1140px; margin: 181.17px 0 0 294px;          /* 1608.2 − the form's 1427.03 bottom */
  text-transform: uppercase; color: var(--accent);
  font-weight: 200; font-size: 32px; line-height: 41.66px; letter-spacing: 3.2px;
}
.ct__cards {                                          /* @294,1752 — 364/365/364, 86 tall */
  width: 1140px; margin: 30.14px 0 0 294px; padding: 0;  /* 1680 − the title's 1649.86 bottom */
  list-style: none; display: flex;                    /* 364 +23 +365 +24 +364 = 1140 */
}
.ct__card {
  box-sizing: border-box; width: 364px; height: 86px; padding: 19.1px 23px 0;
  background: var(--cream); border: 1px solid var(--sand); border-radius: var(--r-badge);
}
.ct__cards li:nth-child(2) { width: 365px; margin-left: 23px; }
.ct__cards li:nth-child(3) { margin-left: 24px; }
.ct__card-title {                                     /* 435:5531 @318,1776 — 16/20.8 ls1.6 */
  margin: 0; text-transform: uppercase; color: var(--ink);
  font-weight: 400; font-size: 16px; line-height: 20.832px; letter-spacing: 1.6px;
}
.ct__card-link {                                      /* 435:5524 @318,1803 + Vector 208 */
  margin-top: 10.9px; display: inline-flex; align-items: center; gap: 16px;
  color: var(--accent); font-weight: 400; font-size: 16px; line-height: 20.832px;
  transition: color var(--t-tint) var(--ease-out);
}
.ct__card-link:hover { color: var(--ink); }
.ct__card-rule { flex: none; width: 16.5px; height: 7.36px; }

/* ---- Mobile: no comp for this frame — a declared reflow (design/DEVIATIONS.md).
       One column inside 16px gutters; the form and the cards go full width. ---- */
@media (max-width: 767px) {
  .ct { min-height: 0; padding-bottom: 48px; }
  .ct__hero { height: 420px; }
  .ct__block { left: 16px; right: 16px; top: 220px; width: auto; }
  .ct__title { font-size: 48px; line-height: 48px; }
  .ct__crumbs, .ct__photo, .ct__form, .ct__other, .ct__cards {
    position: static; left: auto; top: auto; width: auto;
  }
  .ct__crumbs { margin: 16px; }
  .ct__photo { display: block; margin: 24px 0 0; width: 100%; height: 320px; }
  .ct__form { margin: 32px 16px 0; }
  .ct__form-title, .ct__other { font-size: 24px; line-height: 32px; letter-spacing: 2.4px; }
  .ct__other { margin: 40px 16px 0; }
  .ct__cards { margin: 24px 16px 0; display: grid; grid-template-columns: 1fr; row-gap: 16px; }
  .ct__card, .ct__cards li:nth-child(2) { width: auto; margin-left: 0; }
}