/* YABI 2.0 v3 – Kontakt (/kontakt/). Návrh: Contact / Desktop 1440 (674:5968), Contact / Mobile 390 (682:3913).
   Formulár používa logiku zo site.js (#contact-form, #f-name, #f-email, .btn-submit, .form__status) – nič sa neodosiela. */

.k-wrap{position:relative;max-width:calc(var(--content) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}

/* ---------- Úvod: chip, h1, ilustrácia (lišta 118 px + section padding 96) ---------- */
.k-intro{padding:214px 0 344px}
.k-intro .k-wrap{display:flex;flex-direction:column;align-items:flex-start;gap:32px}
.k-chip{color:var(--ink-gray)}
.k-title{font-size:120px;line-height:120px;letter-spacing:-6px}
.k-line{position:absolute;left:calc(var(--gutter) + 450.5px);top:246.5px;width:376px;height:301px;max-width:none;pointer-events:none}
.k-bird{position:absolute;left:calc(var(--gutter) + 657px);top:266px;width:130px;height:126.18px;max-width:none;pointer-events:none}
/* EN kontakt: dlhší druhý riadok nadpisu ("...your project.") sa dotýka čiary; posun ilustrácie doprava */
@media (min-width:1280px){
  :lang(en) .k-line{left:calc(var(--gutter) + 630.5px)}
  :lang(en) .k-bird{left:calc(var(--gutter) + 837px)}
}

/* ---------- Obsah: texty + kroky vľavo, formulár vpravo ---------- */
.k-main{padding-bottom:120px}
.k-grid{display:flex;align-items:flex-start;gap:72px}
.k-details{flex:0 0 400px;display:flex;flex-direction:column;gap:48px}
.k-text{display:flex;flex-direction:column;gap:24px}
.k-text p{max-width:380px}
.k-h2{font-size:48px;--lh:48px;line-height:var(--lh);letter-spacing:-2.16px}
.k-steps{display:flex;flex-direction:column;gap:20px}
.k-steps li{display:flex;align-items:center;gap:16px}
.k-steps li>.trim{max-width:330px}
.k-steps__num{display:flex;align-items:center;justify-content:center;flex:none;width:36px;height:36px;border-radius:var(--r-full);background:var(--ink);color:var(--paper);font-size:16px;font-weight:700;letter-spacing:-.16px}
.k-steps__num>.trim{--lh:24px;line-height:24px}

/* Papier s odrezaným rohom (form-fields.svg z návrhu) – tieň cez drop-shadow na obale,
   aby kopíroval odrezaný roh (box-shadow na ::before pretékal za rez). */
.k-paper{position:relative;flex:1 1 808px;min-width:0;filter:drop-shadow(0 24px 44px rgba(0,10,23,.28))}
.k-form{position:relative;display:flex;flex-direction:column;gap:28px;padding:56px 48px 48px;border-radius:var(--r-main);background:var(--paper);clip-path:polygon(0 0,calc(100% - 72px) 0,100% 76.8px,100% 100%,0 100%)}
.k-paper__flap{position:absolute;right:-8px;top:-6px;width:96px;height:96px;max-width:none;pointer-events:none}

.k-form__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.k-field{display:flex;flex-direction:column;gap:8px;min-width:0}
.k-field__control{display:block;width:100%;height:41px;margin:0;padding:0 15px;border:1px solid var(--field-border);border-radius:var(--r-btn);background:var(--paper);color:var(--ink);font-size:16px;line-height:24px;letter-spacing:-.16px;-webkit-appearance:none;appearance:none;scroll-margin-top:120px;scroll-margin-bottom:24px}
.k-field__control::placeholder{color:var(--ink-gray);opacity:1}
.k-field__control:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 1px var(--primary)}
.k-field__control--area{height:112px;padding:7px 15px;resize:vertical;scroll-margin-top:120px;scroll-margin-bottom:24px}
.k-field__control[aria-invalid="true"]{border-color:var(--red);box-shadow:0 0 0 1px var(--red)}

.k-choice{display:flex;flex-direction:column;gap:14px}
.k-choice__options{display:flex;flex-wrap:wrap;gap:8px 10px}
.k-pill{position:relative;display:flex;align-items:center;padding:12px 19px;border:1px solid var(--ink);border-radius:var(--r-full);white-space:nowrap;cursor:pointer;transition:background-color .15s ease,color .15s ease}
.k-pill input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.k-pill:hover{background:var(--paper-dark)}
.k-pill:has(input:checked){border-color:var(--primary);background:var(--primary);color:var(--paper)}
.k-pill:has(input:focus-visible){outline:2px solid var(--primary);outline-offset:3px}

