/* =============================================================================
   Регистрација страних држављана - 1:59863 desktop, 1:18303 mobile

   Where a foreign national chooses how to register. A heading, and a card
   holding three paragraphs of copy and the two ways in, each a filled button
   with a help link under it.

   Almost all of it is already built. The band, the heading and the card are
   `.auth` and `.card` from /shared/components.css, and the frame's spacing is
   exactly theirs: 48 above and below the card and between it and the heading
   on the desktop, 24 on a phone. The buttons are `.button--filled` with a
   leading icon, the way Пријава instances them. What is this page's own is
   the inside of the card: it has no header and no tinted foot, only one
   padded body.

   Both frames draw the same card at two widths, and the heading changes size
   through the shared `.auth__title` rules. The one thing the phone frame does
   differently is wrap the two button labels onto two lines, which the width
   does on its own - section 3 only decides how narrow the label runs.

   Sections
     1. The card body
     2. The copy
     3. The two ways in
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. The card body

   The frame's `_Content`: 24 of padding all round and 24 between the copy and
   each of the two method blocks. `.card__content` is 23 and 16, which is the
   form cards' rhythm and not this one's, so the body is its own.
   -------------------------------------------------------------------------- */

.strani__content {
  display: flex;
  flex-direction: column;
  gap: var(--eds-space-6);
  width: 100%;
  padding: var(--eds-space-6);
}

/* -----------------------------------------------------------------------------
   2. The copy

   One text block in the frame with an empty line between its three
   paragraphs. They are three <p> here and the empty line is the gap - one
   20px line of body/medium.
   -------------------------------------------------------------------------- */

.strani__info {
  display: flex;
  flex-direction: column;
  gap: var(--eds-space-5);
  color: var(--eds-color-primary);
}

.strani__info p {
  margin: 0;
}

/* DEVIATION - "овде" is a link, which the frame does not draw. It keeps the
   paragraph's primary colour and only takes an underline, the same treatment
   as the help links further down, so the only change from the frame is the
   underline. It sits inside a sentence, so the 44px target rule does not
   apply to it. */
.strani__info a {
  color: inherit;
}

/* The frame sets "Напомена:" in the Medium face of the same size, which is
   body/medium at its emphasized weight, not a bolder style. */
.strani__note-label {
  font-weight: var(--eds-font-weight-medium);
}

/* -----------------------------------------------------------------------------
   3. The two ways in

   A list of two identical units: the button, 16 under it the help link,
   centred. The list is the frame's column of `Registration Method Container`s
   and shares the body's 24 between them.
   -------------------------------------------------------------------------- */

.strani__methods {
  display: flex;
  flex-direction: column;
  gap: var(--eds-space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

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

/* DEVIATION - `.button` pads its content 16 at each side. Both frames pad
   these two 53.5 instead (the `State-layer`), and on a phone that is what
   decides how the labels wrap: the label box is narrowed to about 180, so
   "Регистрација корисничким / именом и лозинком" breaks into two even lines
   and the icon stays beside them as one centred group. With 16 the label box
   runs the full width of the button, and the icon is left stranded at its
   edge. 48 is the scale's step nearest the frame's 53.5; on the desktop the
   label fits on one line either way and nothing moves. */
.strani__method .button {
  padding-inline: var(--eds-space-9);
}

.strani__help {
  margin: 0;
  color: var(--eds-color-primary);
  text-align: center;
}

/* The help link is 20 tall in the frame and sits on a line of its own, so the
   exception WCAG makes for a link inside a sentence does not cover it.
   12 of padding above and below makes it a 44 tall target (claude.md 13.5),
   and the same 12 taken back as negative margin leaves the layout exactly
   where the frame puts it: the 12 above sits inside the 16 under the button,
   the 12 below inside the 24 that follows. */
.strani__help a {
  display: inline-block;
  margin-block: calc(-1 * var(--eds-space-3));
  padding-block: var(--eds-space-3);
  color: inherit;
}