/* =========================================================================
   Brf Silverfasanen 3 — designsystem
   =========================================================================
   Två typsnittsfamiljer, självhostade. Färgerna är kontrastkontrollerade mot
   WCAG 2.2 AA; lägsta uppmätta värde i paletten är 5,15:1.
   ====================================================================== */

/* ---------- Typsnitt ---------------------------------------------------- */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/sourceserif4-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/sourceserif4-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens ------------------------------------------------------ */

:root {
  /* Färg. Kontrast mot #FFF respektive #F7F6F3 anges i kommentaren. */
  --canvas: #f7f6f3;          /* varm papperston, inte kall grå */
  --surface: #ffffff;
  --surface-sunk: #efede8;

  --ink-900: #16202b;         /* 16,46:1 — rubriker */
  --ink-700: #33404f;         /* 10,57:1 — brödtext */
  --ink-500: #5a6675;         /*  5,85:1 — meta, minsta tillåtna för text */

  --primary: #24455e;         /* 10,06:1 — länkar och knappar */
  --primary-strong: #1b3648;  /* 12,59:1 — hover */
  --primary-tint: #e7edf2;

  --brass: #7a5c33;           /*  6,17:1 — accent, används sparsamt */
  --brass-tint: #f4eee4;

  --ok: #2f6b4f;              /* 6,29:1 */
  --ok-tint: #e9f2ec;
  --warn: #7a5310;            /* 6,84:1 */
  --warn-tint: #faf2e1;
  --danger: #a33a2e;          /* 6,56:1 */
  --danger-tint: #faeceb;

  --rule: #dfdcd5;            /* dekorativa linjer */
  --rule-strong: #7e8790;     /* 3,65:1 — ramar på interaktiva element */

  /* Typografi */
  --font-heading: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --text-display: 2.75rem;    /* 44px */
  --text-h1: 2.125rem;        /* 34px */
  --text-h2: 1.625rem;        /* 26px */
  --text-h3: 1.25rem;         /* 20px */
  --text-body: 1.0625rem;     /* 17px */
  --text-small: 0.9375rem;    /* 15px */
  --text-label: 0.75rem;      /* 12px */

  --leading-tight: 1.2;
  --leading-heading: 1.3;
  --leading-body: 1.65;

  /* Rum — 4px-bas */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* Mått */
  --width-text: 42rem;        /* ca 65–70 tecken vid 17px */
  --width-page: 71.25rem;     /* 1140px */
  --gutter: 1.25rem;

  /* Form */
  --radius-sm: 3px;
  --radius-md: 6px;
  --shadow-sm: 0 1px 2px rgba(22, 32, 43, 0.06);
  --shadow-md: 0 1px 3px rgba(22, 32, 43, 0.07), 0 8px 24px -18px rgba(22, 32, 43, 0.35);

  --focus-width: 3px;
  --focus-offset: 2px;
  --transition: 160ms ease;
  --control-height: 2.75rem; /* 44px — minsta tryckyta */

  /* Galleriets hovereffekt. Längre än sidans övriga övergångar: rörelsen ska
     kännas som att bilden lyfts, inte som att den snäpper på plats.
     Kurvan startar mjukt och landar utan studs. */
  --gallery-hover-duration: 350ms;
  --gallery-hover-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --gallery-hover-shadow: 0 2px 6px rgba(22, 32, 43, 0.08), 0 18px 36px -20px rgba(22, 32, 43, 0.45);
}

@media (min-width: 48rem) {
  :root {
    --gutter: 2rem;
  }
}

/* ---------- Grundläggande ---------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink-700);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--ink-900);
  line-height: var(--leading-heading);
  margin: 0;
  text-wrap: balance;
  letter-spacing: -0.01em;
}

h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4 { font-size: 1.0625rem; }

p, ul, ol, blockquote, figure, table {
  margin: 0;
}

a {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  transition: color var(--transition), text-decoration-color var(--transition);
}

a:hover {
  color: var(--primary-strong);
  text-decoration-thickness: 2px;
}

/* Fokusmarkeringen tas aldrig bort — bara ersatt med en tydligare ring. */
:focus-visible {
  outline: var(--focus-width) solid var(--primary);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-sm);
}

img, svg, video {
  max-width: 100%;
  height: auto;
}

strong { font-weight: 600; color: var(--ink-900); }

::selection {
  background: var(--primary-tint);
  color: var(--ink-900);
}

/* ---------- Layout ------------------------------------------------------ */

.shell {
  width: 100%;
  max-width: var(--width-page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.shell--text {
  max-width: calc(var(--width-text) + var(--gutter) * 2);
}

.site-main {
  flex: 1 0 auto;
  padding-bottom: var(--space-16);
}

.stack > * + * { margin-top: var(--space-4); }

.section { padding-block: var(--space-12); }
.section + .section { padding-top: 0; }

.section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--rule);
}

.section__head h2 { font-size: var(--text-h2); }

.section__more {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-height);
  padding-inline: var(--space-2);
  margin-inline: calc(var(--space-2) * -1);
  font-size: var(--text-small);
  font-weight: 600;
  white-space: nowrap;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: var(--space-2);
}

.lede {
  font-size: 1.1875rem;
  line-height: 1.6;
  color: var(--ink-500);
  max-width: var(--width-text);
}

.muted { color: var(--ink-500); }

