/* ---- Site footer (2026-09-17 sketch; phone order 2026-09-20) ----
   Desktop: a hairline rule across the content width, the brand column and
   the partner logos on the left, the menu at the right-column edge and the
   emblem at the right margin. Phone: rule · menu with the emblem beside it ·
   rule · the academy text · the two logos · rule · the privacy link. */
.sa-footer { margin-top: var(--sa-foot-gap); }
.sa-footer__inner {
	max-width: var(--sa-maxw, 1175px); margin: 0 auto; padding: var(--sa-space) 0 var(--sa-space);
	border-top: 1px solid var(--wp--preset--color--ink);
	display: grid; grid-template-columns: minmax(0, calc(50% + (var(--sa-gutter) / 2))) minmax(0, 1fr) auto;
}
@media (max-width: 1223px) { .sa-footer__inner { margin-inline: 24px; } }
.sa-footer__brand { grid-column: 1; grid-row: 1; margin-top: -5px; }
.sa-footer__logo { display: inline-block; font-family: var(--wp--preset--font-family--heading); font-weight: 400; text-transform: uppercase; letter-spacing: 0.01em; font-size: var(--sa-fs-body); line-height: 1.2; color: var(--wp--preset--color--ink); text-decoration: none; }
.sa-footer__blurb { font-size: var(--sa-fs-body); line-height: var(--sa-lh-text); margin: calc(var(--sa-lh-text) * 1em - 6px) 0 0; max-width: calc(100% - var(--sa-gutter)); color: var(--wp--preset--color--ink); }
/* a rule between the blurb and the logos (designer 2026-09-19) */
.sa-footer__partners {
	grid-column: 1; grid-row: 2; margin: calc(var(--sa-space) - 8px) 0 0;
	padding-top: calc(var(--sa-space) - 8px); border-top: 1px solid var(--wp--preset--color--ink);
	display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; max-width: calc(100% - var(--sa-gutter));
}
.sa-footer__partner { display: inline-flex; line-height: 0; }
.sa-footer__partner img { display: block; width: auto; }
.sa-footer__partner--seriehornan img { height: 62px; }
.sa-footer__partner--seriegalleriet img { height: 26px; }
.sa-footer__partner:hover img { opacity: 0.72; }
.sa-footer__nav { grid-column: 2; grid-row: 1; margin-top: 13px; display: flex; flex-wrap: wrap; gap: 0 var(--sa-gutter); }
.sa-footer__nav ul { list-style: none; margin: 0; padding: 0; flex: 0 0 auto; min-width: 173px; }
.sa-footer__nav li { margin: 0; }
.sa-footer__nav a { display: inline-block; color: var(--wp--preset--color--ink); text-decoration: none; font-size: var(--sa-fs-body); line-height: var(--sa-lh-text); }
.sa-footer__nav a:hover { color: var(--wp--preset--color--accent-red); }
/* sits just under the menu, in the menu's column */
.sa-footer__privacy { flex: 1 0 100%; margin-top: 1.1rem; color: var(--wp--preset--color--ink); opacity: 0.7; font-size: var(--sa-fs-caption); text-decoration: none; }
.sa-footer__privacy:hover { color: var(--wp--preset--color--accent-red); opacity: 1; }
.sa-footer__emblem { grid-column: 3; grid-row: 1; line-height: 0; }
.sa-footer__emblem img { width: var(--sa-head-emblem, 132px); height: auto; display: block; }
/* Below 1000px the three columns no longer fit side by side, so the footer
   takes the designer's phone order from there down: rule · the menu with the
   emblem beside it · rule · the academy text · the two logos · rule · the
   privacy link (designer 2026-09-20). A two-column grid, so the menu's two
   lists read as one flush column and the emblem starts level with its first
   line. */
@media (max-width: 999px) {
	.sa-footer__inner { grid-template-columns: minmax(0, 1fr) auto; padding-bottom: var(--sa-space); }
	/* the menu's parts become cells of the footer grid, so the lists can stack
	   in one column and the privacy link can go last, below the logos */
	.sa-footer__nav { display: contents; }
	.sa-footer__nav ul { grid-column: 1; min-width: 0; }
	.sa-footer__nav ul:first-of-type { grid-row: 1; }
	.sa-footer__nav ul + ul { grid-row: 2; }
	/* level with the menu's top row: the 7px drops the circle past the line
	   box's half-leading so its top edge meets the capitals of "Om akademin" */
	.sa-footer__emblem { grid-column: 2; grid-row: 1 / span 2; align-self: start; margin-top: 7px; }
	.sa-footer__emblem img { width: clamp(88px, 28vw, 104px); }
	.sa-footer__brand { grid-column: 1 / -1; grid-row: 3; margin-top: var(--sa-space); padding-top: var(--sa-space); border-top: 1px solid var(--wp--preset--color--ink); }
	.sa-footer__blurb { max-width: none; }
	.sa-footer__partners { grid-column: 1 / -1; grid-row: 4; max-width: none; margin-top: var(--sa-space); padding-top: 0; border-top: 0; }
	.sa-footer__privacy { grid-column: 1 / -1; grid-row: 5; margin-top: var(--sa-space); padding-top: var(--sa-space); border-top: 1px solid var(--wp--preset--color--ink); }
}

/* ============================================================
   2026 REDESIGN — Be Vietnam Pro, green/red/peach system, 2-col base
   (built progressively on the redesign-2026 branch)
   ============================================================ */

/* The parent theme sets -webkit-font-smoothing: antialiased on <html>. On macOS
   that thins every stroke, so Light (300) reads like ExtraLight (designer
   2026-09-18). Back to the OS default rendering. */
html { -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; }
body { font-weight: var(--sa-fw); }
/* the wordmark and the menu come from theme.json — keep them on the token too */
.sa-head__nav.wp-block-navigation, .sa-head__nav .wp-block-navigation__container, .sa-head__nav .wp-block-navigation-item__content { font-weight: var(--sa-fw); }
/* The wordmark alone goes one weight up (designer 2026-09-21): Light reads thin
   at that size against the rest of the header. Regular rather than Medium —
   500 gets heavy next to the Light navigation beside it. */
.wp-block-site-title, .wp-block-site-title a { font-weight: 400; }

/* Shared 2026 tokens: type scale (px ≈ sketch pt) + grid */
:root {
	--sa-maxw: 1175px;
	/* Box colours (designer 2026-09-18): only the coloured cards use these. */
	--sa-box-red: #d20000;   /* 210/0/0 */
	--sa-box-blue: #002868;  /* 0/40/104 */
	--sa-box-green: #008200; /* 0/130/0 */ /* designer 2026-09-17 (was 1240) */
	--sa-gutter: 45px;
	/* One spacing unit for the page's vertical landmarks (rule → first heading
	   or image, heading ↔ image, footer): the gutter. */
	--sa-space: 45px;
	--sa-fs-rubrik1: clamp(27px, 4.4vw, 34px);
	--sa-fs-rubrik2: clamp(24px, 4vw, 30px);
	--sa-fs-rubrik3: 21px;
	/* Card headings a step under Rubrik 3 (designer 2026-09-21): the news and
	   article cards and the start-page news flash. Its own token so the h2s
	   inside article bodies, which also use Rubrik 3, are left alone. */
	--sa-fs-card-title: 19px;
	--sa-fs-lead: clamp(19px, 2.4vw, 22px);
	--sa-fs-body: 16px;
	/* Light 300 for everything but the few bold labels; ?vikt=400 (etc.) on any
	   URL switches the whole site so the designer can compare weights. */
	--sa-fw: 300;
	/* Designer 2026-09-16: Rubrik 1, Större and Bröd all 1.5 (or 1.75) leading. */
	--sa-lh-heading: 1.25;
	--sa-lh-text: 1.5;
	/* Running text is set narrower than its column so lines don't run too long;
	   headings, lists and media keep the full column.
	   Två mått, because the two sizes sit in columns of very different widths:
	   Större (22px) runs the 1175px page column, where 90% still gives ~80
	   characters a line; Bröd (16px) runs the 565px text column of the
	   two-column pages, where 90% was only ~39-49 and read choppily. Bröd is
	   now nearly the full column (designer 2026-09-24). */
	--sa-measure: 90%;
	--sa-measure-brod: 97%;
	/* Captions: a step below Bröd, left-aligned, one gap to the image. */
	--sa-fs-caption: 14px;
	/* 75% ink on the peach page — clearly apart from Bröd, still readable */
	--sa-caption-color: #534f4d;
	--sa-lh-caption: 1.25;
	/* card text is a step above the captions (designer 2026-09-20) */
	--sa-fs-card: 15px;
	--sa-lh-card: 1.35;
	--sa-cap-gap: 0.75rem;
	--sa-foot-gap: clamp(5rem, 10vw, 8rem);
}

