/* ══════════════════════════════════════════════════════════════════════════
   Zenturi - Integration Contact (formulár, sekcia 3 na /integracie/)

   Figma "VypocetCeny-R" (821:27833, stránka Integrácie 708:30657) - ĎALŠÍ
   recyklovaný Figma layer názov, nesúvisí s cenami. Vzťah k `zenturi/sales-contact`
   (rovnaké "biela karta + dva stĺpce + CF7 vpravo" pravidlo, ale INÝ layout)
   je zdôvodnený v template.php - card/row/form-card kostra a input/button
   tokeny sú prevzaté odtiaľ 1:1 (rovnaké Figma hodnoty), select štýl je
   prevzatý z `zenturi/contact-form` (`.zn-cf__form-card select`, jediný
   doterajší blok s vyriešeným select stavom).

   Rozdiely oproti sales-contact, POTVRDENÉ meraním (get_design_context +
   get_variable_defs na 821:27833 aj mobilnom 1202:115695), nie odhadom:
     - ľavý stĺpec MÁ pevnú šírku 480px (821:27835 `w-[480px]`), nie `flex:1 1 0`
     - žiadne pole Firma/IČO, žiadna tagline nad tlačidlom
     - SELECT "Kategória integrácie" (sales-contact select nemá vôbec)
     - MOBIL má INÝ radius (24, Radius/Large) a NENULOVÝ padding karty
       (16/16/24) - sales-contact mobile má naopak radius 40 a nulový padding
       (jeho komentár to explicitne stavia proti "hero-demo mobile" vzoru;
       tunajší mobil JE presne ten vzor, ktorý sales-contact zamietol)

   Akcent farba = `--color-secondary-dark` (#1b8098), rovnaká ako sales-contact
   (POZOR - iná teal než hero-demo `--color-secondary` #219ebc, CLAUDE.md pasca).

   Formulár = Contact Form 7, rovnaký princíp cieľenia natívnych CF7 elementov
   ako ostatné tri kontaktné bloky (status-contact/sales-contact/contact-form).

   Vlnitý spodný okraj karty = rovnaký biely wave.svg asset (skopírovaný, NIE
   nový export z Figmy - overené diff proti sales-contact/status-contact,
   bajtovo zhodné).

   ⚠️ Check bugfix 2026-08-16: SEKCIA má pozadie bg-medium (#ecf2f4), NIE biele -
   over. `get_design_context` priamo na 821:27831 (celý kontajner, nie len
   vnútorný "Component" 821:27833): outer wrapper nemá vlastnú `bg-*` triedu
   (dedí bg-medium z okolia stránky), pt 16 (div-padding-xsmall), pb 80
   (Section Padding/section-medium - get_variable_defs potvrdil, nie odhad).
   Presne rovnaký dvojvrstvový princíp ako `zenturi/hero-simple`: BIELA karta
   (`.zn-ict__card`, zaoblená LEN hore) + vstavaná vlnka POD ňou (`.zn-ict__wave`,
   biely wave.svg, prekryv -3.415 %) sedia na bg-medium sekcii - vlnka je
   viditeľná len vďaka kontrastu voči tomuto pozadiu (na bielej sekcii, ako
   bolo pôvodne, je biela vlnka na bielej NEVIDITEĽNÁ - presne to bol nález).
   Dôsledok pre `views/archive-zenturi_integration.php`: záverečný `wave-sep`
   sa vracia na `navy-on-medium` (bg-medium predchodca), nie `navy-on-light`.

   MOBIL: node 1202:115695 (Integrácie-m 1202:115640), get_variable_defs
   overené (Auto-Desktop pasca z CLAUDE.md - JSX literály 56/48/32/24 sú
   desktopové, skutočné mobilné hodnoty sú 40/24/20/16, viď @media nižšie).
   TABLET (768-1023px): Figma preň nemá spec, generický medzikrok ako
   ostatné bloky tejto rodiny.
   ══════════════════════════════════════════════════════════════════════════ */

