/* ============================================================
   HEJ NYKÖPING — Public page patterns
   ------------------------------------------------------------
   Sidhölje för den publika ytan: container, sektionsrytm, hero,
   page-band, CTA-band, sticky rail och on-dark-sektion.

   Klassnamnen är temats befintliga publika namn (kanoniska i
   rollout). Konsumerar BARA tokens från ../../tokens.css.
   ============================================================ */

/* ---------- Container ---------- */
.container {
  width: 100%;
  max-width: var(--container-page);
  margin-inline: auto;
  padding-inline: var(--space-4);
}
@media (min-width: 40rem) {
  .container { padding-inline: var(--space-6); }
}

/* ---------- Sektionsrytm ---------- */
.section { padding-block: var(--space-12); }
.section--light { background: var(--color-surface-subtle); }
.section--tight { padding-top: 0; }
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }
.section--after-ad { padding-top: var(--space-10); }

/* Sektionsytor ("kapitel") — marinblå toner för rytm. Text-tokens byts per ton. */
.section--tint-soft { background: var(--color-surface-tint-soft); }
.section--tint { background: var(--color-surface-tint); }
.section--tint-strong { background: var(--color-surface-tint-strong); }
.section--tint-deep { background: var(--color-surface-tint-deep); }
.section--tint-soft,
.section--tint,
.section--tint-strong { color: var(--color-on-tint); }
.section--tint-soft .section__eyebrow,
.section--tint .section__eyebrow,
.section--tint-strong .section__eyebrow { color: var(--color-on-tint-link); }
.section--tint-soft .section__title,
.section--tint .section__title,
.section--tint-strong .section__title { color: var(--color-on-tint); }
.section--tint-soft .section__lead,
.section--tint .section__lead,
.section--tint-strong .section__lead { color: var(--color-on-tint-muted); }
.section--tint-soft .section__link,
.section--tint .section__link,
.section--tint-strong .section__link {
  background: transparent;
  color: var(--color-on-tint-link);
  border-color: var(--color-on-tint-border);
}
.section--tint-deep { color: var(--color-on-dark); }
.section--tint-deep .section__title { color: var(--color-on-dark); }
.section--tint-deep .section__eyebrow { color: var(--color-on-dark-link); }
.section--tint-deep .section__lead { color: var(--color-on-dark-muted); }
.section--tint-deep .section__link {
  background: transparent;
  color: var(--color-on-dark-link);
  border-color: var(--color-on-dark-border);
}

@media (min-width: 40rem) {
  .section { padding-block: var(--space-16); }
}

/* ---------- Sektionshuvud ---------- */
.section__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.section__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
}
.section__eyebrow {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-link);
}
.section__lead {
  margin: var(--space-2) 0 0;
  max-width: 48rem;
  font-size: var(--text-lg);
  color: var(--color-foreground-muted);
}
.section__link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--btn-primary-radius);
  background: var(--color-surface);
  color: var(--color-link);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.section__link:hover { background: var(--color-surface-hover); color: var(--color-link-hover); }
.section__link:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
@media (min-width: 40rem) {
  .section__head {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: var(--space-8);
  }
}

