/*
 * Контакти — page skin.
 *
 * Loads after inner-studio.css (see the per-page skin enqueue block in
 * functions.php, $g22_page_deps includes 'g22-inner-studio' whenever
 * $use_inner_studio is true, which it is for is_page('kontakty')). Shared
 * chrome is adjusted only through body:has(.g22-kontakty), keeping every
 * change reversible and isolated to this page.
 */

/* Page aliases map to the live token layer. Keep primitives in tokens.css;
	 this file only names the subset used by the contacts composition. */
.g22-kontakty,
body:has(.g22-kontakty) {
  --kc-purple: var(--g22-purple);
  --kc-purple-deep: var(--g22-purple-deep);
  --kc-cream: var(--g22-paper, #f5f5f5);
  --kc-yellow: var(--g22-yellow);
  --kc-canvas: var(--g22-canvas, #e5e5e5);
  --kc-paper: var(--g22-paper, #f5f5f5);
  --kc-card: var(--g22-card, #fff);
  --kc-line: var(--g22-line, #d8d8d8);
  --kc-radius-sm: var(--g22-r-sm, 8px);
  --kc-radius-md: var(--g22-r-md, 12px);
  --kc-radius-lg: var(--g22-r-lg, 20px);
  --kc-radius-pill: var(--g22-r-pill, 999px);
  --kc-caption: var(--g22-fs-small, 0.875rem);
  --kc-section-y: clamp(64px, 8vw, 96px);
}

/* ---------- Visiting card ---------- */

/* Legacy 2-column rules (.g22-kontakty__layout / __aside sticky card)
   removed 2026-07-29: the bento markup carries neither class — the contact
   card's container styling lives on .g22-kontakty__tile--contact. */
.g22-kontakty__card-kicker {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: var(--kc-caption);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--kc-yellow);
}

.g22-kontakty__card-dot {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--kc-yellow);
}

/* Infinite dot-pulse removed (audit 2026-07-29): a perpetual attention
   magnet with no function is decorative motion. The static yellow dot
   stays as a quiet status marker beside the kicker. */

/* Contact list rhythm (client fix, 2026-07-27): "дати перелік контактів
   списком" — phone / address+route / hours / email read as a set of loose,
   differently-sized elements with no shared rule between them. A hairline
   divider between each turns the same markup into a clean list of contact
   rows without touching layout/markup — the outer .g22-kontakty__card flex
   gap (18px) already provides the row spacing, this only adds the rule. */
.g22-kontakty__card-phone,
.g22-kontakty__card-hours,
.g22-kontakty__card-email {
  position: relative;
  z-index: 1;
  padding-top: 16px;
  border-top: 1px solid rgba(244, 240, 231, 0.16);
}

.g22-kontakty__card-phone {
  display: block;
  font-family: "Manrope", sans-serif;
  font-weight: 800;
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--g22-on-purple, #fff);
  text-decoration: none;
  width: fit-content;
  /* First row of the list — no divider above it, sits right under the
	   kicker/dot. */
  padding-top: 0;
  border-top: 0;
}

.g22-kontakty__card-phone:hover,
.g22-kontakty__card-phone:focus-visible {
  color: var(--kc-yellow);
}

.g22-kontakty__card-hours {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: var(--kc-caption);
  color: rgba(244, 240, 231, 0.72);
}

.g22-kontakty__card-email {
  position: relative;
  z-index: 1;
  width: fit-content;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--kc-cream);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(244, 240, 231, 0.4);
}

.g22-kontakty__card-email:hover,
.g22-kontakty__card-email:focus-visible {
  color: var(--kc-yellow);
  text-decoration-color: var(--kc-yellow);
}

/* Ghost "22" watermark removed (audit 2026-07-29): PRODUCT.md lists
   "випадкові «22»" as an explicit anti-reference — a decorative stray
   number undercuts the calm, systematic brand. Hidden here rather than
   in the block template so the change is one reversible CSS edit. */
.g22-kontakty__card-ghost {
  display: none;
}

/* ---------- Map section — dark invitation card ---------- */

.g22-kontakty__map-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--kc-purple-deep) 82%, #fff 18%);
  border-radius: var(--kc-radius-lg);
  background: var(--kc-purple-deep);
  color: var(--kc-cream, #efeff0);
}

/* Real map embed — reserves a 16:10 box against layout shift, lazy-loaded
   (below the fold on the right column). */
.g22-kontakty__map-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: var(--kc-paper);
}