/* ---------- Hoppa till innehåll ---------------------------------------- */

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100%;
  z-index: 100;
  background: var(--primary);
  color: #fff;
  padding: var(--space-3) var(--space-4);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  text-decoration: none;
  font-weight: 600;
  transition: top var(--transition);
}

.skip-link:focus {
  top: 0;
  color: #fff;
}

/* ---------- Sidhuvud ---------------------------------------------------- */

.site-header {
  position: relative;
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 4.5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--ink-900);
  padding-block: var(--space-2);
  /* Märket, menyn och språkvalet delar en rad. Utrymmet som blir över
     hamnar här, så att de tre står samlade till höger. */
  margin-right: auto;
  min-width: 0;
}

/* Bilden ligger i en <picture>, och det är den som är flexobjektet.
   Utan det här krymper märket när raden blir trång, och en logotyp som
   skalas ned till en tredjedel är inte längre återgiven oförändrad. */
.brand > picture {
  flex: none;
  display: inline-flex;
}

.brand:hover { color: var(--ink-900); }

.brand__mark {
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  color: var(--primary);
}

.brand__text { display: flex; flex-direction: column; line-height: 1.15; }

.brand__name {
  font-family: var(--font-heading);
  font-size: 1.1875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.brand__tagline {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-500);
  white-space: nowrap;
}

/* På de smalaste skärmarna konkurrerar underrubriken med menyknappen
   om utrymmet. Namnet räcker då. */
@media (max-width: 26rem) {
  .brand__tagline { display: none; }

  /* Tre kontroller på en rad om 390 px blir trångt. Knappens ikon räcker
     då — knappen har aria-label, så namnet finns kvar för skärmläsare. */
  .nav-toggle__text { display: none; }
  .nav-toggle { padding: 0; }
}

/* ---------- Navigation -------------------------------------------------- */

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-height);
  min-width: var(--control-height);
  padding: 0 var(--space-3);
  background: transparent;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-sm);
  color: var(--ink-900);
  font: inherit;
  font-size: var(--text-small);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}

.nav-toggle:hover { background: var(--surface-sunk); }
.nav-toggle svg { width: 1.25rem; height: 1.25rem; }
.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded='true'] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded='true'] .nav-toggle__close { display: block; }

.main-nav__list,
.main-nav__sub {
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-nav__link {
  display: block;
  text-decoration: none;
  color: var(--ink-700);
  font-weight: 600;
  font-size: var(--text-small);
}

.main-nav__link:hover { color: var(--primary-strong); }

.main-nav__link[aria-current='page'],
.main-nav__item--current > .main-nav__link {
  color: var(--primary);
}

/* Mobil: navigationen är en <details> som fungerar utan JavaScript.
   Skriptet lägger bara till Escape-stängning och stängning vid klick utanför. */
@media (max-width: 63.999rem) {
  .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 40;
    background: var(--surface);
    border-bottom: 1px solid var(--rule);
    box-shadow: var(--shadow-md);
    max-height: calc(100vh - 4.5rem);
    overflow-y: auto;
  }

  /* Menyn är dold tills knappen öppnar den. Utan JavaScript visas den
     istället alltid — se noscript.css. */
  .main-nav { display: none; }
  .main-nav.is-open { display: block; }

  .main-nav__list { padding: var(--space-2) var(--gutter) var(--space-6); }

  .main-nav__item { border-top: 1px solid var(--rule); }
  .main-nav__item:first-child { border-top: 0; }

  .main-nav__link {
    padding: var(--space-3) 0;
    min-height: var(--control-height);
    display: flex;
    align-items: center;
    font-size: var(--text-body);
  }

  .main-nav__sub {
    padding-bottom: var(--space-2);
    border-left: 2px solid var(--brass-tint);
    padding-left: var(--space-4);
    margin-left: var(--space-1);
  }

  .main-nav__sub .main-nav__link {
    font-weight: 400;
    font-size: var(--text-small);
    color: var(--ink-500);
    padding: var(--space-2) 0;
  }

  .main-nav__sub .main-nav__link:hover { color: var(--primary-strong); }
}

/* Desktop: vågrät meny med undermenyer som fälls ut på hover och fokus. */
@media (min-width: 64rem) {
  .nav-toggle { display: none; }

  .main-nav { display: block; }

  .main-nav__list {
    display: flex;
    align-items: stretch;
    gap: var(--space-1);
  }

  .main-nav__item { position: relative; display: flex; }

  .main-nav__link {
    display: inline-flex;
    align-items: center;
    padding: var(--space-3) var(--space-3);
    min-height: var(--control-height);
    border-bottom: 2px solid transparent;
  }

  .main-nav__item--current > .main-nav__link { border-bottom-color: var(--brass); }

  .main-nav__sub {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 15rem;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    padding: var(--space-2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
    z-index: 50;
  }

  .main-nav__item:hover > .main-nav__sub,
  .main-nav__item:focus-within > .main-nav__sub {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .main-nav__sub .main-nav__link {
    font-weight: 400;
    padding: var(--space-2) var(--space-3);
    border-bottom: 0;
    border-radius: var(--radius-sm);
    min-height: 2.5rem;
  }

  .main-nav__sub .main-nav__link:hover { background: var(--surface-sunk); }
}

/* ---------- Språkväljare ------------------------------------------------ */

/* Väljaren är en <details> och fungerar utan JavaScript. Skriptet lägger
   bara till stängning med Escape och vid klick utanför. */
.lang { position: relative; }

.lang__summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-height);
  padding: 0 var(--space-3);
  background: transparent;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-sm);
  color: var(--ink-900);
  font-size: var(--text-small);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  transition: background var(--transition), border-color var(--transition);
}