/* ---------- Hero (hem) ---------- */
.hero {
  padding-block: clamp(7.5rem, 20vw, 10.5rem) var(--space-12);
  color: var(--color-hero-text);
  text-align: center;
  background:
    radial-gradient(52% 62% at 88% 4%, var(--color-hero-glow-warm), transparent 62%),
    radial-gradient(46% 58% at 4% 96%, var(--color-hero-glow-cool), transparent 62%),
    linear-gradient(180deg, var(--color-header-bg-strong) 0, var(--color-hero-gradient-start) 240px),
    linear-gradient(135deg, var(--color-hero-gradient-start), var(--color-hero-gradient-end));
}
.hero h1 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 9.5vw, var(--text-6xl));
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  color: var(--color-hero-text);
}
.hero__accent { color: var(--color-primary); }
.hero__sub {
  max-width: 36rem;
  margin: 0 auto var(--space-6);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--color-hero-text-muted);
}
.hero__cats { margin-top: var(--space-10); }
.hero__cats-label {
  display: block;
  margin-bottom: var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-on-dark-muted);
}
.hero__cats-more {
  display: inline-block;
  margin-top: var(--space-3);
  font-weight: var(--weight-semibold);
  color: var(--color-on-dark-link);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.hero__cats-more:hover { color: var(--color-on-dark-link-hover); }

@media (min-width: 40rem) {
  .hero h1 { margin-bottom: var(--space-4); }
  .hero__sub { margin-bottom: var(--space-8); font-size: var(--text-xl); }
}

/* ---------- Page-band (undersidor) ---------- */
.page-hero {
  padding-block: 4.25rem var(--space-10);
  color: var(--color-hero-text);
  background: linear-gradient(135deg, var(--color-hero-gradient-start), var(--color-hero-gradient-end));
}
@media (min-width: 60rem) {
  .page-hero { padding-block-start: 5.5rem; }
}
.page-hero__eyebrow {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-on-dark-link);
}
.page-hero__title {
  margin: 0;
  font-size: clamp(2rem, 8vw, var(--text-5xl));
  font-weight: var(--weight-bold);
  color: var(--color-hero-text);
}
.page-hero__sub {
  max-width: 48rem;
  margin: var(--space-3) 0 0;
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--color-hero-text-muted);
}
.page-hero__count {
  margin: var(--space-3) 0 0;
  font-size: var(--text-sm);
  color: var(--color-on-dark-muted);
}
.page-hero__meta {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  color: var(--color-on-dark-muted);
}
.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
/* Sökform i page-hero: följer textens vänsterkant (sökkomponenten är centrerad by default). */
.page-hero .site-search { margin-inline: 0; margin-top: var(--space-6); }
.page-hero .breadcrumbs { margin-bottom: var(--space-8); }
.page-hero .breadcrumbs a { color: var(--color-on-dark-link); }
.page-hero .breadcrumbs a:hover { color: var(--color-on-dark-link-hover); }
.page-hero .breadcrumbs li + li::before { color: var(--color-on-dark-muted); }
.page-hero .breadcrumbs [aria-current="page"] { color: var(--color-on-dark-muted); }

/* ---------- CTA-band ---------- */
.cta-band {
  padding-block: var(--space-12);
  color: var(--color-on-dark);
  text-align: center;
  background: linear-gradient(135deg, var(--color-cta-bg), var(--color-cta-bg-end));
}
.cta-band h2 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  color: var(--color-on-dark);
}
.cta-band__lead {
  max-width: 34rem;
  margin: 0 auto var(--space-6);
  color: var(--color-on-dark-muted);
}
.cta-band__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
}
.cta-band__actions .btn { width: 100%; max-width: 24rem; }
@media (min-width: 40rem) {
  .cta-band { padding-block: var(--space-16); }
  .cta-band__actions { flex-direction: row; justify-content: center; }
  .cta-band__actions .btn { width: auto; }
}

/* ---------- Sticky rail ---------- */
@media (min-width: 64rem) {
  .rail-layout__aside--sticky {
    position: sticky;
    top: 96px;
    align-self: start;
    max-height: calc(100vh - 96px - var(--space-8));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* ---------- On-dark-sektion + tabell ---------- */
.section--dark {
  background: var(--color-surface-on-dark);
  color: var(--color-on-dark);
}
.section--dark .section__title { color: var(--color-on-dark); }
.section--dark .section__eyebrow { color: var(--color-on-dark-link); }
.section--dark .section__lead { color: var(--color-on-dark-muted); }
.section--dark .table-wrap { border-color: var(--table-on-dark-border); }
.section--dark .table { color: var(--table-on-dark-text); }
.section--dark .table th {
  background: var(--table-on-dark-header-bg);
  color: var(--table-on-dark-header-text);
}
.section--dark .table td {
  color: var(--table-on-dark-text);
  border-bottom-color: var(--table-on-dark-border);
}
.section--dark .table--zebra tbody tr:nth-child(even) { background: var(--table-on-dark-zebra); }
.section--dark .table tbody tr:hover { background: var(--table-on-dark-row-hover); }
.section--dark .table .yes { color: var(--color-on-dark); }
.section--dark .table .no { color: var(--color-on-dark-muted); }

/* ---------- Blogg-yta ---------- */
.blog-tint {
  background: linear-gradient(180deg, var(--color-blog-tint-top), var(--color-blog-tint-bottom));
  border-block: 1px solid var(--color-blog-tint-border);
}