.g22-kontakty__map-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Dark address strip under the map: pin + address on one row, route CTA below. */
.g22-kontakty__map-body {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 6px 12px;
  padding: clamp(20px, 2.4vw, 28px);
}

.g22-kontakty__map-pin {
  grid-row: 1;
  grid-column: 1;
  width: 18px;
  height: 18px;
  border-radius: 50% 50% 50% 0;
  background: var(--kc-yellow, #ffd141);
  box-shadow: none;
  position: relative;
  transform: rotate(-45deg);
}

.g22-kontakty__map-pin::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%) rotate(45deg);
}

.g22-kontakty__map-copy {
  grid-row: 1;
  grid-column: 2;
  display: grid;
  gap: 4px;
  min-width: 0;
}

.g22-kontakty__map-copy strong {
  font-size: clamp(1.1rem, 1.9vw, 1.5rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--g22-on-purple, #fff);
}

.g22-kontakty__map-cta {
  grid-row: 2;
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: var(--kc-radius-pill);
  background: var(--kc-yellow, #ffd141);
  color: var(--kc-purple, #3f2780);
  font-size: var(--kc-caption);
  font-weight: 700;
  text-decoration: none;
  transition: background-color var(--g22-t-fast, 160ms)
    var(--g22-ease-out, ease-out);
}

.g22-kontakty__map-cta:hover,
.g22-kontakty__map-cta:focus-visible {
  background: #fff;
}

.g22-kontakty__map-cta:focus-visible {
  outline: 2px solid var(--kc-yellow, #ffd141);
  outline-offset: 3px;
}

/* Submit hover-lift/active-press already exists globally
   (.g22-studio .g22-form button/[type="submit"], inner-studio.css lines
   ~209-249) — intentionally not duplicated here. */

/* ---------- Focus-visible safety net for this page's new elements ---------- */
.g22-kontakty__card-phone:focus-visible {
  outline: 2px solid var(--kc-yellow);
  outline-offset: 4px;
}

/* ---------- Reduced motion — disable everything new above ---------- */
@media (prefers-reduced-motion: reduce) {
  .g22-kontakty__card-dot {
    animation: none;
    box-shadow: none;
  }

  .g22-kontakty__map-cta {
    transition: none;
  }

  .g22-kontakty__card-social,
  .g22-kontakty__card-social-arrow {
    transition: none;
  }
}

/* Sticky taste nav sits at top:14 while its layout box stays at 0 — so the
 * intro background tucks under the capsule. Ira (2026-07-29): red-X on the
 * empty band above the hero — match other henna pages (near-flush under
 * the capsule), not the default .g22-studio__intro 88–128px pad. */
body:has(.g22-kontakty) .g22-main {
  padding-top: 0;
}

.g22-kontakty .g22-studio__intro {
  position: relative;
  overflow: hidden;
  /* Match shared --g22-below-nav (Ira: same offset to yellow kicker as peers). */
  padding-top: var(--g22-below-nav, clamp(72px, 9vw, 96px));
  padding-bottom: clamp(48px, 6vw, 72px);
  background: var(--kc-canvas);
}

/* The existing yellow dash and marker are the only hero accents. */
.g22-kontakty .g22-studio__intro::before {
  display: none;
}

/* Hero type from shared --g22-hero-* (inner-studio / tokens). */
.g22-kontakty__hero {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.84fr);
  column-gap: clamp(2rem, 4vw, 4.5rem);
  align-items: center;
}

.g22-kontakty__hero-copy {
  grid-column: 1;
  min-width: 0;
}

/* Yellow marker swash under the brand word — same motif as the henna heroes
   (.g22-marker-word, henna-gestures.css), replicated here because the studio-
   skinned Контакти page never loads that layer. Drawn on load; fully shown
   for reduced-motion. */
.g22-kontakty__mark {
  position: relative;
  display: inline-block;
  isolation: isolate;
  white-space: nowrap;
  z-index: 0;
}

.g22-kontakty__mark::after {
  content: "";
  position: absolute;
  left: -0.05em;
  right: -0.05em;
  bottom: -0.02em;
  height: 0.26em;
  background: url("../../images/brand/doodles/marker-stroke.svg") no-repeat left
    bottom;
  background-size: 100% 100%;
  z-index: -1;
  pointer-events: none;
  clip-path: inset(0 100% 0 0);
}

@media (prefers-reduced-motion: no-preference) {
  .g22-kontakty__mark::after {
    animation: g22-kontakty-mark-draw 640ms cubic-bezier(0.33, 1, 0.68, 1) 340ms
      both;
  }
}

@media (prefers-reduced-motion: reduce) {
  .g22-kontakty__mark::after {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes g22-kontakty-mark-draw {
  to {
    clip-path: inset(0 0 0 0);
  }
}

.g22-kontakty__hero-aside {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2vw, 1.5rem);
  min-width: 0;
}

.g22-kontakty__hero-figure {
  margin: 0;
  border-radius: var(--g22-hero-media-radius, var(--kc-radius-lg, 20px));
  overflow: hidden;
  aspect-ratio: var(--g22-hero-media-ratio, 4 / 3);
  box-shadow: var(--g22-hero-media-shadow, 0 24px 60px rgba(26, 26, 26, 0.14));
}

.g22-kontakty__hero-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Portrait plate in shared 4:3 hero frame — keep boy + stick model in view. */
  object-position: 42% 32%;
}

/* Hero proof strip styles live in inner-henna.css (.g22-hero-stats + aliases)
   so Контакти / Екстернат / Навч. процес stay pixel-identical. */

@media (max-width: 820px) {
  .g22-kontakty .g22-studio__intro {
    /* Beat inner-studio.css @640px `.g22-studio__intro { padding-top: 96px }` */
    padding-top: var(--g22-below-nav, 72px) !important;
  }

  .g22-kontakty__hero {
    grid-template-columns: 1fr;
    row-gap: clamp(1.5rem, 5vw, 2.25rem);
  }

  .g22-kontakty__hero-copy,
  .g22-kontakty__hero-aside {
    grid-column: 1;
  }

  .g22-kontakty__hero-figure {
    aspect-ratio: var(--g22-hero-media-ratio-narrow, 16 / 10);
  }
}

/* ---------- Visual rhythm (client fix, 2026-07-27) ----------
 * Yellow dash above the voices H2 — same 40×3 motif as kickers elsewhere.
 * Map stays suppressed; socials are visible again above this block. */
.g22-kontakty__voices-head {
  position: relative;
  padding-top: 22px;
}

.g22-kontakty__voices-head::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 3px;
  border-radius: 2px;
  background: var(--kc-yellow, #ffd141);
}

/* =====================================================================
   Editorial bento (client redesign 2026-07)
   One asymmetric grid replaces the old form + sparse card 2-column, the
   generic four-card socials row, and the hidden map. The form is the
   primary tile (left, full height); phone (brand purple), map (dark
   invitation card), hours and socials are supporting tiles at their own
   weights. Brand purple + yellow kept — this is identity, not decoration.
   ===================================================================== */
.g22-kontakty__bento {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr; /* mobile: single column stack */
  align-items: start;
  height: fit-content;
}

.g22-kontakty__tile {
  border-radius: var(--kc-radius-lg);
  /* Grid-item overflow guard (adapt 2026-07-29): as a bento grid item the
	   form tile defaulted to min-width:auto, so the form's inputs held the
	   1fr track wider than the container and the whole stack overflowed the
	   viewport by ~3px at 320px. min-width:0 lets tiles shrink to the track.
	   (.g22-kontakty__aside-stack already carries this.) */
  min-width: 0;
}

/* Right column: a compact, content-sized stack. Tiles hug their content —
   sparse content in an oversized coloured block was the failure mode of the
   previous version, so nothing here is stretched. */
.g22-kontakty__aside-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  height: fit-content;
}

@media (min-width: 760px) {
  .g22-kontakty__bento {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.86fr);
    /* Equal bottoms: both columns share one row height = content hug,
       no bare-canvas void under the shorter side. */
    align-items: stretch;
  }

  .g22-kontakty__aside-stack {
    height: 100%;
    min-height: 0;
  }

  .g22-kontakty__tile--form {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
  }

  .g22-kontakty__tile--form .g22-form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
  }

  /* Push consent + submit to the card footer — leftover height becomes
     group spacing (fields ↔ action), not an empty band under the card. */
  .g22-kontakty__tile--form .g22-form__consent {
    margin-top: auto;
  }

  /* Map absorbs leftover aside height so the stack matches the form card. */
  .g22-kontakty__tile--map {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .g22-kontakty__tile--map .g22-kontakty__map-embed {
    flex: 1 1 auto;
    aspect-ratio: auto;
    height: auto;
    min-height: 112px;
    max-height: 148px;
  }

  .g22-kontakty__tile--map .g22-kontakty__map-body {
    flex: 0 0 auto;
  }
}

/* Contact card — brand-purple container. (The old container look lived on the
   compound .g22-kontakty__aside.g22-kontakty__card selector, which needed an
   __aside class the markup no longer carries; re-declare it here. The inner
   .g22-kontakty__card-kicker/-phone/-hours/-email/-ghost styles are standalone
   selectors and still apply.) Density comes from phone + hours + email sharing
   the tile, so it reads full at its natural height. */
.g22-kontakty__tile--contact {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(26px, 2.8vw, 34px);
  background: var(--kc-purple);
  color: var(--kc-cream);
}

/* Location tile — reuse the dark invitation card, compact. The base
   .g22-kontakty__map-card rule sets grid-template-* but no display; it never
   rendered before (its section was display:none), so grid never engaged.
   Turn it on and stack pin / address / route tightly (no space-between
   gaps, no forced tall min-height). */
.g22-kontakty__tile.g22-kontakty__map-card {
  padding: 0; /* map embed is flush; .g22-kontakty__map-body carries the padding */
  min-height: 0;
}

/* Socials merged into the purple contact card (client fix 2026-07-29): the
   dedicated socials tile read half-empty (2 links + void) while the contact
   tile had ~40% dead space under the hours line — density read
   sparse-dense-sparse. Folding the socials list in as the card's last rows
   fixes both problems with the same edit; the tile hugs its now-taller
   content via the existing flex column gap on .g22-kontakty__tile--contact,
   so no forced min-height re-opens a void. */
.g22-kontakty__card-socials-block {
  position: relative;
  z-index: 1;
  padding-top: 16px;
  border-top: 1px solid rgba(244, 240, 231, 0.16);
}

.g22-kontakty__card-sub-label {
  margin: 0 0 8px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: var(--kc-caption);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--kc-yellow);
}