/* ---- Shared rules from the designer's comments (2026-09-16) ---- */
/* Bröd only — Större text (start-page intro, Om, Adamson-priset) runs the
   full column (designer 2026-09-18). */
.sa-hist__content, .sa-post__body, .sa-mintro { max-width: var(--sa-measure-brod); }
@media (max-width: 782px) {
	.sa-hist__content, .sa-post__body, .sa-mintro { max-width: none; }
}
/* Captions sit directly under their image; the space after a caption (before
   the next image) comes from the figure spacing below. html body lifts these
   above the parent theme's div[class*="wp-block-"] figcaption rule. */
html body :is(.sa-post__media, .sa-om__fig, .sa-mfig, .sa-stack__fig, .sa-gal__fig) figcaption,
html body .sa-post__media .wp-caption-text {
	font-size: var(--sa-fs-caption); line-height: var(--sa-lh-caption); text-align: left;
	color: var(--sa-caption-color); margin: var(--sa-cap-gap) 0 0; padding: 0;
}
/* A captioned figure is as wide as its image, so the caption of a small
   (never upscaled) image wraps to the image instead of the column. A table
   caption doesn't widen its table, which fit-content would. */
.sa-post__media figure:has(> figcaption) { display: table; }
.sa-post__media figure:has(> figcaption) > figcaption { display: table-caption; caption-side: bottom; }
/* a linked image: the link must not add an inline line-box gap above the caption */
.sa-post__media figure > a { display: block; line-height: 0; }

/* Header: wordmark (left column) · nav at right-column edge · emblem (far right).
   Two-column grid so nav and right-column body text share a left edge. */
.sa-head { padding-top: 1.4rem; }
/* Flex row: title fills the left column (up to the mid gutter) so the nav starts
   exactly at the right-column edge; emblem pinned to the content right margin. */
.sa-head__row { display: flex; align-items: center; gap: 0; padding-bottom: 1.1rem; border-bottom: 1px solid var(--wp--preset--color--ink); }
.sa-head__title { flex: 0 1 auto; width: calc(50% + (var(--sa-gutter) / 2)); min-width: 0; margin: 0; }
.sa-head__title a { text-decoration: none; }
.sa-head__nav { flex: 1 1 auto; align-self: center; justify-content: flex-start; align-items: flex-start; }
.sa-head__nav ul.wp-block-navigation__container { gap: 0.1rem 0; margin-left: 0; margin-right: auto; align-self: flex-start; }
.sa-head__nav .wp-block-navigation-item__content { color: var(--wp--preset--color--ink); text-decoration: none; line-height: var(--sa-lh-text); }
.sa-head__nav .current-menu-item > .wp-block-navigation-item__content,
.sa-head__nav .current-menu-ancestor > .wp-block-navigation-item__content,
.sa-head__nav .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--accent-red); text-decoration: none; }
/* "Om akademin" drops its two sections in as plain indented lines — no box
   (designer 2026-09-19). They push the menu open instead of covering it. */
.sa-head__nav .wp-block-navigation-submenu__toggle {
	font: inherit; line-height: var(--sa-lh-text); color: var(--wp--preset--color--ink);
	background: none; border: 0; padding: 0 !important; cursor: pointer;
}
.sa-head__nav .wp-block-navigation-submenu__toggle:hover,
.sa-head__nav .wp-block-navigation-submenu__toggle[aria-expanded="true"],
.sa-head__nav .current-menu-ancestor > .wp-block-navigation-submenu__toggle { color: var(--wp--preset--color--accent-red); }
.sa-head__nav .wp-block-navigation__submenu-icon { display: none; }
.sa-head__nav .wp-block-navigation-item.has-child { position: relative; }
/* an overlay panel over the page, the way a select drops open: the three
   sections of Om akademin, lifted off the page with a soft shadow */
.sa-head__nav .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
	display: flex; flex-direction: column; gap: 0;
	position: absolute; top: calc(100% + 6px); left: -14px; z-index: 40;
	visibility: visible; opacity: 1; width: max-content; min-width: 0 !important; height: auto;
	overflow: visible; background: var(--wp--preset--color--peach);
	border: 1px solid rgba(26, 26, 26, 0.12) !important; border-radius: 2px;
	box-shadow: 0 6px 18px rgba(26, 26, 26, 0.16);
	padding: 6px 0; margin: 0; font-size: inherit; line-height: inherit;
}
.sa-head__nav .wp-block-navigation__submenu-container li > a { display: block; padding: 4px 18px 4px 14px !important; }
.sa-head__nav .wp-block-navigation__submenu-container li > a:hover { background: color-mix(in srgb, var(--wp--preset--color--ink) 6%, var(--wp--preset--color--peach)); }
.sa-head__nav .wp-block-navigation__submenu-container li { padding: 0 !important; }
.sa-head__nav .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content { white-space: nowrap; }
@media (max-width: 782px) {
	/* The phone menu has room for every item, so there is no drop-down: the
	   three Om sections are listed as ordinary lines and the "Om akademin"
	   button that would open them is hidden (it would repeat the first). */
	.sa-head__nav .is-menu-open .wp-block-navigation-submenu__toggle,
	.sa-head__nav .is-menu-open .wp-block-navigation__submenu-icon { display: none !important; }
	.sa-head__nav .is-menu-open .wp-block-navigation__submenu-container {
		display: flex !important; flex-direction: column; position: static; visibility: visible; opacity: 1;
		width: auto; height: auto; overflow: visible; padding: 0; margin: 0;
		background: none; border: 0 !important; box-shadow: none;
		padding-left: 0 !important;
	}
	.sa-head__nav .is-menu-open .wp-block-navigation__submenu-container li > a { padding: 0.35rem 0 !important; margin-left: 0; background: none; }
	/* flush with the other menu lines, since the group heading is hidden */
	.sa-head__nav .is-menu-open .wp-block-navigation-item.has-child { padding-left: 0; }
}
/* current page = colour only (core underlines the current item) */
.sa-head__nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container .current-menu-item > a { text-decoration: none; }
.sa-head__emblem { flex: 0 0 auto; margin-left: auto; align-self: center; display: block; line-height: 0; }
.sa-head__emblem img { width: clamp(84px, 11vw, var(--sa-head-emblem, 132px)); height: auto; display: block; }
/* Header, 2026-09-18 sketch: the menu in two columns (the same columns as the
   footer menu: the right-column edge, then one column + gutter on), a smaller
   emblem with one space above and below it, and the site name top-aligned
   with the menu, the pair centred on the emblem. */
.sa-head__nav .wp-block-navigation__responsive-container:not(.is-menu-open) ul.wp-block-navigation__container {
	display: grid; grid-template-rows: repeat(3, auto); grid-auto-flow: column;
	/* 173px columns + gutter = the footer's columns; narrower windows let
	   them shrink to their text and close the gap a little */
	grid-auto-columns: minmax(max-content, 173px); column-gap: clamp(24px, 3.2vw, var(--sa-gutter)); row-gap: 0.1rem;
}
/* The header's three parts (name, two-column menu, emblem) need about 850px
   to sit on one row; below that the phone header takes over. */
@media (min-width: 850px) {
	.sa-head { padding-top: var(--sa-space); }
	.sa-head__row { align-items: flex-start; padding-bottom: var(--sa-space); }
	.sa-head__emblem { align-self: flex-start; }
	/* the menu block centred on the emblem (the emblem sets the row height) */
	html body .sa-head__nav { align-self: center; margin-top: 0; }
	/* the name's capitals level with the menu's first line */
	html body .sa-head__title { margin-top: calc((var(--sa-head-emblem, 132px) - 72px - 0.2rem) / 2 + var(--sa-head-title-shift, -3px)); }
}
/* tablets: the name gives way so name, menu and emblem still fit one row */
@media (min-width: 850px) and (max-width: 1199px) {
	:root { --sa-head-emblem: 104px; }
	html body .sa-head__title { width: auto; flex: 1 1 auto; min-width: 0; }
	html body .sa-head__title, html body .sa-head__title a { font-size: clamp(20px, 2.6vw, 40px); }
	.sa-head__nav { margin-left: var(--sa-gutter); }
}
@media (max-width: 849px) {
	/* title and emblem share the top row (emblem right), nav below */
	.sa-head__row { flex-wrap: wrap; align-items: center; }
	/* basis 0 so it doesn't wrap the emblem onto its own line before shrinking */
	.sa-head__title { flex: 1 1 0; width: auto; min-width: 0; order: 1; }
	.sa-head__emblem { flex: 0 0 auto; order: 2; margin-left: auto; align-self: center; }
	.sa-head__emblem img { width: 120px; }
	.sa-head__nav { order: 3; flex: 1 0 100%; margin-top: 0.85rem; }
	/* mobile overlay menu: give the links room to be tapped */
	.sa-head__nav .wp-block-navigation__responsive-container.is-menu-open { padding: 1.5rem 24px; }
	.sa-head__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		font-size: var(--sa-fs-lead); line-height: 1.5; padding: 0.35rem 0;
	}
}

