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

   Only this page. The centred column, the surface card, the button and the
   form controls come from /shared/components.css; the expansion panel, the
   form field, the native control and the upload trigger come from the exported
   eds-lib components under /eds/lib/. What is here is the page's own
   composition and its documented departures.

   Mobile first, on the eds-lib breakpoints: sm 600, md 905, lg 1240. At 390
   and at 1280 the page lands on the Figma frames (390 x 4573, 1280 x 3920).

   Contents
     1. Hero and chat
     2. Section rhythm
     3. Expansion panel
     4. Video strip
     5. Contact form
     6. Breakpoints
     7. Reduced motion
   ========================================================================== */

:root {
  /* The chat's two drop shadows and the light that falls into it from the top.
     Nothing in the library is close: eds-lib's elevation ramp is a neutral
     black spread, and this is a wide, negative-spread lift plus an inset.
     Page-level until the library grows a token for it. */
  --eid-shadow-chat:
    0 2px 10.6px -5px rgba(0, 0, 0, 0.25),
    0 23px 58.6px -10px rgba(0, 0, 0, 0.15);
  --eid-shadow-chat-inset: inset 0 13px 20px 1px rgba(79, 96, 133, 0.14);
}

/* -----------------------------------------------------------------------------
   1. Hero and chat

   The band is ice blue and the illustration sits behind the chat card. The two
   frames draw two different illustrations - the phone one is a robot at the
   left with the decorative field pulled in tight behind it, the desktop one
   spreads that field across the full width - so the art is a <picture> and only
   the one that matches the viewport is fetched.

   Both files are heavy for what they are (~420KB) because the decorative field
   is not vector: it is one 1447x651 raster, cropped three ways, that Figma
   embeds as base64 inside the SVG. Duplicate copies of it have been merged, and
   <picture> keeps a page to one of the two files, but the real fix is upstream -
   either a vector redraw of that field, or the raster shipped once as its own
   file and positioned in CSS.

   The band does not contain the art. On the phone frame the art runs 44px past
   the bottom of the band onto white, which is where the gear sits, and on the
   desktop frame it is wider than the viewport at anything under 1273. Both are
   the same rule: clip at the band, then let 44px through. `overflow: clip` is
   what makes that safe - it never opens a scrollbar, and what it clips cannot
   collide with the section below.
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: clip;
  overflow-clip-margin: 44px;
  background: var(--eid-color-ice-blue);
}

.hero__art {
  position: absolute;
  left: 50%;
  top: 45px;
  width: 100%;
  max-width: 390px;
  transform: translateX(-50%);
  pointer-events: none;
}

.hero__art img {
  width: 100%;
  height: auto;
}

.hero__inner {
  position: relative;
  display: flex;
  justify-content: center;
  padding-block: 45px 64px;
  padding-inline: var(--page-gutter);
}

/* 1.1 Chat ------------------------------------------------------------------ */

.chat {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--eds-space-2);
  width: 100%;
  max-width: 243px;
  /* The frames give the card a fixed height and hang the composer off the
     bottom of it. `min-` rather than a hard height so a message that wraps
     one line further grows the card instead of spilling out of it. */
  min-height: 163px;
  padding: 10.5px;
  background: var(--eds-color-surface-container-lowest);
  border: 3px solid var(--eds-color-primary);
  border-radius: var(--eds-radius-md);
  box-shadow: var(--eid-shadow-chat), var(--eid-shadow-chat-inset);
  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);
}

/* The bot's bubble: square where it meets the top left corner, round elsewhere,
   the way a first message from the other side is drawn. */
.chat__message {
  margin: 0;
  padding: var(--eds-space-2);
  color: var(--eds-color-primary);
  border: 1px solid var(--eds-color-surface-dim);
  border-radius: 0 var(--eds-radius-md) var(--eds-radius-md);
}

.chat__composer {
  display: flex;
  align-items: center;
  gap: var(--eds-space-2);
  padding: 6px 6px 6px var(--eds-space-4);
  border: 1px solid var(--eds-color-surface-dim);
  border-radius: var(--eds-radius-md);
}

.chat__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: none;
  color: var(--eds-color-on-surface);
  font: inherit;
}

.chat__input::placeholder {
  color: var(--eds-color-outline);
  opacity: 0.6;
}

.chat__input:focus-visible {
  outline: 2px solid var(--eds-color-primary);
  outline-offset: 2px;
  border-radius: var(--eds-radius-xs);
}

.chat__send {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  padding: var(--eds-space-1) var(--eds-space-2);
  border: 0;
  border-radius: var(--eds-radius-sm);
  background: var(--eds-color-primary);
  cursor: pointer;
  transition: var(--eid-button-transition);
}