.g22-kontakty__card-socials {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0;
}

.g22-kontakty__card-social {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 0;
  border-bottom: 1px solid rgba(244, 240, 231, 0.14);
  color: var(--kc-cream);
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  transition: color var(--g22-t-fast, 160ms) var(--g22-ease-out, ease-out);
}

.g22-kontakty__card-socials li:last-child .g22-kontakty__card-social {
  border-bottom: 0;
}

.g22-kontakty__card-social-arrow {
  display: inline-block;
  transition: transform var(--g22-t-fast, 160ms) var(--g22-ease-out, ease-out);
}

.g22-kontakty__card-social:hover,
.g22-kontakty__card-social:focus-visible {
  color: var(--kc-yellow);
}

.g22-kontakty__card-social:hover .g22-kontakty__card-social-arrow,
.g22-kontakty__card-social:focus-visible .g22-kontakty__card-social-arrow {
  transform: translate(2px, -2px);
}

.g22-kontakty__card-social:focus-visible {
  outline: 2px solid var(--kc-yellow);
  outline-offset: 3px;
}

/* ---------- Google-reviews module cohesion (Контакти only) ----------
 * The block is rendered by footer.php OUTSIDE .g22-kontakty, so it is scoped
 * via body:has(.g22-kontakty). Only depth/weight are nudged so the module
 * sits with this page's heavier tiles — the Google badge and Google-gold
 * stars are deliberately kept (they signal authentic third-party proof and
 * must NOT be repainted into the brand yellow). */