/* Triangeln som webbläsaren annars ritar tas bort — ikonen bär symbolen. */
.lang__summary::-webkit-details-marker { display: none; }
.lang__summary::marker { content: ''; }

.lang__summary:hover { background: var(--surface-sunk); }
.lang__icon { width: 1.25rem; height: 1.25rem; flex: none; }
.lang__code { letter-spacing: 0.04em; }

.lang__menu {
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 0;
  z-index: 60;
  width: max-content;
  max-width: min(20rem, calc(100vw - 2 * var(--gutter)));
  padding: var(--space-2);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}

.lang__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.lang__link {
  display: block;
  padding: var(--space-2) var(--space-3);
  min-height: 2.5rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--ink-700);
  font-size: var(--text-small);
  line-height: 1.6;
}

.lang__link:hover {
  background: var(--surface-sunk);
  color: var(--primary-strong);
}

.lang__link--current {
  color: var(--primary);
  font-weight: 600;
}

/* Att den svenska texten är den styrande står vid valet, inte bara i
   sidfoten. Det är här besökaren fattar beslutet. */
.lang__notice {
  margin: var(--space-2) 0 0;
  padding: var(--space-2) var(--space-3) 0;
  border-top: 1px solid var(--rule);
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--ink-500);
}

/* ---------- Brödsmulor -------------------------------------------------- */

.breadcrumbs {
  padding-block: var(--space-4);
  font-size: var(--text-small);
  color: var(--ink-500);
}

.breadcrumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
}

.breadcrumbs li { display: inline-flex; align-items: center; gap: var(--space-2); }

.breadcrumbs li + li::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--rule-strong);
  flex: none;
}

.breadcrumbs a { color: var(--ink-500); text-decoration-color: var(--rule-strong); }
.breadcrumbs a:hover { color: var(--primary-strong); }
.breadcrumbs [aria-current='page'] { color: var(--ink-700); font-weight: 600; }

/* ---------- Hero -------------------------------------------------------- */

/* Heron bärs helt av typografi och CSS-geometri. Den behöver inget
   fotografi, vilket är avsiktligt: föreningen har ännu inga bildrättigheter
   som är bekräftade. */
.hero {
  position: relative;
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--rule) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule) 1px, transparent 1px);
  background-size: 2.5rem 2.5rem;
  opacity: 0.35;
  -webkit-mask-image: radial-gradient(120% 80% at 82% 20%, #000 0%, transparent 68%);
  mask-image: radial-gradient(120% 80% at 82% 20%, #000 0%, transparent 68%);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 1;
  padding-block: var(--space-12);
  display: grid;
  gap: var(--space-8);
}

.hero__title {
  font-size: clamp(1.875rem, 5.5vw, var(--text-display));
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
  max-width: 18ch;
}

.hero__lede {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--ink-500);
  max-width: 52ch;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--rule);
  font-size: var(--text-small);
  color: var(--ink-500);
}

.hero__meta div { display: flex; align-items: baseline; gap: var(--space-2); }
.hero__meta dt { font-weight: 600; color: var(--ink-700); }
.hero__meta dd { margin: 0; }

@media (min-width: 64rem) {
  .hero__inner {
    padding-block: var(--space-16);
    min-height: 45vh;
    align-content: center;
  }
}

/* ---------- Knappar ----------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--control-height);
  padding: var(--space-2) var(--space-6);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: var(--text-small);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.btn--primary {
  background: var(--primary);
  color: #fff;
}

.btn--primary:hover {
  background: var(--primary-strong);
  color: #fff;
}

.btn--secondary {
  background: transparent;
  border-color: var(--primary);
  color: var(--primary);
}

.btn--secondary:hover {
  background: var(--primary-tint);
  color: var(--primary-strong);
}

.btn--quiet {
  background: transparent;
  border-color: var(--rule-strong);
  color: var(--ink-700);
}

.btn--quiet:hover { background: var(--surface-sunk); color: var(--ink-900); }

.btn--small {
  min-height: 2.25rem;
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-label);
}

.btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* ---------- Notisrutor -------------------------------------------------- */

.notice {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius-sm);
}

.notice__icon { flex: none; width: 1.25rem; height: 1.25rem; margin-top: 0.2em; color: var(--primary); }
.notice__body { min-width: 0; }
.notice__body > * + * { margin-top: var(--space-2); }
.notice__title { font-family: var(--font-body); font-size: var(--text-body); font-weight: 600; color: var(--ink-900); }
.notice p { font-size: var(--text-small); }

.notice--info { border-left-color: var(--primary); background: var(--primary-tint); }
.notice--info .notice__icon { color: var(--primary); }
.notice--success { border-left-color: var(--ok); background: var(--ok-tint); }
.notice--success .notice__icon { color: var(--ok); }
.notice--warning { border-left-color: var(--warn); background: var(--warn-tint); }
.notice--warning .notice__icon { color: var(--warn); }
.notice--critical { border-left-color: var(--danger); background: var(--danger-tint); }
.notice--critical .notice__icon { color: var(--danger); }

/* "Viktigt just nu" */
.alerts { padding-top: var(--space-6); }
.alerts > * + * { margin-top: var(--space-3); }

.alerts__label {
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: var(--space-3);
}

.alert__meta {
  font-size: var(--text-label);
  color: var(--ink-500);
  letter-spacing: 0.02em;
}

