@layer tokens {
  [data-grid="001"] {
    --mobil-krom-typ-storlek: var(--verk-lank-storlek);
    --mobil-krom-typ-rad-hojd: var(--verk-lank-rad-hojd);
  }
}

@layer layout {
  .mobil-index[hidden] {
    display: none;
  }

  .mobil-index-knapp {
    padding: 0;
    border: none;
    background: transparent;
    font-family: var(--font-display--family);
    font-size: var(--mobil-krom-typ-storlek, var(--verk-lank-storlek));
    font-weight: 400;
    line-height: var(--mobil-krom-typ-rad-hojd, var(--verk-lank-rad-hojd));
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-foreground);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    user-select: none;
  }

  .mobil-index__lista {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .mobil-index__val {
    padding: 0;
    border: none;
    background: transparent;
    font-family: var(--font-display--family);
    font-size: var(--mobil-krom-typ-storlek, var(--verk-lank-storlek));
    font-weight: 400;
    line-height: var(--mobil-krom-typ-rad-hojd, var(--verk-lank-rad-hojd));
    letter-spacing: var(--tracking-wide);
    text-align: inherit;
    color: var(--color-foreground);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    user-select: none;
  }

  .mobil-index__val[aria-current="true"] {
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  .mobil-index-knapp:focus,
  .mobil-index-knapp:focus-visible,
  .mobil-index__val:focus,
  .mobil-index__val:focus-visible {
    outline: none;
  }
}

@layer layout {
  @media (min-width: 769px) {
    .mobil-index {
      display: none;
    }
  }

  @media (max-width: 768px) {
    .verk-index {
      display: none;
    }

    .mobil-index {
      display: contents;
    }

    .mobil-index-knapp {
      display: flex;
      align-items: center;
      align-self: center;
      justify-content: flex-end;
      grid-column: 2 / 3;
      grid-row: 1 / 2;
      justify-self: end;
      min-height: var(--mobil-krom-typ-rad-hojd);
      padding-block: 0;
      padding-inline-start: 0;
      padding-inline-end: var(--grid-cell-gutter);
      font-family: var(--font-display--family);
      font-size: var(--mobil-krom-typ-storlek);
      font-weight: 400;
      line-height: var(--mobil-krom-typ-rad-hojd);
      pointer-events: auto;
    }

    .mobil-overlay--index .mobil-index__lista {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: var(--mobil-overlay-lank-mellanrum);
    }

    .mobil-index__val {
      display: block;
      width: max-content;
      max-width: 100%;
      white-space: nowrap;
    }

    .sidfot-lank--namn {
      display: flex;
      align-items: center;
      align-self: center;
      grid-column: 1 / 2;
      grid-row: 1 / 2;
      width: 100%;
      max-width: 100%;
      justify-self: stretch;
      min-height: var(--mobil-krom-typ-rad-hojd);
      padding-block: 0;
      padding-inline-start: var(--grid-cell-gutter);
      padding-inline-end: 0;
      text-align: start;
      font-family: var(--font-display--family);
      font-size: var(--mobil-krom-typ-storlek);
      font-weight: 400;
      line-height: var(--mobil-krom-typ-rad-hojd);
    }

    .galleri-zon {
      grid-column: 1 / -1;
    }

    .galleri-bild,
    .galleri-bild--bredd-48,
    .galleri-bild--bredd-62,
    .galleri-bild--bredd-78,
    .galleri-bild--bredd-full {
      width: 100%;
      max-width: 100%;
    }

    .galleri-prosjekt {
      align-items: stretch;
    }
  }
}