/* Supplemental utilities used by the rebuilt pages (not present in the compiled
   agency CSS bundle). */

/* No visible scrollbars anywhere — scrolling still works, bars never show. */
* {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
*::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.label-xs {
  font-family: var(--font-body);
  letter-spacing: 0.1em;
  color: var(--theme-color-label);
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
}
.max-w-2\/3 {
  max-width: 66.666667%;
}
.min-w-64 {
  min-width: 16rem;
}
.max-lg\:flex-1 {
  flex: 1 1 0%;
}
@media (min-width: 48rem) {
  .md\:min-h-\[56vw\] {
    min-height: 56vw;
  }
}
.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}
.theme-sb .sb-home-hero {
  margin-top: calc(var(--spacing-header) + 1rem);
  margin-bottom: 0;
}
.theme-sb .sb-home-hero + .section {
  margin-top: 4rem;
}
.theme-sb .sb-home-first {
  margin-top: 1rem;
  padding-top: 0;
}
.sb-header-logo {
  display: block;
  height: 1.375rem;
  width: auto;
  max-width: 100%;
}
.theme-sb .sb-centered-pair {
  display: flex;
  justify-content: safe center;
  gap: 1rem;
}
@media (max-width: 39.999rem) {
  .theme-sb .sb-centered-pair {
    justify-content: flex-start;
  }
}
@media (min-width: 64rem) {
  /* Bounded desktop cards: never shrink to tiny columns or grow oversized. */
  .theme-sb .sb-card-row > div {
    flex: 0 0 clamp(28rem, calc((100vw - 10rem) / 3), 30rem);
    min-width: 0;
    max-width: none;
  }
  .theme-sb .sb-centered-pair > div {
    flex-basis: clamp(28rem, calc((100vw - 10rem) / 3), 30rem);
  }
}
@media (max-width: 63.999rem) {
  .theme-sb .sb-card-row {
    display: flex;
    justify-content: flex-start;
    flex-wrap: nowrap;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x pan-y;
  }
  .theme-sb .sb-card-row::-webkit-scrollbar {
    display: none;
  }
  .theme-sb .sb-card-row > div {
    flex: 0 0 min(22rem, 85%);
    min-width: 0;
    max-width: none;
  }
}
@media (min-width: 40rem) and (max-width: 63.999rem) {
  /* Narrow windows/tablet: one whole card with the next card peeking,
     so the row always reads as swipeable. */
  .theme-sb .sb-card-row {
    gap: 1.5rem;
  }
  .theme-sb .sb-card-row > div {
    flex-basis: clamp(21rem, 68%, 30rem);
  }
  .theme-sb .sb-centered-pair {
    justify-content: flex-start;
  }
}
@media (max-width: 39.999rem) {
  /* Mobile: one large card, twice the former two-up width, with the next
     card peeking. Both rows start at the same left edge. */
  .theme-sb .sb-card-row {
    gap: 1rem;
  }
  .theme-sb .sb-card-row > div {
    flex-basis: min(calc(100% - 3.5rem), 21rem);
  }
  .theme-sb .sb-card-row p {
    font-size: 13px;
  }
}
/* Card titles inside images: small and clean. */
.theme-sb .sb-card-title {
  font-size: 1.125rem;
  line-height: 1.2;
  letter-spacing: 0.02em;
}
@media (min-width: 40rem) {
  .theme-sb .sb-card-title { font-size: 1.375rem; }
}
@media (min-width: 64rem) {
  .theme-sb .sb-card-title { font-size: 1.5rem; }
}
/* Ali 2026-10-27: titlarna mjuknar bara lätt vid hållning — en aning djupare
   mint i stället för den tydligt grönare nyansen, så de alltid går ihop med
   sektionsrubriken "the game", som har samma utgångsfärg. */
.theme-sb .sb-card-title {
  transition: color 0.2s ease-in-out;
}
.theme-sb .group:hover .sb-card-title {
  color: color-mix(in srgb, var(--mint) 30%, var(--mint-light));
}
@media (max-width: 39.999rem) {
  .sb-header-logo {
    height: 1rem;
  }
}

