/*
  A letöltési oldalak (DownloadLanding.razor, DownloadLink.razor), a .page-downloads body-osztállyal
  scope-olva (plan §8.3). A body-osztályt a SiteRoutes.BodyClassFor adja a /letoltes előtag alapján,
  mert ezek paraméteres útvonalak, nem külön SiteRoute-ok.
*/

/* Bal oldalon a dokumentum, jobb oldalon a regisztrációs űrlap; egy hasábban, ha nincs űrlap. */
.page-downloads .downloads__grid {
  display: grid;
  gap: var(--space-7);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 60em) {
  .page-downloads .downloads__grid:has(.downloads__form) {
    grid-template-columns: 1fr 1fr;
  }
}

.page-downloads .downloads__badge {
  margin: 0 0 var(--space-2);
  font-family: var(--ff-display);
  font-size: var(--fs-0);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-turq-700);
}

/* A fájl adatai: ikon és szöveg egy sorban, halkan. */
.page-downloads .downloads__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
  font-size: var(--fs-0);
  color: var(--c-text-3);
}

.page-downloads .downloads__points {
  margin-top: var(--space-5);
}

.page-downloads .downloads__action {
  margin: var(--space-6) 0 var(--space-4);
}

/* Az űrlap hajszálvonalas dobozban ül, a kapcsolati űrlappal azonos ritmusban. */
.page-downloads .downloads__form {
  padding: var(--space-6);
  border: 1px solid var(--c-line);
  background: var(--c-paper);
}

.page-downloads .downloads__form-title {
  margin: 0 0 var(--space-5);
  font-size: var(--fs-3);
}

.page-downloads .downloads__privacy {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-0);
}

.page-downloads .downloads__actions {
  margin-top: var(--space-6);
}

.page-downloads .downloads__facts {
  margin-top: var(--space-6);
  max-width: 32rem;
}

.page-downloads .downloads__help {
  margin-top: var(--space-7);
  font-size: var(--fs-0);
}

/* A select ugyanúgy néz ki, mint a többi mező, de saját nyilat kap. */
.page-downloads .downloads__form select.input {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--c-text-2) 50%),
    linear-gradient(135deg, var(--c-text-2) 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 55%, calc(100% - 0.8rem) 55%;
  background-size: 0.35rem 0.35rem, 0.35rem 0.35rem;
  background-repeat: no-repeat;
  padding-right: var(--space-8);
}