/* ===========================================================
   A sections.css SZETBONTASABOL szarmazo darab: contact
   2026-09-09, Optimus. Ok: a fooldal a 209 KB-os egyesitett fajlnak
   MERVE 11%-at hasznalta, es az elso festes arra a fajlra vart.
   A darabok oldaltipus szerint toltodnek (lasd functions.php).
   Uj szekcio: a nevterenek megfelelo darabba, ha nincs ilyen, a core-ba.
   =========================================================== */

/* =============================================================================
   KAPCSOLAT szekció  (.wr-contact)  — 2026-09
   Forrás: webraketaai/webraketa2 src/routes/kapcsolat.tsx (1:1).
   Csak design-system tokenek; a mono-címke a --wr-font-label token. Meglévő
   komponens-osztályokat használ (.eyebrow/.display-lg/.card-title/
   .card-elevated/.btn-launch/.container-wr). Form NEM működik. Nincs térkép.
   ============================================================================= */
.wr-contact__crew  { padding-top: 4rem; }
.wr-contact__reach { padding-block: 4rem; }
@media (min-width: 1024px) {
  .wr-contact__crew  { padding-top: 6rem; }
  .wr-contact__reach { padding-block: 6rem; }
}

/* -- Intro -- */
.wr-contact__intro { max-width: 42rem; }
/* H1: a Kapcsolat ALOLDAL → a hero-SERVICE tokenre esik (62px desktop),
   ugyanaz, mint a szolgáltatás-aloldalak H1-je (62 / lh 63.24 / ls -2.17px).
   Osztály-alapú → a h2->h1 tag-váltás nem tör szelektort. */
.wr-contact__title {
  margin-top: 1rem; color: var(--ink);
  font-size: var(--wr-font-hero-service);
  line-height: var(--wr-lh-hero);
  letter-spacing: var(--wr-ls-hero);
}
.wr-contact__accent { color: var(--coral); }
.wr-contact__lead {
  margin-top: 1.25rem;
  font-family: var(--font-sans);
  font-size: var(--wr-font-body);
  line-height: var(--wr-lh-body);
  font-weight: var(--wr-fw-body);
  color: var(--muted-foreground);
}

/* -- Mono micro-címke (token) -- */
.wr-contact__label {
  font-family: var(--font-mono);
  font-size: var(--wr-font-label);
  font-weight: var(--wr-fw-body);
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: var(--wr-ls-label);
}
.wr-contact__label--coral  { color: var(--coral); }
.wr-contact__label--muted  { color: var(--muted-foreground); }
.wr-contact__label--onink  { color: color-mix(in oklab, var(--paper) 50%, transparent); }

/* -- Ikonok (inline lucide) -- */
.wr-contact__ic { width: 1rem; height: 1rem; flex: 0 0 auto; }
.wr-contact__ic--md { width: 1.25rem; height: 1.25rem; }
.wr-contact__ic--lg { width: 1.25rem; height: 1.25rem; }
.wr-contact__ic--coral { color: var(--coral); }

/* -- Csapat -- */
.wr-contact__team { margin-top: 3rem; display: grid; gap: 1.5rem; }
@media (min-width: 1024px) { .wr-contact__team { grid-template-columns: 1fr 1fr; } }

.wr-contact__person { display: grid; overflow: hidden; padding: 0; }
@media (min-width: 640px) { .wr-contact__person { grid-template-columns: 2fr 3fr; } }
.wr-contact__person-media { background: linear-gradient(to bottom right, color-mix(in oklab, var(--ink) 95%, transparent), var(--ink)); }
.wr-contact__person-img { width: 100%; height: 100%; object-fit: cover; object-position: top; aspect-ratio: 4 / 5; display: block; }
.wr-contact__person-body { padding: 1.75rem; }
@media (min-width: 1024px) { .wr-contact__person-body { padding: 2rem; } }
.wr-contact__person-name { margin-top: 0.75rem; color: var(--ink); }
/* #1: a titulus KÖZVETLENÜL a név alatt — a név h3 örökölt 24px alsó margóját
   nullázzuk (ez adta a rést), a card-title lh-t is szorosabbra vesszük. */
.wr-contact__person-name { line-height: 1.1; margin-bottom: 0; }
.wr-contact__person-role { margin-top: 0; font-family: var(--font-sans); font-size: var(--wr-font-sm); line-height: 1.4; color: var(--muted-foreground); }
.wr-contact__person-bio  { margin-top: 1rem; font-family: var(--font-sans); font-size: var(--wr-font-body-sm); line-height: 1.6; color: var(--muted-foreground); }
.wr-contact__lines { margin-top: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; }
.wr-contact__line {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-sans); font-size: var(--wr-font-sm);
  color: var(--ink); text-decoration: none; transition: color .2s ease;
}
.wr-contact__line:hover { color: var(--coral); }
/* #4: a Lovable btn-launch 17px/1.6; a téma közös .btn-launch 15px. A Kapcsolat
   gombjait LOKÁLISAN igazítjuk a Lovable-höz (más oldalak érintetlenek maradnak). */
.wr-contact__cta,
.wr-contact__submit { font-size: var(--wr-font-body); line-height: var(--wr-lh-body); }
.wr-contact__cta { margin-top: 1.5rem; }

