.kapcsolat-page {
  background: var(--color-paper);
}

.kapcsolat-page .eyebrow {
  margin-bottom: var(--space-3);
}

.kapcsolat-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(118deg, var(--color-paper) 0%, var(--color-blue-wash) 100%);
}

.kapcsolat-hero__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.kapcsolat-hero__copy {
  width: 100%;
  max-width: 64ch;
  min-width: 0;
}

.kapcsolat-hero__copy .lead {
  max-width: 62ch;
}

.kapcsolat-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.kapcsolat-hero__independence {
  max-width: 68ch;
  padding-top: var(--space-5);
  border-top: var(--border-default);
}

.kapcsolat-hero__independence p {
  margin-bottom: 0;
}

.kapcsolat-hero__accent {
  display: none;
}

.kapcsolat-topics__inner,
.kapcsolat-faq__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
  min-width: 0;
}

.kapcsolat-topics__heading,
.kapcsolat-faq__heading {
  width: 100%;
  max-width: 60ch;
  min-width: 0;
}

.kapcsolat-topics__heading p:last-child,
.kapcsolat-faq__heading p:last-child {
  margin-bottom: 0;
}

.kapcsolat-topics__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  width: 100%;
}

.kapcsolat-topic-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: 100%;
  min-width: 0;
  padding: var(--space-5);
  border: var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--color-white);
}

.kapcsolat-topic-card::before {
  position: absolute;
  top: -1px;
  left: -1px;
  width: 2.75rem;
  height: 3px;
  content: "";
  background: var(--color-cyan);
}

.kapcsolat-topic-card > * {
  min-width: 0;
  margin: 0;
}

.kapcsolat-topic-card__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.kapcsolat-topic-card__number {
  color: var(--color-blue);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.kapcsolat-topic-card ul {
  display: grid;
  gap: var(--space-2);
  padding-left: 1.25rem;
}

.kapcsolat-topic-card a {
  align-self: flex-start;
  font-weight: 700;
}

.kapcsolat-routing__heading {
  width: 100%;
  max-width: 60ch;
  min-width: 0;
  margin-bottom: var(--space-7);
}

.kapcsolat-routing__heading h2 {
  margin-bottom: 0;
}

.kapcsolat-routing__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  width: 100%;
}

.kapcsolat-routing__notice,
.kapcsolat-routing__download {
  width: 100%;
  min-width: 0;
  margin: 0;
}

.kapcsolat-routing__notice {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.kapcsolat-routing__notice > * {
  margin: 0;
}

.kapcsolat-routing__notice p {
  max-width: 52ch;
}

.kapcsolat-routing__download {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.kapcsolat-routing__download > * {
  margin: 0;
}

.kapcsolat-routing__download p:not(.meta) {
  max-width: 42ch;
}

.kapcsolat-routing__download .meta {
  margin-top: var(--space-1);
}

.kapcsolat-form-section__heading {
  width: 100%;
  max-width: 60ch;
  min-width: 0;
  margin-bottom: var(--space-7);
}

.kapcsolat-form-section__heading > :last-child {
  margin-bottom: 0;
}

.kapcsolat-form-section__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  width: 100%;
}

.kapcsolat-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  width: 100%;
  max-width: 47.5rem;
  min-width: 0;
  padding: var(--space-5);
  border: var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--color-white);
}

.kapcsolat-form > * {
  min-width: 0;
  margin: 0;
}

.kapcsolat-form__name-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  width: 100%;
}

.kapcsolat-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
  min-width: 0;
}

.kapcsolat-field label {
  margin: 0;
}

.kapcsolat-field__optional {
  color: var(--color-slate);
  font-weight: 400;
}

.kapcsolat-field textarea {
  min-height: 10rem;
}

.kapcsolat-field__hint,
.kapcsolat-field__error {
  max-width: 50ch;
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-compact);
}

.kapcsolat-field__hint {
  color: var(--color-slate);
}

.kapcsolat-field__error {
  color: var(--color-ink);
  font-weight: 700;
}

.kapcsolat-form [aria-invalid="true"] {
  border-color: var(--color-orange);
  box-shadow: inset 3px 0 0 var(--color-orange);
}

.kapcsolat-form__summary {
  padding: var(--space-4);
  border-left: 3px solid var(--color-orange);
  background: var(--color-orange-wash);
  color: var(--color-ink);
}

.kapcsolat-form__summary p,
.kapcsolat-form__summary ul {
  margin: 0;
}

.kapcsolat-form__summary ul {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.kapcsolat-form__confirmation {
  display: grid;
  grid-template-columns: 1rem minmax(0, 1fr);
  align-items: start;
  gap: var(--space-3);
  width: 100%;
  min-width: 0;
}

.kapcsolat-form__confirmation input {
  margin-top: 0.3rem;
}

.kapcsolat-form__confirmation label {
  margin: 0;
}

.kapcsolat-form__status {
  min-height: 1.625rem;
  color: var(--color-ink);
  font-weight: 700;
}

.kapcsolat-privacy-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: 100%;
  max-width: 42.5rem;
  min-width: 0;
  margin: 0;
}