.zn-ict {
  background: var(--color-bg-medium);         /* Scheme A/Background Medium #ecf2f4 */
  padding-inline: var(--space-16);            /* Page Padding/padding-global 64 */
}
.zn-ict.zn-block {
  --zn-pt: var(--space-4);                    /* Div Padding/div-padding-xsmall 16 */
  --zn-pb: var(--space-20);                   /* Section Padding/section-medium 80 */
}

.zn-ict__container { max-width: var(--container-max); margin-inline: auto; position: relative; }

.zn-ict__card {
  position: relative;
  z-index: 2;
  background: var(--color-white);
  padding: var(--space-20) var(--space-20) var(--space-12) var(--space-20);  /* pt/px 80 (div-xlarge), pb 48 (div-large) */
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;                      /* Radius/XLarge 40 - LEN hore, dole ju uzatvára vlnka */
}

.zn-ict__row { display: flex; gap: var(--space-12); align-items: flex-start; }  /* Div Padding/div-padding-large 48 */

/* Pevná šírka, NIE `flex: 1 1 0` (rozdiel oproti sales-contact - viď hlavička). */
.zn-ict__col {
  flex: none;
  width: 480px;                               /* Figma 821:27835 */
  display: flex;
  flex-direction: column;
  gap: var(--space-8);                        /* Div Padding/div-padding-medium 32 */
  padding-block: 6px;
}

.zn-ict__heading {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-7xl);                 /* Size/H1 56 */
  line-height: 1.1;
  color: var(--color-text);                   /* #023047 */
}
.zn-ict__heading-accent {
  font-style: italic;
  font-weight: var(--weight-tagline);
  color: var(--color-secondary-dark);         /* #1b8098 */
}

.zn-ict__text {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);                  /* Size/Medium 18 */
  line-height: 1.5;
  color: var(--color-text);
}

/* ── Vnorená formulárová karta ────────────────────────────────────────────── */
.zn-ict__form-card {
  flex: 1 1 0;
  min-width: 580px;                           /* Figma pevné minimum aj šírka (821:27849 w-580) */
  background: var(--color-white);
  padding-top: 8px;                           /* Figma "Container" pt-8 */
  display: flex;
  flex-direction: column;
  gap: var(--space-6);                        /* 24px */
}

/* ── Formulár (natívne CF7 elementy) ──────────────────────────────────────── */
.zn-ict__form-card .wpcf7-form,
.zn-ict__form-fallback {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);                        /* Figma "License Info" gap 8 */
  width: 100%;
}
.zn-ict__form-card .wpcf7-form > p,
.zn-ict__form-fallback { margin: 0; }

.zn-ict__form-row,
.zn-ict__form-card .wpcf7-form > p:first-of-type {
  display: flex;
  gap: var(--space-2);                        /* 8px */
  width: 100%;
}

/* Inputy / select — h48, border rgba(3,3,3,.15), radius 12 (zhoda so sales-contact). */
.zn-ict__form-card input[type="text"],
.zn-ict__form-card input[type="email"],
.zn-ict__form-card select,
.zn-ict__form-fallback input,
.zn-ict__form-fallback select {
  width: 100%;
  height: 48px;
  padding: 8px 12px;
  border: 1px solid var(--color-border);      /* Scheme A/Inputs/Base rgba(3,3,3,.15) */
  border-radius: var(--radius-input);         /* Radius/inputs 12 */
  background: var(--color-white);
  font: inherit;
  font-size: var(--text-base);
  color: var(--color-text);
  flex: 1 1 0;
  min-width: 0;
}
.zn-ict__form-card textarea,
.zn-ict__form-fallback textarea {
  width: 100%;
  height: 128px;                              /* Figma Text Area h128 */
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
  background: transparent;
  resize: vertical;
  font: inherit;
  font-size: var(--text-base);
  color: var(--color-text);
}
.zn-ict__form-card input::placeholder,
.zn-ict__form-card textarea::placeholder,
.zn-ict__form-fallback input::placeholder,
.zn-ict__form-fallback textarea::placeholder { color: var(--color-text-secondary); }
.zn-ict__form-card input:focus,
.zn-ict__form-card select:focus,
.zn-ict__form-card textarea:focus,
.zn-ict__form-fallback input:focus,
.zn-ict__form-fallback select:focus,
.zn-ict__form-fallback textarea:focus { outline: none; border-color: var(--color-secondary); }

