:root {
  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --rule-soft: #d9d9d9;
  --pad: clamp(1.25rem, 3vw, 2.5rem);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.js, html.js body { height: 100%; }
html.js body { overflow: hidden; }

body {
  margin: 0;
  background: #fff;
  color: #000;
  font-family: var(--font);
  font-size: 0.9375rem;
  line-height: 1.45;
  display: flex;
  flex-direction: column;
}

a { color: #000; text-underline-offset: 0.15em; }
:focus-visible { outline: 2px solid #000; outline-offset: 2px; }

/* Banner */
.banner { margin: 0; flex: none; height: 38vh; min-height: 10rem; border-bottom: 1px solid #000; }
.banner img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }

/* Tabs */
.tabs { display: flex; border-bottom: 1px solid #000; flex: none; }
.tabs__list { display: flex; flex: 1; min-width: 0; }
.tab {
  flex: 1; text-align: center; padding: 0.8rem var(--pad);
  text-decoration: none; font-weight: 500; color: #666;
}
.tab__dates { font-weight: 400; margin-left: 0.35rem; }
.tab + .tab { border-left: 1px solid #000; }
.tab[aria-selected="true"] { color: #000; font-weight: 600; }
.tab:hover { color: #000; }
.lang {
  flex: none; padding: 0.8rem var(--pad); border: 0; border-left: 1px solid #000; background: #fff;
  font: inherit; font-weight: 500; color: #666; cursor: pointer;
}
.lang:hover { color: #000; }

/* Language: both versions are in the HTML; the root data-lang picks one. */
html.js[data-lang="en"] [lang="sv"], html.js:not([data-lang="en"]) [lang="en"] { display: none; }
html:not(.js) [lang="en"] { display: none; }

/* Panels */
main { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.panel { flex: 1; min-height: 0; display: flex; }
html.js .panel:not(.is-active) { display: none; }
html:not(.js) .panel + .panel { border-top: 1px solid #000; }

.panel__body {
  flex: 1; min-height: 0; overflow-y: auto; padding: var(--pad);
  display: grid; align-content: start;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 0.8fr);
  grid-template-areas: "buy about practical";
  column-gap: clamp(2rem, 4vw, 4rem);
}
.buy { grid-area: buy; }
.about { grid-area: about; }
.practical { grid-area: practical; }
.about p, .practical p { margin: 0 0 0.75rem; }
.about p:last-child, .practical p:last-child { margin-bottom: 0; }

h1 { margin: 0; font-size: 1em; font-weight: 600; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lead { margin: 0; max-width: 44ch; }
.price { margin: 1rem 0 0; font-weight: 500; }
.price__vat { font-weight: 400; color: #444; }

.sessions { list-style: none; margin: 0.75rem 0 0; padding: 0; border-top: 1px solid #000; }
.session {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--rule-soft);
}
.session__when { display: flex; flex-wrap: wrap; column-gap: 0.6rem; align-items: baseline; }
.session__date { font-weight: 500; }
.session__time { color: #444; }
.session--full .session__date { color: #777; }

.btn {
  display: inline-block; padding: 0.6rem 1.2rem;
  background: #000; color: #fff; text-decoration: none; font-weight: 500; line-height: 1; white-space: nowrap;
  border: 1px solid #000;
}
.btn:hover { background: #fff; color: #000; }
.btn--off { background: #fff; color: #777; border-color: var(--rule-soft); }
.btn--off:hover { background: #fff; color: #777; }


@media (max-width: 68rem) {
  .panel__body { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-areas: "buy about" "buy practical"; row-gap: 0.75rem; }
}
@media (max-width: 44rem) {
  .banner { height: 24vh; }
  .panel__body { grid-template-columns: 1fr; grid-template-areas: "buy" "about" "practical"; row-gap: 1rem; }
}
@media (max-height: 44rem) {
  .banner { height: 26vh; }
}