/* ---------- Kort och rutnät -------------------------------------------- */

.grid {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 40rem) {
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-6);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  min-width: 0;
}

.card__meta {
  font-size: var(--text-label);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-500);
}

.card__title {
  font-size: var(--text-h3);
  text-wrap: balance;
}

.card__title a {
  text-decoration: none;
  color: var(--ink-900);
}

.card__title a:hover { color: var(--primary-strong); text-decoration: underline; }

.card__excerpt { font-size: var(--text-small); }

/* Hela kortet är klickbart via en utsträckt länk, men fokusringen ritas
   runt kortet så att tangentbordsläget syns tydligt. */
.card--link { transition: border-color var(--transition), box-shadow var(--transition); position: relative; }
.card--link:hover { border-color: var(--rule-strong); box-shadow: var(--shadow-sm); }
.card--link:focus-within { outline: var(--focus-width) solid var(--primary); outline-offset: var(--focus-offset); }
.card--link:focus-within .stretched::after { outline: none; }

.stretched::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.stretched:focus-visible { outline: none; }

/* Snabblänkar */
.quicklinks { display: grid; gap: var(--space-3); }

@media (min-width: 30rem) { .quicklinks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .quicklinks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.quicklink {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  min-height: var(--control-height);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--ink-900);
  transition: border-color var(--transition), background var(--transition);
}

.quicklink:hover { border-color: var(--primary); background: var(--primary-tint); color: var(--ink-900); }

.quicklink__icon { flex: none; width: 1.5rem; height: 1.5rem; color: var(--brass); margin-top: 0.1em; }
.quicklink__label { font-weight: 600; display: block; }
.quicklink__desc { font-size: var(--text-small); color: var(--ink-500); display: block; }

/* ---------- Faktatabell ------------------------------------------------- */

.table-wrap {
  /* position: relative gör scroll-containern till containing block. Utan den
     placeras absolutpositionerat innehåll (t.ex. .visually-hidden i en
     tabellrubrik) mot dokumentet istället och breddar hela sidan. */
  position: relative;
  overflow-x: auto;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

table { border-collapse: collapse; width: 100%; font-size: var(--text-small); }

caption {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  font-weight: 600;
  color: var(--ink-900);
  border-bottom: 1px solid var(--rule);
}

th, td {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}

tbody tr:last-child th,
tbody tr:last-child td { border-bottom: 0; }

thead th {
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-500);
  background: var(--surface-sunk);
  white-space: nowrap;
}

.fact-table th {
  width: 42%;
  color: var(--ink-700);
  font-weight: 600;
  text-wrap: pretty;
}

.fact-table td {
  color: var(--ink-700);
  font-variant-numeric: tabular-nums;
  text-wrap: pretty;
}

/* På smal skärm blir två kolumner för trångt — raderna staplas istället. */
@media (max-width: 34rem) {
  .fact-table th,
  .fact-table td {
    display: block;
    width: auto;
  }

  .fact-table th {
    border-bottom: 0;
    padding-bottom: 0;
    font-size: var(--text-label);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-500);
  }

  .fact-table td { padding-top: var(--space-1); }
}

/* ---------- Dokumentlista ---------------------------------------------- */

.doc-group + .doc-group { margin-top: var(--space-8); }

.doc-group__title {
  font-size: var(--text-h3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--space-3);
}

.doc-list { list-style: none; margin: 0; padding: 0; }

.doc-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--rule);
}

.doc-item:last-child { border-bottom: 0; }

.doc-item__icon { flex: none; width: 1.5rem; height: 1.5rem; color: var(--danger); margin-top: 0.15em; }
.doc-item__body { min-width: 0; flex: 1; }

.doc-item__title {
  font-weight: 600;
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  min-height: 1.5rem;
  display: inline-block;
}

.doc-item__desc { font-size: var(--text-small); color: var(--ink-500); margin-top: var(--space-1); }

.doc-item__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  margin-top: var(--space-2);
  font-size: var(--text-label);
  color: var(--ink-500);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

/* ---------- Tom vy ------------------------------------------------------ */

.empty {
  padding: var(--space-12) var(--space-6);
  text-align: center;
  background: var(--surface);
  border: 1px dashed var(--rule-strong);
  border-radius: var(--radius-sm);
}

.empty__icon { width: 2.5rem; height: 2.5rem; color: var(--rule-strong); margin-bottom: var(--space-3); }
.empty__title { font-size: var(--text-h3); margin-bottom: var(--space-2); }
.empty p { color: var(--ink-500); max-width: 44ch; margin-inline: auto; font-size: var(--text-small); }

/* ---------- Löpande text ------------------------------------------------ */

.prose { max-width: var(--width-text); }
.prose > * + * { margin-top: var(--space-4); }
.prose h2 { font-size: var(--text-h2); margin-top: var(--space-8); }
.prose h3 { font-size: var(--text-h3); margin-top: var(--space-6); }
.prose h2 + *, .prose h3 + * { margin-top: var(--space-3); }
.prose ul, .prose ol { padding-left: 1.35em; }
.prose li + li { margin-top: var(--space-2); }
.prose li::marker { color: var(--rule-strong); }

.prose blockquote {
  border-left: 3px solid var(--brass);
  padding: var(--space-1) 0 var(--space-1) var(--space-4);
  color: var(--ink-500);
  font-style: normal;
}

.prose blockquote p { font-size: var(--text-small); }

/* ---------- Formulär ---------------------------------------------------- */

