@import url('https://fonts.googleapis.com/css2?family=Funnel+Display:wght@300..800&display=swap');


* {
  box-sizing: border-box;
  font-size: inherit;
  padding: 0;
  margin: 0;
  scrollbar-width: thin;
}

:root {
  --break-point: 1024px;
  --color-text-gray: #383838;
  --color-accent: #e87373;
  --width-layout-wide: 1200px;
  --font-title: 'Funnel Display', sans-serif;
  --font-text: 'Funnel Display', sans-serif;
  --background-top: #61655D;
  --background-top-dark: #3c3f39;
  --background-body: #f8f9fa;
  --total-width: calc(100vw - 96px);
  --gap-width: 32px;
  --gap-margin: 32px; 
  --column-width: min(80px, round(down, calc((var(--total-width) - (var(--gap-width) * 11)) / 12), 8px));
  --container-width: calc((var(--column-width) * 12) + (var(--gap-width) * 11));
  --menu-offset: 21px;
  --menu-height: 65px;
  --top-height: calc(var(--menu-height) + var(--menu-offset) + 12px);

  font-size: 20px;
  font-family: var(--font-text);
}

body {
  scrollbar-gutter: stable;
  background: var(--background-body);
  color: var(--color-text-gray);
  line-height: 140%;
  scroll-padding-top: 164px;
  scroll-snap-type: y mandatory;
}