/* Start view: contained auto-rotating hero */
.sa-homehero { position: relative; width: 100%; aspect-ratio: 1251 / 768; overflow: hidden; background: var(--wp--preset--color--header-grey); }
.sa-homehero__slide { position: absolute; inset: 0; opacity: 0; }
.sa-homehero__img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* fade: refined crossfade */
.sa-homehero--fade .sa-homehero__slide { transition: opacity 1.4s ease-in-out; }
.sa-homehero--fade .sa-homehero__slide.is-active { opacity: 1; }
/* kenburns: only the two visible layers (active + prev) run the zoom — the
   animation is declared identically on both so it CONTINUES across the class
   change (no restart, no snap). Compositor hints avoid multi-layer flicker. */
.sa-homehero--kenburns .sa-homehero__slide { transition: opacity 1.8s ease-in-out; }
.sa-homehero--kenburns .sa-homehero__slide.is-active { opacity: 1; z-index: 2; }
.sa-homehero--kenburns .sa-homehero__slide.is-prev { opacity: 0; z-index: 1; }
.sa-homehero--kenburns .is-active .sa-homehero__img,
.sa-homehero--kenburns .is-prev .sa-homehero__img { animation: sa-kenburns 12s linear both; will-change: transform; backface-visibility: hidden; transform: translateZ(0); }
@keyframes sa-kenburns { from { transform: scale(1) translateZ(0); } to { transform: scale(1.13) translateZ(0); } }
/* wipe: incoming image clips in over the previous one */
.sa-homehero--wipe .sa-homehero__slide.is-prev { opacity: 1; z-index: 1; }
.sa-homehero--wipe .sa-homehero__slide.is-active { opacity: 1; z-index: 2; animation: sa-wipe 0.9s cubic-bezier(0.77, 0, 0.18, 1) both; }
@keyframes sa-wipe { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
/* viewtransition: instant swap, browser View Transitions API animates the hero */
.sa-homehero--viewtransition { view-transition-name: sahero; }
.sa-homehero--viewtransition .sa-homehero__slide.is-active { opacity: 1; }
::view-transition-old(sahero), ::view-transition-new(sahero) { animation-duration: 1.2s; animation-timing-function: ease-in-out; }
/* respect reduced-motion: no zoom/wipe/long fades, just show the active image */
@media (prefers-reduced-motion: reduce) {
	.sa-homehero__slide, .sa-homehero__img { transition: none !important; animation: none !important; transform: none !important; }
	.sa-homehero__slide.is-active { opacity: 1; }
	::view-transition-old(sahero), ::view-transition-new(sahero) { animation: none !important; }
}

/* Start view lead: Rubrik 1 tagline (left col) + Större intro (right col), both ink */
/* Title row, then the hero, then the text beneath it — the start page opens
   like every other page (designer 2026-09-21). It used to run hero first with
   the tagline and intro side by side underneath. */
.sa-home__lead { margin: 0; }
.sa-home__tagline { font-size: var(--sa-fs-rubrik1); font-weight: var(--sa-fw); line-height: var(--sa-lh-heading); color: var(--wp--preset--color--ink); margin: 0 0 var(--sa-space); }
.sa-home__intro { font-size: var(--sa-fs-lead); line-height: var(--sa-lh-text); color: var(--wp--preset--color--ink); margin: 0; }
/* The text under the hero runs to a measure rather than the full content
   width (designer 2026-09-23): 22px across 1175px is a long line to track.
   --sa-measure is the 90% the article bodies already use.
   Not on phones: there the line is already down to ~28 characters, so taking
   another 10% off only adds a ragged right margin under a full-width image.
   Same reasoning, and the same 783px cut-off, as the .sa-post__body measure
   further up — that one drops to max-width:none on phones too. */
@media (min-width: 783px) {
	.sa-home__intro, .sa-apris__intro { max-width: var(--sa-measure); }
}

/* Section cards (2026-09-18 sketch): five colour cards three across, the
   same shape as the Nyheter / Artiklar cards — the image is the top half of
   the box, the label (Rubrik 1) sits in the colour half. */
.sa-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sa-gutter); margin: var(--sa-space) 0 0; }
/* a pinned post leads the grid as an ordinary card */
.sa-cards > .sa-lcard { min-width: 0; }
/* image and colour block are each half a 2:3 box (width : half-height = 4 : 3);
   the colour block may grow if its text needs it, and the row grows with it */