.form { max-width: var(--width-text); }
.form > * + * { margin-top: var(--space-6); }

.field > * + * { margin-top: var(--space-2); }

.field__label {
  display: block;
  font-weight: 600;
  font-size: var(--text-small);
  color: var(--ink-900);
}

.field__hint { font-size: var(--text-label); color: var(--ink-500); }

.field__control {
  display: block;
  width: 100%;
  min-height: var(--control-height);
  padding: var(--space-2) var(--space-3);
  font: inherit;
  font-size: var(--text-body);
  color: var(--ink-900);
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.field__control:hover { border-color: var(--ink-500); }

.field__control:focus-visible {
  border-color: var(--primary);
  outline: var(--focus-width) solid var(--primary);
  outline-offset: 1px;
}

textarea.field__control { min-height: 10rem; resize: vertical; line-height: 1.6; }
select.field__control { cursor: pointer; }

.field--invalid .field__control { border-color: var(--danger); border-width: 2px; }

.field__error {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--danger);
}

.field__error svg { flex: none; width: 1.125rem; height: 1.125rem; margin-top: 0.1em; }

/* Honeypot. Placeras utanför vyn och tas bort ur tabbordningen och
   tillgänglighetsträdet, så att skärmläsare aldrig möter det. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

/* ---------- Statusmärken ------------------------------------------------ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.15rem var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.badge--published { background: var(--ok-tint); color: var(--ok); }
.badge--draft { background: var(--surface-sunk); color: var(--ink-500); }
.badge--scheduled { background: var(--primary-tint); color: var(--primary); }
.badge--expired { background: var(--warn-tint); color: var(--warn); }
.badge--needs { background: var(--brass-tint); color: var(--brass); }

/* ---------- Sidfot ------------------------------------------------------ */

.site-footer {
  flex: none;
  background: var(--surface);
  border-top: 1px solid var(--rule);
  padding-block: var(--space-12) var(--space-8);
  font-size: var(--text-small);
}

.site-footer__grid {
  display: grid;
  gap: var(--space-8);
}

@media (min-width: 48rem) {
  .site-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.site-footer h2 {
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-bottom: var(--space-3);
}

.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li + li { margin-top: var(--space-2); }
.site-footer a { color: var(--ink-700); text-decoration-color: var(--rule-strong); }
.site-footer a:hover { color: var(--primary-strong); }

.site-footer address { font-style: normal; color: var(--ink-500); }
.site-footer address > * + * { margin-top: var(--space-2); }

.site-footer__base {
  margin-top: var(--space-8);
  padding-top: var(--space-4);
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  justify-content: space-between;
  font-size: var(--text-label);
  color: var(--ink-500);
}

/* ---------- Felsidor ---------------------------------------------------- */

.error-page { padding-block: var(--space-16); text-align: left; }

.error-page__code {
  font-family: var(--font-heading);
  font-size: 4rem;
  line-height: 1;
  color: var(--brass);
  font-variant-numeric: tabular-nums;
}

.error-page__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
  margin: 0;
}

/* ---------- Paginering -------------------------------------------------- */

.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-8);
  padding-top: var(--space-4);
  border-top: 1px solid var(--rule);
  font-size: var(--text-small);
}

.pagination__status { color: var(--ink-500); font-variant-numeric: tabular-nums; }

/* ---------- Rörelse ----------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Utskrift ---------------------------------------------------- */

@media print {
  .site-header, .site-footer, .skip-link, .breadcrumbs, .hero::after { display: none; }
  body { background: #fff; color: #000; }
  a { text-decoration: underline; }
}

/* ---------- Hjälpklasser ------------------------------------------------ */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Sidmallar --------------------------------------------------- */

.page-header { max-width: var(--width-text); }

.page-body { margin-top: var(--space-8); }
.page-body--narrow { max-width: var(--width-text); }

.page-footer-actions { margin-top: var(--space-12); }

.about-grid { display: grid; gap: var(--space-6); align-items: start; }

@media (min-width: 64rem) {
  .about-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-12); }
}

.about-grid__text { display: flex; flex-direction: column; gap: var(--space-4); }
.about-grid__text .btn { align-self: flex-start; margin-top: var(--space-2); }

.contact-layout { display: grid; gap: var(--space-8); align-items: start; }
.contact-layout > div > * + * { margin-top: var(--space-6); }

@media (min-width: 64rem) {
  .contact-layout { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--space-12); }
  .contact-aside { position: sticky; top: var(--space-8); }
}

.contact-aside .card__title { font-size: var(--text-h3); }
.contact-aside .card > * + * { margin-top: var(--space-3); }

.contact-aside > * + * { margin-top: var(--space-4); }
.contact-address { font-style: normal; display: flex; flex-direction: column; gap: var(--space-2); }

/* ---------- Bilder ------------------------------------------------------ */

/* Alla bilder är föreningens egna och ligger på vår egen server. Måtten
   skrivs ut i HTML så att sidan aldrig hoppar när bilden laddas. */
.media {
  display: block;
  width: 100%;
  height: auto;
  background: var(--surface-sunk);
}

.media--3x2 { aspect-ratio: 3 / 2; object-fit: cover; }
.media--4x3 { aspect-ratio: 4 / 3; object-fit: cover; }
.media--16x9 { aspect-ratio: 16 / 9; object-fit: cover; }
.media--1x1 { aspect-ratio: 1 / 1; object-fit: cover; }

