/* ============================================================
   13 · POSVET — Final CTA section styles (navy #0B1929)
   Scoped under #posvet → collision-safe next to legacy components.css.
   Design canon: 2×2 form grid, radio chips (accent brass, min-height 44px),
   panel inputs 16px, brass submit, inline sage confirmation.
   ============================================================ */

#posvet {
  /* local design tokens */
  --al-navy: #0B1929;
  --al-panel: #0F2237;
  --al-cream: #F4EDE0;
  --al-cream-soft: rgba(244, 237, 224, 0.7);
  --al-brass: #B8935A;
  --al-brass-hover: #C4A067;
  --al-brass-line: rgba(184, 147, 90, 0.5);
  --al-brass-line-soft: rgba(184, 147, 90, 0.4);
  --al-brass-fill: rgba(184, 147, 90, 0.12);
  --al-sage: #7A8B5C;
  --al-amber: #C47C2F;

  background: var(--al-navy);
  color: var(--al-cream);
  scroll-margin-top: 62px;
}

#posvet .al-wrap {
  max-width: 1140px;
  margin: 0 auto;
  padding: clamp(64px, 9vw, 120px) clamp(20px, 5vw, 56px);
}

#posvet .al-eyebrow {
  margin: 0 0 12px;
  font: 600 12px/1.4 'Inter', system-ui, sans-serif;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--al-brass);
}

#posvet h2 {
  margin: 0 0 16px;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: clamp(34px, 5.5vw, 60px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--al-cream);
  text-wrap: balance;
}

#posvet .al-lead {
  margin: 0 0 clamp(36px, 4.5vw, 52px);
  font-size: clamp(16px, 1.8vw, 18px);
  line-height: 1.6;
  color: rgba(244, 237, 224, 0.85);
  max-width: 60ch;
  text-wrap: pretty;
}

/* ---- form grid: 2×2, all blocks visible ---- */
#posvet .al-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 44px);
}
#posvet .al-form fieldset {
  border: none;
  padding: 0;
  margin: 0;
  min-width: 0; /* fieldsets default to min-content — would break the grid */
}
#posvet .al-form legend {
  padding: 0;
  font: 600 12px/1.4 'Inter', system-ui, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--al-brass);
}

/* radio chips */
#posvet .al-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}
#posvet .al-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 12px 16px;
  border: 1px solid var(--al-brass-line);
  border-radius: 2px;
  font-size: 14px;
  line-height: 1.3;
  color: var(--al-cream);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
#posvet .al-chip:hover { background: var(--al-brass-fill); }
#posvet .al-chip input {
  accent-color: var(--al-brass);
  width: 15px;
  height: 15px;
  margin: 0;
  flex: none;
}
#posvet .al-chip input:focus-visible {
  outline: 2px solid var(--al-brass);
  outline-offset: 2px;
}
/* selected state (enhancement; browsers without :has still show the radio dot) */
#posvet .al-chip:has(input:checked) {
  border-color: var(--al-brass);
  background: var(--al-brass-fill);
}

/* contact fields */
#posvet .al-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}
#posvet .al-field label {
  display: block;
  margin: 0 0 6px;
  font: 500 13px/1.4 'Inter', system-ui, sans-serif;
  color: var(--al-cream-soft);
}
#posvet .al-field input {
  width: 100%;
  background: var(--al-panel);
  border: 1px solid var(--al-brass-line-soft);
  border-radius: 2px;
  padding: 13px 15px;
  color: var(--al-cream);
  font: 400 16px/1.4 'Inter', system-ui, sans-serif; /* 16px floor — no iOS zoom */
  min-height: 44px;
}
#posvet .al-field input:focus-visible {
  outline: 2px solid var(--al-brass);
  outline-offset: 1px;
  border-color: var(--al-brass);
}

/* newsletter checkbox (unticked by default — markup canon) */
#posvet .al-check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(244, 237, 224, 0.75);
  cursor: pointer;
}
#posvet .al-check input {
  accent-color: var(--al-brass);
  width: 15px;
  height: 15px;
  margin: 2px 0 0;
  flex: none;
}
#posvet .al-check input:focus-visible {
  outline: 2px solid var(--al-brass);
  outline-offset: 2px;
}

#posvet .cf-turnstile { margin-top: 4px; }

/* ---- submit row + inline confirmation ---- */
#posvet .al-form-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
}
#posvet .al-submit {
  background: var(--al-brass);
  color: var(--al-navy);
  border: none;
  border-radius: 2px;
  font: 600 15px/1 'Inter', system-ui, sans-serif;
  padding: 15px 28px;
  min-height: 44px;
  cursor: pointer;
  transition: background 0.2s ease;
}
#posvet .al-submit:hover { background: var(--al-brass-hover); }
#posvet .al-submit:focus-visible {
  outline: 2px solid var(--al-cream);
  outline-offset: 2px;
}
#posvet .al-submit:disabled {
  opacity: 0.55;
  cursor: default;
}

#posvet .al-form-confirm {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font: italic 700 17px/1.4 'Playfair Display', Georgia, serif;
  color: var(--al-sage); /* sage OK here: 17px serif, design canon (not fine print) */
  animation: al-fade-up 0.35s ease;
}
#posvet .al-form-confirm[hidden] { display: none; } /* keep — display:inline-flex would defeat [hidden] */
#posvet .al-form-confirm:focus { outline: none; } /* focus target for SR only (tabindex=-1) */
#posvet .al-form-confirm svg {
  flex: none;
  stroke: var(--al-sage);
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#posvet .al-form-status {
  grid-column: 1 / -1;
  margin: 8px 0 0;
  min-height: 1.4em; /* no layout jump when a message appears */
  font: 600 14px/1.4 'Inter', system-ui, sans-serif;
  color: var(--al-cream-soft);
}
#posvet .al-form-status.err { color: var(--al-amber); }

/* after successful send: freeze the form visually (wizard.js adds .is-sent) */
#posvet .al-form.is-sent fieldset {
  opacity: 0.6;
  pointer-events: none;
}

/* ---- direct contact line ---- */
#posvet .al-contact {
  margin: clamp(40px, 5vw, 56px) 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--al-cream-soft);
}
#posvet .al-contact strong { color: var(--al-cream); font-weight: 600; }
#posvet .al-contact a {
  color: var(--al-cream);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}
#posvet .al-contact a:hover { color: var(--al-brass); }
#posvet .al-contact a:focus-visible {
  outline: 2px solid var(--al-brass);
  outline-offset: 2px;
}

/* ---- responsive ---- */
@media (max-width: 820px) {
  #posvet .al-form { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  #posvet .al-submit { width: 100%; } /* CTA full width — design breakpoint canon */
}

@keyframes al-fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  #posvet .al-form-confirm { animation: none; }
  #posvet .al-chip,
  #posvet .al-submit,
  #posvet .al-contact a { transition: none; }
}