/* Layout personality: lokal föreningstavla med asymmetrisk spårkant och funktionell back-office-rytm. */
* { box-sizing: border-box; }
html { background: var(--bg-default); color: var(--text-primary); font-family: var(--font-body); font-size: var(--step-0); line-height: 1.6; }
body { margin: 0; background: var(--bg-default); color: var(--text-primary); }
img { max-width: 100%; display: block; }
a { color: var(--link); text-underline-offset: var(--space-2xs); }
a:hover { text-decoration-thickness: 1px; }
:focus-visible { outline: var(--space-2xs) solid var(--focus-ring); outline-offset: var(--space-2xs); }
.skip-link { position: absolute; inset-inline-start: var(--space-md); top: var(--space-md); z-index: 20; transform: translateY(-100%); background: var(--surface-raised); color: var(--text-primary); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-sm); }
.skip-link:focus { transform: translateY(0); }

.site-shell { min-height: 100vh; background: linear-gradient(180deg, var(--bg-default), var(--bg-subtle)); }
.container { width: min(calc(100% - var(--space-xl)), var(--container)); margin-inline: auto; }
.container-wide { width: min(calc(100% - var(--space-xl)), var(--container-wide)); margin-inline: auto; }
.section { padding-block: var(--space-3xl); }
.section-tight { padding-block: var(--space-2xl); }
.stack { display: grid; gap: var(--space-lg); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }
.split { display: grid; gap: var(--space-xl); }
.grid-2, .grid-3, .grid-4 { display: grid; gap: var(--space-lg); }

.eyebrow { color: var(--text-brand); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: var(--step--1); }
.kicker { color: var(--text-secondary); font-weight: 700; }
.display { font-family: var(--font-display); font-size: var(--step-4); line-height: .95; letter-spacing: -.04em; margin: 0; }
.title { font-family: var(--font-display); font-size: var(--step-3); line-height: 1.02; letter-spacing: -.035em; margin: 0; }
.subtitle { font-size: var(--step-1); max-width: var(--measure-body); color: var(--text-secondary); margin: 0; }
.copy { max-width: var(--measure-body); }
.small { font-size: var(--step--1); }

.button { min-height: var(--space-3xl); display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); border: 1px solid transparent; border-radius: var(--radius-pill); padding: var(--space-sm) var(--space-lg); font-weight: 800; text-decoration: none; cursor: pointer; transition: transform var(--duration-quick) var(--ease-standard), box-shadow var(--duration-quick) var(--ease-standard), background var(--duration-quick) var(--ease-standard); }
.button:hover { transform: translateY(var(--motion-lift)); box-shadow: var(--shadow-card); }
.button-primary { background: var(--button-primary-bg); color: var(--button-primary-text); }
.button-secondary { background: var(--button-secondary-bg); color: var(--button-secondary-text); border-color: var(--border-default); }
.button-track { background: var(--surface-track); color: var(--text-inverse); }
.button-quiet { background: transparent; color: var(--text-brand); border-color: var(--border-default); }