ul,
li {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

a {
  color: #000;
  text-decoration: underline dotted 9% currentColor;
  text-underline-offset: 0.25em;
}

h1 {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 36px;
  line-height: 100%;
  letter-spacing: 0%;
  margin: 0;
  padding-top: 16px;
}

.subtitle {
  font-family: var(--font-title);
  font-size: 36px;
  line-height: 100%;
  letter-spacing: 0%;
  margin: 0;
}

h2 {
  margin-bottom: 0.5em;
  margin-top: 0;
}

h3 {
  margin-bottom: 0.5em;
  font-family: Funnel Display;
  font-weight: 700;
  font-size: 28px;
  line-height: 120%;
  letter-spacing: 0%;
  text-underline-offset: 7px;
  text-decoration-thickness: 9%;
}

h4 {
  margin: 0;
}

/* Top-level .skin rules - kept at root level as requested */
.skin.about {
  dt {
    font-weight: 700;
  }

  dd+dt {
    margin-top: 0.5em;
  }
}


.skin.lead {
  grid-column: var(--column-lead);
  grid-row: before-lead / after-lead;
}

.skin.main {

  display: flex;
  flex-direction: column;
  grid-template-columns: subgrid;
  grid-column: var(--column-main);
  grid-row: before-content / after-content;
  grid-auto-rows: max-content;

  h2 {
    grid-column: var(--column-main);
  }

  margin-top: 16px;

  h2 {
    font-family: Funnel Display;
    font-weight: 700;
    font-style: Regular;
    font-size: 36px;
    line-height: 100%;
    letter-spacing: 0%;

    &:not(:first-child) {
      margin-top: 32px;
    }
  }

  .skin.more-link {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    text-transform: uppercase;
    font-size: 16px;
    margin-top: 12px;

    &::before {
      vertical-align: center;
      margin-right: 12px;
      content: url(/images/arrow-dark.svg);
    }
  }
}

.skin.root {
  display: grid;
  grid-template-columns:
    1fr [c2] var(--column-width) [c3] var(--column-width) [c4] var(--column-width) [c5] var(--column-width) [c6] var(--column-width) [c7] var(--column-width) [c8] var(--column-width) [c9] var(--column-width) [c10] var(--column-width) [c11] var(--column-width) [c12] var(--column-width) [c13] var(--column-width) [c14] 1fr;
  grid-auto-rows: auto;
  grid-column-gap: var(--gap-width);
  --column-fullwidth: c2/c14;
  --column-header: c2/c14;
  --before-left: c3;
  --after-right: c14;
  --column-lead: var(--column-main);

  @media screen and (max-width: 1024px) {
    grid-template-columns:
      1fr [c2] 400px [c3] 1fr;
    --column-header: c2/c3;
    --column-fullwidth: c2/c3;
    --before-left: c2;
    --after-left: c3;
    --before-right: c2;
    --after-right: c3;
    --column-main: c2/c3;
    --column-sidebar: c2/c3;
    --column-main: c2/c3;
    --column-sidebar: c2/c3;
    --column-lead: c2/c3;

  }


  @media screen and (max-width: 480px) {
    --column-lead: -1/1;
    grid-template-columns:
      1fr [c2] calc(100vw - 96px) [c3] 1fr;
  }
}

.skin.content {
  padding-bottom: calc(100vh - var(--top-height));
  grid-column: var(--column-main);
  grid-row: before-content / after-content;
  grid-template-columns: subgrid;
  grid-auto-rows: max-content;
}

.skin.intro {
  margin-top: 21px;
  grid-column: var(--column-main);
  font-weight: 400;
  font-style: Regular;
  font-size: 28px;
  line-height: 100%;
  letter-spacing: 0%;
}

.skin.panel {
  background: #61655D;

  &.single-event {
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: max-content;
    grid-column: 1/-1;
    color: #fff;

    a {
      color: #fff;
    }

    .meta {
      grid-column: var(--before-left) / var(--before-right);
      grid-row: 1/3;
      padding: 16px 0;

      .city {
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 1em;
      }
    }

    .links {
      padding: 16px;
      background: var(--color-text-gray);
      grid-column: var(--before-right) / var(--after-right);
    }

    .media {
      display: flex;
      justify-content: flex-end;
      align-items: flex-end;
      grid-column: var(--before-right) / var(--after-right);
      aspect-ratio: 1/1;
      background: var(--color-text-gray);

      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}

article.skin.page {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1/-1;
  grid-template-rows:
    [before-header] max-content [after-header before-hero] max-content [after-hero before-lead before-sidebar] max-content [after-lead before-content] max-content [after-content before-extra] auto [after-content after-extra ater-sidebar];

  @media screen and (max-width: 1024px) {
    grid-template-rows:
      [before-header] max-content [after-header before-hero] max-content [after-hero before-lead] max-content [after-lead before-content] max-content [after-content before-sidebar] auto [after-sidebar before-extra] auto [after-extra];
  }

  section {
    display: contents;
  }
}

.skin.hero {
  grid-column: 1 / -1;
  grid-row: before-hero / after-hero;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: auto;
}


.skin.burger {
  display: none;

  @media screen and (max-width: 1024px) {
    display: block;
  }
}

.skin.kolofon {
  line-height: 120%;

  .credits {
    display: block;
    margin-bottom: 16px;
  }

  .credit span {
    display: block;
    margin-bottom: 4px;
  }

  .person a {
    display: block;
    margin-bottom: 8px;
  }
}

.skin.grey-divider {
  width: 100%;
  height: 135px;
  background: var(--background-top);
  margin-bottom: 12px;
}

.skin.submenu {
  &:empty {
    display: none;
  }

  grid-column: var(--before-left) / var(--after-right);
  font-size: 20px;
  margin-top: 36px;
  display: flex;
  width: 100;
  overflow-x: auto;
  scrollbar-width: none;
  gap: 20px;
  padding-bottom: 6px;
  border-bottom: 8px solid var(--color-text-gray);
  font-weight: 700;

  @media screen and (max-width: 1024px) {
    gap: 16px;
  }

  @media screen and (max-width: 480px) {
    font-size: 18px;
  }

  a {
    position: relative;
    display: inline-block;
    white-space: nowrap;
    padding-bottom: 12px;
    cursor: pointer;
  }

  a:not(:first-child) {
    margin-left: 18px;

    @media screen and (max-width: 1024px) {
      margin-left: 0;
    }

    &::after {
      content: "";
      vertical-align: middle;
      position: absolute;
      top: 16px;
      left: -27px;
      width: 16px;
      height: 2px;
      background: var(--color-text-gray);

      @media screen and (max-width: 1024px) {
        display: none;
      }
    }
  }

  a.active {
    text-decoration: none;
    position: relative;

    &::before {
      content: "";
      position: absolute;
      left: 0;
      bottom: -6px;
      right: 0;
      height: 8px;
      background: #e87373;
    }
  }
}

.skin.list.toggles {
  display: flex;
  flex-flow: column;

  .value {
    font-weight: 400;
    font-size: 20px;
    padding: 12px 0;
    border-bottom: 1px solid #dbdbdb;
    position: relative;

    &:first-child {
      border-top: 1px solid #dbdbdb;
    }

    a {
      display: block;
      cursor: pointer;

      &.active {
        text-decoration: none;

        &::before {
          content: "";
          position: absolute;
          bottom: 0;
          top: -0px;
          left: -20px;
          bottom: 0px;
          width: 8px;
          background: #e87373;
        }
      }
    }

    &[disabled] {
      cursor: not-allowed;

      a {
        color: #dbdbdb !important;
        pointer-events: none;
      }
    }
  }
}

.skin.messages {
  display: none;
}

.skin.search {
  box-shadow:-2px 0 0 0 var(--background-body), 2px 0 0 0 var(--background-body);
  grid-column: var(--column-main);
  position: sticky;
  top: var(--top-height);
  z-index: 100;
  background: var(--background-body);
  padding-bottom:12px;

  .search-bar {
    display: flex;
    flex-direction: row;
    gap: 0;
    align-items: center;

    @media screen and (max-width: 1024px) {
      gap: 8px;
    }
  }

  width: 100%;
  margin-bottom: 32px;
  margin-top:8px;

  input {
    flex: 1;
    width: 100%;
    border-radius: 0;
    border: solid 1px #dbdbdb;
    height: 40px;
    padding: 0 12px;
    font-family: Funnel Display;
    font-weight: 400;
    font-size: 18px;
    line-height: 100%;
    letter-spacing: 0%;

    &:not(:valid) {
      color: #dbdbdb;
      background: url(/images/search.svg) no-repeat center right 7px;
    }
  }
}

.skin.persons {
  display: grid;
  gap: 16px;
  margin-bottom: 32px;
}

.skin.about-link {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  text-transform: uppercase;
  font-size: 16px;
  margin-top: 12px;

  &::before {
    vertical-align: center;
    margin-right: 12px;
    content: url(/images/arrow-dark.svg);
  }
}

/* Global styles */
noxt-error {
  display: none;
}

[hidden] {
  display: none !important;
}

::highlight(search-results) {
  background-color: var(--highlight-bg, #ffeb3b);
  color: var(--highlight-color, inherit);
}

input[type="checkbox"] {
  flex: 0 0 26px;
  appearance: none;
  width: 26px;
  height: 26px;
  border-radius: 0;
  background: url(/images/checkbox-unchecked.svg) no-repeat center center;
  background-size: 26px 26px;
  cursor: pointer;

  &:checked {
    background: url(/images/checkbox-checked.svg) no-repeat center center;
  }
}

a:has(img) {
  display: inline-flex;
  line-height: 100%;
  padding: 0;
  margin: 0;
}

.skin.anchor {
  scroll-margin-top:var(--top-height);

}


.ui.row {
  display:flex;
  flex-flow:row;
  column-gap: var(--gap-width);
  @media screen and (max-width: 1024px) {
    flex-flow:column;
  }

  >.ui {
    --column-count:1;
    --gap-count: calc(var(--column-count) - 1);
    flex: 0 0 calc(var(--column-width) * var(--column-count) + var(--gap-width) * var(--gap-count));
    @media screen and (max-width: 1024px) {
      width:100%;
      flex: 0 0 0;
    }
    &.col1 {
      --column-count:1;
    }
    &.col2 {
      --column-count:2;
    }
    &.col3 {
      --column-count:3;
    }
    &.col4 {
      --column-count:4;
    }
    &.col5 {
      --column-count:5;
    }
    &.col6 {
      --column-count:6;
    }
    &.col7 {
      --column-count:7;
    }
    &.col8 {
      --column-count:8;
    }
    &.col9 {
      --column-count:9;
    }
    &.col10 {
      --column-count:10;
    }
    &.col11 {
      --column-count:11;
    }
    &.col12 {
      --column-count:12;
    }
  } 
}