/* Beat home-henna.css's `body .g22-google-reviews--mosaic.--portrait-fan`
   (0,2,1) — match its two classes and add :has for a clean win. Its 92px
   bottom padding left a ~200px dead zone before the footer on this page. */
body:has(.g22-kontakty)
  .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan {
  padding-bottom: clamp(32px, 4vw, 52px) !important;
}

body:has(.g22-kontakty)
  .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan
  .g22-google-reviews__fan-card,
body:has(.g22-kontakty)
  .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan
  .g22-google-reviews__fan-card:first-child,
body:has(.g22-kontakty)
  .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan
  .g22-google-reviews__fan-card:nth-child(2) {
  border: 1px solid var(--kc-line) !important;
  border-radius: var(--kc-radius-lg);
  box-shadow: none !important;
}

body:has(.g22-kontakty)
  .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan
  .g22-google-reviews__fan-card:hover,
body:has(.g22-kontakty)
  .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan
  .g22-google-reviews__fan-card:focus-within {
  border-color: var(--kc-line) !important;
  box-shadow: none !important;
  transform: none !important;
}

body:has(.g22-kontakty) .g22-google-reviews__fan-quote,
body:has(.g22-kontakty) .g22-greviews__text {
  font-size: max(1rem, var(--g22-fs-body, 1.0625rem));
  line-height: 1.55;
}