/* Select: skryť natívnu šípku, vykresliť chevron cez background (Figma Icon/chevron-down) -
   1:1 prevzaté z `zenturi/contact-form` (`.zn-cf__form-card select`), jediného
   doterajšieho bloku s vyriešeným select stavom. Prázdna hodnota = text-secondary. */
.zn-ict__form-card select,
.zn-ict__form-fallback select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  color: var(--color-text);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%2333363F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
}
/* CF7 `[select*]` nepridáva natívny `required` atribút (len JS validáciu), takže
   `:invalid` naň nefunguje - preto `:has()` (moderné prehliadače). Fallback
   formulár má natívny `required`, tam funguje aj `:invalid`. */
.zn-ict__form-card select:has(option[value=""]:checked),
.zn-ict__form-fallback select:has(option[value=""]:checked),
.zn-ict__form-fallback select:invalid { color: var(--color-text-secondary); }

/* Rovnaká state-logika ako sitewide .btn--primary (components.css) - CF7 default
   submit tlačidlo nedostane .btn triedy automaticky, preto 1:1 duplikované cez
   natívne selektory (rovnaký princíp ako ostatné tri kontaktné bloky). */
.zn-ict__form-card input[type="submit"],
.zn-ict__form-card button[type="submit"],
.zn-ict__form-fallback button[type="submit"] {
  width: 100%;
  height: 60px;                               /* Figma Button 60 */
  padding: 10px var(--space-4);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-button);
  background: var(--color-primary);
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--text-lg);                  /* Button Font Size 18 */
  color: var(--color-black);
  cursor: pointer;
  transition: background var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}
.zn-ict__form-card input[type="submit"]:hover,
.zn-ict__form-card button[type="submit"]:hover,
.zn-ict__form-fallback button[type="submit"]:hover {
  background: var(--color-primary);
  border-color: var(--color-primary-dark);
  box-shadow: var(--shadow-btn);
}
.zn-ict__form-card input[type="submit"]:active,
.zn-ict__form-card button[type="submit"]:active,
.zn-ict__form-fallback button[type="submit"]:active {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  box-shadow: none;
}
.zn-ict__form-card input[type="submit"]:focus-visible,
.zn-ict__form-card button[type="submit"]:focus-visible,
.zn-ict__form-fallback button[type="submit"]:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 2px;
}

/* Žiadny vlastný `position` na `.wpcf7-spinner` - CF7 default (`position: relative`,
   `visibility: hidden`, `margin: 0 24px`, `includes/css/styles.css`) ostáva v toku,
   rezervované miesto neruší layout pri zobrazení a nič to nevysúva mimo kartu.
   `position: absolute` (skopírované zo sales-contact) BEZ top/left/right tu spôsobovalo
   horizontálny pretok na mobile - spinner nasleduje za tlačidlom šírky 100 %, jeho
   "statická pozícia" sa pri absolute umiestnení počíta mimo kartu (zmerané: pravý okraj
   409 px pri viewporte 393 px). Sales-contact rovnaké pravidlo má, ale jeho mobilná karta
   má nulový padding cez celú šírku, takže sa tam pretok neprejavil rovnako viditeľne -
   nespoliehať sa na to tu, kde karta padding má. */
.zn-ict__form-card .wpcf7-response-output {
  margin: var(--space-2) 0 0;
  padding: 0;
  border: 0;
  width: 100%;
  text-align: center;
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
}
.zn-ict__form-card .wpcf7-not-valid-tip { font-size: var(--text-xs); color: var(--color-error); }

