/* BXYZ:..:eliot@bosmanxyz.xyz:..:.www.bosmanxyz.xyz */

@layer components {
  .utfalls {
    display: flex;
    flex-direction: column;
  }

  .utfall[data-komponent="utfall"] > h3 > .nod__reglage {
    flex-basis: var(--rad-hojd);
  }

  .utfall[data-format="galleri-text"] .utfall__inne:has(> .galleri[data-axel="x"]) {
    display: grid;
    grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
    column-gap: var(--gutter);
  }

  .utfall[data-format="galleri-text"] .utfall__inne:has(> .galleri[data-axel="x"]) > * {
    grid-column: 1 / -1;
  }

  .nod__inre:has(> .utfalls) {
    flex: none;
    min-block-size: auto;
    overflow: visible;
  }

  .ram:has(.utfalls [data-komponent="utfall"][data-tillstand="expanderad"]),
  .ram:has(.utfalls [data-komponent="utfall"][data-tillstand="expanderar"]) {
    block-size: auto;
    min-block-size: 100dvh;
    max-block-size: none;
    overflow: visible;
  }

  @media (min-width: 64rem) {
    html[data-huvud="skrivbord"] .ram .utfalls [data-komponent="utfall"] .nod__titel {
      padding-inline-start: 0;
    }

    html[data-huvud="skrivbord"] .ram .utfall[data-format="text"] .utfall__inne:has([data-komponent="textblock"]) {
      display: grid;
      grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
      column-gap: var(--gutter);
    }

    html[data-huvud="skrivbord"] .ram .utfall[data-format="galleri-text"] .utfall__inne [data-komponent="textblock"] {
      grid-column: 1 / -1;
    }

    .ram:has(.utfalls [data-komponent="utfall"][data-tillstand="expanderad"]) .trad,
    .ram:has(.utfalls [data-komponent="utfall"][data-tillstand="expanderar"]) .trad {
      grid-template-rows: var(--u) auto;
      overflow: visible;
      min-block-size: calc(100dvh - var(--margin));
    }

    .ram:has(.utfalls [data-komponent="utfall"][data-tillstand="expanderad"])
      .nod[data-tillstand="expanderad"]
      > .nod__panel,
    .ram:has(.utfalls [data-komponent="utfall"][data-tillstand="expanderar"])
      .nod[data-tillstand="expanderad"]
      > .nod__panel,
    .ram:has(.utfalls [data-komponent="utfall"][data-tillstand="expanderad"])
      .nod[data-tillstand="expanderar"]
      > .nod__panel,
    .ram:has(.utfalls [data-komponent="utfall"][data-tillstand="expanderar"])
      .nod[data-tillstand="expanderar"]
      > .nod__panel {
      overflow: visible;
      grid-template-rows: auto;
      min-block-size: auto;
    }
  }
}