/* Contact section (patterns contact, contact-en) and the [marketing_contact_form] card (inc/contact.php).
   Mobile: form, then phone + e-mail side by side and the address across both. Desktop (782px+): form 678px left, cards stacked right. */

:root {
  --error: #FF7A6B;
  --error-tint: rgba(255,122,107,0.10);
  --error-line: rgba(255,122,107,0.45);
}

/* Layout */
.lk-section :is(.contact-grid, .contact-cards, .lk-contact, .lk-contact-top, .lk-contact-text) > * { margin-block: 0; }
.contact-grid { display: flex; flex-direction: column; gap: 12px; }
.contact-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.contact-cards > .lk-contact:last-child { grid-column: span 2; }

/* Channel cards */
.lk-section .lk-contact { padding: 18px; min-height: 136px; }
.lk-contact .lk-tile { width: 44px; height: 44px; margin: 0; }
.lk-contact-top::after { content: ""; width: 18px; height: 18px; rotate: -45deg; background: var(--muted);
  -webkit-mask: url(../icons/arrow-right.svg) center / contain no-repeat; mask: url(../icons/arrow-right.svg) center / contain no-repeat; }
.lk-section .lk-contact-value { font-size: 15px; }
.lk-contact-value a { color: inherit; text-decoration: none; }
.lk-contact-value a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } /* whole card is the tap target */
.lk-contact-value a:focus-visible { outline: none; }
.lk-contact:has(a:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Form card */
.lk-cform { position: relative; display: flex; flex-direction: column; gap: 20px; padding: 20px; border-radius: var(--radius-panel);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-card); box-sizing: border-box; }
.lk-cform p, .lk-cform h3 { margin: 0; }
.lk-cform-head { display: flex; flex-direction: column; gap: 8px; }
.lk-cform-head h3 { font-family: var(--font-display); font-weight: 600; font-size: 20px; line-height: 1.3; letter-spacing: -0.01em; color: var(--text); }
.lk-cform-head p { font-size: 16px; line-height: 1.6; color: var(--muted); }
.lk-cform-fields { display: flex; flex-direction: column; gap: 16px; }
.lk-cform-row { display: flex; flex-direction: column; gap: 16px; }
.lk-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1 1 0; }
.lk-field label { font-size: 15px; font-weight: 500; line-height: 1.3; color: var(--text); }
.lk-field :is(input, textarea) { display: block; width: 100%; height: 52px; margin: 0; padding: 0 16px; border-radius: var(--radius-input);
  background: var(--surface-2); border: 1px solid var(--line-2); color: var(--text); font-family: var(--font-body); font-size: 16px; box-sizing: border-box; }
.lk-field textarea { height: 160px; padding: 14px 16px; line-height: 1.5; resize: vertical; }
.lk-field :is(input, textarea):focus { border-color: var(--gold); }
.lk-field :is(input, textarea)[aria-invalid="true"] { border-color: var(--error); box-shadow: inset 0 0 0 1px var(--error); }
.lk-field-err { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; line-height: 1.45; font-weight: 500; color: var(--error); }
.lk-cform-foot { display: flex; flex-direction: column; gap: 14px; }
.lk-cform-foot .lk-btn { width: 100%; }
.lk-cform-note { font-size: 14px; line-height: 1.5; color: var(--muted); }
.lk-cform a:not(.lk-btn) { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.lk-cform a:not(.lk-btn):hover { color: var(--gold-bright); }
.lk-cform-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Error and failure banner */
.lk-cform-alert { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: var(--radius-input);
  background: var(--error-tint); border: 1px solid var(--error-line); color: var(--error); }
.lk-cform-alert > div { display: flex; flex-direction: column; gap: 4px; }
.lk-cform-title { font-family: var(--font-display); font-weight: 600; font-size: 16px; line-height: 1.35; color: var(--text); }
.lk-cform-alert p:not(.lk-cform-title) { font-size: 15px; line-height: 1.55; color: var(--text); }
.lk-cform-alert a { font-weight: 600; }

/* Sent (replaces the form) */
.lk-cform-sent { justify-content: center; }
.lk-cform-check { width: 64px; height: 64px; border-radius: 18px; background: var(--gold-tint); border: 1px solid rgba(239,184,11,0.35); color: var(--gold);
  display: flex; align-items: center; justify-content: center; box-sizing: border-box; }
.lk-cform-sent-text { display: flex; flex-direction: column; gap: 10px; }
.lk-cform-sent h3 { font-family: var(--font-display); font-weight: 700; font-size: 24px; line-height: 1.2; letter-spacing: -0.02em; color: var(--text); }
.lk-cform-sent p { max-width: 480px; font-size: 16px; line-height: 1.6; color: var(--muted); }

@media (min-width: 782px) {
  .contact-grid { flex-direction: row; align-items: stretch; gap: 24px; }
  .contact-grid > .lk-cform { flex: 0 1 678px; min-width: 0; }
  .contact-cards { display: flex; flex-direction: column; gap: 16px; flex: 1 1 280px; }
  .contact-cards > .lk-contact { flex: 1 1 0; }
  .lk-section .lk-contact { padding: 24px; min-height: 168px; }
  .lk-contact .lk-tile { width: 48px; height: 48px; }
  .lk-section .lk-contact-value { font-size: 17px; }

  .lk-cform { gap: 24px; padding: 40px; }
  .lk-cform-head h3 { font-size: 22px; }
  .lk-cform-fields { gap: 20px; }
  .lk-cform-row { flex-direction: row; align-items: flex-start; }
  .lk-cform-foot { gap: 16px; }
  .lk-cform-foot .lk-btn { width: auto; align-self: flex-start; }
  .lk-cform-sent { gap: 20px; min-height: 618px; }
  .lk-cform-sent h3 { font-size: 28px; }
}