/*
 * Súbor: css/pages/home/work-process.css
 * Obsah: Pracovný proces homepage: fotografické pozadie, nadpis, kroky s ilustráciami a responzívne rozloženie.
 * Použitie: index.html.
 * Zapojenie: <link rel="stylesheet" href="css/pages/home/work-process.css">; zachovaj poradie podľa css/README.md.
 * Závislosti: .work-process a potomkovia; --process-* a --palette-*; fotografia VSETKY_IMG/HOME_PAGE/pracovny_proces.jpg.
 */
/* The photograph is intentionally unaltered. Darken the source in a photo editor. */
    .work-process {
      --process-dark: var(--palette-dark, #243142);
      --process-light: var(--palette-light, #E8E0D4);
      --process-sand: var(--palette-sand, #D3C8B8);
      padding: clamp(40px, 5vw, 80px) 0;
      color: var(--process-light);
      background: var(--process-dark) url('../../../VSETKY_IMG/HOME_PAGE/pracovny_proces.jpg') center / cover no-repeat;
    }

    .work-process__inner {
      width: min(1600px, calc(100% - 48px));
      margin-inline: auto;
    }

    .work-process__heading {
      width: fit-content;
      max-width: 1120px;
      margin: 0 auto 36px;
      padding: 20px 28px;
      background: rgb(36 49 66 / 75%);
      border-radius: 12px;
      text-align: center;
    }

    .work-process__eyebrow {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 18px;
      margin-bottom: 18px;
      color: var(--process-sand);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .24em;
      text-transform: uppercase;
    }

    .work-process__eyebrow::before,
    .work-process__eyebrow::after {
      content: '';
      width: 64px;
      height: 1px;
      background: var(--process-sand);
    }

    .work-process__heading h2 {
      margin: 0;
      font-size: clamp(30px, 3.3vw, 52px);
      line-height: 1.16;
      color: var(--process-light);
    }

    .work-process__heading h2 span {
      color: var(--process-sand);
    }

    .work-process__track {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 18px;
      margin: 0;
      padding: 4px 0 0;
      list-style: none;
    }

    .work-process__track:focus-visible {
      outline: 2px solid var(--process-sand);
      outline-offset: 6px;
    }

    .work-process__step {
      position: relative;
      min-width: 0;
      padding-top: 52px;
    }

    .work-process__step::before {
      content: '';
      position: absolute;
      top: 23px;
      left: -3px;
      right: -3px;
      height: 1px;
      background: var(--process-sand);
    }

    .work-process__step:first-child::before {
      left: 50%;
    }

    .work-process__step:last-child::before {
      right: 50%;
    }

    .work-process__number {
      position: absolute;
      z-index: 1;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      display: grid;
      place-items: center;
      width: 46px;
      height: 46px;
      border: 2px solid var(--process-sand);
      border-radius: 50%;
      background: rgb(36 49 66 / 75%);
      color: var(--process-light);
      font-size: 18px;
      font-weight: 600;
    }

    .work-process__number::after {
      content: '';
      position: absolute;
      top: 52px;
      left: 50%;
      height: 10px;
      border-left: 2px dotted var(--process-sand);
    }

    .work-process__card {
      height: 100%;
      padding: 24px 20px;
      border: 1px solid var(--process-sand);
      border-radius: 10px;
      background: rgb(36 49 66 / 75%);
      text-align: center;
    }

    .work-process__icon {
      display: grid;
      place-items: center;
      width: 46px;
      height: 46px;
      margin: 0 auto 12px;
      border: 1px solid var(--process-sand);
      border-radius: 50%;
    }

    .work-process__icon svg {
      width: 25px;
      height: 25px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.4;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .work-process__card h3 {
      margin: 0;
      color: var(--process-light);
      font-size: clamp(18px, 1.5vw, 22px);
      line-height: 1.4;
      letter-spacing: -.015em;
      overflow-wrap: anywhere;
    }

    .work-process__card p {
      margin: 12px 0 0;
      color: var(--process-light);
      font-size: 15px;
      line-height: 1.6;
    }

    .work-process__hint {
      display: none;
    }

    @media (min-width: 768px) and (max-width: 1099px) {
      .work-process__track {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 24px;
      }

      .work-process__step:nth-child(2n)::before {
        right: 50%;
      }

      .work-process__step:nth-child(2n + 1)::before {
        left: 50%;
      }

      .work-process__card h3 {
        font-size: 18px;
      }
    }

    @media (max-width: 767px) {
      .work-process__inner {
        width: calc(100% - 32px);
      }

      .work-process__heading {
        margin-bottom: 24px;
        padding: 18px 14px;
      }

      .work-process__heading h2 {
        font-size: clamp(25px, 6.5vw, 36px);
      }

      .work-process__eyebrow {
        font-size: 10px;
        gap: 10px;
        letter-spacing: .18em;
      }

      .work-process__eyebrow::before,
      .work-process__eyebrow::after {
        width: 24px;
      }

      .work-process__track {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 72%;
        gap: 10px;
        overflow-x: auto;
        padding-bottom: 12px;
        scroll-snap-type: x proximity;
        scrollbar-width: thin;
        scrollbar-color: var(--process-sand) rgb(36 49 66 / 35%);
      }

      .work-process__step {
        padding-top: 58px;
        scroll-snap-align: start;
      }

      .work-process__step::before {
        top: 19px;
        left: -5px;
        right: -5px;
      }

      .work-process__number {
        width: 38px;
        height: 38px;
        font-size: 16px;
      }

      .work-process__number::after {
        top: 43px;
        height: 9px;
      }

      .work-process__card {
        padding: 14px 12px 16px;
      }

      .work-process__icon {
        width: 38px;
        height: 38px;
        margin-bottom: 10px;
      }

      .work-process__icon svg {
        width: 22px;
        height: 22px;
      }

      .work-process__card h3 {
        font-size: 15px;
        line-height: 1.4;
      }

      .work-process__hint {
        display: block;
        margin: 12px 0 0;
        color: var(--process-light);
        font-size: 12px;
        text-shadow: 0 1px 3px var(--process-dark);
      }
    }