.sa-card { display: flex; flex-direction: column; text-decoration: none; overflow: hidden; }
.sa-card__media { display: block; flex: 0 0 auto; aspect-ratio: var(--sa-card-half, 4 / 3); overflow: hidden; background: var(--wp--preset--color--header-grey); }
.sa-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sa-card__label { display: block; flex: 1 0 auto; aspect-ratio: var(--sa-card-half, 4 / 3); padding: var(--sa-card-pad, 45px); font-family: var(--wp--preset--font-family--heading); font-weight: var(--sa-fw); font-size: var(--sa-fs-rubrik1); line-height: var(--sa-lh-heading); color: #fff; overflow-wrap: break-word; }
/* The label sits straight under the image, so its top padding IS the gap from
   the picture to the words — and padding stops at the line box, not the
   capitals, which made it read 54px against the 45px unit (designer
   2026-09-21). The em-based correction scales with the clamped label size, so
   it stays right on phones where the type steps down to 27px. */
.sa-card__label { padding-top: calc(var(--sa-card-pad, 45px) - 0.265em); }
/* Card colour lives in --sa-c; on hover the colour plate drops to 50%
   (designer 2026-09-17) instead of underlining the label. */
.sa-card--red, .sa-lcard--red, .sa-feature { --sa-c: var(--sa-box-red); }
.sa-card--blue, .sa-lcard--blue { --sa-c: var(--sa-box-blue); }
.sa-card--green, .sa-lcard--green { --sa-c: var(--sa-box-green); }
.sa-card__label, .sa-lcard__block, .sa-feature__block { background-color: var(--sa-c); transition: background-color 0.2s ease; }
.sa-card:hover .sa-card__label, .sa-card:focus-visible .sa-card__label,
.sa-lcard__link:hover .sa-lcard__block, .sa-lcard__link:focus-visible .sa-lcard__block,
.sa-feature__link:hover .sa-feature__block, .sa-feature__link:focus-visible .sa-feature__block {
	background-color: color-mix(in srgb, var(--sa-c) 50%, var(--wp--preset--color--peach));
}
@media (prefers-reduced-motion: reduce) { .sa-card__label, .sa-lcard__block, .sa-feature__block { transition: none; } }
@media (max-width: 1199px) { .sa-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 782px) {
	/* phones: one card a row, a less tall box */
	:root { --sa-card-half: 3 / 2; --sa-card-shape: 3 / 4; --sa-card-pad: 28px; }
	.sa-cards { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
}

/* ---- One spacing unit (designer 2026-09-18, Nyheter as the template) ----
   Every marked distance is --sa-space (45px): header rule → the first image
   or the first heading's capitals, heading → the image or cards below it,
   image → the heading below it, and the footer's top and bottom.
   Headings are placed by their capitals, not their line box, so they are
   pulled up by the space above the caps (≈0.265em at 34px/1.25). */
.wp-site-blocks > main { margin-top: 0 !important; padding-top: var(--sa-space); }
 /* html body: these must outrank the components' own margin shorthands further down */
html body :is(.sa-om > .sa-om__text > .sa-om__h:first-child, .sa-hist__title, .sa-members__current > .sa-members__h,
.sa-pristagare__title, .wp-site-blocks > main > .sa-listing__title, .sa-listing__head .sa-listing__title,
.sa-post__title, .sa-members__sec:first-child > .sa-members__h,
.sa-apris > .sa-apris__title, .sa-home__tagline) { margin-top: -0.265em; }
/* the two columns start level (WordPress gives the second group a block gap) */
html body :is(.sa-hist__media, .sa-hist__text, .sa-om__media) { margin-top: 0; }
/* heading → what follows: one space below the heading's line box.
   This was 45px from the BASELINE (i.e. 37px from the line box), but Nyheter
   happened to get a plain 45px from the .sa-lgrid default and the designer
   picked that one as the template for every page (2026-09-21), so the other
   pages come up to match rather than the other way round. */
html body :is(.sa-listing__head + .sa-feature,
.wp-site-blocks > main > .sa-listing__title + .sa-lgrid, .sa-pristagare__hero) { margin-top: var(--sa-space); }
/* image → heading: 45px to the heading's capitals */
html body :is(.sa-apris__lead, .sa-home__lead) { margin-top: calc(var(--sa-space) - 9px); }

/* ---- Single post / article / award (2026, sketch p9/p11/p13/p14) ----
   Media column left, prose right. Body runs at Bröd (16px/1.5 = 24px line)
   with a 24px paragraph gap; title Rubrik 1 (35px); meta 48px below the title. */
.sa-post { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--sa-gutter); align-items: start; margin: 0; }
.sa-post__media { grid-column: 1; min-width: 0; }
.sa-post__text { grid-column: 2; min-width: 0; }
.sa-post__title { font-family: var(--wp--preset--font-family--heading); font-size: var(--sa-fs-rubrik1); font-weight: var(--sa-fw); line-height: var(--sa-lh-heading); color: var(--wp--preset--color--ink); margin: 0 0 1.3rem; }
.sa-post__meta { font-size: var(--sa-fs-body); line-height: var(--sa-lh-text); color: var(--wp--preset--color--ink); margin: 0; }
.sa-post__byline { margin-top: 0; }
.sa-post__meta + .sa-post__body { margin-top: 1.55rem; }
.sa-post__body { font-size: var(--sa-fs-body); line-height: var(--sa-lh-text); color: var(--wp--preset--color--ink); }
.sa-post__body > :first-child { margin-top: 0; }
.sa-post__body p { margin: 0 0 24px; }
/* Designer 2026-09-17: every subheading reads like the prize list — bold red
   at Bröd — and the shouted name under it becomes a Större line in ordinary
   case (sa_format_body() adds the classes and re-cases the names). */
.sa-post__body .sa-post__kicker {
	font-family: var(--wp--preset--font-family--heading); font-size: var(--sa-fs-body); font-weight: 700;
	color: var(--wp--preset--color--accent-red); line-height: var(--sa-lh-text); margin: 2.6rem 0 0;
}
.sa-post__body .sa-post__kicker + .sa-post__name { margin-top: 0.1rem; }
.sa-post__body .sa-post__name + p { margin-top: 0; }
.sa-post__body .sa-post__name {
	font-size: var(--sa-fs-lead); font-weight: var(--sa-fw); color: var(--wp--preset--color--ink);
	line-height: var(--sa-lh-text); margin: 2.6rem 0 0;
}
/* old content spaces its sections with 100px spacer blocks — the headings do
   that job now, so the paragraph rhythm stays even */
.sa-post__body .wp-block-spacer { height: 0 !important; }
/* the sponsor thank-you: red text under a rule instead of a coloured box */
.sa-post__body p.has-background {
	background: none !important; color: var(--wp--preset--color--accent-red) !important;
	padding: 0.85rem 0 0; margin-top: 2.6rem; font-size: var(--sa-fs-body) !important;
	border-top: 1px solid var(--wp--preset--color--accent-red);
}
.sa-post__body p.has-background strong { color: inherit; font-weight: 700; }
.sa-post__body h2, .sa-post__body h3 { font-family: var(--wp--preset--font-family--heading); font-weight: 400; color: var(--wp--preset--color--ink); line-height: 1.2; margin: 1.8rem 0 0.8rem; }
.sa-post__body h2 { font-size: var(--sa-fs-rubrik3); }
.sa-post__body h3 { font-size: var(--sa-fs-body); }
.sa-post__body a { color: var(--wp--preset--color--ink); }
.sa-post__body a:hover { color: var(--wp--preset--color--accent-red); }
.sa-post__links a { color: var(--wp--preset--color--ink); text-decoration: none; border-bottom: 1px solid currentColor; margin-right: 1rem; }
.sa-post__links a:hover { color: var(--wp--preset--color--accent-red); }
/* media column: every picture stacked at the full column width (2026-09-22) */
.sa-post__lead { margin: 0; }
/* .sa-post__media prefix: must outrank the figure margin reset in the media
   column. Was keyed to .sa-post__lead--second, which only ever matched the
   second picture; as a sibling rule it spaces every one of them. */
.sa-post__media .sa-post__lead + .sa-post__lead { margin-top: var(--sa-gutter); }
/* Images fill the column only as far as their source allows (never upscaled):
   sa_split_media() marks attachments .sa-fill and caps them at their original
   width; anything else keeps its natural size. */
.sa-post__lead img { display: block; max-width: 100%; height: auto; }
.sa-post__lead img.sa-fill { width: 100%; }
.sa-post__media .wp-caption, .sa-post__media figure { width: auto !important; max-width: 100%; margin: 0; float: none; }
.sa-post__media .sa-slider { max-width: none; margin: 0; }
.sa-post__back { margin: var(--sa-gutter) 0 0; font-size: var(--sa-fs-body); line-height: var(--sa-lh-text); }
.sa-post__back a { color: var(--wp--preset--color--ink); text-decoration: none; }
.sa-post__back a:hover { color: var(--wp--preset--color--accent-red); text-decoration: underline; }
@media (max-width: 782px) {
	.sa-post { grid-template-columns: 1fr; row-gap: 1.75rem; }
	.sa-post__media, .sa-post__text { grid-column: 1; }
}

/* ---- Homepage hero ---- */
.sa-hero { position: relative; min-height: 72vh; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.sa-hero__bg { position: absolute; inset: 0; z-index: 0; }
.sa-hero__slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.2s ease; }
.sa-hero__slide.is-active { opacity: 1; }
.sa-hero::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.45); z-index: 1; }
.sa-hero__inner { position: relative; z-index: 2; text-align: center; color: #fff; padding: 2rem; }
.sa-hero__title { font-family: var(--wp--preset--font-family--heading); font-weight: 900; text-transform: uppercase; color: #fff; font-size: clamp(2.4rem, 7vw, 5rem); line-height: 1.02; letter-spacing: 0.01em; margin: 0; }
.sa-hero__word { color: #fff; text-transform: none; display: inline-block; }
@keyframes sa-bounce-in {
	0%   { opacity: 0; transform: translateY(0.45em) scale(0.8); }
	55%  { opacity: 1; transform: translateY(-0.06em) scale(1.05); }
	100% { opacity: 1; transform: translateY(0) scale(1); }
}
.sa-hero__word.sa-anim { animation: sa-bounce-in 0.6s cubic-bezier(0.18, 0.7, 0.3, 1.3) both; }
.sa-hero__sub { font-family: var(--wp--preset--font-family--body); font-size: 18px; margin: 1.1rem 0 0; color: #fff; }
.sa-hero__cta { margin: 1.5rem 0 0; }
.sa-hero__btn { display: inline-block; background: var(--wp--preset--color--brand-green); color: #fff; font-family: var(--wp--preset--font-family--heading); text-transform: uppercase; font-weight: 700; font-size: 13px; letter-spacing: 1px; padding: 0.7rem 1.5rem; border-radius: 2px; text-decoration: none; }
.sa-hero__btn:hover { background: #3f7438; color: #fff; }

/* ---- Homepage section boxes ---- */
.sa-sections { display: grid; grid-template-columns: 1fr; gap: 1.75rem; margin: 2.5rem auto; }
@media (min-width: 600px) { .sa-sections { grid-template-columns: repeat(2, 1fr); } }
.sa-section { display: block; text-decoration: none; }
.sa-section__img { display: block; aspect-ratio: 4 / 3; background-size: cover; background-position: center; background-color: var(--wp--preset--color--header-grey); }
.sa-section__label { display: block; text-align: center; margin-top: 0.75rem; font-family: var(--wp--preset--font-family--heading); text-transform: uppercase; font-weight: 800; font-size: 28px; line-height: 1.1; letter-spacing: 0.02em; color: var(--wp--preset--color--brand-green); }
.sa-section:hover .sa-section__label { text-decoration: underline; }

/* ---- About / Om page ---- */
/* Adamson archive intro (reddish box + portrait image) */
/* ---- Adamson-priset page (2026, sketch p7) ----
   Full-width hero (1250x768pt ≈ 1.63:1), then title left / Större intro right,
   cap-aligned — the same shape as the start page lead. */
.sa-apris { margin-top: 0; }
.sa-apris__hero { width: 100%; aspect-ratio: 1251 / 768; overflow: hidden; background: var(--wp--preset--color--header-grey); }
.sa-apris__hero img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; display: block; }
/* the rotating hero fills the frame on this page too */
.sa-apris__hero .sa-homehero { width: 100%; height: 100%; aspect-ratio: auto; }
/* Title above the hero, text full width beneath it (designer 2026-09-21). */
.sa-apris__lead { margin-top: 0; }
.sa-apris__title { font-family: var(--wp--preset--font-family--heading); font-size: var(--sa-fs-rubrik1); font-weight: var(--sa-fw); line-height: var(--sa-lh-heading); color: var(--wp--preset--color--ink); margin: 0 0 var(--sa-space); }
.sa-apris__intro { min-width: 0; }
.sa-apris__intro p { font-size: var(--sa-fs-lead); line-height: var(--sa-lh-text); color: var(--wp--preset--color--ink); margin: 0 0 2.1rem; }
.sa-apris__intro p:last-child { margin-bottom: 0; }

/* ---- Om page (2026, sketch p3): text column + media column ----
   Left column runs at Större (22px/1.5); headings Rubrik 1 (35px).
   Right column = full-width media stacked with one gutter between. */
.sa-om { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--sa-gutter); align-items: start; margin: 2.25rem 0 0; }
.sa-om__text { grid-column: 1; min-width: 0; }
.sa-om__media { grid-column: 2; min-width: 0; }
.sa-om__h { font-family: var(--wp--preset--font-family--heading); font-size: var(--sa-fs-rubrik1); font-weight: var(--sa-fw); line-height: var(--sa-lh-heading); color: var(--wp--preset--color--ink); margin: 0 0 1.65rem; }
.sa-om__h--sub { margin-top: 2.9rem; }
.sa-om__lead, .sa-om__body p { font-size: var(--sa-fs-lead); line-height: var(--sa-lh-text); color: var(--wp--preset--color--ink); margin: 0 0 2.1rem; }
.sa-om__body > :last-child { margin-bottom: 0; }
.sa-om__media > * + * { margin-top: var(--sa-gutter); }
:where(.sa-om__fig) { margin: 0; } /* zero specificity: the column gap above wins */
.sa-om__fig img, .sa-om__fig video { display: block; width: 100%; height: auto; }
.sa-om__fig video { background: #000; }
/* The 1967 film as a box in the media column (designer 2026-09-21, moved back
   to the right-hand column 2026-09-23): the film on top, its caption on red
   beneath at Större — 22px on the same 1.5 leading as the body text, in white.
   The cap correction on the padding-top is the same one the cards use, so the
   words sit one space below the film rather than one space below their line
   box. */
.sa-om__film { margin: 0; }
.sa-om__film video { display: block; width: 100%; height: auto; background: #000; }
.sa-om__film figcaption {
	background: var(--sa-box-red); color: #fff;
	font-size: var(--sa-fs-lead); line-height: var(--sa-lh-text);
	padding: calc(var(--sa-card-pad, 45px) - 0.265em) var(--sa-card-pad, 45px) var(--sa-card-pad, 45px);
	margin: 0;
}
@media (max-width: 782px) {
	.sa-om { grid-template-columns: 1fr; row-gap: 2rem; }
	.sa-om__text, .sa-om__media { grid-column: 1; }
}

/* One Om page (designer 2026-09-19/20): the two columns run on — Om akademin
   and then the Akademins historia article down the text column, every picture
   down the media column — so the article moves up into what was empty space.
   Ledamöter follows below the whole thing, separated by a rule. */
html body .sa-om ~ .sa-members { margin-top: calc(2 * var(--sa-space)); padding-top: var(--sa-space); border-top: 1px solid var(--wp--preset--color--ink); }
.sa-om__text > .sa-om__sec { margin-top: calc(2 * var(--sa-space)); }
/* The media column is nothing but pictures, so every gap in it is the same
   (designer 2026-09-23) — the Akademins historia pictures used to start after a
   double space, which read as a break in a column that has no sections. */
.sa-om__media > .sa-om__sec { margin-top: var(--sa-gutter); }
.sa-om__sec > .sa-om__h { margin-top: 0; }
/* phones: the article keeps its own pictures right under it */
@media (max-width: 782px) { .sa-om__text .sa-om__sec > .sa-om__sec { margin-top: var(--sa-space); } }

/* ---- Akademins historia (2026, sketch p4): signed article left, captioned
   media right. Body runs at Bröd (16px); the article itself is untouched. ---- */
.sa-hist { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--sa-gutter); align-items: start; margin: 2.25rem 0 0; }
.sa-hist__text { grid-column: 1; min-width: 0; }
.sa-hist__media { grid-column: 2; min-width: 0; }
.sa-hist__title { font-family: var(--wp--preset--font-family--heading); font-size: var(--sa-fs-rubrik1); font-weight: var(--sa-fw); line-height: var(--sa-lh-heading); color: var(--wp--preset--color--ink); margin: 0 0 1rem; }
.sa-hist__content { font-size: var(--sa-fs-body); line-height: var(--sa-lh-text); color: var(--wp--preset--color--ink); }
.sa-hist__content p { margin: 0 0 1.5rem; }
/* the byline (leading italic line) sits directly under the headline */
.sa-hist__content > p:first-child { margin-bottom: 1.9rem; }
.sa-hist__content > p:first-child em { font-style: normal; }
.sa-hist__media > * + * { margin-top: var(--sa-gutter); }
@media (max-width: 782px) {
	.sa-hist { grid-template-columns: 1fr; row-gap: 2rem; }
	.sa-hist__text, .sa-hist__media { grid-column: 1; }
}

/* Links between the three Om pages (designer 2026-09-18): Rubrik 1 size at
   the foot of the text column, one space below the text. */
.sa-om-links { margin-top: var(--sa-space); }
.sa-om-links ul { list-style: none; margin: 0; padding: 0; }
.sa-om-links li { margin: 0; }
.sa-om-links a {
	font-family: var(--wp--preset--font-family--heading); font-size: var(--sa-fs-rubrik1);
	font-weight: var(--sa-fw); line-height: var(--sa-lh-heading);
	color: var(--wp--preset--color--ink); text-decoration: none;
}
.sa-om-links a:hover { color: var(--wp--preset--color--accent-red); }

/* ---- Members accordion ---- */
/* ---- Ledamöter (2026, sketch p5/p6) ----
   p5: full-width grid of six 171pt columns with the 45pt gutter; the portrait
   circle is 149/171 of the column and the rule spans the full column.
   p6: the historical lists in the text column beside the group photos. */
.sa-members { margin: 2.25rem 0 0; }
.sa-members__h { font-family: var(--wp--preset--font-family--heading); font-size: var(--sa-fs-rubrik1); font-weight: var(--sa-fw); line-height: var(--sa-lh-heading); color: var(--wp--preset--color--ink); margin: 0 0 1.65rem; }
.sa-members__cols { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--sa-gutter); align-items: start; margin-top: calc(2 * var(--sa-space)); padding-top: var(--sa-space); border-top: 1px solid var(--wp--preset--color--ink); }
.sa-members__text { grid-column: 1; min-width: 0; }
.sa-members__media { grid-column: 2; min-width: 0; }
.sa-members__media > * + * { margin-top: var(--sa-gutter); }
.sa-members__sec + .sa-members__sec { margin-top: 3.5rem; }
.sa-team { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--sa-gutter); }
.sa-team__card { display: flex; flex-direction: column; min-width: 0; }
/* portrait circle is 149/171 of the column width; the rule below spans it all */
.sa-team__photo { display: block; width: 87.2%; aspect-ratio: 1 / 1; border-radius: 50%; background-size: cover; background-position: center; background-color: var(--wp--preset--color--header-grey); transition: filter 0.2s ease; }
/* placeholder until the remaining portraits arrive — deliberately neutral */
.sa-team__photo--initials { display: flex; align-items: center; justify-content: center; font-family: var(--wp--preset--font-family--heading); font-weight: 400; font-size: 30px; letter-spacing: 0.02em; color: #8a7f7b; background-color: #f3ded6; }
/* long Swedish compounds (marknadskonsulent, reklamkonsulent) must be able to
   break, or they push the whole page wider than a narrow phone viewport */
.sa-team__name, .sa-team__role, .sa-team__city { overflow-wrap: break-word; }
.sa-team__name { display: block; font-size: var(--sa-fs-body); line-height: var(--sa-lh-text); color: var(--wp--preset--color--ink); margin-top: 1.4rem; padding-bottom: 0.7rem; border-bottom: 1px solid var(--wp--preset--color--ink); }
.sa-team__role { display: block; font-size: var(--sa-fs-body); line-height: var(--sa-lh-text); color: var(--wp--preset--color--ink); margin-top: 0.8rem; }
.sa-team__city { display: block; font-size: var(--sa-fs-body); line-height: var(--sa-lh-text); color: var(--wp--preset--color--ink); }
/* Image overlay (member portraits, and article images an editor marked with
   the class "zoom"): the page's own colour, not a black box. */
.sa-lightbox { position: fixed; inset: 0; background: rgba(254, 237, 230, 0.96); z-index: 9999; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 0.9rem; padding: 3rem 24px; cursor: zoom-out; }
.sa-lightbox.is-open { display: flex; }
.sa-lightbox img { max-width: min(1175px, 92vw); max-height: 82vh; width: auto; height: auto; display: block; }
.sa-lightbox__cap { font-size: var(--sa-fs-caption); line-height: var(--sa-lh-caption); color: var(--sa-caption-color); max-width: min(1175px, 92vw); margin: 0; }
.sa-mintro { font-size: var(--sa-fs-body); line-height: var(--sa-lh-text); color: var(--wp--preset--color--ink); margin: 0 0 1.4rem; }
:where(.sa-mfig) { margin: 0; }
.sa-mfig img { width: 100%; height: auto; display: block; }
/* lists run at Bröd with the wider 33px row rhythm */
.sa-mlist { list-style: none; margin: 0; padding: 0; counter-reset: sa-m; }
.sa-mlist li { font-size: var(--sa-fs-body); line-height: var(--sa-lh-text); color: var(--wp--preset--color--ink); margin: 0 0 9px; }
.sa-mlist--num li { counter-increment: sa-m; }
.sa-mlist--num li::before { content: counter(sa-m) ". "; }
.sa-mlist__role { color: var(--wp--preset--color--ink); }
@media (max-width: 1100px) { .sa-team { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 782px) {
	.sa-team { grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
	.sa-members__cols { grid-template-columns: 1fr; row-gap: 2.5rem; }
	.sa-members__text, .sa-members__media { grid-column: 1; }
}
@media (max-width: 480px) { .sa-team { grid-template-columns: repeat(2, 1fr); } }

/* ---- Image set (Om / Akademins historia): stacked, captioned ----
   Designer 2026-09-16: more images down the column instead of slider dots. */
:where(.sa-stack__fig) { margin: 0; }
.sa-stack__fig + .sa-stack__fig { margin-top: var(--sa-gutter); }
.sa-stack__fig img { display: block; width: 100%; height: auto; }

/* ---- Image slider ---- */
.sa-slider { position: relative; max-width: 720px; margin: 1.75rem 0; overflow: hidden; }
.sa-slider__track { display: flex; transition: transform 0.4s ease; }
.sa-slide { min-width: 100%; margin: 0; }
.sa-slide img { width: 100%; height: auto; display: block; }
.sa-slide figcaption { font-family: var(--wp--preset--font-family--body); font-size: 13px; color: #777; margin-top: 0.4rem; }
.sa-slider__nav { position: absolute; top: 42%; transform: translateY(-50%); width: 40px; height: 44px; border: none; background: rgba(0,0,0,0.45); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
.sa-slider__prev { left: 0; }
.sa-slider__next { right: 0; }
.sa-slider__nav:hover { background: rgba(0,0,0,0.72); }
.sa-slider__dots { display: flex; gap: 6px; justify-content: center; margin-top: 0.5rem; }
.sa-slider__dot { width: 10px; height: 10px; border-radius: 50%; border: none; background: #ccc; cursor: pointer; padding: 0; }
.sa-slider__dot.is-active { background: var(--wp--preset--color--brand-green); }

/* ---- Nyheter (news list) ---- */
/* ---- Red-dot cursor (2026) ----
   Replaces the arrow with a red dot on fine pointers / wide viewports. The
   native cursor is only hidden once the script has added .sa-has-cursor, and
   text fields keep their own cursor so typing still feels normal. */
.sa-cursor {
	position: fixed; top: 0; left: 0; width: 20px; height: 20px;
	pointer-events: none; z-index: 9999;
	transform: translate3d(-50%, -50%, 0);
	will-change: transform; backface-visibility: hidden;
	/* must never transition: this element is repositioned every frame, and a
	   global "transition: all" would animate each move and smear the layer */
	transition: none !important;
}
/* The inner dot carries every transition. The outer element is repositioned
   every frame, so transitioning anything on it (especially layout-affecting
   width/height) re-rasterises a moving layer — that smeared in Firefox. */
.sa-cursor__dot {
	display: block; width: 100%; height: 100%;
	border-radius: 50%; background: var(--wp--preset--color--accent-red);
	opacity: 0; transform: scale(1); transform-origin: 50% 50%;
	transition: opacity 0.18s ease, transform 0.18s ease;
	backface-visibility: hidden;
}
.sa-cursor.is-visible .sa-cursor__dot { opacity: 1; }
/* designer 2026-09-17: the dot shrinks over clickable things (was: grew) */
.sa-cursor.is-active .sa-cursor__dot { transform: scale(0.5); }
.sa-cursor.is-field .sa-cursor__dot { opacity: 0; }
html.sa-has-cursor,
html.sa-has-cursor body,
html.sa-has-cursor a,
html.sa-has-cursor button,
html.sa-has-cursor summary,
html.sa-has-cursor label,
html.sa-has-cursor [role="button"] { cursor: none; }
html.sa-has-cursor input,
html.sa-has-cursor textarea,
html.sa-has-cursor select,
html.sa-has-cursor [contenteditable="true"] { cursor: auto; }
@media (prefers-reduced-motion: reduce) { .sa-cursor__dot { transition: none; } }

.sa-listing__title { font-size: var(--sa-fs-rubrik1); font-weight: var(--sa-fw); line-height: var(--sa-lh-heading); color: var(--wp--preset--color--ink); margin: 2.25rem 0 0; }

/* ---- Listing cards (2026, sketch p10/p12) ----
   Three columns of 386.7pt on the 45pt gutter; each card is an image on top
   (386.7x302) over a solid colour block with 45px padding carrying the date,
   a Rubrik 3 title and the excerpt in white. Nyheter leads with a full-width
   feature: image one half, red block the other. */

/* Category filter (kept from the earlier brief; plain text, like the archive) */
/* Title left, filter in the right column on the title row, as on the
   prize-winner page. */
.sa-listing__head { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--sa-gutter); align-items: baseline; margin: 2.25rem 0 0; }
.sa-listing__head .sa-listing__title { grid-column: 1; margin: 0; }
.sa-news-filter { grid-column: 2; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.5rem; margin: 0; }
@media (max-width: 782px) {
	.sa-listing__head { grid-template-columns: 1fr; row-gap: 0.75rem; }
	.sa-news-filter { grid-column: 1; }
}
.sa-news-filter__btn { font-family: var(--wp--preset--font-family--body); font-size: var(--sa-fs-body); line-height: var(--sa-lh-text); color: var(--wp--preset--color--ink); background: none; border: 0; padding: 0; cursor: pointer; }
.sa-news-filter__btn:hover { color: var(--wp--preset--color--accent-red); }
.sa-news-filter__btn.is-active { color: var(--wp--preset--color--accent-red); }
.sa-news-filter__btn:focus-visible { outline: 2px solid var(--wp--preset--color--accent-red); outline-offset: 2px; }

.sa-lgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sa-gutter); margin-top: var(--sa-gutter); }
.sa-lcard { min-width: 0; }
/* Every card the same shape (designer 2026-09-18): the image is the top half
   of the box, the colour block the rest; without an image the colour block
   fills the box. Excerpts are trimmed to whole lines by cards.js. */
.sa-lcard__link { display: flex; flex-direction: column; height: 100%; text-decoration: none; }
.sa-lcard__media { display: block; width: 100%; flex: 0 0 auto; aspect-ratio: var(--sa-card-half, 4 / 3); overflow: hidden; background: var(--wp--preset--color--header-grey); }
.sa-lcard__img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; display: block; }
.sa-lcard__block { flex: 1 0 auto; aspect-ratio: var(--sa-card-half, 4 / 3); display: flex; flex-direction: column; padding: var(--sa-card-pad, 45px); color: #fff; }
/* no picture: the colour block is the whole box (two halves) */
.sa-lcard--noimg .sa-lcard__block { aspect-ratio: auto; min-height: 0; }
.sa-lcard--noimg .sa-lcard__link { aspect-ratio: var(--sa-card-shape, 2 / 3); height: auto; min-height: 100%; }
.sa-lcard__date { display: block; font-size: var(--sa-fs-card); line-height: var(--sa-lh-card); color: #fff; }
.sa-lcard__title, .sa-lcard__excerpt, .sa-feature__title, .sa-feature__excerpt { overflow-wrap: break-word; }
.sa-lcard__title { display: block; font-family: var(--wp--preset--font-family--heading); font-size: var(--sa-fs-card-title); line-height: 1.25; color: #fff; margin-top: 12px; }
.sa-lcard__excerpt { flex: 1 1 0; min-height: 0; contain: size; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; font-size: var(--sa-fs-card); line-height: var(--sa-lh-card); color: #fff; margin-top: 12px; }
/* Nyheter feature — image one half, colour block the other */
.sa-feature { margin-top: var(--sa-gutter); }
.sa-feature__link { display: grid; grid-template-columns: 1fr 1fr; text-decoration: none; }
.sa-feature__media { display: block; overflow: hidden; background: var(--wp--preset--color--header-grey); aspect-ratio: 602 / 574; }
.sa-feature__img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; display: block; }
.sa-feature__block { display: block; color: #fff; padding: 45px; }
.sa-feature__date { display: block; font-size: var(--sa-fs-body); line-height: var(--sa-lh-text); color: #fff; }
.sa-feature__title { display: block; font-family: var(--wp--preset--font-family--heading); font-size: var(--sa-fs-rubrik3); line-height: 1.25; color: #fff; margin-top: 22px; }
.sa-feature__excerpt { display: block; font-size: var(--sa-fs-body); line-height: var(--sa-lh-text); color: #fff; margin-top: 24px; }
/* no featured image — the colour block takes the whole card */
.sa-feature--noimg .sa-feature__link { grid-template-columns: 1fr; }

/* below 1200px the cards would get too narrow for their titles: two across */
@media (max-width: 1199px) { .sa-lgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 782px) {
	.sa-lgrid { grid-template-columns: 1fr; gap: 2rem; }
	.sa-feature__link { grid-template-columns: 1fr; }
	.sa-feature__media { aspect-ratio: 16 / 10; }
	.sa-feature__block { padding: 28px; }
	/* one card a row: nothing to line up with, so show up to three lines and
	   let the card grow rather than fill a fixed box (cards.js skips these).
	   NOT for the text-only cards: those keep the fixed 3/4 box, so three
	   lines left most of the colour block empty and the text looked truncated
	   rather than designed (designer 2026-09-24). They go on filling their box
	   as on desktop, and contain:size brings cards.js back to trim them to
	   whole lines. */
	.sa-lcard:not(.sa-lcard--noimg) .sa-lcard__excerpt { flex: none; contain: none; -webkit-line-clamp: 3; max-height: calc(3 * var(--sa-lh-card) * 1em); }
}

/* ---- Single post / article ---- */
.sa-single .sa-backlink { font-family: var(--wp--preset--font-family--heading); text-transform: uppercase; font-size: 13px; letter-spacing: 0.04em; margin: 0 0 1.25rem; }
.sa-single .sa-backlink a { color: var(--wp--preset--color--brand-green); text-decoration: none; }
.sa-single .sa-backlink a:hover { text-decoration: underline; }
.sa-single .sa-featured { margin: 0 0 1.75rem; }
.sa-single .sa-featured__img { width: 100%; max-height: 480px; object-fit: cover; object-position: center top; display: block; }
.sa-single .wp-block-post-title { font-family: var(--wp--preset--font-family--heading); font-weight: 800; line-height: 1.12; font-size: clamp(28px, 4vw, 42px); margin: 0 0 0.6rem; }
.sa-single__meta { align-items: center; gap: 0.4rem 1rem; margin: 0 0 1.75rem; font-family: var(--wp--preset--font-family--heading); text-transform: uppercase; font-size: 12px; letter-spacing: 0.04em; color: var(--wp--preset--color--brand-green); }
.sa-single__meta .wp-block-post-date, .sa-single__meta .wp-block-post-terms { margin: 0; }
.sa-single__meta a { color: var(--wp--preset--color--brand-green); text-decoration: none; }
.sa-single__meta a:hover { text-decoration: underline; }
.sa-single__content { font-family: var(--wp--preset--font-family--body); font-size: 18px; line-height: 1.75; color: #222; }
.sa-single__content > * { margin-top: 0; margin-bottom: 1.3rem; }
.sa-single__content p:empty { display: none; }
.sa-single__content a { color: var(--wp--preset--color--brand-green); }
.sa-single__content img { max-width: 100%; height: auto; }
.sa-single__content .alignright { float: right; margin: 0.3rem 0 1rem 1.75rem; max-width: 48%; }
.sa-single__content .alignleft { float: left; margin: 0.3rem 1.75rem 1rem 0; max-width: 48%; }
.sa-single__content .aligncenter { display: block; margin-left: auto; margin-right: auto; }
.sa-single__content .wp-caption { max-width: 100%; height: auto; }
.sa-single__content .wp-caption-text, .sa-single__content figcaption { font-family: var(--wp--preset--font-family--heading); font-size: 13px; color: #666; margin-top: 0.4rem; }
.sa-single__content center { display: block; margin: 1.5rem 0; }
/* Articles get a ruled left margin (per design brief) */
.sa-single-article .sa-single__content { border-left: 3px solid var(--wp--preset--color--brand-green); padding-left: 1.75rem; }
/* Bottom "back to listing" button */
.sa-single .sa-backlink--button { margin-top: 3.5rem; }
.sa-single .sa-backlink--button a { display: inline-block; background: var(--wp--preset--color--brand-green); color: #fff; padding: 0.7rem 1.4rem; border-radius: 4px; text-decoration: none; font-size: 14px; }
.sa-single .sa-backlink--button a:hover { background: #40733a; color: #fff; text-decoration: none; }

/* Social share row (single posts) */
.sa-share { margin: 2.5rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--wp--preset--color--header-grey); display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.sa-share__label { font-family: var(--wp--preset--font-family--heading); text-transform: uppercase; letter-spacing: 0.04em; font-size: 13px; color: #666; }
.sa-share__row { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.sa-share__btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #efefef; color: #333; border: 0; cursor: pointer; text-decoration: none; position: relative; transition: background 0.15s, color 0.15s; }
.sa-share__btn:hover { background: var(--wp--preset--color--brand-green); color: #fff; }
.sa-share__btn svg { display: block; }
.sa-share__btn--copy.is-copied { background: var(--wp--preset--color--brand-green); color: #fff; }
.sa-share__btn--copy.is-copied::after { content: "Kopierad!"; position: absolute; bottom: 118%; left: 50%; transform: translateX(-50%); background: #222; color: #fff; font-family: var(--wp--preset--font-family--body); font-size: 12px; padding: 3px 8px; border-radius: 3px; white-space: nowrap; pointer-events: none; }

/* Gallery ([gallery] shortcode): stacked, captioned figures; click to enlarge.
   On singles the figures are moved into the media column individually. */
.sa-gal { margin: 1.75rem 0; }
:where(.sa-gal__fig) { margin: 0; }
.sa-gal__fig + .sa-gal__fig { margin-top: var(--sa-gutter); }
.sa-gal__img { display: block; max-width: 100%; height: auto; }
.sa-gal__img.sa-fill { width: 100%; }
@media (max-width: 600px) {
	.sa-single__content { font-size: 16px; }
	.sa-single__content .alignright, .sa-single__content .alignleft { float: none; margin: 0.5rem 0 1rem; max-width: 100%; }
	.sa-single-article .sa-single__content { padding-left: 1rem; }
}

/* ---- Adamson-pristagare (2026, pristagarlistor.pdf) ----
   Title left with the filter row on its baseline in the right column; a
   full-width statuette photo (1251x696pt); then the years in three columns
   on the 45px gutter with hairline rules centred in the gutters. Category
   labels bold red, names ink; 30px row rhythm. */
.sa-pristagare { margin: 2.25rem 0 0; }
.sa-pristagare__head { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--sa-gutter); align-items: baseline; }
.sa-pristagare__title { grid-column: 1; font-family: var(--wp--preset--font-family--heading); font-size: var(--sa-fs-rubrik1); font-weight: var(--sa-fw); line-height: var(--sa-lh-heading); color: var(--wp--preset--color--ink); margin: 0; }
.sa-pristagare__tools { grid-column: 2; min-width: 0; }
.sa-pristagare__hero { margin: var(--sa-pris-hero-gap, 1.64rem) 0 0; aspect-ratio: 1251 / 696; overflow: hidden; background: var(--wp--preset--color--header-grey); }
.sa-pristagare__hero img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 59.7%; } /* the sketch's crop of the portrait original */

/* Filter row — plain text, no boxes */
.sa-filters { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 2rem; margin: 0; }
.sa-filters input.sa-f,
.sa-filters select.sa-f {
	font-family: var(--wp--preset--font-family--body); font-size: var(--sa-fs-body);
	line-height: var(--sa-lh-text); color: var(--wp--preset--color--ink);
	padding: 0; margin: 0; border: 0; border-radius: 0; outline: none;
	background: transparent; background-image: none; box-shadow: none;
	-webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer;
}
/* a select is as wide as its longest option; size it to the visible label */
.sa-filters select.sa-f { field-sizing: content; }
.sa-filters input.sa-f-name { flex: 0 0 182px; min-width: 0; cursor: text; }
.sa-filters .sa-f-name::placeholder { color: var(--wp--preset--color--ink); opacity: 1; }
.sa-filters input[type="search"]::-webkit-search-decoration,
.sa-filters input[type="search"]::-webkit-search-cancel-button,
.sa-filters input[type="search"]::-webkit-search-results-button { -webkit-appearance: none; display: none; }
.sa-filters select.sa-f:hover, .sa-f-clear:hover { color: var(--wp--preset--color--accent-red); }
.sa-filters .sa-f:focus-visible, .sa-f-clear:focus-visible { outline: 2px solid var(--wp--preset--color--accent-red); outline-offset: 2px; }
.sa-f-clear {
	font-family: var(--wp--preset--font-family--body); font-size: var(--sa-fs-body);
	line-height: var(--sa-lh-text); color: var(--wp--preset--color--ink);
	background: none; border: 0; padding: 0; cursor: pointer;
}
.sa-f-count { font-size: var(--sa-fs-body); line-height: var(--sa-lh-text); color: var(--wp--preset--color--ink); margin: 0.25rem 0 0; }
.sa-f-count:empty { display: none; }

/* ---- Year grid ---- */
.sa-archive { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--sa-gutter); row-gap: var(--sa-pris-row-gap, 3.41rem); margin-top: var(--sa-pris-grid-gap, 2.325rem); }
/* hairlines centred in the two gutters, from the first year's cap height down */
.sa-archive::before, .sa-archive::after {
	content: ""; position: absolute; top: var(--sa-pris-rule-top, 0.34rem); bottom: 0; width: 1px;
	background: var(--wp--preset--color--ink); pointer-events: none;
}
.sa-archive::before { left: calc((100% - 2 * var(--sa-gutter)) / 3 + var(--sa-gutter) / 2); }
.sa-archive::after { left: calc(2 * (100% - 2 * var(--sa-gutter)) / 3 + 1.5 * var(--sa-gutter)); }
/* fewer visible years than columns (filtering): drop the rules with nothing beside them */
.sa-archive.is-cols-1::before, .sa-archive.is-cols-1::after, .sa-archive.is-cols-2::after { display: none; }
.sa-archive__year { min-width: 0; margin: 0; }
.sa-archive__yr {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: var(--sa-fw); color: var(--wp--preset--color--ink);
	font-size: var(--sa-fs-lead); line-height: var(--sa-lh-text);
	margin: 0 0 var(--sa-pris-yr-gap, 0.19rem);
}
.sa-archive__list { list-style: none; margin: 0; padding: 0; }
.sa-archive__item { font-size: var(--sa-fs-body); line-height: var(--sa-lh-text); margin: 0 0 6px; }
.sa-archive__cat { font-weight: 700; color: var(--wp--preset--color--accent-red); }
.sa-archive__name { color: var(--wp--preset--color--ink); text-decoration: none; }
.sa-archive__name:hover { color: var(--wp--preset--color--accent-red); }
@media (max-width: 1000px) {
	.sa-archive { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sa-archive::after { display: none; }
	.sa-archive::before { left: calc((100% - var(--sa-gutter)) / 2 + var(--sa-gutter) / 2); }
}
@media (max-width: 782px) {
	.sa-pristagare__head { grid-template-columns: 1fr; row-gap: 0.75rem; }
	.sa-pristagare__title, .sa-pristagare__tools { grid-column: 1; }
	.sa-filters { gap: 0.5rem 1.5rem; }
	.sa-filters input.sa-f-name { flex: 1 1 100%; }
	.sa-pristagare__hero { margin-top: 1.5rem; }
	.sa-archive { grid-template-columns: 1fr; row-gap: 2.25rem; }
	.sa-archive::before, .sa-archive::after { display: none; }
}

/* ---- Comments (2026-09-21) ----
   Comments are closed site-wide; what remains is the handful written before
   the rebuild, kept readable rather than thrown away. They sit under the
   article behind the same hairline rule the other sections use, and align
   with the text column so the measure matches the article above. No form:
   nothing accepts new comments. */
html body .sa-comments {
	max-width: var(--sa-maxw, 1175px);
	margin: calc(2 * var(--sa-space)) auto 0;
	padding-top: var(--sa-space);
	border-top: 1px solid var(--wp--preset--color--ink);
}
/* the rule spans the content width; the text sits in the second column,
   which starts where .sa-post's 1fr 1fr grid puts it */
@media (min-width: 783px) {
	html body .sa-comments > * { margin-left: calc(50% + (var(--sa-gutter) / 2)); }
}
html body .sa-comments__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--sa-fs-lead); font-weight: var(--sa-fw);
	line-height: var(--sa-lh-heading); color: var(--wp--preset--color--ink);
	/* longhand on purpose: the `margin` shorthand would reset the margin-left
	   that puts this in the text column, and the title would sit under the
	   media column instead */
	margin-top: -0.265em; margin-bottom: 1.4rem; margin-right: 0;
}
html body .sa-comment { margin-top: 1.6rem; }
html body .sa-comment:first-of-type { margin-top: 0; }
html body .sa-comment__author {
	font-size: var(--sa-fs-body); line-height: var(--sa-lh-text);
	font-weight: 500; color: var(--wp--preset--color--ink); margin: 0;
}
html body .sa-comment__date {
	font-size: var(--sa-fs-caption); line-height: var(--sa-lh-caption);
	color: var(--sa-caption-color); margin: 0;
}
html body .sa-comment__date a { color: inherit; text-decoration: none; }
html body .sa-comment__body {
	font-size: var(--sa-fs-body); line-height: var(--sa-lh-text);
	color: var(--wp--preset--color--ink); margin: 0.45rem 0 0;
}
html body .sa-comment__body p { margin: 0 0 0.6em; }
html body .sa-comment__body p:last-child { margin-bottom: 0; }

/* ---- Historical picture gallery, foot of the Om media column (2026-09-23) ----
   Browsed rather than autoplaying: the hero already moves by itself, and a
   second rotating thing beside it would compete. The pictures run from a 0.70
   portrait to a 2.06 panorama, so each is contained in a fixed 4:3 frame — they
   are archive photographs and cropping them to fit would lose the subject. The
   frame sits on the grey the site already uses behind loading images. */
.sa-histgal { margin-top: var(--sa-gutter); }
.sa-histgal__viewport {
	position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden;
	background: var(--wp--preset--color--header-grey);
}
.sa-histgal__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.35s ease; }
.sa-histgal__slide.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .sa-histgal__slide { transition: none; } }
.sa-histgal__img { width: 100%; height: 100%; object-fit: contain; display: block; }

.sa-histgal__nav { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.9rem; }
.sa-histgal__arrow {
	flex: 0 0 auto; width: 2rem; height: 2rem; padding: 0;
	background: none; border: 0; cursor: pointer;
	font-family: var(--wp--preset--font-family--heading); font-size: 1.6rem; line-height: 1;
	color: var(--wp--preset--color--ink);
}
.sa-histgal__arrow:hover { color: var(--wp--preset--color--accent-red); }
.sa-histgal__dots { flex: 1 1 auto; display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
.sa-histgal__dot {
	width: 9px; height: 9px; padding: 0; border-radius: 50%; cursor: pointer;
	border: 1px solid var(--wp--preset--color--ink); background: none;
}
.sa-histgal__dot.is-active { background: var(--wp--preset--color--ink); }
.sa-histgal__dot:hover { border-color: var(--wp--preset--color--accent-red); }
/* keyboard users must still see where they are */
.sa-histgal__arrow:focus-visible, .sa-histgal__dot:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-red); outline-offset: 2px;
}