.site-header { background: var(--surface-raised); border-bottom: 1px solid var(--border-default); position: sticky; top: 0; z-index: 10; }
#main { scroll-margin-top: calc(var(--space-4xl) + var(--space-sm)); }
a, button, input, select, textarea, summary { scroll-margin-top: calc(var(--space-4xl) + var(--space-sm)); }
.header-inner { min-height: var(--space-4xl); display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); }
.brand { display: inline-flex; align-items: center; gap: var(--space-sm); color: var(--text-primary); text-decoration: none; font-weight: 900; letter-spacing: -.02em; }
.brand-name { line-height: 1.2; }
.brand-mark { width: var(--space-3xl); height: var(--space-3xl); border-radius: var(--radius-pill); object-fit: cover; box-shadow: var(--shadow-line); flex-shrink: 0; }
.nav-list { list-style: none; display: none; gap: var(--space-md); margin: 0; padding: 0; align-items: center; }
.nav-list a { color: var(--text-primary); text-decoration: none; font-weight: 750; }
.nav-list a[aria-current="page"] { color: var(--text-brand); }
.site-nav { position: relative; }
.nav-details { position: relative; }
.nav-details summary { list-style: none; cursor: pointer; }
.nav-details summary::-webkit-details-marker { display: none; }
.mobile-menu-button { display: inline-flex; align-items: center; gap: var(--space-sm); min-width: var(--space-3xl); }
.mobile-menu-button__icon { position: relative; width: 1.125rem; height: 0.875rem; flex-shrink: 0; }
.mobile-menu-button__icon::before,
.mobile-menu-button__icon::after,
.mobile-menu-button__icon > span { content: ""; position: absolute; inset-inline: 0; height: 2px; border-radius: var(--radius-pill); background: currentColor; transition: transform var(--duration-quick) var(--ease-standard), opacity var(--duration-quick) var(--ease-standard); }
.mobile-menu-button__icon::before { inset-block-start: 0; }
.mobile-menu-button__icon > span { inset-block-start: 50%; transform: translateY(-50%); }
.mobile-menu-button__icon::after { inset-block-end: 0; }
.nav-details[open] .mobile-menu-button__icon::before { transform: translateY(0.4375rem) rotate(45deg); }
.nav-details[open] .mobile-menu-button__icon > span { opacity: 0; }
.nav-details[open] .mobile-menu-button__icon::after { transform: translateY(-0.4375rem) rotate(-45deg); }
.mobile-menu-button__label { font-weight: 800; }
.header-actions, .header-login { display: inline-flex; }
.header-logout-form { display: inline; margin: 0; }
.header-inner > .header-login { min-height: 2.5rem; padding: var(--space-xs) var(--space-md); font-size: var(--step--1); }

.hero-board { position: relative; overflow: visible; background: var(--bg-default); color: var(--text-primary); padding-block: var(--space-md) var(--space-xl); }
.hero-board::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 14% 6%, var(--color-paper-deep), transparent 38%), repeating-linear-gradient(90deg, transparent, transparent 52px, rgba(214, 200, 181, .07) 52px, rgba(214, 200, 181, .07) 53px); pointer-events: none; }
.hero-board > * { position: relative; }
.hero-layout { display: grid; gap: var(--space-md); align-items: start; padding-block: var(--space-sm); }
.hero-copy { display: grid; gap: var(--space-md); max-width: var(--measure-tight); background: var(--surface-raised); border: 1px solid var(--border-default); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); padding: var(--space-lg); }
.hero-copy .subtitle { color: var(--text-secondary); }
.hero-collage { display: grid; gap: var(--space-sm); }
.hero-media { display: grid; gap: var(--space-sm); }
.media-card { background: var(--surface-raised); color: var(--text-primary); border: 1px solid var(--border-default); border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lift); }
.media-treatment { filter: saturate(.92) contrast(1.04); }
.media-card img { width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; }
.media-caption { padding: var(--space-sm) var(--space-md); font-weight: 800; background: var(--surface-raised); font-size: var(--step--1); }
.hero-notice { border-radius: var(--radius-lg); padding: var(--space-md); background: var(--notice-bg); color: var(--text-primary); box-shadow: var(--shadow-card); border: 1px solid var(--border-default); }
.hero-notice strong { display: block; color: var(--text-brand); margin-block-end: var(--space-xs); }
.hero-peek { display: none; }

.track-rule { border-inline-start: var(--space-xs) solid var(--notice-rule); padding-inline-start: var(--space-lg); }
.track-frame { position: relative; border: 1px solid var(--border-default); border-radius: var(--radius-xl); background: var(--surface-raised); box-shadow: var(--shadow-card); overflow: hidden; }
.track-frame::before { content: ""; position: absolute; inset-inline-start: 0; inset-block: 0; width: var(--space-xs); background: var(--surface-track); }
.century-spine { display: grid; grid-template-columns: auto 1fr; gap: var(--space-md); align-items: start; }
.century-spine__year { writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--font-display); font-size: var(--step-2); color: var(--text-brand); line-height: 1; }