.chat__send:hover {
  background: var(--eid-color-primary-hover);
}

.chat__send img {
  width: 16px;
  height: 16px;
}

/* -----------------------------------------------------------------------------
   2. Section rhythm

   Both frames put 48px between every block of the page and 32px between a
   block's title and its content, so the rhythm is one rule rather than five.
   -------------------------------------------------------------------------- */

/* The footer block sets its own 87px lead-in from md up, which is the 96 the
   desktop frame leaves; below md it sets none, and the frame's 48 has to come
   from the page. */
main {
  padding-bottom: var(--eds-space-9);
}

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

.block__title {
  margin: 0 0 var(--eds-space-7);
  color: var(--eds-color-primary);
}

/* -----------------------------------------------------------------------------
   3. Expansion panel

   /eds/lib/expansion-panel.css carries the component. Everything below the
   configuration block is a departure, because the frames use a flatter,
   wider-set panel than the component's default and because two of the
   component's own parts cannot survive the move out of Angular.
   -------------------------------------------------------------------------- */

.eds-expansion-panel-group {
  /* Configuration, through the properties the component exposes.

     Seven of these have to be set rather than inherited: the component
     declares them from SCSS variables that Sass does not resolve inside a
     custom-property value, so its own defaults compile to a literal
     `$light-primary` and never apply. See the UNRESOLVED notes in
     /eds/lib/expansion-panel.css. */
  --eds-expansion-panel-color-bg: var(--eds-color-surface-container-lowest);
  --eds-expansion-panel-color-text: var(--eds-color-on-surface);
  --eds-expansion-panel-color-border-hover: var(--eds-color-primary);
  --eds-expansion-panel-color-icon: var(--eds-color-primary);
  /* The frames keep the chevron in primary when the panel is open; the
     component fades it to the surface-variant grey. */
  --eds-expansion-panel-color-icon-expanded: var(--eds-color-primary);

  /* The rest is this design's shape: a 4px corner rather than 8, the soft
     blue-grey Elevation/Light/Bottom/03 rather than the component's tight
     black one, the scheme's own outline-variant between rows, and 24px of
     side inset rather than 16. */
  --eds-expansion-panel-border-radius: var(--eds-radius-sm);
  --eds-expansion-panel-color-shadow: var(--eid-shadow-elevation-bottom-03);
  --eds-expansion-panel-color-border: var(--eds-color-outline-variant);
  --eds-expansion-panel-padding-x-medium: var(--eds-space-6);
}

/* DEVIATION - the component puts an <h5> inside the header <button>. A heading
   is flow content and a button takes phrasing content, so that markup cannot be
   written by hand and stay valid; and a page needs its accordion titles in the
   heading outline (13.1). The heading moves outside the button instead - the
   pattern the ARIA practices describe - and carries no styling of its own, so
   `__title` stays the class that styles the text. */
.eds-expansion-panel__heading {
  margin: 0;
  font: inherit;
}

/* DEVIATION - the frames set the title in title/medium, primary, and let it
   wrap: on the phone frame every second header is two lines tall. The
   component sets 600 weight, a darker blue and a single ellipsised line. */
.eds-expansion-panel__title {
  color: var(--eds-color-primary);
  font-weight: var(--eds-font-weight-medium);
  line-height: 18px;
  white-space: normal;
  overflow: visible;
}

.eds-expansion-panel__text {
  align-items: center;
}

/* DEVIATION - `__expand-icon` is an <eds-icon> rendering the Material Symbols
   ligature `expand_more`. That font is not part of the export, so the glyph is
   masked in, the way the exported navigation-menu masks its own chevrons. The
   library rotates the same glyph 180deg for the open state, which is why one
   path is enough. Full strength, as the frames draw it, not the component's
   0.8. */
.eds-expansion-panel__expand-icon {
  background: currentcolor;
  color: var(--eds-expansion-panel-color-icon);
  mask: var(--eid-icon-chevron-down) center/contain no-repeat;
  opacity: 1;
}

.eds-expansion-panel--expanded .eds-expansion-panel__expand-icon {
  color: var(--eds-expansion-panel-color-icon-expanded);
}

/* DEVIATION - the frames set the panel body in body/medium on the scheme's
   on-surface and hang it under the header with no top inset, so the text lines
   up with the title above it. The component uses 16px on the surface-variant
   grey and pads all four sides. */
.eds-expansion-panel__content {
  padding: var(--eds-expansion-panel-padding-x-medium)
              var(--eds-expansion-panel-padding-y-medium);
  color: var(--eds-expansion-panel-color-text);
  font-size: var(--eds-font-size-body-medium);
}

.eds-expansion-panel__content p {
  margin: 0;
}

.eds-expansion-panel__content p + p {
  margin-top: var(--eds-line-height-body-medium);
}