.kapcsolat-privacy-panel > * {
  min-width: 0;
  margin: 0;
}

.kapcsolat-privacy-panel ul {
  display: grid;
  gap: var(--space-3);
  padding-left: 1.25rem;
}

.kapcsolat-faq__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  width: 100%;
}

.kapcsolat-faq-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: 100%;
  min-width: 0;
  padding: var(--space-5);
  border: var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--color-white);
}

.kapcsolat-faq-card::before {
  position: absolute;
  top: -1px;
  left: -1px;
  width: 2.5rem;
  height: 3px;
  content: "";
  background: var(--color-cyan);
}

.kapcsolat-faq-card > * {
  margin: 0;
}

.kapcsolat-faq-card p {
  max-width: 42ch;
}

.kapcsolat-data__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  width: 100%;
}

.kapcsolat-data__copy,
.kapcsolat-data__link-card {
  width: 100%;
  min-width: 0;
}

.kapcsolat-data__copy {
  max-width: 62ch;
}

.kapcsolat-data__copy > :last-child {
  margin-bottom: 0;
}

.kapcsolat-data__link-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 42.5rem;
  margin: 0;
}

.kapcsolat-data__link-card > * {
  margin: 0;
}

.kapcsolat-closing {
  padding-top: var(--space-8);
}

.kapcsolat-closing__panel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-5);
  width: 100%;
  max-width: 57.5rem;
  min-width: 0;
  margin-inline: auto;
  padding: var(--space-5);
  border: var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--color-blue-wash);
}

.kapcsolat-closing__panel > * {
  min-width: 0;
  margin: 0;
}

.kapcsolat-closing__panel h2 {
  text-align: center;
}

.kapcsolat-closing__panel > p:not(.eyebrow):not(.kapcsolat-closing__notice) {
  max-width: 55ch;
}

.kapcsolat-closing__button {
  width: 100%;
  min-height: 3rem;
}

.kapcsolat-closing__notice {
  max-width: 55ch;
  padding-left: var(--space-3);
  border-left: 3px solid var(--color-orange);
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: 700;
}

@media (min-width: 40rem) {
  .kapcsolat-topic-card,
  .kapcsolat-faq-card,
  .kapcsolat-form,
  .kapcsolat-closing__panel {
    padding: var(--space-6);
  }

  .kapcsolat-closing__panel {
    align-items: center;
  }

  .kapcsolat-closing__panel > p:not(.eyebrow):not(.kapcsolat-closing__notice) {
    text-align: left;
  }

  .kapcsolat-closing__button {
    width: auto;
    min-width: 15rem;
  }
}

@media (min-width: 48rem) {
  .kapcsolat-form__name-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 40rem) and (max-width: 63.9375rem) {
  .kapcsolat-topics__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kapcsolat-topic-card--wide-tablet {
    grid-column: 1 / -1;
  }
}

@media (min-width: 47.5rem) {
  .kapcsolat-faq__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 51.25rem) {
  .kapcsolat-data__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }
}

@media (min-width: 56.25rem) {
  .kapcsolat-hero__layout {
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    align-items: stretch;
  }

  .kapcsolat-hero__accent {
    position: relative;
    display: block;
    min-width: 0;
  }

  .kapcsolat-hero__accent::before,
  .kapcsolat-hero__accent::after {
    position: absolute;
    content: "";
  }

  .kapcsolat-hero__accent::before {
    top: 1.75rem;
    right: 0;
    width: min(100%, 13rem);
    height: 2px;
    background: var(--color-cyan);
  }

  .kapcsolat-hero__accent::after {
    top: 1.75rem;
    right: 0;
    width: 2px;
    height: 7rem;
    background: var(--color-blue);
  }

  .kapcsolat-routing__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }

  .kapcsolat-form-section__layout {
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    align-items: start;
  }
}

@media (min-width: 64rem) {
  .kapcsolat-topics__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5);
  }

  .kapcsolat-faq__grid {
    gap: var(--space-5);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .kapcsolat-topic-card,
  .kapcsolat-faq-card,
  .kapcsolat-routing__download {
    transition: transform var(--transition-reveal), border-color var(--transition-control);
  }

  .kapcsolat-topic-card:hover,
  .kapcsolat-faq-card:hover,
  .kapcsolat-routing__download:hover {
    border-color: var(--color-cyan);
    transform: translate(2px, -2px);
  }
}

@media (max-width: 39.9375rem) {
  .kapcsolat-page h1 {
    font-size: clamp(2.25rem, 11vw, 2.75rem);
  }

  .kapcsolat-closing__panel {
    padding: var(--space-5);
  }
}