.info-card { padding: var(--space-lg); }
.info-card h3 { margin-block: 0 var(--space-xs); font-size: var(--step-1); }
.badge { display: inline-flex; align-items: center; gap: var(--space-xs); border-radius: var(--radius-pill); padding: var(--space-2xs) var(--space-sm); background: var(--badge-bg); color: var(--badge-text); font-weight: 850; font-size: var(--step--1); }
.badge-track { background: var(--surface-track); color: var(--text-inverse); }
.news-card { display: grid; gap: var(--space-sm); padding: var(--space-lg); }
.news-card time { color: var(--text-secondary); font-weight: 700; font-size: var(--step--1); }
.event-row { display: grid; gap: var(--space-md); padding: var(--space-md); border-top: 1px solid var(--border-default); }
.event-date { font-weight: 900; color: var(--text-brand); }
.section-tile { min-height: var(--space-4xl); display: grid; align-content: end; padding: var(--space-lg); background: var(--surface-raised); color: var(--text-primary); border-radius: var(--radius-lg); border: 1px solid var(--border-default); text-decoration: none; box-shadow: var(--shadow-line); }
.section-tile:hover { box-shadow: var(--shadow-card); }
.value-strip { display: grid; gap: var(--space-md); background: var(--bg-brand); color: var(--text-inverse); border-radius: var(--radius-xl); padding: var(--space-xl); }
.value-strip .subtitle { color: var(--color-blue-100); }

.product-card { display: grid; gap: var(--space-md); padding: var(--space-lg); }
.price { font-family: var(--font-display); font-size: var(--step-2); color: var(--text-brand); margin: 0; }
.capacity { display: grid; gap: var(--space-xs); }
.capacity-meter { height: var(--space-sm); background: var(--surface-muted); border-radius: var(--radius-pill); overflow: hidden; }
.capacity-meter > span { display: block; height: 100%; width: var(--capacity-value, 50%); background: var(--surface-track); }
.form-panel { padding: var(--space-lg); background: var(--surface-raised); border-radius: var(--radius-xl); border: 1px solid var(--border-default); box-shadow: var(--shadow-card); }
.field { display: grid; gap: var(--space-xs); }
.field label { font-weight: 800; }
.input, .select, .textarea { width: 100%; min-height: var(--space-3xl); border: 1px solid var(--border-default); border-radius: var(--radius-sm); padding: var(--space-sm) var(--space-md); font: inherit; background: var(--surface-raised); color: var(--text-primary); }
.textarea { min-height: calc(var(--space-4xl) * 2); resize: vertical; }
.helper { color: var(--text-secondary); font-size: var(--step--1); }

