/* ══════════════════════════════════════════════════════════════════════════
   Zenturi - Sales Contact (formulár, stránka "Kontaktovať obchod")

   Figma "VypocetCeny-R" (1026:50827) - 7. význam tohto recyklovaného Figma
   layer názvu (1: pricing-calculator, 2: pricing-compare, 3: compare-cta,
   4/5: status-contact wave iterácie) - nesúvisí s cenami. NIE rovnaký layout
   ako zenturi/status-contact: ľavý stĺpec má len nadpis+text (žiadna info-
   -karta), pravý stĺpec je SAMOSTATNÁ vnorená karta (rounded-12, p-24) s
   5-poľovým formulárom.

   POZOR nadpis: akcent "My na ne máme odpovede." NIE JE display:block ako
   pri iných hero/heading blokoch tejto session - vo Figme je to JEDEN <p>
   s DVOMA inline <span>, text plynule wrapuje cez oba spany podľa šírky
   (viď screenshot: "výzvy? My na ne" na jednom riadku) - accent preto
   ostáva `display: inline` (default pre <em>), NEpridávať block.

   Akcent farba = `--color-secondary-dark` (#1b8098) - POZOR, INÁ farba než
   hero-demo akcent na TEJ ISTEJ stránke (--color-secondary #219ebc) -
   klasická "dve rôzne teal" pasca z CLAUDE.md, over vo Figme pred zmenou.

   Formulár = Contact Form 7 (CLAUDE.md mandát), rovnaký princíp cieľenia
   natívnych CF7 elementov ako status-contact/footer newsletter.

   Vlnitý spodný okraj karty = rovnaká wave.svg technika/asset ako ostatné
   bloky tejto rodiny (skopírovaný súbor, nie nový export).

   MOBIL: node 1202:138636 (393px frame) dodaný Marošom 2026-07-24, implementovaný
   1:1 (get_design_context + get_variable_defs + izolovaný screenshot na overenie
   nulového paddingu, viď komentáre pri @media pravidle).
   TABLET (768-1023px): Figma preň nemá spec, ostáva generický medzikrok.
   ══════════════════════════════════════════════════════════════════════════ */

.zn-sct {
  background: var(--color-white);
  padding-inline: var(--space-16);            /* Page Padding/padding-global 64 */
}
.zn-sct.zn-block {
  --zn-pt: var(--space-4);                    /* Div Padding/div-padding-xsmall 16 */
  --zn-pb: var(--space-12);                   /* Section Padding/section-small 48 */
}

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

.zn-sct__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 */
}

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

.zn-sct__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-8); padding-block: 6px; }  /* Div Padding/div-padding-medium 32 */

.zn-sct__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-sct__heading-accent {
  /* display: inline (default) - NIE block, viď hlavička súboru. */
  font-style: italic;
  font-weight: var(--weight-tagline);
  color: var(--color-secondary-dark);         /* #1b8098 - POZOR, iná farba než hero-demo accent */
}

.zn-sct__text {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-base);                /* Size/Regular 16 */
  line-height: 1.5;
  color: var(--color-text);
}

/* ── Vnorená formulárová karta ────────────────────────────────────────────── */
.zn-sct__form-card {
  flex: 1 1 0;
  min-width: 580px;                           /* Figma pevné minimum */
  background: var(--color-white);
  padding: var(--space-6);                    /* 24px */
  border-radius: var(--radius-md);            /* 12px */
  display: flex;
  flex-direction: column;
  gap: var(--space-6);                        /* 24px */
}

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

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

