/* =============================================================================
   eID.gov.rs - еГрађанин, корисник није пријављен

   Only this page. `1:61107` desktop, `1:18551` mobile: what еГрађанин is, the
   three ways to register for it, and the three steps of becoming one. It is
   the public face of the еГрађанин page in /egradjanin/, which is the same
   route behind a sign-in; nothing is shared between the two but the chrome,
   because the two frames have no section in common.

   The chrome is /shared/shared.css, the page column and its two text roles are
   `.section` out of /shared/components.css, and the numbered circle in the
   steps is the exported eds-lib step counter under /eds/lib/step-counter.css.
   What is here is this page's own composition and its documented departures.

   Mobile first, on the eds-lib breakpoints: sm 600, md 905, lg 1240. Only md
   is used - it is where the frames' two compositions part - and at 390 and at
   1280 the page lands on the Figma frames.

   Contents
     1. Opening copy
     2. Региструјте се - the band and its three cards
     3. The small button, and the button on a primary card
     4. Постаните еГрађанин - the steps
     5. Breakpoints
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. Opening copy

   One flow of blocks 32 apart, each block 16 between its own rows, which is
   what both frames draw. The page title is the one heading that is not sized
   by its class alone: the phone frame sets it in headline/small and the
   desktop frame in title/large, so the class carries the phone value and §5
   carries the other.
   -------------------------------------------------------------------------- */

.intro {
  display: flex;
  flex-direction: column;
  gap: var(--eds-space-7);
  padding-block: var(--eds-space-6);
}

.intro__title {
  margin: 0;
  color: var(--eds-color-primary);
}

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

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

/* The three ways to sign in are drawn as a numbered list in primary at the
   emphasised weight - `.eds-title-small` in the markup - inside the same
   80%-opacity text block as the sentence above them, which is where the
   opacity comes from rather than from `.section__text`. */
.intro__list {
  margin: 0;
  padding-inline-start: var(--eds-space-6);
  color: var(--eds-color-primary);
  opacity: 0.8;
}

/* DEVIATION - the frame draws "апликација за потписивање докумената у клауду."
   in primary at the emphasised weight, the same treatment the numbered list
   above it gets, but puts no hyperlink behind it and names no route for one.
   It is styled text here for that reason: a link that navigates nowhere reads
   to a screen reader as a link and to everyone else as a broken one. The port
   turns it into an <a> the moment the route exists. */
.intro__lead-in {
  color: var(--eds-color-primary);
}

/* -----------------------------------------------------------------------------
   2. Региструјте се - the band and its three cards

   The band runs edge to edge and the column inside it is the same `.section`
   as everywhere else, which is how Почетна draws its own tinted panels.

   The card is not eds-lib's `eds-card`. That component stacks image, header,
   content and actions down a column and puts its actions under the full width
   of the card; the frame's card is two columns - a 96-wide icon block and a
   text column that carries both the headline and the button - so there is no
   configuration of `eds-card` that produces it. It is drawn from tokens here,
   and everything it draws is a token: primary and surface for the two grounds,
   `--eds-radius-lg` for the 12 corner and `--eds-elevation-2`, which is the
   frame's shadow exactly.
   -------------------------------------------------------------------------- */

.reg {
  padding-block: var(--eds-space-6);
  background: var(--eid-color-ice-blue);
}

.reg__list {
  display: grid;
  gap: var(--eds-space-4);
  margin: var(--eds-space-6) 0 0;
  padding: 0;
  list-style: none;
}

.reg-card {
  display: flex;
  align-items: stretch;
  overflow: hidden;
  border-radius: var(--eds-radius-lg);
  box-shadow: var(--eds-elevation-2);
}

.reg-card--primary {
  background: var(--eds-color-primary);
  color: var(--eds-color-on-primary);
}

.reg-card--surface {
  background: var(--eds-color-surface);
  color: var(--eds-color-primary);
}

/* 24 / 48 / 24 across, which is the 96 the frame gives the icon block. */
.reg-card__icon {
  display: flex;
  flex: none;
  padding: var(--eds-space-6) var(--eds-space-6) var(--eds-space-4);
}

.reg-card__icon img {
  width: 48px;
  height: 48px;
}

/* The frame leaves this column 4 of side padding and no more - the headline is
   short enough to live with it - and stands the button off the bottom of the
   card rather than off the headline. */
.reg-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--eds-space-2);
  min-width: 0;
  padding: var(--eds-space-6) var(--eds-space-1);
}

.reg-card__title {
  margin: 0;
  color: inherit;
}

.reg-card__actions {
  display: flex;
  align-items: flex-end;
  min-height: 40px;
  margin: 0;
}

/* -----------------------------------------------------------------------------
   3. The small button, and the button on a primary card

   `.button` in /shared/components.css is the design's one button, at the size
   every other page uses it. The cards here need the two variants of it the
   Figma button component documents but no page has needed yet, so they are
   written against that class rather than as a second button. The moment a
   second page draws one, both belong in components.css beside `--filled` and
   `--tonal`.
   -------------------------------------------------------------------------- */

/* The component's `small` size: 28 tall, 12 of side padding, label/small.
   `.button` is full width and 48 tall, so both are overridden. */
.button--small {
  position: relative;
  width: auto;
  min-height: 28px;
  padding: 6px var(--eds-space-3);
  box-shadow: var(--eds-elevation-1);
  font-size: var(--eds-font-size-label-small);
  line-height: var(--eds-line-height-label-small);
  letter-spacing: var(--eds-tracking-label-small);
  font-weight: var(--eds-font-weight-medium);
}