/* Reviews module */
/* Reviews sit directly on the page surface — no separate block. */
.theme-sb .sb-reviews {
  background: transparent;
  color: var(--theme-color-text);
}
.theme-sb .sb-review-row {
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  touch-action: pan-x pan-y;
  scroll-behavior: auto;
  /* Full-bleed so the row never ends in a hard cut inside the page. */
  width: 100vw;
  max-width: 100vw;
  margin-inline: calc(50% - 50vw);
  -webkit-mask-image: linear-gradient(to right, transparent, black 6rem, black calc(100% - 6rem), transparent);
  mask-image: linear-gradient(to right, transparent, black 6rem, black calc(100% - 6rem), transparent);
}
.theme-sb .sb-review-row::-webkit-scrollbar {
  display: none;
}
.theme-sb .sb-review-track {
  display: flex;
  align-items: stretch;
  width: max-content;
}
@media (max-width: 40rem) {
  .theme-sb .sb-review-row {
    -webkit-mask-image: linear-gradient(to right, transparent, black 2.5rem, black calc(100% - 2.5rem), transparent);
    mask-image: linear-gradient(to right, transparent, black 2.5rem, black calc(100% - 2.5rem), transparent);
  }
}
.theme-sb .sb-review-card {
  flex: 0 0 min(22rem, calc(100vw - 4rem));
  width: min(22rem, calc(100vw - 4rem));
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  height: 11.5rem;
  margin-inline-end: 1rem;
  /* Same ringed style as the calendar date boxes. */
  background: transparent;
  color: var(--theme-color-text);
  border: 1.5px solid color-mix(in srgb, #c0508f 75%, transparent);
  border-radius: 1.5rem;
  overflow: hidden;
  padding: 1rem 1.25rem;
  box-shadow: none;
}
@media (min-width: 64rem) {
  .theme-sb .sb-review-card {
    flex-basis: 26rem;
    width: 26rem;
    height: 12rem;
    padding: 1.25rem 1.5rem;
  }
}
.theme-sb .sb-review-stars {
  display: flex;
  gap: 0.25rem;
  color: var(--mint);
}
.theme-sb .sb-review-star {
  width: 1rem;
  height: 1rem;
}
.theme-sb .sb-review-quote {
  font-size: 0.875rem;
  line-height: 1.5;
  margin: 0;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.theme-sb .sb-review-author { display: flex; flex-direction: column; gap: 0.125rem; }
.theme-sb .sb-review-name {
  font-size: 0.9375rem;
  font-family: "Oxanium", var(--font-sans), sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0;
  color: var(--mint);
}
.theme-sb .sb-review-role {
  font-size: 0.75rem;
  margin: 0;
  opacity: 0.7;
}
@media (max-width: 40rem) {
  .theme-sb .sb-review-quote { font-size: 0.8125rem; }
}

/* ============ Skiller Moments — its own mint panel (Ali 2026-10-28) ============
   The block sits on the same mint surface as the mint bands elsewhere on the
   site, so it reads as a panel of its own. Text flips to plum for contrast. */
.theme-sb .sb-highlights {
  --panel-pad: calc(var(--spacing) * 12);
  background: var(--mint);
  color: var(--plum);
  /* Ali 2026-10-30: tajtare block — mindre luft under ikonraden än upptill. */
  padding-top: var(--panel-pad);
  padding-bottom: calc(var(--panel-pad) * 0.55);
}
.theme-sb .sb-highlights h2 { color: var(--plum); }
.theme-sb .sb-highlights a { color: var(--plum); }
.theme-sb .section.sb-highlights { margin-bottom: 0; }
/* Ali 2026-10-30: tajtare övergång — panelen har egen luft upptill (48 px),
   så marginalen krymps med samma belopp. Totalt blir avståndet från sista
   FAQ-frågan ner till "Skiller Moments" 56 px på mobil och 96 px på dator. */
.theme-sb .section.sb-highlights {
  margin-top: calc(var(--spacing) * 14 - var(--panel-pad));
}
@media (min-width: 48rem) {
  .theme-sb .section.sb-highlights {
    margin-top: calc(var(--spacing) * 24 - var(--panel-pad));
  }
}
.theme-sb .sb-highlights + .sb-footer { margin-top: 0; }
/* On phones the heading reads "Moments" only (Ali 2026-10-28). */
@media (max-width: 47.999rem) {
  .theme-sb .sb-highlights .sb-moments-lead { display: none; }
}

/* Tiles are laid out with flex-basis percentages so the row measures the
   scroller's own content box: the tiles line up with the container padding at
   every width and never overflow the panel. */
.theme-sb .sb-collage-row {
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.theme-sb .sb-collage-row::-webkit-scrollbar { display: none; }
.theme-sb .sb-collage {
  --pad: 1rem;
  --gap: 0.75rem;
  /* Mobile: one dominant tile with the next one peeking in. */
  --cell: min(23rem, 78vw);
  display: flex;
  gap: var(--gap);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-inline: var(--pad);
  margin: 0;
  padding-block: 0;
  list-style: none;
}
.theme-sb .sb-collage::-webkit-scrollbar { display: none; }
/* Tablet and narrow desktop windows: two full tiles with the next one peeking
   in — three across gets too small when the window is dragged narrower
   (Ali 2026-10-28). */
@media (min-width: 48rem) and (max-width: 74.999rem) {
  .theme-sb .sb-collage {
    --pad: 3rem;
    --cell: calc((100% - 2 * var(--gap)) / 2.3);
  }
}
/* Desktop: three landscape photos across, like the Nike reference — bigger
   tiles than four-across would allow. Ali 2026-10-28. */
@media (min-width: 75rem) {
  .theme-sb .sb-collage {
    --pad: 4rem;
    --gap: 1rem;
    --cell: calc((100% - 2 * var(--gap)) / 3);
  }
}
.theme-sb .sb-collage-tile {
  /* Unframed landscape photos, matching the Nike reference proportions. */
  flex: 0 0 var(--cell);
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 0;
}
.theme-sb .sb-collage-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Desktop: the gap from the panel's top edge to the first heading matches the
   mint newsletter box exactly (53px to the tops of the letters), so both
   sections follow one rhythm. Bottom padding mirrors the top so the air under
   the mark in the bottom row equals the air above "Besök oss". */
@media (min-width: 48em) {
  .theme-sb .sb-footer { padding-top: 2px; padding-bottom: calc(var(--spacing) * 12); }
}

/* ============ Footer — compact, subtle on mobile (desktop unchanged) ============ */
@media (max-width: 47.99em) {
  .theme-sb .sb-footer { padding-block: calc(var(--spacing) * 6) calc(var(--spacing) * 6); }
  .theme-sb .sb-footer .label { font-size: 11px; letter-spacing: 0.12em; margin-bottom: 0.5rem; }
  .theme-sb .sb-footer .grid p,
  .theme-sb .sb-footer .grid li,
  .theme-sb .sb-footer .grid a { font-size: 13px; line-height: 1.45; }
  .theme-sb .sb-footer .grid li.py-1 { padding-block: 0.1rem; }
  /* Bottom row on one line: the mark sits exactly in the middle of the
     screen and the texts align with the column edges above.
     Ali 2026-10-27: the row sits lower — less air under it and more above. */
  .theme-sb .sb-footer-meta {
    display: grid;
    margin-top: calc(var(--spacing) * 12);
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 0;
  }

  .theme-sb .sb-footer .sb-footer-meta .label-xs {
    font-size: 10px;
    letter-spacing: 0.05em;
    line-height: 1.2;
  }
  .theme-sb .sb-footer .sb-footer-meta > a { width: 40px; }
  .theme-sb .sb-footer .sb-footer-meta > a svg { width: 100%; height: auto; display: block; }
}
@media (max-width: 23.5em) {
  .theme-sb .sb-footer .sb-footer-meta .label-xs { font-size: 9px; letter-spacing: 0.02em; }
  .theme-sb .sb-footer .sb-footer-meta > a { width: 34px; }
}
@media (max-width: 21em) {
  .theme-sb .sb-footer .sb-footer-meta .label-xs { font-size: 8.5px; letter-spacing: 0.02em; }
  .theme-sb .sb-footer .sb-footer-meta > a { width: 32px; }
}



/* ============ Mint CTA band (Vanliga frågor → footer) ============
   Full-width mint surface: heading left, one button right. Stacked and
   centred below the desktop breakpoint. Colours from the brand tokens. */
.theme-sb .sb-cta {
  background: var(--mint);
  color: var(--plum);
  padding-block: calc(var(--spacing) * 12);
  margin-top: calc(var(--spacing) * 2);
}
.theme-sb .sb-cta .label {
  color: var(--plum);
}
.theme-sb .sb-cta h2 { color: var(--plum); }
.theme-sb .sb-cta-text {
  font-size: 16px;
  line-height: 1.5;
  max-width: 34rem;
  margin-inline: auto;
  color: var(--plum);
}
.theme-sb .sb-cta-inner {
  display: grid;
  align-items: center;
  gap: 2rem;
  text-align: center;
}
.theme-sb .sb-cta-action { display: flex; justify-content: center; }
.theme-sb .sb-cta .button-primary {
  background-color: var(--plum);
  color: var(--mint);
  fill: var(--mint);
}
.theme-sb .sb-cta .button-primary:hover {
  background-color: var(--plum-light);
  color: var(--mint);
  fill: var(--mint);
}
@media (min-width: 64rem) {
  .theme-sb .sb-cta-inner {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3rem;
    text-align: left;
  }
  .theme-sb .sb-cta-text { margin-inline: 0; }
  .theme-sb .sb-cta-action { justify-content: flex-end; }
}

/* Original module-bank rhythm restored across all page blocks. */
.theme-sb .sb-newsletter {
  min-height: 247px;
  /* Samma gröna yta som "Boka tid"-knappen (Ali 2026-10-14): mint, inte den ljusa mistbasen. */
  background: var(--mint);
}
.theme-sb .sb-newsletter .sb-cta-inner { align-items: center; text-align: center; }
.theme-sb .sb-newsletter-copy .sb-cta-text { max-width: 32rem; margin-inline: auto; line-height: 1.55; }
.theme-sb .sb-newsletter-copy .sb-cta-text p { margin: 0; }
.theme-sb .sb-newsletter-form { width: 100%; max-width: 28rem; margin-inline: auto; min-width: 0; text-align: center; }
.theme-sb .sb-newsletter-fields { display: flex; flex-direction: column; gap: 0.75rem; align-items: stretch; }
/* Nyhetsbrevsfältet använder samma klass som lag-inloggningsfälten (Ali 2026-10-16):
   .sb-pill-field ger exakt samma ring, hover och fokus — bara bakgrunden är grön. */
.theme-sb .sb-newsletter-fields input.sb-pill-field {
  width: 100%; min-width: 0; padding: 0.65rem 1rem;
  color: var(--plum-dark);
  border-color: var(--booking-outline);
  background: var(--mint);
  background-clip: padding-box;
  -webkit-tap-highlight-color: transparent;
}
.theme-sb .sb-newsletter-fields input.sb-pill-field:hover { border-color: var(--booking-outline); }
.theme-sb .sb-newsletter-fields input.sb-pill-field:-webkit-autofill,
.theme-sb .sb-newsletter-fields input.sb-pill-field:-webkit-autofill:hover,
.theme-sb .sb-newsletter-fields input.sb-pill-field:-webkit-autofill:focus,
.theme-sb .sb-newsletter-fields input.sb-pill-field:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px var(--mint) inset;
  -webkit-text-fill-color: var(--plum-dark);
  caret-color: var(--plum-dark);
  border-color: var(--booking-outline);
  transition: background-color 99999s ease-in-out 0s;
}
.theme-sb .sb-newsletter-fields input.sb-pill-field::placeholder { color: var(--plum-dark); opacity: 0.5; }
/* Fokus bara "lyser till" — ringen byter färg och ser tjockare ut, men
   ingen utbredd ring och inget suddigt sken (Ali 2026-10-16: skenet såg ut
   som en skugga mot den gröna bakgrunden). Tjockleken läggs som en skarp
   1 px-ring runt kanten istället för att göra ramen tjockare: en tjockare
   ram krymper innerytan och texten flyttar sig ett hack när man klickar i
   rutan (Ali 2026-10-16: "rutan hoppar"). */
.theme-sb .sb-newsletter-fields input.sb-pill-field:focus, .theme-sb .sb-newsletter-fields input.sb-pill-field:focus-visible {
  outline: none;
  border-color: var(--booking-accent-hover);
  border-width: 1px;
  box-shadow: 0 0 0 1px var(--booking-accent-hover);
  transition: border-color .2s;
}
.theme-sb .sb-newsletter-fields .button { flex-shrink: 0; width: 100%; height: 44px; min-height: 44px; padding: 0 1.25rem; border-radius: 9999px; font-size: 14px; line-height: 1; }
/* "Anmäl mig" i samma plommon med vit text som "Fortsätt" i bokningen (Ali 2026-10-14). */
.theme-sb .sb-newsletter .button-primary { background-color: var(--plum); color: #ffffff; fill: #ffffff; }
.theme-sb .sb-newsletter .button-primary:hover { background-color: var(--plum-light); color: #ffffff; fill: #ffffff; }
.theme-sb .sb-newsletter-consent { display: flex; align-items: flex-start; justify-content: center; gap: 0.5rem; margin-top: 1rem; font-size: 12px; line-height: 1.5; text-align: left; }
.theme-sb .sb-newsletter-consent input { flex-shrink: 0; margin-top: 2px; accent-color: var(--plum); }
.theme-sb .sb-newsletter-status { height: 3em; font-size: 12px; line-height: 1.5; margin-top: 0.25rem; margin-bottom: 0; }
.theme-sb .sb-newsletter-success { font-size: 16px; }
/* Rubrik och brödtext följer "Nästa lediga tider" (Ali 2026-10-14): heading-md och
   16 px brödtext i samma nyans som resten av sidan — samma skala i båda blocken. */
.theme-sb .sb-newsletter .heading-md { line-height: 1.2; }
.theme-sb .sb-newsletter-fields input { font-family: var(--font-family-body); font-size: 16px; }
.theme-sb .sb-newsletter-fields .button { font-size: 14px; font-weight: 600; }
.theme-sb .sb-newsletter-consent { font-size: 10.5px; }
.theme-sb .sb-newsletter-status { font-size: 10.5px; }
.theme-sb .sb-newsletter-success { font-size: 14px; }
@media (min-width: 64rem) {
  .theme-sb .sb-newsletter .sb-cta-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 32rem); align-items: start; }
  .theme-sb .sb-newsletter-copy { text-align: left; }
  .theme-sb .sb-newsletter-copy .sb-cta-text { margin-inline: 0; }
  .theme-sb .sb-newsletter-form { max-width: 28rem; margin-inline: 0; text-align: left; }
  .theme-sb .sb-newsletter-consent { justify-content: flex-start; }
}
@media (max-width: 63.999rem) {
  .theme-sb .sb-newsletter { min-height: 331.8125px; padding-block: calc(var(--spacing) * 4.5); }
  .theme-sb .sb-newsletter .sb-cta-inner { gap: 2rem; }
}
.theme-sb .section {
  margin-block: calc(var(--spacing) * 18);
}
@media (min-width: 48rem) {
  .theme-sb .section {
    margin-block: calc(var(--spacing) * 40);
  }
}
/* Rubriker som kortas ner längre upp på skärmen (Ali 2026-10-15):
   "Vanliga frågor" → "Frågor" och "Omtyckt av spelare" → "Recensioner".
   Båda varianterna finns i sidan, bara den som passar vyn visas. */
.theme-sb .sb-title-short { display: none; }
@media (max-width: 767px) {
  .theme-sb .sb-title-long { display: none; }
  .theme-sb .sb-title-short { display: inline; }
}
/* FAQ-frågorna har en kort mobilvariant (Ali 2026-10-27): datorn visar de
   långa frågorna, mobil/padda de korta. Båda finns i sidan, precis som
   rubrikerna "Vanliga frågor" → "Frågor". */
.theme-sb .sb-faq-question .sb-q-short { display: none; }
@media (max-width: 767px) {
  .theme-sb .sb-faq-question .sb-q-long { display: none; }
  .theme-sb .sb-faq-question .sb-q-short { display: inline; }
}
/* Ali 2026-10-29: samma luft mellan alla block. FAQ:ens underkant hålls under
   Moments-panelens övre marginal så att de inte adderas på mobil. */
.theme-sb .sb-faq { margin-bottom: calc(var(--spacing) * 6); }
@media (min-width: 48rem) {
  .theme-sb .sb-faq { margin-bottom: calc(var(--spacing) * 12); }
}
/* The first block keeps its own tight spacing at the very top of the page. */
.theme-sb .sb-home-first { margin-top: 1rem; }
.theme-sb .sb-home-hero { margin-bottom: 0; }

/* Keep the page perfectly still when content (e.g. FAQ answers) expands:
   reserve space for the scrollbar so the layout never jumps sideways. */
html { scrollbar-gutter: stable; }

/* Små taggar på The Space-kortens bilder — gemener i nätt pillform */
.sb-card-tags { gap: 0.35rem; }
.sb-card-tag {
  font-family: var(--font-family-body, sans-serif);
  font-weight: 500;
  font-size: 11.5px;
  line-height: 1.4;
  letter-spacing: 0.02em;
  text-transform: lowercase;
  padding: 0.24rem 0.62rem;
  border-radius: 999px;
  color: color-mix(in oklab, var(--mint) 92%, white);
  background: color-mix(in oklab, var(--plum) 62%, transparent);
  border: 1px solid color-mix(in oklab, var(--mint) 30%, transparent);
  backdrop-filter: blur(6px);
  cursor: pointer;
  transition: background 0.35s ease, color 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.sb-card-tag:hover {
  background: var(--mint);
  color: var(--plum);
  border-color: var(--mint);
  box-shadow: 0 0 16px color-mix(in oklab, var(--mint) 70%, transparent);
  transition-duration: 0.12s;
}
.sb-card-tag:active {
  background: var(--mint);
  color: var(--plum);
  border-color: var(--mint);
  box-shadow: 0 0 20px color-mix(in oklab, var(--mint) 85%, transparent);
  transition-duration: 0.05s;
}
@media (max-width: 47.999rem) {
  .sb-card-tag {
    font-size: 10.5px;
    padding: 0.2rem 0.55rem;
  }
}


/* Hide native play overlay (iOS low power mode) on decorative hero video */
.sb-hero-video video::-webkit-media-controls,
.sb-hero-video video::-webkit-media-controls-start-playback-button,
.sb-hero-video video::-webkit-media-controls-overlay-play-button { display: none !important; -webkit-appearance: none; }
.sb-hero-video { background: var(--plum); }

/* Ali 2026-10-27: FAQ-kolumnen vidgas på dator så luften på sidorna minskar,
   och frågorna bryts jämnt så ingen rad får ett enstaka ord. */
.theme-sb .sb-faq-list { max-width: min(100%, 72rem); margin-inline: auto; }
.theme-sb .sb-faq-question { font-size: 14px; line-height: 1.4; padding-block: 0.85rem; text-wrap: balance; }
.theme-sb .sb-faq-answer { font-size: 14px; line-height: 1.55; }
.theme-sb .sb-newsletter .sb-cta-text,
.theme-sb .sb-newsletter-copy .sb-cta-text { font-size: 14px; line-height: 1.55; max-width: 26rem; }
.theme-sb .sb-newsletter .label { font-size: 11px; letter-spacing: 0.12em; }
.theme-sb .sb-newsletter-fields input.sb-pill-field { font-size: 14px; height: 44px; padding-block: 0; }
.theme-sb .sb-newsletter-form { max-width: 24rem; }
@media (min-width: 48rem) {
  .theme-sb .sb-faq-question { font-size: 15px; }
}
@media (min-width: 64rem) {
  .theme-sb .sb-faq-question { font-size: 16px; }
}

/* Huvudfilmens brödtext följer korttexterna under Teams/Friends/Events
   (13 px på mobil, 14 px däröver — exakt som korttexten). */
.theme-sb .sb-home-first .content p { font-size: 14px; line-height: 1.625; }
@media (max-width: 39.999rem) {
  .theme-sb .sb-home-first .content p { font-size: 13px; }
}

/* The overlay follows the split layout's single-column breakpoint. */
.sb-hero-overlay,
.sb-hero-overlay-text-short,
.sb-hero-overlay-actions { display: none; }
.theme-sb .sb-hero-eyebrow {
  font-family: "Oxanium", sans-serif;
  font-weight: 700;
  font-size: 0.75rem;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: uppercase;
  margin: 0 0 0.75rem;
}
.theme-sb .sb-hero-punchline {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(3rem, 5.4vw, 5.5rem);
  line-height: 1.1;
  letter-spacing: 0;
  margin: 0;
}
.theme-sb .sb-hero-punchline-line { display: block; white-space: nowrap; }
.theme-sb .sb-hero-subtitle {
  margin: 1.5rem 0 0;
  font-family: "Oxanium", sans-serif;
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: uppercase;
}
.theme-sb .sb-home-first .sb-split-text { align-self: center; }
.theme-sb .sb-home-first .sb-split-text > .text-center { margin: 0; }
.theme-sb .sb-home-first .sb-split-text .content { margin-top: 1.5rem; }
.theme-sb .sb-home-first .sb-split-text .sb-actions { margin-top: 1.5rem; }
@media (max-width: 63.999rem) {
  .theme-sb .sb-home-first .sb-split { gap: 0; }
  .theme-sb .sb-home-first .sb-split-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .theme-sb .sb-home-first .sb-hero-overlay-punchline {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    position: absolute;
    inset: 0;
    padding: 2rem 1.5rem;
    background: none;
    color: var(--mint-light);
    text-align: center;
    pointer-events: none;
    font-family: var(--font-display);
    font-size: 2.5rem;
    line-height: 1.1;
    letter-spacing: 0;
  }
  .theme-sb .sb-home-first .sb-hero-overlay-punchline .sb-hero-eyebrow {
    font-size: 0.6875rem;
    margin: 0 0 0.75rem;
  }
  .theme-sb .sb-home-first .sb-hero-overlay-subtitle {
    display: block;
    margin-top: 1.5rem;
    font-family: "Oxanium", sans-serif;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.4;
  }
  .theme-sb .sb-home-first .sb-hero-overlay-text {
    display: block;
    max-width: 30rem;
    margin-top: 1.5rem;
    font-family: var(--mantine-font-family, system-ui, sans-serif);
    font-size: 14px;
    line-height: 1.55;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    text-wrap: pretty;
  }
  .theme-sb .sb-home-first .sb-hero-overlay-text-short { display: none; }
  .theme-sb .sb-home-first .sb-hero-overlay-actions {
    display: block;
    position: static;
    z-index: 3;
    pointer-events: auto;
    margin-top: 1.75rem;
    font-size: 1rem;
    letter-spacing: 0;
    line-height: 1.5;
    text-transform: none;
    font-family: "Oxanium", Futura, sans-serif;
  }
  .theme-sb .sb-home-first .sb-hero-overlay-actions .sb-actions {
    margin-top: 0;
    gap: 0.75rem;
    flex-wrap: nowrap;
  }
}
@media (max-width: 39.999rem) {
  .theme-sb .sb-home-first .sb-hero-video { aspect-ratio: 9 / 16; height: auto; min-height: 0; }
  .theme-sb .sb-home-first .sb-hero-overlay-punchline { font-size: 1.875rem; padding: 1.5rem 1.5rem; }
  .theme-sb .sb-home-first .sb-hero-overlay-punchline .sb-hero-eyebrow { font-size: 0.625rem; margin-bottom: 0.5rem; }
  .theme-sb .sb-home-first .sb-hero-overlay-subtitle { font-size: 0.75rem; }
  .theme-sb .sb-home-first .sb-hero-overlay-subtitle { margin-top: 1rem; }
  .theme-sb .sb-home-first .sb-hero-overlay-text { margin-top: 0.75rem; line-height: 1.4; }
  .theme-sb .sb-home-first .sb-hero-overlay-actions { margin-top: 1.25rem; }
  .theme-sb .sb-home-first .sb-hero-overlay-actions .sb-actions { margin-top: 0; }
  .theme-sb .sb-home-first .sb-hero-overlay-text-full { display: none; }
  .theme-sb .sb-home-first .sb-hero-overlay-text-short { display: block; font-size: 13px; }
  .theme-sb .sb-home-first .sb-hero-overlay-text-short > span { display: block; white-space: normal; text-wrap: balance; }
}
@media (max-width: 22.499rem) {
  .theme-sb .sb-home-first .sb-hero-overlay-punchline { font-size: 1.75rem; }
}

/* Överskroll (gummibandet) visar fotens plommon i stället för mörk sidbakgrund. */
html:root { background-color: #80285a; }
html body { min-height: 100vh; background-color: var(--site-bg, #39192e); }

/* Startsidans hero på dator: brödtexten använder hela vänsterhalvan i stället för att krympa. */
@media (min-width: 64rem) {
  .theme-sb .sb-home-first .sb-split-text { grid-column: 1 / span 6; padding-inline: 1rem; }
  .theme-sb .sb-home-first .sb-split-text .content { text-wrap: pretty; }
  /* Ali 2026-10-27: filmen i samma 3:4-format som kortbilderna, stor så den täcker
     skärmen men aldrig högre än vyfönstret — nästa sektion syns när man scrollar. */
  .theme-sb .sb-home-first .sb-hero-video { max-height: calc(100vh - var(--spacing-header, 4rem) - 2rem); }
  /* Ali 2026-10-27: dator följer Storyblok "Image and text module" rakt av —
     textkolumn 5/12 med en tom kolumn mot bilden, etikett 14 px + 32 px luft,
     rubrik heading-lg (48 px, 56 px ≥1536), brödtext 18/27 px. */
  .theme-sb .sb-home-first .sb-split-text { grid-column: 1 / span 5; padding-inline: 0; }
  .theme-sb .sb-home-first .sb-hero-eyebrow { font-size: 14px; line-height: 1.3; margin-bottom: 2rem; }
  .theme-sb .sb-home-first .sb-hero-punchline { font-size: 3rem; line-height: 1.1; }
  .theme-sb .sb-home-first .content p { font-size: 14px; line-height: 1.625; }
  .theme-sb .sb-home-first .sb-split-text .content { margin-top: 2rem; }
  .theme-sb .sb-home-first .sb-split-text .sb-actions { margin-top: 2rem; }
}
@media (min-width: 96rem) {
  .theme-sb .sb-home-first .sb-hero-punchline { font-size: 3.5rem; }
}

/* Mobil: brödtexten fyller rubrikens bredd i stället för att krympa. */
@media (max-width: 39.999rem) {
  .theme-sb .sb-home-first .sb-hero-overlay-text-short { width: 100%; max-width: 21rem; margin-inline: auto; text-wrap: pretty; }
  .theme-sb .sb-home-first .sb-hero-overlay-text-short > span { display: inline; }
}
@media (max-width: 39.999rem) {
  .theme-sb .sb-home-first .sb-hero-overlay-text-short { text-wrap: wrap; }
  .theme-sb .sb-home-first .sb-hero-overlay-text-short > span:not(:last-child)::after { content: " "; }
}
/* Ali 2026-10-27: mobilen visar den korta brödtexten, i rubrikens bredd. */
@media (max-width: 39.999rem) {
  .theme-sb .sb-home-first .sb-hero-overlay-text-full { display: none; }
  .theme-sb .sb-home-first .sb-hero-overlay-text-short { display: block; width: 100%; max-width: 21rem; margin-inline: auto; font-size: 13px; text-wrap: pretty; }
}

/* Ali 2026-10-27: filmens topp låg under den fasta headern (80 px) på dator — börja under den. */
@media (min-width: 64rem) {
  .theme-sb .sb-home-first { margin-top: 6rem; }
  .theme-sb .sb-home-first .sb-hero-video { max-height: calc(100vh - 8rem); }
}
/* Ali 2026-10-27: även mobil/padda — filmen börjar under den fasta headern. */
@media (max-width: 63.999rem) {
  .theme-sb .sb-home-first { margin-top: 5.5rem; }
}
/* Ali 2026-10-27: padda/mobil följer Storyblok "Full image with text module" —
   etikett 14 px + 32 px luft, rubrik heading-lg (36 px mobil, 48 px padda),
   brödtext i korttextens storlek, textblocket förankrat ovanför filmens nederkant. */
@media (max-width: 63.999rem) {
  .theme-sb .sb-home-first .sb-hero-overlay-punchline { justify-content: flex-end; font-size: 3rem; padding: 2rem 2rem; }
  .theme-sb .sb-home-first .sb-hero-overlay-punchline .sb-hero-eyebrow { font-size: 14px; line-height: 1.3; margin: 0 0 2rem; }
  .theme-sb .sb-home-first .sb-hero-overlay-subtitle { font-size: 1.125rem; margin-top: 1.5rem; }
  .theme-sb .sb-home-first .sb-hero-overlay-text { font-size: 14px; line-height: 1.625; margin-top: 1.5rem; }
}
@media (max-width: 39.999rem) {
  .theme-sb .sb-home-first .sb-hero-overlay-punchline { font-size: 2.25rem; padding: 1.5rem 1.5rem; }
  .theme-sb .sb-home-first .sb-hero-overlay-punchline .sb-hero-eyebrow { font-size: 12px; margin-bottom: 1.5rem; }
  .theme-sb .sb-home-first .sb-hero-overlay-subtitle { font-size: 0.875rem; margin-top: 1.25rem; }
  .theme-sb .sb-home-first .sb-hero-overlay-text { margin-top: 1rem; }
  .theme-sb .sb-home-first .sb-hero-overlay-text-short { font-size: 13px; line-height: 1.5; }
}
@media (max-width: 22.499rem) {
  .theme-sb .sb-home-first .sb-hero-overlay-punchline { font-size: 2rem; }
}
/* Ali 2026-10-27: när filmen begränsas av skärmhöjden läggs den mot högerkanten (linje med headerns ram). */
@media (min-width: 64rem) {
  .theme-sb .sb-home-first .sb-hero-video { margin-left: auto; }
}
/* Ali 2026-10-27: filmen fyller alltid hela högra halvan; blir skärmen för låg beskärs höjden i stället för att filmen smalnar av. */
@media (min-width: 64rem) {
  .theme-sb .sb-home-first .sb-hero-video { width: 100%; margin-left: 0; }
}

/* Ali 2026-10-28: stjärnmarkern som knyter "SKILLER" till punchlinen.
   Samma stjärna som höjd upphöjt efter rubriken och som inledning på punchlinen. */
.theme-sb .sb-hero-star {
  display: inline-block;
  width: 0.34em;
  height: 0.34em;
  margin-left: 0.16em;
  /* Stjärnans mitt i linje med versalernas topp (R:ets läpp), som Nike-referensen */
  vertical-align: 0.48em;
  opacity: 0.92;
}
.theme-sb .sb-hero-star-lead {
  width: 0.9em;
  height: 0.9em;
  margin-left: 0;
  margin-right: 0.34em;
  vertical-align: -0.08em;
}

/* ============ Skillerball — Nike-inspired landscape social cards ============ */
.theme-sb .sb-feed-head { text-align: center; margin-bottom: 2rem; }
.theme-sb .sb-feed-title-mobile { display: none; }
.theme-sb .sb-feed-footer { text-align: center; margin-top: 2rem; }
@media (max-width: 47.999rem) {
  .theme-sb .sb-feed-title-desktop { display: none; }
  .theme-sb .sb-feed-title-mobile { display: inline; }
}
.theme-sb .sb-feed-lead { margin-top: 0.75rem; font-size: 13px; line-height: 1.6; color: var(--plum); }
@media (min-width: 40rem) { .theme-sb .sb-feed-lead { font-size: 14px; } }
/* Ali 2026-10-29: the two account marks sit centred under the share line.
   Empty plum rings on the mint panel, filled plum with a mint mark when
   hovered or focused — the same flat treatment as the row's mint plus. */
.theme-sb .sb-feed-social {
  display: flex; justify-content: center; align-items: center; gap: 0.7rem;
  margin-top: 1.15rem;
}
.theme-sb .sb-feed-social-link {
  width: 42px; height: 42px; border-radius: 999px; display: grid; place-items: center;
  border: 1.5px solid color-mix(in oklab, var(--plum) 42%, transparent);
  background: transparent; color: var(--plum);
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.theme-sb .sb-feed-social-link svg { width: 20px; height: 20px; fill: currentColor; display: block; }
.theme-sb .sb-feed-social-link:hover,
.theme-sb .sb-feed-social-link:focus-visible {
  background: var(--plum); border-color: var(--plum); color: var(--mint);
}
@media (max-width: 47.999rem) {
  .theme-sb .sb-feed-social { gap: 0.55rem; margin-top: 0.8rem; }
  .theme-sb .sb-feed-social-link { width: 36px; height: 36px; }
  .theme-sb .sb-feed-social-link svg { width: 17px; height: 17px; }
}
/* Instagram feed (Ali 2026-10-29): one scroll row at every width — portrait tiles,
   no gaps, type icon top-right, hover darkens with a mint plus that
   opens Instagram. Desktop shows ~5 tiles with the next peeking; count always
   matches Ali's Instagram posts. */
.theme-sb .sb-feed {
  display: flex; gap: 0; overflow-x: auto; overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; list-style: none;
  margin-block: 0; margin-inline: calc(50% - 50vw); padding-block: 0; padding-inline: calc(50vw - 50%);
}
.theme-sb .sb-feed::-webkit-scrollbar { display: none; }
.theme-sb .sb-feed-tile { position: relative; flex: 0 0 auto; width: 44%; max-width: 18rem; }
@media (min-width: 40rem) { .theme-sb .sb-feed-tile { width: 30%; } }
@media (min-width: 64rem) { .theme-sb .sb-feed-tile { width: 18.4%; max-width: none; } }
.theme-sb .sb-feed-media { position: relative; aspect-ratio: 3 / 4; overflow: hidden; }
.theme-sb .sb-feed-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.theme-sb .sb-feed-type { position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; color: var(--mint-light); z-index: 1; }
.theme-sb .sb-feed-play { fill: var(--plum); }
.theme-sb .sb-feed-type svg { width: 100%; height: 100%; }
.theme-sb .sb-feed-hover {
  position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
  background: color-mix(in oklab, var(--plum) 45%, transparent); color: var(--mint);
  opacity: 0; transition: opacity 0.2s ease;
}
.theme-sb .sb-feed-tile:hover .sb-feed-hover, .theme-sb .sb-feed-hover:focus-within { opacity: 1; }
/* Every plus opens the same accessible post popup; tiles keep their crop. */
.theme-sb .sb-feed-open { position: absolute; inset: 0; z-index: 2; display: block; width: 100%; height: 100%; border: 0; padding: 0; background: transparent; border-radius: 0; }
.theme-sb .sb-feed-open:focus-visible .sb-feed-hover { opacity: 1; }
.theme-sb .sb-feed-hover { pointer-events: none; }
/* Ali 2026-10-29: the mint plus is a hover/focus affordance only — on touch the
   tile itself opens the post, so nothing is painted on the picture. */
.theme-sb .sb-feed-plus { width: 44px; height: 44px; border: 1.5px solid var(--mint); border-radius: var(--radius-button, 28px); display: grid; place-items: center; background: var(--mint); color: var(--plum); }
.theme-sb .sb-feed-plus svg { width: 22px; height: 22px; }
@media (max-width: 47.999rem) {
  .theme-sb .sb-feed-plus { width: 34px; height: 34px; }
  .theme-sb .sb-feed-plus svg { width: 18px; height: 18px; }
}

/* Only the real post caption is shown at the bottom of the image. */
.theme-sb .sb-feed-meta {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: 1.6rem 0.65rem 0.55rem;
  background: linear-gradient(to top, color-mix(in oklab, var(--plum) 65%, transparent), transparent);
  display: flex; flex-direction: column; gap: 0.3rem;
  opacity: 1; transition: opacity 0.2s ease;
  pointer-events: none;
}
.theme-sb .sb-feed-caption {
  margin: 0; color: rgb(255 255 255 / 0.92);
  font-size: 11px; line-height: 1.45; font-weight: 500;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
@media (min-width: 40rem) { .theme-sb .sb-feed-caption { font-size: 12px; } }


.sb-moment-overlay { position: fixed; inset: 0; z-index: 70; background: rgb(0 0 0 / 0.6); }
.sb-moment-dialog { --mh: min(640px, 86dvh); position: fixed; z-index: 71; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(calc(var(--mh) * 0.8 + 340px), calc(100% - 48px)); height: var(--mh); display: grid; grid-template-columns: minmax(0, 1fr) 340px; background: #fff; color: #262626; overflow: hidden; font-family: "Oxanium", sans-serif; outline: none; box-shadow: 0 24px 60px rgb(0 0 0 / 0.35); }
.sb-moment-stage { position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; justify-content: center; background: #111; }
.sb-moment-backdrop { display: none; }
.sb-moment-photo { position: relative; width: 100%; height: 100%; object-fit: cover; }
.sb-moment-ig { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.sb-moment-ig-clip { position: relative; flex-shrink: 0; overflow: hidden; transform-origin: center; transition: opacity 0.25s ease; background: #000; }
.sb-moment-ig-clip iframe { position: absolute; left: 0; border: 0; display: block; background: #000; }
.sb-moment-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 36px; height: 36px; background: #fff; color: #111; border: 0; border-radius: 50%; box-shadow: 0 1px 4px rgb(0 0 0 / 0.18); display: flex; align-items: center; justify-content: center; }
.sb-moment-arrow svg { width: 18px; height: 18px; }
.sb-moment-prev { left: 10px; }
.sb-moment-next { right: 10px; }
.sb-moment-dialog .sb-moment-arrow:hover { background: #fff; opacity: 0.88; }
.sb-moment-dialog button:focus-visible, .sb-moment-dialog a:focus-visible { outline: 2px solid var(--plum); outline-offset: 2px; }
.sb-moment-info { position: relative; min-height: 0; display: flex; flex-direction: column; background: var(--moment-surface); color: var(--moment-ink); font-family: var(--moment-font); letter-spacing: 0; }
.sb-moment-close { position: absolute; top: 20px; right: 10px; color: var(--moment-ink); background: transparent; border: 0; }
.sb-moment-close svg { width: 26px; height: 26px; }
.sb-moment-head { display: flex; align-items: center; min-height: 80px; padding: 18px 48px 18px 20px; border-bottom: 1px solid var(--moment-divider); flex-shrink: 0; }
.sb-moment-account { display: inline-flex; align-items: center; gap: 12px; font-size: 15px; color: var(--moment-ink); text-decoration: none; min-width: 0; }
.sb-moment-profile { display: flex; flex-direction: column; gap: 3px; }
.sb-moment-profile strong { font-weight: 600; }
.sb-moment-profile > span { font-size: 14px; }
.sb-moment-verified { display: inline-block; width: 14px; height: 14px; margin-left: 5px; vertical-align: -2px; flex: none; }
.sb-moment-profile strong { display: inline-flex; align-items: center; }
.sb-moment-avatar { position: relative; width: 40px; height: 40px; border-radius: 50%; background: transparent; flex-shrink: 0; overflow: hidden; }
.sb-moment-avatar img { position: absolute; inset: 0; width: 40px; height: 40px; max-width: none; max-height: none; border-radius: 50%; object-fit: cover; display: block; }
.sb-moment-body { flex: 1; min-height: 0; overflow-y: auto; padding: 20px; }
.sb-moment-caption-row { display: flex; align-items: flex-start; gap: 12px; }
.sb-moment-likes { display: flex; align-items: center; gap: 7px; font-size: 14px; color: var(--moment-ink); flex-wrap: wrap; }
.sb-moment-likes svg { width: 24px; height: 24px; }
.sb-moment-likes > span { color: var(--moment-muted); font-size: 13px; }
.sb-moment-caption { margin: 0; font-size: 15px; line-height: 1.45; color: var(--moment-ink); overflow-wrap: anywhere; }
.sb-moment-caption strong { font-weight: 600; }
.sb-moment-footer { flex-shrink: 0; border-top: 1px solid var(--moment-divider); padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 18px; }
.sb-moment-social { display: flex; gap: 12px; }
.sb-moment-social a { width: 40px; height: 40px; border: 1px solid color-mix(in srgb, var(--moment-brand) 30%, transparent); border-radius: 50%; background: transparent; color: color-mix(in srgb, var(--moment-brand) 80%, var(--moment-muted)); display: inline-flex; align-items: center; justify-content: center; transition: background 0.2s, border-color 0.2s; }
.sb-moment-social a:hover, .sb-moment-social a:focus-visible { background: var(--moment-brand); border-color: var(--moment-brand); color: #fff; }
.sb-moment-social svg { width: 17px; height: 17px; fill: currentColor; }
@media (max-width: 47.999rem) {
  .sb-moment-dialog { inset: 0; left: 0; top: 0; transform: none; width: 100%; height: 100dvh; max-height: none; display: flex; flex-direction: column; overflow-y: auto; background: var(--moment-surface); box-shadow: none; border-radius: 0; }
  .sb-moment-stage { width: 100%; flex: none; min-height: 0; aspect-ratio: 4 / 5; margin: 0; }
  .sb-moment-stage:has(.sb-moment-photo) { aspect-ratio: 4 / 5; }
  .sb-moment-info { flex: 1 0 auto; position: static; min-height: 0; }
  .sb-moment-body:empty { display: block; flex: 1; }
  .sb-moment-head { min-height: 64px; padding: 12px 20px; }
  .sb-moment-body { flex: 1 1 auto; padding: 14px 20px; }
  .sb-moment-footer { margin-top: auto; padding: 12px 20px; gap: 10px; }
  .sb-moment-close { position: absolute; top: 26px; right: 12px; z-index: 3; width: 28px; height: 28px; background: rgb(255 255 255 / 0.94); color: #111; border-radius: 50%; box-shadow: 0 1px 4px rgb(0 0 0 / 0.18); }
  .sb-moment-close svg { width: 14px; height: 14px; }
}

/* Ali 2026-10-30: på iPhone hamnade CTA bakom Safaris adressfält — filmen får aldrig bli
   högre än den synliga ytan (svh = med adressfältet framme). */
@media (max-width: 63.999rem) {
  .theme-sb .sb-home-first .sb-hero-video {
    aspect-ratio: auto;
    height: min(calc(100vw * 16 / 9), calc(100svh - 6.5rem));
    min-height: 26rem;
  }
}
.sb-hero-video video { position: relative; }

/* Ali 2026-10-30: filmen ska alltid synas direkt — aldrig döljas bakom en färgyta. */
.sb-hero-video { background: #000; }
.sb-hero-video video { opacity: 1; }
.sb-hero-video video::-webkit-media-controls,
.sb-hero-video video::-webkit-media-controls-start-playback-button,
.sb-hero-video video::-webkit-media-controls-overlay-play-button { display: none !important; -webkit-appearance: none; }

.sb-moment-external { position: absolute; inset: 0; display: block; }
.sb-moment-external .sb-moment-photo { position: absolute; inset: 0; }
.sb-moment-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: rgb(255 255 255 / 0.92); color: #111; box-shadow: 0 2px 10px rgb(0 0 0 / 0.25); transition: transform 0.2s ease; }
.sb-moment-play svg { width: 24px; height: 24px; margin-left: 3px; }
.sb-moment-external:hover .sb-moment-play { transform: translate(-50%, -50%) scale(1.06); }