/* =============================================================================
   eID.gov.rs - Pocetna

   Only this page: the sections it owns and the content it puts inside the
   shared chrome. Everything structural comes from the exported eds-lib blocks,
   from /shared/shared.css and from /shared/components.css - the centred
   column, the surface card and the button all live there, because Pomoc and
   Login reset use the same three.

   Mobile first, on the eds-lib breakpoints: sm 600, md 905, lg 1240. At 1280
   the page lands on the Figma frame (1280 x 2307).

   Contents
     1. Hero
     2. Content sections
     3. Guide steps
     4. Partner strip
     5. Breakpoints
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--eid-color-ice-blue);
}

/* Decorative watermark — it would crowd the stacked copy on a phone. */
.hero__illustration {
  display: none;
}

.hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--eds-space-7);
  max-width: calc(var(--page-content) + 2 * var(--page-gutter));
  margin-inline: auto;
  padding-block: var(--eds-space-8);
  padding-inline: var(--page-gutter);
}

.hero__copy {
  min-width: 0;
  color: var(--eds-primary-20);
}

.hero__title {
  margin: 0;
}

.hero__subtitle {
  margin: 10px 0 0;
  opacity: 0.8;
}

.hero__lead {
  margin: var(--eds-space-7) 0 0;
  opacity: 0.8;
}

/* -----------------------------------------------------------------------------
   2. Content sections
   -------------------------------------------------------------------------- */

.section--consent {
  display: flex;
  flex-direction: column;
  gap: var(--eds-space-7);
  margin-top: var(--eds-space-8);
}

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

.feature-list {
  display: flex;
  flex-direction: column;
  gap: var(--eds-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--eds-neutral-20);
}

/* -----------------------------------------------------------------------------
   3. Guide steps

   Mobile is not the desktop panel stacked: the frame gives each step its own
   ice-blue card (358 wide, 16 padding, 16 between cards) and leaves the section
   title on the page background. From lg the three cards merge back into the one
   panel and take the staggered positions of the design on its own 880 x 774
   coordinate system.
   -------------------------------------------------------------------------- */

.section--guide {
  margin-top: var(--eds-space-9);
}

.steps {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--eds-space-4);
  margin-top: var(--eds-space-4);
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--eds-space-4);
  width: 100%;
  /* Keeps the 304px step-3 diagram inside a 320px screen. */
  padding: var(--eds-space-4) var(--eds-space-2);
  overflow-x: clip;
  background: var(--eid-color-ice-blue);
  border-radius: var(--eds-radius-lg);
}

.step__title {
  width: 100%;
  margin: 0;
  padding: 0;
  color: var(--eds-color-primary);
  text-align: center;
  /* Both frames run the number inline with the copy, so the marker has to
     centre with it rather than hang in the margin. */
  list-style-position: inside;
}

.step__art {
  flex-shrink: 0;
}

.step--1 .step__art {
  width: 74.146px;
  height: 120px;
}

.step--2 .step__art {
  width: 171px;
  height: 131px;
}

.step__note {
  width: 100%;
  margin: 0;
  color: var(--eds-color-primary);
  text-align: center;
}

/* 3.1 Store badges ---------------------------------------------------------- */

.badges {
  display: flex;
  align-items: center;
  gap: var(--eds-space-2);
}

.badge img {
  height: 24px;
}

/* 3.2 Step 3 login flow ----------------------------------------------------- */

.flow {
  position: relative;
  width: 303.935px;
  height: 267px;
}

.flow__item {
  position: absolute;
}

.flow__art,
.flow__caption {
  position: absolute;
}

.flow__caption {
  margin: 0;
  color: var(--eds-color-primary);
  letter-spacing: var(--eds-tracking-label-medium);
  text-align: center;
}

.flow__item--pick {
  left: 0;
  top: 0;
  width: 112px;
  height: 141px;
}

.flow__item--pick .flow__art {
  left: 13px;
  top: 0;
  width: 86px;
  height: 80px;
}

.flow__item--pick .flow__caption {
  left: 0;
  top: 96px;
  width: 112px;
}

.flow__item--confirm {
  left: 119.2px;
  top: 140.87px;
  width: 111.466px;
  height: 126.13px;
}

.flow__item--confirm .flow__art {
  left: 19.54px;
  top: 0;
  width: 56.212px;
  height: 94.558px;
}

.flow__item--confirm .flow__caption {
  left: 0;
  top: 107.81px;
  width: 111.466px;
}

.flow__item--done {
  left: 192.47px;
  top: 18.16px;
  width: 111.466px;
  height: 126px;
}

.flow__item--done .flow__art {
  left: -7.267px;
  top: 0;
  width: 126px;
  height: 78px;
}

.flow__item--done .flow__caption {
  left: -14.267px;
  top: 94px;
  width: 140px;
}

.flow__arrow {
  position: absolute;
  width: 35.032px;
  height: 28.801px;
}

.flow__arrow--down {
  left: 84.17px;
  top: 144.85px;
}

.flow__arrow--up {
  left: 210.84px;
  top: 141.6px;
  transform: rotate(-90deg);
}

/* -----------------------------------------------------------------------------
   4. Partner strip
   -------------------------------------------------------------------------- */

/* The scroller itself is `.carousel` in shared/components.css - overflow, snap,
   drag cursor and the hidden scrollbar all come from there. What is left here
   is the strip's own spacing.

   The track is inset by the page gutter, so the snap position is inset with it,
   or the first logo would snap flush to the viewport edge and lose that
   gutter. */
.partners {
  margin-top: var(--eds-space-9);
  scroll-padding-inline-start: var(--page-gutter);
}

.partners__track {
  display: flex;
  align-items: center;
  gap: var(--eds-space-4);
  width: max-content;
  margin: 0;
  padding-inline: var(--page-gutter);
  list-style: none;
}

.partners__track img {
  width: 400px;
  height: 200px;
  object-fit: cover;
}

/* =============================================================================
   5. Breakpoints
   ========================================================================== */

@media (min-width: 600px) {
  .step {
    padding-inline: var(--eds-space-6);
  }
}

@media (min-width: 905px) {
  .hero {
    min-height: 465px;
  }

  .hero__illustration {
    display: block;
    position: absolute;
    left: -70px;
    top: -2px;
    width: 432px;
    height: 465px;
    opacity: 0.8;
    pointer-events: none;
  }

  .hero__inner {
    flex-direction: row;
    align-items: center;
    gap: 26px;
    padding-block: 65px 38px;
  }

  .hero__copy {
    flex: 1 1 0;
  }

  .card {
    flex: 0 0 351px;
  }

  .section--consent {
    margin-top: var(--eds-space-9);
  }

  .section--guide {
    margin-top: 64px;
  }

  .partners {
    margin-top: 64px;
    scroll-padding-inline-start: 100px;
  }

  .partners__track {
    padding-inline: 100px;
  }
}

@media (min-width: 1240px) {
  /* The three cards become one panel again, as the desktop frame draws it. */
  .steps {
    display: block;
    position: relative;
    height: 774px;
    margin-top: var(--eds-space-7);
    overflow: visible;
    background: var(--eid-color-ice-blue);
    border-radius: var(--eds-radius-lg);
  }

  .step {
    position: absolute;
    padding: 0;
    overflow: visible;
    background: none;
    border-radius: 0;
  }

  .step--1 {
    left: 25px;
    top: 25px;
    width: 336px;
  }

  .step--2 {
    left: 492px;
    top: 125px;
    width: 363px;
  }

  .step--3 {
    left: 62px;
    top: 417px;
    width: 337px;
  }
}