/* ── Vlnitý spodný okraj karty ────────────────────────────────────────────── */
.zn-ict__wave { position: relative; z-index: 1; display: flex; width: 100%; margin-top: -1px; }
.zn-ict__wave-piece { display: block; flex: 1 1 0%; min-width: 0; width: 100%; height: auto; aspect-ratio: 480 / 34; }
.zn-ict__wave-piece:first-child { margin-right: -3.415%; }

/* ══ Tablet/Mobil (≤1023.98px) - generický medzikrok, Figma preň nemá spec ══ */
@media (max-width: 1023.98px) {
  .zn-ict__row { flex-direction: column; }
  .zn-ict__col { width: 100%; }
  .zn-ict__form-card { min-width: 0; width: 100%; }
  .zn-ict__form-row,
  .zn-ict__form-card .wpcf7-form > p:first-of-type { flex-direction: column; }
}

/* ══ Mobil (node 1202:115695, Integrácie-m 1202:115640) - get_variable_defs
   overené 1:1, NIE desktopové JSX literály (Auto-Desktop pasca, CLAUDE.md):
   Size/H1 40 (nie 56), Div Padding/div-padding-large 24 (nie 48, aj pb karty
   aj row gap), -medium 20 (nie 32, col gap), -small 16 (nie 24, pt/px karty),
   Radius/Large 24 (nie XLarge 40 - POZOR, iné než sales-contact mobile).
   Meno/Priezvisko STACKUJÚ - mobilný Figma node "License Info" 1202:115706 je
   `flex-col`, nie riadok ako desktop 821:27851 (na rozdiel od `.zn-ict__form-row`
   vyššie určenej pre tablet/desktop stack len cez 1023.98 breakpoint, tu ide
   o mobil-špecifické potvrdenie tej istej vlastnosti z Figmy priamo, nie len
   generický fallback). ══ */
@media (max-width: 767.98px) {
  .zn-ict { padding-inline: var(--space-4); }  /* Page Padding (mobil) 16 */
  /* Mobilný outer wrapper (1202:115695) NEMÁ vo Figme vlastnú pt/pb triedu (JSX
     bez paddingu) - pozícia x=16 pri parent frame 393 zodpovedá bežnému mobilnému
     page-padding, nie vlastnému section-padding tohto komponentu. Presná mobilná
     vertikálna medzera nie je samostatne odmeraná (rovnaký stav ako hero-simple:
     "mobil NEDODANÝ" - CLAUDE.md), preto -m drží konvenčnú polovicu opravených
     desktopových hodnôt (16→8, 80→40), nie hádaný nezávislý údaj. */
  .zn-ict.zn-block { --zn-pt-m: var(--space-2); --zn-pb-m: 40px; }  /* polovica 80 - token pre 40 v škále nie je (skok 32→48) */
  .zn-ict__card {
    padding: var(--space-4) var(--space-4) var(--space-6);  /* pt/px 16, pb 24 */
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;   /* Radius/Large 24 */
  }
  .zn-ict__row { gap: var(--space-6); }        /* div-padding-large (mobil) 24 */
  .zn-ict__col { gap: var(--space-5); }        /* div-padding-medium (mobil) 20 */
  .zn-ict__heading { font-size: 2.5rem; }      /* Size/H1 (mobil) 40 */
  .zn-ict__text { font-size: var(--text-base); }  /* Size/Medium (mobil) 16 */
  /* Prekryv vlnky NEPREPISUJEME - -3.415 % (desktopové pravidlo vyššie) je
     vlastnosť GEOMETRIE wave.svg, nie kontajnera (CLAUDE.md: "VŽDY -3.415 %,
     na desktope, na mobile, v každom bloku" - percento je voči šírke VLASTNÉHO
     kúska, tá sa škáluje s kontajnerom sama). Sales-contact má na mobile
     zdokumentovanú odchýlku -11.85 % ale z OVERENÉHO merania jej vlastného
     assetu; tu by rovnaká hodnota bola len prepis Figma pixelov (mr:-52px),
     presne to, pred čím CLAUDE.md varuje - preto sa NEPRIDÁVA bez merania. */
}