/* ============================================================
   KOGNEV — Kontaktai
   Scoped to body.kg2, loaded alongside home.css, which supplies
   the tokens, the kg-ps-hero anatomy and the kg-contact__grid
   form treatment this page reuses from the homepage verbatim.

   The old page put the form, the contact details and the booking
   calendar each in its own rounded, shadowed card, so three
   unrelated boxes competed at the same elevation. Here the form
   and the calendar are the only two blocks that get a surface,
   and the contact details are a plain hairline-separated list.
   ============================================================ */

/* ---------- Direct contact details ---------- */
.kg2 .kg-ct-list { border-top: 1px solid var(--rule); }
.kg2 .kg-ct-list > div {
  display: grid;
  grid-template-columns: minmax(0, 8rem) minmax(0, 1fr);
  gap: var(--s-3);
  align-items: baseline;
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--rule);
}
.kg2 .kg-ct-list dt { margin: 0; font-size: var(--t-micro); font-weight: 600; color: var(--slate); }
.kg2 .kg-ct-list dd { margin: 0; font-size: var(--t-micro); line-height: 1.5; color: var(--ink); }
.kg2 .kg-ct-list dd a { color: var(--signal-ink); text-decoration: underline; text-underline-offset: 3px; }
.kg2 .kg-ct-list dd a:focus-visible { outline: 2px solid var(--signal-ink); outline-offset: 2px; }
.kg2 .kg-ct-list .copy-email-button { font-size: var(--t-micro); color: var(--signal-ink); }
/* These sit on one line each and measured 16px tall, well under the touch minimum. */
@media (pointer: coarse) {
  .kg2 .kg-ct-list dd a,
  .kg2 .kg-ct-list .copy-email-button {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* ---------- Booking calendar ----------
   One surface, a hairline frame and nothing else. The embed
   brings its own chrome, so anything added here reads as a box
   inside a box. */
.kg2 .kg-cal { scroll-margin-top: 96px; }
.kg2 .kg-cal__frame {
  margin-top: var(--s-4);
  border: 1px solid var(--rule);
  background: var(--surface);
  padding: var(--s-2);
  min-height: 32rem;
}
.kg2 .kg-cal__frame > div { width: 100%; }

@media (max-width: 700px) {
  .kg2 .kg-ct-list > div { grid-template-columns: 1fr; gap: var(--s-1); }
  .kg2 .kg-cal__frame { padding: 0; border: 0; min-height: 0; }
}