/* -----------------------------------------------------------------------------
   4. Video strip

   The strip runs past the right edge of the content column and off the page,
   exactly as the partner strip does on Pocetna. The track's own start inset is
   what lines the first card up with the column: a percentage padding on the
   scroll content resolves against the scroller, which is the full page width,
   so one rule holds at every size and no breakpoint has to repeat the column
   arithmetic.
   -------------------------------------------------------------------------- */

/* The strip sets its title 12px above the cards where every other block on the
   page sets its own 32px above.

   DEVIATION - and it is the one title the frame paints #263965, where the other
   three are sys/light/primary. It is a hair off the brand dark blue the
   wordmark uses (#253965) and nothing in the library is #263965, so the token
   stands in for it rather than a fifth near-identical navy being declared. */
.videos .block__title {
  margin-bottom: var(--eds-space-3);
  color: var(--eid-color-brand-dark-blue);
}

/* 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 where this strip's items sit.

   The track is inset to the content column, so the snap position has to be
   inset with it, or the first thumbnail would snap flush to the viewport edge
   and lose its gutter. */
.videos__scroller {
  scroll-padding-inline-start:
    max(var(--page-gutter), calc((100% - var(--page-content)) / 2));
}

.videos__track {
  display: flex;
  gap: var(--eds-space-4);
  width: max-content;
  margin: 0;
  padding-inline:
    max(var(--page-gutter), calc((100% - var(--page-content)) / 2))
    var(--page-gutter);
  list-style: none;
}

.video {
  position: relative;
  display: block;
  width: 320px;
  aspect-ratio: 320 / 181;
  overflow: hidden;
  /* The frames round the thumbnail to 11 and the scrim over it to 8, which
     cannot both be true of one card. 8 is the corner the eye sees, and it is
     a token. */
  border-radius: var(--eds-radius-md);
}

.video__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The scrim, and the play mark that sits on it. */
.video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(32, 32, 32, 0.4);
}

.video__play {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 37px;
  height: 26px;
  transform: translate(-50%, -50%);
}

.video:focus-visible {
  outline: 3px solid var(--eds-color-primary);
  outline-offset: 3px;
}

/* -----------------------------------------------------------------------------
   5. Contact form

   The card is the shared surface card; what follows is the form inside it.
   -------------------------------------------------------------------------- */

.contact {
  width: 100%;
}

.contact .card__header {
  padding: var(--eds-space-6) var(--eds-space-8) var(--eds-space-5);
}

.contact__content {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: var(--eds-space-6);
}

.contact__form {
  display: flex;
  flex-direction: column;
  gap: var(--eds-space-6);
  width: 100%;
  max-width: 578px;
  padding-top: var(--eds-space-4);
}

/* The upper half of the form: name, surname, e-mail, the three choices and the
   attachment. 32px between its two groups, 16px inside the lower one - the
   frames' own two-step rhythm. */
.contact__group {
  display: flex;
  flex-direction: column;
  gap: var(--eds-space-7);
}

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

/* Name and surname share a row from sm; below that they stack. */
.contact__row {
  display: flex;
  flex-direction: column;
  gap: var(--eds-space-7);
}

.contact__row > .eds-form-field {
  flex: 1 1 0;
  min-width: 0;
}

/* The frames draw a 120px message box: 104px of text over the control's own
   8px of vertical padding. `rows` alone cannot say that, and the control is
   sized by its content. */
.contact__form textarea.eds-native-input {
  height: 104px;
  resize: vertical;
}

.contact__captcha {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

/* Error messages under the radio groups, the upload and the consent checkbox sit
   outside .eds-form-field, where --eds-ff-error is not defined, so they would
   fall back to the inherited colour. */
.contact__form .eds-form-field__subscript .field-validation-error {
  display: block;
  color: var(--eid-color-error);
}

/* The attachment, drawn the way the document upload is on the registration portal
   (register.css 7.2, 7.8 and 7.9): the trigger is the box, and the files it holds
   are listed inside it, each with a ✕ to take it off. */
.eid-form--fileinput {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 54px;
  padding: var(--eds-space-3) 23px;
  border: 0;
  border-radius: var(--eds-radius-md);
  background: var(--eds-primary-95);
  color: var(--eds-color-primary);
  cursor: pointer;
  text-align: start;
}

.eid-form--fileinput:focus-visible {
  outline: 2px solid var(--eds-color-primary);
  outline-offset: 2px;
}

.eid-form--fileinput .fileinput--text {
  flex: 1;
  min-width: 0;
}

.eid-form--fileinput ul,
.eid-form--fileinput .fileinput--files {
  margin: 0;
  padding: 0;
  list-style: none;
}

.eid-form--fileinput .fileinput--files:empty {
  display: none;
}

.eid-form--fileinput .fileinput--files > div {
  display: flex;
  gap: var(--eds-space-2);
  align-items: center;
  padding: var(--eds-space-1) 0;
  color: var(--eds-color-primary);
  font-size: var(--eds-font-size-body-small);
  line-height: var(--eds-line-height-body-small);
}

/* The input is the button's own; it is taken out of the layout rather than out of
   the tree, so the picker can still be opened from the script. */
.eid-form--fileinput input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
}