.portal-shell, .admin-shell { display: grid; gap: var(--space-lg); }
.portal-nav, .admin-nav { background: var(--surface-raised); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-md); }
.portal-nav a, .admin-nav a { display: block; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-sm); color: var(--text-primary); text-decoration: none; font-weight: 750; }
.portal-nav a[aria-current="page"], .admin-nav a[aria-current="page"] { background: var(--badge-bg); color: var(--badge-text); }
.stat-grid { display: grid; gap: var(--space-md); }
.stat-card { padding: var(--space-lg); background: var(--surface-raised); border: 1px solid var(--border-default); border-radius: var(--radius-lg); }
.table-wrap { overflow-x: auto; border: 1px solid var(--admin-border); border-radius: var(--radius-lg); background: var(--admin-bg); }
.table { width: 100%; border-collapse: collapse; min-width: 720px; }
.table th, .table td { padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--admin-border); text-align: start; }
.table th { background: var(--surface-muted); font-size: var(--step--1); text-transform: uppercase; letter-spacing: .06em; }
.status { display: inline-flex; align-items: center; gap: var(--space-xs); border-radius: var(--radius-pill); padding: var(--space-2xs) var(--space-sm); font-weight: 850; font-size: var(--step--1); }
.status-success { background: var(--color-success); color: var(--text-inverse); }
.status-warning { background: var(--color-gold); color: var(--text-primary); }
.status-danger { background: var(--color-danger); color: var(--text-inverse); }
.toast { border-radius: var(--radius-lg); padding: var(--space-md) var(--space-lg); background: var(--bg-brand); color: var(--text-inverse); box-shadow: var(--shadow-lift); }
.dialog { max-width: var(--measure-tight); padding: var(--space-xl); border: 1px solid var(--border-default); border-radius: var(--radius-xl); background: var(--surface-raised); box-shadow: var(--shadow-lift); }
.empty-state { text-align: center; padding: var(--space-2xl); border: 1px dashed var(--border-default); border-radius: var(--radius-xl); background: var(--surface-raised); }
.cookie-banner { position: fixed; inset-inline: var(--space-md); inset-block-end: var(--space-md); z-index: 30; background: var(--surface-raised); color: var(--text-primary); border: 1px solid var(--border-default); border-radius: var(--radius-xl); box-shadow: var(--shadow-lift); padding: var(--space-lg); display: grid; gap: var(--space-md); max-width: calc(var(--container-wide) - var(--space-xl)); margin-inline: auto; }
.cookie-banner[hidden] { display: none; }
.cookie-banner__title { margin: 0; font-family: var(--font-display); font-size: var(--step-1); line-height: 1.1; }
.cookie-banner .cluster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm); width: 100%; }
.cookie-banner .button { width: 100%; min-height: var(--space-3xl); }
.footer { padding-block: var(--space-2xl); background: var(--bg-brand); color: var(--text-inverse); }
.footer .eyebrow { color: var(--color-blue-100); }
.footer .form-panel .eyebrow { color: var(--text-brand); }
.footer a { color: var(--color-blue-100); }
.value-strip .century-spine__year,
.value-strip .eyebrow { color: var(--color-sky-200); }
.footer-compliance { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-block-start: var(--space-md); padding-block-start: var(--space-md); border-top: 1px solid rgba(255, 255, 255, .18); }
.footer-compliance a { font-weight: 750; text-decoration: underline; text-underline-offset: var(--space-2xs); }

@media (max-width: 767px) {
  .hero-board { padding-block: var(--space-sm) var(--space-md); }
  .hero-copy { padding: var(--space-md); gap: var(--space-sm); }
  .hero-copy .display { font-size: var(--step-2); line-height: 1.05; }
  .hero-copy .subtitle { font-size: var(--step--1); line-height: 1.45; }
  .hero-copy .century-spine { grid-template-columns: 1fr; }
  .hero-copy .century-spine__year { display: none; }
  .hero-copy .cluster .button { min-height: 2.5rem; padding: var(--space-xs) var(--space-md); font-size: var(--step--1); }
  .hero-collage { gap: var(--space-xs); }
  .hero-notice { padding: var(--space-sm) var(--space-md); position: static; width: auto; transform: none; }
  .hero-notice p { margin: 0; font-size: var(--step--1); }
  .hero-notice .button { min-height: 2.5rem; padding: var(--space-xs) var(--space-md); font-size: var(--step--1); }
  .media-card img { max-height: 9.5rem; }
  .header-inner { flex-wrap: nowrap; gap: var(--space-xs); position: relative; }
  .brand { flex: 1 1 auto; min-width: 0; gap: var(--space-xs); }
  .brand-mark { width: 2.5rem; height: 2.5rem; }
  .brand-name { white-space: nowrap; font-size: var(--step--1); }
  .site-nav { order: 0; width: auto; flex-shrink: 0; position: static; }
  .nav-details { position: static; }
  .mobile-menu-button { min-height: 2.5rem; padding: var(--space-xs) var(--space-sm); gap: var(--space-xs); }
  .nav-details[open] .nav-list { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-2xs); position: absolute; inset-inline: 0; inset-block-start: calc(100% + var(--space-xs)); z-index: 20; margin: 0; padding: var(--space-md); background: var(--surface-raised); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-lift); }
  .nav-details[open] .nav-list a { display: flex; align-items: center; min-height: var(--space-3xl); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-sm); white-space: nowrap; }
  .nav-details[open] .nav-list a:hover,
  .nav-details[open] .nav-list a:focus-visible { background: var(--surface-muted); outline: none; }
  .nav-details[open] .nav-list a[aria-current="page"] { background: var(--badge-bg); color: var(--badge-text); }
  .header-actions { order: 0; margin-inline-start: 0; flex-shrink: 0; gap: var(--space-xs); }
  .header-login { order: 0; margin-inline-start: 0; flex-shrink: 0; }
  .cookie-banner { inset-inline: var(--space-sm); inset-block-end: var(--space-sm); padding: var(--space-sm); gap: var(--space-xs); font-size: var(--step--1); }
  .cookie-banner p { margin: 0; }
  .cookie-banner .cluster { grid-template-columns: 1fr; gap: var(--space-xs); }
  .cookie-banner .button { min-height: 2.75rem; padding: var(--space-2xs) var(--space-sm); font-size: var(--step--1); }
  body.site-shell { padding-block-end: calc(var(--space-3xl) + var(--space-xl)); }
}