.zn-sct__form-card input[type="text"],
.zn-sct__form-card input[type="email"],
.zn-sct__form-fallback input {
  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-sct__form-card textarea,
.zn-sct__form-fallback textarea {
  width: 100%;
  height: 120px;
  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-sct__form-card input::placeholder,
.zn-sct__form-card textarea::placeholder,
.zn-sct__form-fallback input::placeholder,
.zn-sct__form-fallback textarea::placeholder { color: var(--color-text-secondary); }
.zn-sct__form-card input:focus,
.zn-sct__form-card textarea:focus,
.zn-sct__form-fallback input:focus,
.zn-sct__form-fallback textarea:focus { outline: none; border-color: var(--color-secondary); }

.zn-sct__tagline {
  text-align: center;
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--text-xl);                  /* Size/H6 20 */
  line-height: 1.4;
  color: var(--color-text);
}
/* Figma (node 1026:50895 dev-mode spacing overlay, Maroš): 24px nad AJ pod týmto textom.
   Kontajner formulára je flex s `gap: var(--space-2)` (8px) medzi VŠETKÝMI poľami vrátane
   tagline, takže margin dopĺňa len ROZDIEL (24 − 8 = 16 = --space-4); margin a flex gap
   sa sčítavajú (nekolabujú ako bežný block margin), takže ostatné polia ostávajú na 8px.

   POZOR ŠPECIFICITA (kaskádová pasca z CLAUDE.md): `margin-block` na holom
   `.zn-sct__tagline` (0,1,0) NEFUNGOVAL - prehral s `.zn-sct__form-card .wpcf7-form > p
   { margin: 0 }` (0,2,1) vyššie v tomto súbore, lebo tagline JE priamy `> p` potomok
   formulára (overené v DDEV: computed margin bol 0). Preto plná cesta pre CF7 vetvu.
   Fallback formulár (bez CF7) tú kolíziu nemá - tam stačí jednotriedny selektor. */
.zn-sct__form-card .wpcf7-form > p.zn-sct__tagline,
.zn-sct__form-fallback .zn-sct__tagline {
  margin-block: var(--space-4);
}

/* 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 status-contact). */
.zn-sct__form-card input[type="submit"],
.zn-sct__form-card button[type="submit"],
.zn-sct__form-fallback button[type="submit"],
.zn-sct__submit {
  width: 100%;
  height: 60px;                               /* Figma Button 60, väčšie než sitewide .btn 48 */
  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 (väčšie tlačidlo) */
  color: var(--color-black);
  cursor: pointer;
  transition: background var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}
.zn-sct__form-card input[type="submit"]:hover,
.zn-sct__form-card button[type="submit"]:hover,
.zn-sct__form-fallback button[type="submit"]:hover {
  background: var(--color-primary);
  border-color: var(--color-primary-dark);
  box-shadow: var(--shadow-btn);
}
.zn-sct__form-card input[type="submit"]:active,
.zn-sct__form-card button[type="submit"]:active,
.zn-sct__form-fallback button[type="submit"]:active {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  box-shadow: none;
}
.zn-sct__form-card input[type="submit"]:focus-visible,
.zn-sct__form-card button[type="submit"]:focus-visible,
.zn-sct__form-fallback button[type="submit"]:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 2px;
}

.zn-sct__form-card .wpcf7-spinner { position: absolute; }
.zn-sct__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-sct__form-card .wpcf7-not-valid-tip { font-size: var(--text-xs); color: var(--color-error); }

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

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

/* ══ Mobil (node 1202:138636, 393px frame) - Figma dev-mode + get_variable_defs
   overené 1:1 (Maroš dodal linky 2026-07-24). POZOR - `.zn-sct__card` (Figma
   "Component") aj `.zn-sct__form-card` (Figma vnorený "Container") majú na
   mobile NULOVÝ vlastný padding (potvrdené aj vizuálne cez izolovaný screenshot
   node 1202:138638 - text/polia sa dotýkajú okraja rámu) - všetok horizontálny
   priestor dáva NAVYŠE `.zn-sct__container` (Figma "Container" má VLASTNÝ
   px-16 navyše nad sekciou, spolu 32px od okraja viewportu). Card radius
   OSTÁVA 40 (Radius/XLarge, NEmení sa na 24 ako pri hero-demo mobile). */
@media (max-width: 767.98px) {
  /* --zn-pt-m/--zn-pb-m (nie holé --zn-pt/--zn-pb) - components.css .zn-block
     inak PRI ≤767px hodnotu ešte raz prepolví (rovnaký bug ako Status
     stránka, opravené konzistentne aj tu). */
  .zn-sct { padding-inline: var(--space-4); }
  .zn-sct__container { padding-inline: var(--space-4); }  /* Figma Container px-16 navyše (aj vlnka pod kartou zdedí toto zúženie) */
  .zn-sct.zn-block { --zn-pt-m: var(--space-2); --zn-pb-m: var(--space-8); }
  .zn-sct__card { padding: 0; border-radius: var(--radius-xl) var(--radius-xl) 0 0; }  /* 0 padding potvrdené, radius 40 nezmenené */
  .zn-sct__row { gap: var(--space-6); }       /* Figma div.row gap 24 (desktop 48) */
  .zn-sct__col { gap: var(--space-5); }       /* Figma "div" (text blok) gap 20 (desktop 32) */
  .zn-sct__heading { font-size: 2.5rem; }     /* Size/H1 40 - potvrdené cez get_variable_defs */
  .zn-sct__form-card { padding: 0; }          /* 0 potvrdené (nie 16) */
  .zn-sct__wave-piece:first-child { margin-right: -11.85%; }  /* Figma -39px/329px kontajner (INÝ pomer než hero-demo -14.3%, lebo vlnka tu je užšia - 329, nie 361) */
}