/* ═══════════════════════════════════════════════════════════════
   Tilläggstjänster (/tillaggstjanster) — page layout only.
   Cards are .addon-card--link from _addon-card.css.
   ═══════════════════════════════════════════════════════════════ */

.addon-page__hero {
  padding-top: var(--s-6);
}

/* Category jump links: .chip-group of <a class="chip"> */
.addon-page__nav {
  margin-bottom: var(--s-5);
}

/* Premium block; clears the sticky .nav when the jump link lands here */
.addon-page__premium {
  scroll-margin-top: 80px;
}

/* One block per category */
.addon-section {
  padding-top: var(--s-5);
  margin-top:  var(--s-5);
  border-top:  1px solid var(--border-default);
  /* Clears the sticky .nav when a jump link lands here */
  scroll-margin-top: 80px;
}

.addon-section:first-of-type {
  margin-top: 0;
  border-top: 0;
}

.addon-section__title {
  margin:         0 0 var(--s-1);
  font-size:      var(--text-xl);
  font-weight:    800;
  letter-spacing: -0.02em;
}

.addon-section__intro {
  margin:    0 0 var(--s-4);
  max-width: 60ch;
  color:     var(--sam-brown-dark);
}

.addon-page__footnote {
  margin:    var(--s-6) 0 0;
  max-width: 70ch;
  font-size: var(--text-sm);
  color:     var(--sam-medium);
}

.addon-page__footnote + .addon-page__footnote {
  margin-top: var(--s-2);
}

@media (max-width: 640px) {
  .addon-page__hero { padding-top: var(--s-4); }

  /* A dozen chips would wrap to six rows on a phone; swipe them instead. */
  .addon-page__nav {
    flex-wrap:       nowrap;
    overflow-x:      auto;
    padding-bottom:  var(--s-1);
    scrollbar-width: thin;
  }
}