@media (min-width: 768px) {
  .site-nav { order: 0; flex: 1 1 auto; display: flex; justify-content: center; width: auto; min-width: 0; }
  .nav-details { display: contents; position: static; }
  .nav-details summary { display: none; }
  .nav-details .nav-list { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; margin: 0; padding: 0; background: none; border: 0; box-shadow: none; gap: var(--space-md); }
  .nav-details .nav-list a { display: inline; padding: 0; }
  .header-actions, .header-login { order: 0; margin-inline-start: 0; }
  .header-inner > .header-login { min-height: var(--space-3xl); padding: var(--space-sm) var(--space-lg); font-size: inherit; }
  .mobile-menu-button { display: none; }
  .split { grid-template-columns: 1.05fr .95fr; align-items: start; }
  .grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .hero-board { padding-block: var(--space-xl) var(--space-2xl); }
  .hero-layout { grid-template-columns: .82fr 1.18fr; gap: var(--space-xl); align-items: center; padding-block: var(--space-lg); }
  .hero-copy { padding: var(--space-xl); gap: var(--space-lg); }
  .hero-collage { position: relative; min-height: 22rem; display: block; }
  .hero-media { display: block; }
  .media-card { width: 68%; transform: rotate(-1.4deg); }
  .media-card img { aspect-ratio: 1 / 1; min-height: 18rem; max-height: none; }
  .hero-notice { position: absolute; inset-block-end: var(--space-md); inset-inline-end: 0; width: min(48%, 17.5rem); transform: rotate(1.1deg); z-index: 2; padding: var(--space-lg); }
  .hero-peek { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-sm); margin-block-start: calc(var(--space-lg) * -1); position: relative; z-index: 3; }
  .hero-peek .section-tile { min-height: auto; padding: var(--space-md); font-size: var(--step--1); box-shadow: var(--shadow-lift); }
  .hero-peek .section-tile { min-height: auto; padding: var(--space-md); font-size: var(--step--1); box-shadow: var(--shadow-lift); }
  .event-row { grid-template-columns: auto 1fr auto; align-items: center; }
  .portal-shell, .admin-shell { grid-template-columns: 260px 1fr; align-items: start; }
  .stat-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .cookie-banner { grid-template-columns: 1fr auto; align-items: center; }
}
@media (min-width: 1440px) {
  .hero-media { min-height: 24rem; }
  .media-card img { min-height: 20rem; }
  .container { width: min(calc(100% - var(--space-3xl)), var(--container)); }
  .container-wide { width: min(calc(100% - var(--space-3xl)), var(--container-wide)); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  .button:hover { transform: none; }
}