/* The ✕ that takes a file off, in the error red so it reads as "remove". */
.eid-form--fileinput .fileinput--files > div > span {
  display: inline-block;
  flex: none;
  width: 18px;
  height: 18px;
  background: var(--eid-color-error);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 10.586 17.293 5.293l1.414 1.414L13.414 12l5.293 5.293-1.414 1.414L12 13.414l-5.293 5.293-1.414-1.414L10.586 12 5.293 6.707l1.414-1.414L12 10.586Z'/%3E%3C/svg%3E") center / contain no-repeat;
  cursor: pointer;
}

.eid-form--fileinput .fileinput--files > div > span:hover {
  background: var(--eds-color-primary);
}

.eid-form--fileinput .fileinput--files > div > span:focus-visible {
  outline: 2px solid var(--eds-color-primary);
  outline-offset: 2px;
}

.eid-form--fileinput.is-invalid {
  outline: 1px solid var(--eid-color-error);
  outline-offset: 0;
}

/* Browser autofill paints the input a pale blue of its own. Paint it with the
   field's own background instead, so it blends into the control. */
.contact__form .eds-native-input:-webkit-autofill,
.contact__form .eds-native-input:-webkit-autofill:hover,
.contact__form .eds-native-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--eds-ff-bg, #fff) inset;
  -webkit-text-fill-color: currentColor;
  caret-color: currentColor;
}

.contact__captcha img {
  width: 223px;
  height: 56px;
  border-radius: 3px;
}

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

/* DEVIATION - the frame draws the terms link in the same colour and weight as
   the sentence around it, which leaves nothing but position to say it is a
   link. It is underlined here so it is not carried by colour alone (13.5). */
.contact__terms a {
  text-decoration: underline;
}

/* -----------------------------------------------------------------------------
   6. Breakpoints
   -------------------------------------------------------------------------- */

@media (min-width: 600px) {
  /* From here the hero takes the desktop composition: the wide illustration and
     a chat card that grows with the column. The phone art is never asked to
     stretch, and the desktop art is never asked to hold together at 390. */
  /* The desktop art is the full 1273 of the frame and scales down with the
     band under that. It is never allowed past 100%: the clip margin above is
     there for the 44px the phone frame bleeds downwards, and it has no way to
     say "vertically only", so anything that overhangs sideways would show up
     as horizontal page scroll. */
  .hero__art {
    top: 44px;
    width: 1273px;
    max-width: 100%;
  }

  .hero__inner {
    padding-block: 42px 43px;
    padding-inline: 0;
  }

  /* The desktop frame gives the card 807 of its 1280 and leaves the rest to the
     illustration either side. Held as that proportion rather than as the one
     width, because a card that keeps growing to 807 covers the robot
     everywhere between 600 and 1280. */
  .chat {
    width: 63%;
    max-width: 807px;
    min-height: 300px;
    padding: 22px;
  }

  .chat {
    font-size: var(--eds-font-size-body-large);
    line-height: var(--eds-line-height-body-large);
    letter-spacing: 0;
    font-weight: var(--eds-font-weight-regular);
  }

  .chat__message {
    padding: var(--eds-space-4);
  }

  .chat__composer {
    padding: 6px 6px 6px var(--eds-space-4);
  }

  .chat__send {
    padding: var(--eds-space-2) var(--eds-space-4);
  }

  .chat__send img {
    width: 27px;
    height: 27px;
  }

  .contact__row {
    flex-direction: row;
  }

  .contact__form {
    padding-inline: var(--eds-space-8);
  }

  /* The choices sit on one line from here; on the phone frame they stack. */
  .eds-radio-group {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

@media (min-width: 905px) {
  main {
    padding-bottom: 0;
  }

  .chat {
    min-height: 380px;
  }

  .video {
    width: 410px;
    aspect-ratio: 410 / 232;
  }

  .video__play {
    width: 47px;
    height: 33px;
  }
}

/* -----------------------------------------------------------------------------
   7. Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .eds-expansion-panel__content-wrapper,
  .eds-expansion-panel__expand-icon,
  .eds-radio-mark::before,
  .eds-radio-mark::after,
  .eds-checkbox__box,
  .chat__send {
    transition: none;
  }
}