.tabular { font-variant-numeric: tabular-nums; }

/* Dokumentlänken är sidans viktigaste tryckyta i listan och ska nå 44 px
   även när titeln bara är en rad. */
.doc-item__title {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-height);
}

/* Föreningens märke i sidhuvudet. Logotypen återges oförändrad. */
.brand__logo {
  flex: none;
  width: auto;
  height: 2.25rem;
  background: none;
}

.site-footer__logo {
  width: auto;
  height: 4.5rem;
  margin-bottom: var(--space-4);
  background: none;
}

/* ---------- Sidhuvudbild ------------------------------------------------ */

.page-hero {
  margin-block: var(--space-6) var(--space-8);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface-sunk);
}

.page-hero .media { aspect-ratio: 16 / 9; object-fit: cover; }

@media (max-width: 47.99rem) {
  .page-hero .media { aspect-ratio: 3 / 2; }
}

/* ---------- Galleri ----------------------------------------------------- */

.gallery { margin-top: var(--space-12); }

.gallery__title {
  font-size: var(--text-h2);
  margin-bottom: var(--space-3);
}

.gallery__note {
  color: var(--ink-500);
  font-size: var(--text-small);
  max-width: var(--width-text);
  margin-bottom: var(--space-6);
}

/* Tva spalter redan pa mobil. Ett galleri med nio bilder i en enda spalt
   blir en sida man scrollar forbi istallet for tittar pa. */
.gallery__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 40rem) {
  .gallery__grid { gap: var(--space-4); }
}

@media (min-width: 62rem) {
  .gallery__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Startsidans bildrad är en teaser och hålls i tre spalter även på mobil,
   så raden aldrig bryts med en ensam bild på slutet. */
.gallery--strip { margin-top: 0; }
.gallery--strip .gallery__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.gallery__item { min-width: 0; }

.gallery__link {
  display: block;
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface-sunk);
  cursor: pointer;
}

.gallery__link:focus-visible {
  outline: var(--focus-width) solid var(--primary);
  outline-offset: var(--focus-offset);
}

/* Hovereffekt: bilden zoomar svagt inuti sin ram, rutan lyfts några pixlar
   och får en mjuk skugga. Ingenting roterar, studsar eller byter plats —
   zoomen sker innanför .gallery__link, som klipper med overflow: hidden, så
   rutnätet står stilla. Den lyfta rutan höjs över sina grannar så att
   skuggan inte klipps av nästa bild. */
.gallery__link {
  transition:
    transform var(--gallery-hover-duration) var(--gallery-hover-ease),
    box-shadow var(--gallery-hover-duration) var(--gallery-hover-ease);
  will-change: transform;
}

.gallery__image {
  transition:
    transform var(--gallery-hover-duration) var(--gallery-hover-ease),
    filter var(--gallery-hover-duration) var(--gallery-hover-ease);
}

/* Bara pekdon som faktiskt kan hovra. På en pekskärm skulle regeln annars
   fastna efter första tryckningen, och det första trycket ska öppna
   ljusbordet — inte visa en hovereffekt. */
@media (hover: hover) and (pointer: fine) {
  .gallery__link:hover,
  .gallery__link:focus-visible {
    z-index: 1;
    box-shadow: var(--gallery-hover-shadow);
  }

  .gallery__link:hover .gallery__image,
  .gallery__link:focus-visible .gallery__image {
    filter: brightness(1.03);
  }

  @media (prefers-reduced-motion: no-preference) {
    .gallery__link:hover,
    .gallery__link:focus-visible {
      transform: translateY(-4px);
    }

    .gallery__link:hover .gallery__image,
    .gallery__link:focus-visible .gallery__image {
      transform: scale(1.055);
    }
  }
}

/* ---------- Galleriets egen sida ---------------------------------------- */

.gallery-nav {
  margin-top: var(--space-8);
  padding-bottom: var(--space-2);
}

.gallery-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.gallery-nav__link {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: 0.5rem 0.875rem;
  min-height: 2.75rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--ink-700);
  font-size: var(--text-small);
  text-decoration: none;
  transition: border-color var(--transition), background var(--transition);
}

.gallery-nav__link:hover { border-color: var(--rule-strong); background: var(--surface-sunk); }

.gallery-nav__link:focus-visible {
  outline: var(--focus-width) solid var(--primary);
  outline-offset: var(--focus-offset);
}

.gallery-nav__count { color: var(--ink-500); font-variant-numeric: tabular-nums; }

/* Rutnätet klipper zoomen, men den lyfta rutan behöver luft utanför sig
   för att skuggan ska synas. Marginalen kompenseras med samma padding. */
.gallery-section .gallery__grid {
  margin: calc(var(--space-2) * -1);
  padding: var(--space-2);
}

.gallery-section { scroll-margin-top: var(--space-8); }

/* ---------- Lightbox ---------------------------------------------------- */

.lightbox {
  width: min(100vw, 84rem);
  max-width: 100%;
  max-height: 100dvh;
  padding: 0;
  border: 0;
  background: transparent;
  color: #ffffff;
  overflow: hidden;
}

.lightbox::backdrop { background: rgba(10, 16, 22, 0.92); }

.lightbox__frame {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: var(--space-3);
  height: 100dvh;
  padding: var(--space-4);
  box-sizing: border-box;
}

.lightbox__figure {
  margin: 0;
  min-height: 0;
  display: grid;
  place-items: center;
}

.lightbox__image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-sm);
  background: none;
}