.k-consent{display:flex;flex-direction:column;gap:16px}
.k-check{display:flex;align-items:flex-start;gap:14px;cursor:pointer}
.k-check>span{flex:1 1 auto;min-width:0}
.k-check input{flex:none;width:20px;height:20px;margin:0;border:1.5px solid var(--ink);border-radius:var(--r-chip);background:var(--paper) center/14px no-repeat;-webkit-appearance:none;appearance:none;cursor:pointer}
.k-check input:checked{border-color:var(--primary);background-color:var(--primary);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 7.2l2.6 2.6L11 4.4' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.k-check input[aria-invalid="true"]{border-color:var(--red);box-shadow:0 0 0 1px var(--red)}

.k-submit{display:flex;align-items:center;justify-content:space-between;gap:20px}
/* Kód návrhu uvádza Ink, screenshot návrhu ukazuje sivý text – podľa screenshotu. */
.k-submit>p{color:var(--ink-gray)}
/* .btn-submit (základ) je biele tlačidlo do modrej sekcie – tu Primary podľa návrhu. */
.k-submit__btn.btn-submit{width:auto;padding:12px 16px;border:1px solid var(--primary);background:var(--primary);color:var(--paper)}
.k-submit__btn.btn-submit:not(:disabled):hover{background:transparent;color:var(--primary)}
.k-submit__btn.btn-submit:disabled:hover{background:var(--primary)}
.k-form .form__status{border-color:var(--grey-20);background:var(--paper-dark)}
.k-call{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px}
.k-call .placeholder-link{font-weight:500;text-decoration:underline;text-underline-offset:2px}

/* ---------- Responzivita ---------- */
@media (max-width:1199px){
  .k-title{font-size:96px;line-height:96px;letter-spacing:-4.8px}
  .k-grid{gap:48px}
  .k-details{flex-basis:340px}
  .k-form{padding:48px 32px 32px}
}
@media (max-width:1023px){
  .k-intro{padding-bottom:304px}
  .k-title{font-size:80px;line-height:80px;letter-spacing:-4px}
  .k-line{left:calc(50% - 188px);top:auto;bottom:-282px}
  .k-bird{left:calc(50% + 18.5px);top:auto;bottom:-226px}
  .k-grid{flex-direction:column;gap:48px}
  .k-details{flex:none;width:100%}
  .k-paper{flex:none;width:100%}
}
@media (max-width:767px){
  /* Návrh Contact / Mobile (390): lišta 96 + section padding 64 */
  .k-intro{padding:160px 0 48px}
  .k-title{font-size:44px;line-height:48px;letter-spacing:-1.32px}
  .k-line,.k-bird{display:none}
  .k-main{padding:32px 0 64px}
  /* Poradie podľa návrhu: texty, kroky, formulár, lokalita */
  .k-grid{gap:40px}
  .k-details{display:contents}
  .k-text{order:1}
  .k-steps{order:2;margin-top:8px}
  .k-paper{order:3}
  .k-location{order:4}
  .k-steps li>.trim{max-width:298px}
  .k-paper__flap{display:none}
  .k-form{padding:24px;border-radius:var(--r-main) 0 var(--r-main) var(--r-main);clip-path:none}
  .k-paper::before{border-radius:var(--r-main) 0 var(--r-main) var(--r-main)}
  .k-check input{border-radius:6px}
  .k-submit{flex-direction:column;align-items:flex-start;gap:16px}
  .k-submit>p{color:var(--ink)}
  .k-call{justify-content:center;text-align:center}
}

/* ====== Motion pass: kontakt je hore na stranke = casova animacia pri nacitani ====== */
@media (prefers-reduced-motion:no-preference){
  .k-line{animation:yabi-wipe 1s cubic-bezier(.22,1,.36,1) .3s both}
  .k-bird{animation:yabi-glide 1.1s cubic-bezier(.3,.9,.3,1) .3s both}
}

@media (max-width:767px){
  /* Visually hidden, still rendered: stays in the accessibility tree and heading navigation,
     so aria-labelledby="k-form-title" keeps naming the section. The absolute box leaves the
     .k-text flex flow → no 24px gap. The id selector outranks .k-h2 and .trim. */
  #k-form-title.k-h2{
    position:absolute;
    width:1px;height:1px;
    margin:-1px;padding:0;border:0;
    overflow:hidden;
    clip:rect(0 0 0 0);
    clip-path:inset(50%);

    white-space:nowrap;
    text-box:none
  }

  /* Project-type chips: one per row, full width, equal minimum height, centred text.
     (0,2,0) selectors beat the single-class rules in kontakt.css regardless of order.
     Colours, :has(input:checked), :hover and :focus-visible rules are not touched. */
  .k-choice .k-choice__options{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
  .k-choice__options .k-pill{
    justify-content:center;
    min-height:max(48px,3em);       /* 48px at 16px font, grows with larger text */
    text-align:center;
    white-space:normal;             /* long SK/EN labels wrap instead of overflowing */
    overflow-wrap:anywhere;
    border-radius:max(24px,1.5em)   /* half of min-height: identical pill on one line, no clipped text when wrapped */
  }
}