/* 28 is below the 44 minimum target §13.5 of claude.md asks for on a phone, and
   the frame draws 28. The hit area is grown to 44 without moving the painted
   box: 8 of overlay above and below, on a button that is already at least 92
   wide. Nothing about the design changes and the target is met. */
.button--small::after {
  content: '';
  position: absolute;
  inset: -8px 0;
}

/* The filled button with its pair reversed, which is what a filled button on a
   primary ground has to be. M3 has no name for it - it is `--filled` read the
   other way round - so it takes the pair's own two tokens rather than a third
   colour. */
.button--inverse {
  background: var(--eds-color-on-primary);
  color: var(--eds-color-primary);
}

.button--inverse:hover {
  filter: brightness(0.95);
}

/* -----------------------------------------------------------------------------
   4. Постаните еГрађанин - the steps

   Three instructions, numbered, with a rule running from one number to the
   next. eds-lib has a stepper and this is not it: that component is a wizard -
   a row of clickable step headers over a content pane, with next and back
   buttons and a step the user is currently on - and the frame is a static list
   that borrows its numbered circle. So the circle is the real component,
   exported as /eds/lib/step-counter.css and configured below through its own
   custom properties, and the list around it is an ordered list.

   The counter is `aria-hidden` because the <ol> already carries the order; that
   is what the component's own template does with it.
   -------------------------------------------------------------------------- */

.guide {
  padding-block: var(--eds-space-6) var(--eds-space-9);
}

/* Two sizes in one heading, and in the wordmark's dark blue rather than in
   primary - the frame's own colour for it. */
.guide__title {
  display: flex;
  flex-direction: column;
  margin: 0;
  color: var(--eid-color-brand-dark-blue);
}

.steps {
  /* Figma Mobile/Primary Shades/400, the ground of a step not yet reached. The
     library's schemes stop at primary/secondary/tertiary/error and carry no
     shade ramp, so there is no --eds-* to reach for. Declared here because this
     is the only page that draws it; it belongs in eds/tokens.css the moment a
     second page does. */
  --eid-color-step-pending: #9ab0c1;

  margin: var(--eds-space-3) 0 0;
  padding: 0;
  list-style: none;
}

/* DEVIATION - the counter's own state modifiers (`--full --active` and the
   rest) are not used. They carry Material's untouched default primary, #36618E,
   which eGDS overrides to the brand blue - eds/tokens.css says the same thing
   about the library's schemes - so the two grounds are set through the
   component's custom properties instead, which is the hook it exposes for
   exactly this. Size and type are the frame's 24 circle and title/small. */
.steps .eds-step-counter {
  --eds-step-counter-size: 24px;
  --eds-step-counter-font-size: var(--eds-font-size-title-small);
  --eds-step-counter-line-height: var(--eds-line-height-title-small);
  --eds-step-counter-letter-spacing: var(--eds-tracking-title-small);
  --eds-step-counter-bg: var(--eid-color-step-pending);
  --eds-step-counter-fg: var(--eds-color-on-primary);
}

.steps .step--current .eds-step-counter {
  --eds-step-counter-bg: var(--eds-color-primary);
}

.step {
  position: relative;
}

/* 8 of lead-in puts the 24 circle's centre on 20, which is where the rule and
   the step body are measured from. */
.step__header {
  display: flex;
  align-items: center;
  gap: var(--eds-space-4);
  min-height: 72px;
  margin: 0;
  padding-inline-start: var(--eds-space-2);
}

.step__label {
  color: var(--eds-color-primary);
}

.step__body {
  display: flex;
  flex-direction: column;
  gap: var(--eds-space-4);
  padding-inline-start: var(--eds-space-8);
}

.step__text {
  margin: 0;
  color: var(--eds-color-primary);
}

/* The rule between two numbers. It starts under the circle it leaves and ends
   on top of the one it reaches - the next step's circle begins 24 into that
   step's 72 header - so it is drawn off the step rather than off the body, and
   the last step has none. Centred on 20: 2 wide, starting at 19. */
.step:not(:last-child)::before {
  content: '';
  position: absolute;
  top: 48px;
  bottom: -24px;
  inset-inline-start: 19px;
  width: 2px;
  background: var(--eds-color-outline-variant);
}

/* -----------------------------------------------------------------------------
   5. Breakpoints

   md is the only one the page needs: it is where the desktop frame's three
   card columns, its wider band and its smaller page title all arrive together.
   Between sm and md the cards stay stacked - neither frame draws a two-column
   row, and claude.md §6 asks for the library's conventions where Figma is
   silent rather than for a third composition invented here.
   -------------------------------------------------------------------------- */

@media (min-width: 905px) {
  /* The band below already opens with 48 of its own, so the section stops at
     the copy. */
  .intro {
    padding-block: var(--eds-space-9) 0;
  }

  /* title/large, which is where the desktop frame sets the page title. */
  .intro__title {
    font-size: var(--eds-font-size-title-large);
    line-height: var(--eds-line-height-title-large);
  }

  .reg {
    padding-block: var(--eds-space-9);
  }

  /* DEVIATION - the frame's three columns are 278 / 280 / 278 with 22 between
     them, inside 880. Three equal columns 24 apart come to 277 each, which is
     the same row to within a pixel and keeps the gutter on the spacing scale
     instead of introducing a 22 that exists nowhere else. */
  .reg__list {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--eds-space-6);
    margin-top: var(--eds-space-7);
  }

  /* The height every card in the desktop row is drawn at, and what makes the
     third card's single-line headline stand its button on the same baseline as
     the other two. */
  .reg-card {
    min-height: 156px;
  }

  .guide {
    padding-block: var(--eds-space-6) 72px;
  }
}