.lightbox__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  justify-content: space-between;
}

.lightbox__caption {
  flex: 1 1 18rem;
  min-width: 0;
  font-size: var(--text-small);
  line-height: 1.5;
  /* #ffffff på rgba(10,16,22,.92) ger över 15:1. */
  color: #ffffff;
}

.lightbox__controls { display: flex; align-items: center; gap: var(--space-2); }

.lightbox__count {
  font-size: var(--text-small);
  font-variant-numeric: tabular-nums;
  color: #ffffff;
  min-width: 4.5rem;
  text-align: center;
}

.lightbox__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--control-height);
  min-height: var(--control-height);
  padding: var(--space-2) var(--space-3);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  font: inherit;
  font-size: var(--text-small);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}

.lightbox__button:hover { background: rgba(255, 255, 255, 0.2); border-color: #ffffff; }

.lightbox__button:focus-visible {
  outline: var(--focus-width) solid #ffffff;
  outline-offset: var(--focus-offset);
}

.lightbox__button[disabled] { opacity: 0.45; cursor: default; }

.lightbox__icon { width: 1.25rem; height: 1.25rem; }

/* ---------- Hero med fotografi ------------------------------------------ */

/* Delad hero: texten till vanster och fastighetsbilden till hoger. Texten
   ligger aldrig ovanpa fotot, sa kontrasten ar densamma som pa ovriga sidor
   oavsett hur ljus bilden ar. */
.hero--split .hero__inner { gap: var(--space-8); }

.hero--split .hero__media {
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface-sunk);
}

.hero--split .hero__media .media { aspect-ratio: 4 / 3; }

/* Filmen ligger i exakt samma ruta som bilden och ärver .media, så storlek,
   bildformat och hörnradie är oförändrade. Det enda som behöver sägas här
   är hur bildrutan ska beskäras och att spelaren inte får rita något eget.
   Posterbilden är samma foto som annars hade legat i rutan, så det syns
   ingen skillnad medan filmen laddas. */
.hero__video {
  object-fit: cover;
  object-position: center;
  background: var(--surface-sunk);
}

.hero__video::-webkit-media-controls { display: none !important; }

/* Informationsraden om AI-genererat media. Den står utanför .hero__media,
   så den ärver varken rundade hörn, dold överflödning eller rutans
   bakgrund, men får samma bredd eftersom båda fyller samma <figure>. Om den
   visas styrs av AI-inställningen för det media som syns: filmen eller
   stillbilden. */
.hero__caption {
  margin-top: var(--space-2);
  font-size: var(--text-label);
  line-height: 1.4;
  color: var(--ink-500);
  text-align: left;
}

/* Raden gäller inte det media som syns just nu, men väl det andra. Den tar
   sin plats ändå, så att ingenting flyttar sig när filmen startar eller
   faller tillbaka till stillbilden. visibility döljer den även för
   skärmläsare. */
.hero__caption[data-reserved] { visibility: hidden; }

@media (min-width: 64rem) {
  .hero--split .hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    column-gap: var(--space-16);
  }

  .hero--split .hero__text { grid-column: 1; }
  /* I två spalter centreras mediarutan mot vänsterspalten, och raden står
     i flödet under den. Figuren fyller hela höjden bredvid texten och är
     ett eget rutnät i tre rader: tomt, rutan, raden. De yttre raderna är
     lika höga, så rutan står mitt för texten precis som utan rad. Behöver
     raden mer än utrymmet under rutan — större text, längre språk — växer
     heron lika mycket ovanför som under rutan, och rutan står kvar i
     mitten. Raden ligger därför aldrig ovanpå något och klipps aldrig av
     heroytan, oavsett textstorlek. I en spalt ligger raden i flödet som
     vanligt. */
  .hero--split .hero__figure {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: stretch;
    display: grid;
    grid-template-rows: 1fr auto 1fr;
    grid-template-columns: minmax(0, 1fr);
  }

  .hero--split .hero__media { grid-row: 2; }
  .hero--split .hero__caption { grid-row: 3; align-self: start; }
  .hero--split .hero__meta { grid-column: 1; }
  .hero--split .hero__media .media { aspect-ratio: 3 / 2; }
}

/* ---------- Startsidans bildrad ----------------------------------------- */

.home-strip { margin-top: var(--space-8); }

.about-grid__media {
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface-sunk);
}

@media (min-width: 64rem) {
  /* Texten laser forst, bilden star bredvid och fakta under texten. */
  .about-grid { grid-template-rows: auto 1fr; }
  .about-grid__text { grid-column: 1; grid-row: 1; }
  .about-grid__media { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
  .about-grid .table-wrap { grid-column: 1; grid-row: 2; }
}

.contact-aside__media {
  margin-top: var(--space-4);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-sunk);
}

/* ---------- Fråga Silverfasanen ---------------------------------------- */

/* Assistenten använder webbplatsens egna färger och typsnitt. Inga
   gradienter, ingen robotgrafik — den ska se ut som resten av
   Silverfasanen och inte som en främmande produkt. */

.ai__launcher {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-height);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--primary);
  border-radius: var(--radius-sm);
  background: var(--primary);
  color: #ffffff;
  font: inherit;
  font-size: var(--text-small);
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: background var(--transition), border-color var(--transition);
}

.ai__launcher:hover { background: var(--primary-strong); border-color: var(--primary-strong); }

.ai__launcher:focus-visible {
  outline: var(--focus-width) solid var(--primary);
  outline-offset: var(--focus-offset);
}

