/* ==========================================================================
   Logotyper (F-0053): the two download blocks, the logo tiles and the
   brand colours. Loaded on /logotyper/ only (PAGE_STYLES in inc/assets.php)
   and in the editor with every page file, so every selector is scoped to the
   page's section modifiers (.section-points--downloads, .section-text--brand;
   F-0011 review S2). Ported from the style guide's logo tiles and swatches
   (design/system/guide.css). No colour is written here: backgrounds come from
   the palette classes the server prints (has-{slug}-background-color).
   ========================================================================== */

/* ---------- Ladda ner: two blocks side by side ---------- */
@media (min-width: 48em) {
	.section-points.section-points--downloads .points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.section-points--downloads .point > ul {
	margin-block-start: var(--space-30);
	padding-inline-start: 1.2em;
	color: var(--color-muted);
}
.section-points--downloads .point > ul li + li { margin-block-start: var(--space-20); }
.section-points--downloads .point > .brand-download { margin-block-start: var(--space-50); }
.section-points--downloads > .logo-tiles { margin-block-start: var(--space-70); }

/* ---------- Logo tiles (the real files on their real backgrounds) ---------- */
.section-points--downloads .logo-tiles__list,
.section-text--brand .logo-tiles__list {
	display: grid;
	gap: var(--space-40);
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}
/* Four across on wide screens, so the eight backgrounds make two full rows. */
@media (min-width: 64em) {
	.section-points--downloads .logo-tiles__list,
	.section-text--brand .logo-tiles__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.section-points--downloads .logo-tile__stage,
.section-text--brand .logo-tile__stage {
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 3;
	padding: var(--space-50);
	overflow: hidden;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-m);
}
.section-points--downloads .logo-tile__stage--white,
.section-text--brand .logo-tile__stage--white { background: var(--color-base); }
.section-points--downloads .logo-tile__stage img,
.section-text--brand .logo-tile__stage img {
	width: auto;
	max-width: 80%;
	height: 6rem;
}
.section-points--downloads .logo-tile__stage--long img,
.section-text--brand .logo-tile__stage--long img {
	width: 85%;
	height: auto;
}

/* Clear space: the zone is the height of the "n", about 0.55 x the long
   logo's height (design system, Logo), drawn as a dashed apricot frame. */
.section-text--brand .logo-tiles__list--clearspace { grid-template-columns: minmax(0, 26rem); }
.section-text--brand .logo-tiles__list--clearspace .logo-tile__stage { aspect-ratio: auto; }
.section-text--brand .logo-tile__clearspace {
	--logo-height: 2.5rem;
	display: inline-block;
	padding: calc(0.55 * var(--logo-height));
	outline: 1px dashed var(--color-apricot);
	background: var(--color-apricot-tint);
}
.section-text--brand .logo-tile__clearspace img,
.section-text--brand .logo-tile__stage--long .logo-tile__clearspace img {
	display: block;
	width: auto;
	max-width: none;
	height: var(--logo-height);
	background: var(--color-base);
}

/* At 320 px the guide (284 px at 2.5rem) is wider than its tile and was cut at
   the right by the tile's overflow. A smaller logo height shrinks the logo
   and its clear space together, so the 0.55 ratio holds (F-0060, K3). */
@media (max-width: 24em) {
	.section-text--brand .logo-tile__clearspace { --logo-height: 2.1rem; }
}

/* ---------- Symbol tiles (one per approved rule, F-0053) ---------- */
@media (min-width: 64em) {
	.section-text--brand .logo-tiles__list--symbol { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.section-text--brand .logo-tile__stage--symbol img {
	width: auto;
	max-width: none;
	height: 4.5rem;
}
.section-text--brand .logo-tile__icon {
	display: grid;
	place-items: center;
	width: 5.5rem;
	height: 5.5rem;
	border-radius: var(--radius-m);
}
.section-text--brand .logo-tile__icon img { height: 3.25rem; }
.section-text--brand .logo-tile__row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-10) var(--space-20);
}
.section-text--brand .logo-tile__stage--row img { height: 1.6rem; }
/* Large decoration: the symbol much bigger than the tile, cut off by its edge. */
.section-text--brand .logo-tile__stage--crop { position: relative; }
/* Both leaves stay recognisable, and the symbol bleeds off the left and the
   right edge (and the top and bottom), as on the business-card backs in the
   manual (page 15; Director, 2026-10-01). */
.section-text--brand .logo-tile__stage--crop img {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 116%;
	max-width: none;
	height: auto;
	transform: translate(-50%, -50%);
}
.section-text--brand .logo-tile__caption {
	margin: var(--space-20) 0 0;
	font-size: var(--fs-small);
}

/* ---------- Brand colours ---------- */
.section-text--brand .brand-colours__list {
	display: grid;
	gap: var(--space-40);
	grid-template-columns: minmax(0, 1fr);
	margin: 0;
	padding: 0;
	list-style: none;
}
/* Two, then three across: the six colours always fill whole rows. */
@media (min-width: 30em) {
	.section-text--brand .brand-colours__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 48em) {
	.section-text--brand .brand-colours__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.section-text--brand .brand-colour {
	overflow: hidden;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-m);
}
.section-text--brand .brand-colour__swatch {
	display: block;
	height: 5rem;
}
.section-text--brand .brand-colour__name {
	margin: var(--space-30) var(--space-30) 0;
	font-size: var(--fs-medium);
}
.section-text--brand .brand-colour__values {
	display: grid;
	gap: var(--space-10);
	margin: var(--space-20) var(--space-30) var(--space-30);
	font-size: var(--fs-small);
}
.section-text--brand .brand-colour__value {
	display: grid;
	grid-template-columns: 5.5em minmax(0, 1fr);
	gap: var(--space-20);
}
.section-text--brand .brand-colour__value dt { font-weight: var(--font-weight-semibold); }
.section-text--brand .brand-colour__value dd { margin: 0; }

/* ---------- Text around the tiles and the rules ---------- */
.section-text--brand > .logo-tiles,
.section-text--brand > .brand-colours { margin-block: var(--space-60); }
.section-text--brand > h3 { margin-block: var(--space-70) var(--space-30); }
.section-text--brand > h2 + h3 { margin-block-start: var(--space-50); }