body:has(.g22-kontakty) .g22-google-reviews__fan-card footer b,
body:has(.g22-kontakty) .g22-google-reviews__fan-author,
body:has(.g22-kontakty) .g22-greviews__author b {
  font-size: 0.95rem;
  font-weight: 800;
}

body:has(.g22-kontakty)
  .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan
  .g22-google-reviews__gsource,
body:has(.g22-kontakty)
  .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan
  .g22-google-reviews__fan-date,
body:has(.g22-kontakty)
  .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan
  .g22-google-reviews__mark,
body:has(.g22-kontakty) .g22-greviews__author time {
  font-size: var(--kc-caption) !important;
}

body:has(.g22-kontakty)
  .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan
  .g22-google-reviews__gsource,
body:has(.g22-kontakty)
  .g22-google-reviews--mosaic.g22-google-reviews--portrait-fan
  .g22-google-reviews__fan-date,
body:has(.g22-kontakty) .g22-greviews__author time {
  color: var(--g22-ink-soft, rgba(26, 26, 26, 0.68));
}

body:has(.g22-kontakty) .g22-google-reviews__mark {
  background: rgba(63, 39, 128, 0.14);
}

/* Natural document rhythm: the form begins within the first desktop scroll,
	 and every section grows with its content. */
.g22-kontakty__main,
.g22-kontakty__voices {
  box-sizing: border-box;
  padding-block: var(--kc-section-y);
}

/* Shared nav owns logo and action geometry. Page-local overrides made the
   header morph horizontally when navigating to or from Contacts. */

/* Legal, consent, error and footer metadata remain readable on small screens. */
.g22-kontakty .g22-form__consent,
.g22-kontakty .g22-form__field-error,
.g22-kontakty .g22-form label,
body:has(.g22-kontakty) .g22-footer__contacts > div > span,
body:has(.g22-kontakty) .g22-footer__label,
body:has(.g22-kontakty) .g22-footer__bottom p,
body:has(.g22-kontakty) .g22-footer__legal a,
body:has(.g22-kontakty) .g22-footer__map {
  font-size: var(--kc-caption) !important;
}