.ai__launcher-icon { width: 1.25rem; height: 1.25rem; flex: none; }

@media (min-width: 48rem) {
  .ai__launcher { right: var(--space-6); bottom: var(--space-6); }
}

.ai__dialog {
  padding: 0;
  border: 0;
  background: transparent;
  max-width: 100%;
  max-height: 100dvh;
  width: 100%;
}

.ai__dialog::backdrop { background: rgba(10, 16, 22, 0.55); }

.ai__panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100dvh;
  background: var(--canvas);
  color: var(--ink-700);
  box-sizing: border-box;
}

/* På större skärmar är assistenten ett panelfönster nere till höger, inte
   ett helskärmsläge. */
@media (min-width: 48rem) {
  .ai__dialog {
    width: min(30rem, calc(100vw - 3rem));
    /* auto upptill och till vänster trycker panelen till nedre högra
       hörnet, där knappen står. Utan auto upptill centrerar webbläsaren
       dialogen och panelen hamnar mitt på skärmen. */
    margin: auto var(--space-6) var(--space-6) auto;
  }

  .ai__panel {
    height: min(38rem, calc(100dvh - 6rem));
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    overflow: hidden;
  }
}

.ai__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4);
  border-bottom: 1px solid var(--rule);
  background: var(--surface);
}

.ai__title {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  color: var(--ink-900);
  margin: 0;
}

.ai__subtitle {
  margin: var(--space-2) 0 0;
  font-size: var(--text-small);
  line-height: 1.5;
  color: var(--ink-500);
}

.ai__close {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--control-height);
  height: var(--control-height);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink-700);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}

.ai__close:hover { background: var(--surface-sunk); border-color: var(--rule-strong); }

.ai__close:focus-visible {
  outline: var(--focus-width) solid var(--primary);
  outline-offset: var(--focus-offset);
}

.ai__close-icon { width: 1.25rem; height: 1.25rem; }

.ai__log {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.ai__intro-text {
  margin: 0 0 var(--space-3);
  font-size: var(--text-small);
  color: var(--ink-500);
}

.ai__examples { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }

.ai__example {
  width: 100%;
  min-height: var(--control-height);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--primary);
  font: inherit;
  font-size: var(--text-small);
  text-align: left;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}

.ai__example:hover { background: var(--primary-tint); border-color: var(--primary); }

.ai__example:focus-visible {
  outline: var(--focus-width) solid var(--primary);
  outline-offset: var(--focus-offset);
}

.ai__turn { display: grid; gap: var(--space-2); }

.ai__question {
  align-self: flex-end;
  max-width: 90%;
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--primary-tint);
  color: var(--ink-900);
  font-size: var(--text-small);
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.ai__answer {
  margin: 0;
  padding: var(--space-3);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink-700);
  font-size: var(--text-small);
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.ai__answer--warning { border-left: 3px solid var(--warn); background: var(--warn-tint); }
.ai__answer--error { border-left: 3px solid var(--danger); background: var(--danger-tint); }

.ai__sources { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-1); }

.ai__sources-title {
  margin: 0;
  font-size: var(--text-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-500);
}

.ai__source {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 1.75rem;
  font-size: var(--text-small);
  color: var(--primary);
}

.ai__source-icon { width: 1rem; height: 1rem; flex: none; }

.ai__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }

.ai__action {
  min-height: 2.25rem;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink-700);
  font: inherit;
  font-size: var(--text-small);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}

.ai__action:hover { background: var(--surface-sunk); border-color: var(--rule-strong); }

.ai__action:focus-visible {
  outline: var(--focus-width) solid var(--primary);
  outline-offset: var(--focus-offset);
}

.ai__action[aria-pressed='true'] {
  background: var(--ok-tint);
  border-color: var(--ok);
  color: var(--ok);
}

.ai__feedback-label { font-size: var(--text-small); color: var(--ink-500); }

/* Knapparna i widgetens huvud. Samma form som övriga åtgärder, så att
   "Börja om" känns som en del av rutan och inte som ett nytt element. */
.ai__header-actions { display: flex; align-items: center; gap: var(--space-2); }
.ai__reset { white-space: nowrap; }

/* Kvittot efter tumme upp eller ned. Ersätter knapparna på plats, så
   att raden inte hoppar när de försvinner. */
.ai__feedback-thanks { font-size: var(--text-small); color: var(--ink-500); }

.ai__form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2);
  padding: var(--space-4);
  border-top: 1px solid var(--rule);
  background: var(--surface);
}

.ai__input {
  width: 100%;
  min-height: var(--control-height);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink-900);
  font: inherit;
  font-size: var(--text-small);
  line-height: 1.5;
  resize: vertical;
}

.ai__input:focus-visible {
  outline: var(--focus-width) solid var(--primary);
  outline-offset: var(--focus-offset);
  border-color: var(--primary);
}

.ai__send { align-self: end; }
.ai__send[disabled] { opacity: 0.6; cursor: default; }

.ai__disclaimer {
  margin: 0;
  padding: 0 var(--space-4) var(--space-4);
  background: var(--surface);
  font-size: var(--text-label);
  line-height: 1.5;
  color: var(--ink-500);
}

.ai__pending { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--ink-500); font-size: var(--text-small); }

.ai__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--ink-500);
  animation: ai-pulse 1.2s ease-in-out infinite;
}

@keyframes ai-pulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .ai__dot { animation: none; opacity: 0.7; }
}