/* -- Cégadatok -- */
.wr-contact__company {
  margin-top: 2.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-3xl);
  background: var(--paper);
  padding: 2rem;
}
@media (min-width: 1024px) {
  .wr-contact__company { padding: 2.5rem; display: grid; grid-template-columns: 4fr 8fr; gap: 2rem; align-items: start; }
}
.wr-contact__company-title { margin-top: 0.75rem; display: flex; align-items: center; gap: 0.5rem; color: var(--ink); }
.wr-contact__company-desc { margin-top: 0.75rem; font-family: var(--font-sans); font-size: var(--wr-font-body-sm); line-height: 1.6; color: var(--muted-foreground); }
.wr-contact__facts { margin-top: 1.5rem; display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .wr-contact__facts { grid-template-columns: 1fr 1fr; gap: 1.25rem 2rem; } }
@media (min-width: 1024px) { .wr-contact__facts { margin-top: 0; } }
/* #2: a dd a dt bal élére igazodjon (böngésző-default margin-inline-start:40px kilövése) */
.wr-contact__fact-val { margin: 0.25rem 0 0; font-family: var(--font-sans); font-size: var(--wr-font-sm); line-height: 1.5; color: var(--ink); }

/* -- Szekció 2: űrlap + sidebar -- */
.wr-contact__grid { display: grid; gap: 2.5rem; }
@media (min-width: 1024px) { .wr-contact__grid { grid-template-columns: 7fr 5fr; align-items: start; } }
.wr-contact__form-card { padding: 2rem; }
@media (min-width: 1024px) { .wr-contact__form-card { padding: 2.5rem; } }
.wr-contact__form { display: flex; flex-direction: column; gap: 1.25rem; }
.wr-contact__row { display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .wr-contact__row { grid-template-columns: 1fr 1fr; } }
.wr-contact__field { display: flex; flex-direction: column; }
/* #4 form-parity: input/textarea 1:1 a Lovable-lel — border-radius 14px
   (a Lovable computed értéke 14px, = a téma --radius-xl), line-height 1.6. */
.wr-contact__input {
  margin-top: 0.5rem; width: 100%;
  border: 1px solid var(--line); border-radius: var(--radius-xl);
  background: var(--paper); padding: 0.75rem 1rem;
  font-family: var(--font-sans); font-size: var(--wr-font-body); line-height: var(--wr-lh-body);
  color: var(--ink); transition: border-color .2s ease, box-shadow .2s ease;
}
.wr-contact__input::placeholder { color: var(--muted-foreground); }
.wr-contact__input:focus { outline: none; border-color: var(--coral); box-shadow: 0 0 0 2px color-mix(in oklab, var(--coral) 20%, transparent); }
.wr-contact__textarea { resize: vertical; }
.wr-contact__chips { margin-top: 0.5rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.wr-contact__chip {
  display: inline-flex; align-items: center; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: var(--paper); padding: 0.375rem 0.875rem;
  font-family: var(--font-sans); font-size: var(--wr-font-sm); color: var(--ink);
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.wr-contact__chip-input { display: none; }
.wr-contact__chip:has(.wr-contact__chip-input:checked) { border-color: var(--coral); background: var(--coral); color: #fff; }
.wr-contact__submit { width: 100%; justify-content: center; }
@media (min-width: 640px) { .wr-contact__submit { width: auto; } }
.wr-contact__note { font-family: var(--font-sans); font-size: var(--wr-font-xs); line-height: 1.5; color: var(--muted-foreground); }

/* -- Sidebar -- */
.wr-contact__side { display: flex; flex-direction: column; gap: 1.5rem; }
.wr-contact__mission { position: relative; overflow: hidden; border-radius: var(--radius-3xl); background: var(--ink); color: var(--paper); padding: 2rem; }
.wr-contact__traj { pointer-events: none; position: absolute; inset: 0; width: 100%; height: 100%; }
.wr-contact__arc {
  opacity: 0; stroke-dashoffset: 1;
  animation: wr-contact-arc-draw 2.35s .35s cubic-bezier(.2,.8,.2,1) forwards;
}
@media (prefers-reduced-motion: reduce) {
  .wr-contact__arc { animation: none; opacity: 1; stroke-dashoffset: 0; }
}
.wr-contact__mission-in { position: relative; }
.wr-contact__mission-title { margin-top: 1rem; }
.wr-contact__mission-list { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.wr-contact__mission-item { display: flex; align-items: flex-start; gap: 0.75rem; }
.wr-contact__mission-item > div > .wr-contact__label { margin-bottom: 0.15rem; }
.wr-contact__mission-val { font-family: var(--font-sans); font-size: var(--wr-font-body-sm); color: var(--paper); text-decoration: none; transition: color .2s ease; }
.wr-contact__mission-val:hover { color: var(--coral); }
.wr-contact__mission-plain { font-family: var(--font-sans); font-size: var(--wr-font-body-sm); color: var(--paper); }

.wr-contact__bring { padding: 2rem; }
.wr-contact__bring-title { color: var(--ink); }
.wr-contact__bring-list { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.625rem; font-family: var(--font-sans); font-size: var(--wr-font-body); line-height: 1.6; color: var(--muted-foreground); list-style: none; padding: 0; }