/*
 * about.css — laddas bara på sidor med mallen "About".
 *
 * Sidan är i grunden en läsbar textspalt på var(--content-max). Det som
 * bryter ut ur spalten gör det för att innehållet är rutnät och inte
 * brödtext: grundarkortet, mätvärdena, kriterierna och frågorna. Samma
 * kortspråk som startsidan — ljusgrå yta, 20 px radie, ingen skugga.
 *
 * Budget: ≤ 3 kB gzippad. Mät med ./scripts/css-budget.py.
 */

/*
 * --color-surface-blush bodde här tills produktsidans märkningsbrickor
 * ville ha samma ton. Andra komponenten var villkoret för att flytta den
 * till base.css — se kommentaren där.
 */

@layer layout {

	/*
	 * En spalt, centrerad, med all luft mellan sektionerna. Rutnäten
	 * nedan är breddare och tar sig ut ur spalten med negativ margin i
	 * stället för att sidan behöver två olika wrappers.
	 */
	.about__article > * {
		max-width: var(--content-max);
		margin-inline: auto;
	}

	.about__section {
		margin-block-start: var(--space-2xl);
	}

	.about__section > * + * {
		margin-block-start: var(--space-s);
	}

	/* Första sektionen bär sidans H1 och behöver ingen luft ovanför —
	   .wrap har redan sin. */
	.about__section--lead {
		margin-block-start: var(--space-s);
	}

	/* Redaktörens egen ingress ärver brödtextspaltens rytm. */
	.about__editor > * + * {
		margin-block-start: var(--space-s);
	}
}

@layer components {

	.about__section h1 {
		margin-block-end: var(--space-m);
		font-size: var(--step-4);
		line-height: 1.1;
	}

	.about__section h2 {
		margin-block-end: var(--space-m);
	}

	/* Ingressen står i bläck och en grad större — den ska läsas som
	   sidans sammanfattning, inte som första stycket i en löptext. */
	.about__lead {
		font-size: var(--step-1);
		line-height: 1.45;
		color: var(--color-ink);
	}

	.about__subheading {
		margin-block-start: var(--space-xl);
		font-size: var(--step-2);
	}

	.about__note {
		font-size: var(--step--1);
		color: var(--color-ink-muted);
	}

	/* ---------------------------------------------------------------- */
	/* Grundaren                                                         */
	/* ---------------------------------------------------------------- */

	.founder {
		display: grid;
		gap: var(--space-m);
		align-items: start;
		padding: var(--space-l) var(--space-m);
		border-radius: var(--radius-panel);
		background: var(--color-surface-card);
	}

	@media (min-width: 700px) {
		.founder {
			grid-template-columns: 320px minmax(0, 1fr);
			gap: var(--space-l);
			padding: var(--space-l);
		}
	}

	/*
	 * Kvadratisk, inte rund — porträttet ska läsas som ett foto av en
	 * person, inte som en avatar. Radien är kortens, så att bilden hör
	 * ihop med resten av sidan. width/height i markupen håller kvar
	 * proportionen så att inget hoppar när den lata inladdningen är klar.
	 */
	.founder__photo {
		width: 260px;
		max-width: 100%;
		aspect-ratio: 1;
		border-radius: var(--radius-card);
		object-fit: cover;
	}

	/*
	 * Bredare spalt på desktop ger plats åt ett större porträtt. Mobilen
	 * får inte samma mått — 320 px spränger kortet på 375 px skärm.
	 *
	 * Bilden skjuts ner så att dess överkant möter rollraden i stället
	 * för namnet. Offseten räknas ur namnets egen radhöjd (--step-2 gånger
	 * line-height 1.25) plus luften under det, alltså inte ett uppmätt
	 * pixelvärde: rubrikskalan är flytande och en fast siffra hade glidit
	 * ur linje så fort fönstret ändrade bredd.
	 */
	@media (min-width: 700px) {
		.founder__photo {
			width: 320px;
			margin-block-start: calc(var(--step-2) * 1.25 + var(--space-s));
		}
	}

	.founder__body > * + * {
		margin-block-start: var(--space-s);
	}

	.founder__name {
		font-size: var(--step-2);
	}

	/*
	 * Rollraden i den ljusa petrolen, inte den mörka -ink-varianten.
	 * Här går gränsen: #3e7c8a mäter 4,7:1 mot vitt, alltså precis över
	 * AA:s 4,5:1 för brödtextstorlek. Ljusare än så — en opacity, eller
	 * en color-mix mot vitt — och raden faller under kravet. Vill vi ändå
	 * ha den svagare får den bli större eller fetare först.
	 */
	.founder__role {
		font-size: var(--step--1);
		font-weight: 500;
		color: var(--color-accent);
	}

	.founder__role + p {
		margin-block-start: var(--space-m);
	}

	/* ---------------------------------------------------------------- */
	/* Mätvärden                                                         */
	/* ---------------------------------------------------------------- */

	/*
	 * auto-fit ger ett kort per rad på mobil och tre i textspalten på
	 * desktop, utan en enda brytpunkt. min(100%, 210px) är det som gör
	 * att korten inte spräcker spalten på små skärmar.
	 */
	.markers {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
		gap: var(--space-s);
		padding: 0;
		margin-block-start: var(--space-m);
		list-style: none;
	}

	.marker {
		display: flex;
		flex-direction: column;
		gap: var(--space-3xs);
		padding: var(--space-m);
		border-radius: var(--radius-card);
		background: var(--color-surface-blush);
	}

	.marker__value {
		font-family: var(--font-display);
		font-size: var(--step-3);
		font-weight: 700;
		letter-spacing: -0.03em;
		line-height: 1.05;
		color: var(--color-ink);
	}

	.marker__label {
		font-size: var(--step--1);
		font-weight: 600;
		color: var(--color-ink);
	}

	.marker__note {
		font-size: var(--step--1);
	}

	/* ---------------------------------------------------------------- */
	/* Rapporter, friskrivning och citat                                 */
	/* ---------------------------------------------------------------- */

	.about__reports {
		padding: 0;
		margin-block-start: var(--space-s);
		list-style: none;
	}

	.about__reports li + li {
		margin-block-start: var(--space-2xs);
	}

	.about__reports a {
		color: var(--color-accent-ink);
		font-weight: 600;
	}

	.about__disclaimer {
		margin-block-start: var(--space-l);
		padding-inline-start: var(--space-s);
		border-inline-start: 2px solid var(--color-line);
		font-size: var(--step--1);
		color: var(--color-ink-muted);
	}

	.about__quote {
		margin: var(--space-xl) 0 0;
		padding: var(--space-l) var(--space-m);
		border-radius: var(--radius-panel);
		background: var(--color-surface);
	}

	.about__quote blockquote {
		font-family: var(--font-display);
		font-size: var(--step-1);
		font-style: italic;
		font-weight: 500;
		letter-spacing: -0.01em;
		line-height: 1.45;
		color: var(--color-ink);
	}

	.about__quote figcaption {
		margin-block-start: var(--space-s);
		font-size: var(--step--1);
		color: var(--color-ink-muted);
	}

	/* ---------------------------------------------------------------- */
	/* Kriterier och fakta                                               */
	/* ---------------------------------------------------------------- */

	.criteria {
		display: grid;
		gap: var(--space-s);
		padding: 0;
		margin-block-start: var(--space-m);
		list-style: none;
	}

	@media (min-width: 640px) {
		.criteria {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
	}

	/*
	 * Samma gräddvita platta som bandet "sett i media" på startsidan.
	 * Den är nästan vit, och fyra små kort mot vit bakgrund hade flutit
	 * ihop med sidan — ramen är det som ger dem en kant att sluta vid.
	 * Samma 1 px `--color-line` som menyns kategorikort använder.
	 */
	.criteria__item {
		padding: var(--space-m);
		border: 1px solid var(--color-line);
		border-radius: var(--radius-card);
		background: var(--color-surface-cream);
	}

	.criteria__title {
		margin-block-end: var(--space-2xs);
		font-size: var(--step-0);
	}

	.about__facts {
		margin-block-start: var(--space-m);
	}

	.about__fact {
		display: grid;
		gap: var(--space-3xs);
		padding-block: var(--space-s);
		border-block-start: 1px solid var(--color-line);
	}

	@media (min-width: 640px) {
		.about__fact {
			grid-template-columns: 200px minmax(0, 1fr);
			gap: var(--space-m);
		}
	}

	.about__fact dt {
		font-weight: 600;
		color: var(--color-ink);
	}

	.about__fact dd {
		margin: 0;
	}

	/* ---------------------------------------------------------------- */
	/* Vanliga frågor                                                    */
	/* ---------------------------------------------------------------- */

	.faq {
		margin-block-start: var(--space-m);
		border-block-start: 1px solid var(--color-line);
	}

	.faq__item {
		border-block-end: 1px solid var(--color-line);
	}

	.faq__question {
		display: flex;
		gap: var(--space-s);
		align-items: baseline;
		justify-content: space-between;
		padding-block: var(--space-s);
		font-family: var(--font-display);
		font-size: var(--step-0);
		font-weight: 600;
		color: var(--color-ink);
		cursor: pointer;
		list-style: none;
	}

	/* Tecknet ritas av oss, inte av webbläsarens standardtriangel. */
	.faq__question::-webkit-details-marker {
		display: none;
	}

	.faq__question::after {
		content: "+";
		flex: none;
		font-weight: 400;
		color: var(--color-ink-muted);
	}

	.faq__item[open] .faq__question::after {
		content: "–";
	}

	.faq__answer {
		margin: 0;
		padding-block-end: var(--space-s);
	}

	/* ---------------------------------------------------------------- */
	/* Avslutande uppmaning                                              */
	/* ---------------------------------------------------------------- */

	.about__cta {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-m);
		align-items: center;
		justify-content: space-between;
		margin-block-start: var(--space-2xl);
		padding: var(--space-m);
		border-radius: var(--radius-panel);
		background: var(--color-surface);
	}

	.about__cta-title {
		font-family: var(--font-display);
		font-size: var(--step-1);
		font-weight: 600;
		letter-spacing: -0.015em;
		color: var(--color-ink);
	}

	.about__cta-text {
		margin-block-start: var(--space-3xs);
		font-size: var(--step--1);
	}

	.about__button {
		display: inline-block;
		padding: 0.7em 1.6em;
		border-radius: var(--radius-pill);
		background: var(--color-button);
		color: var(--color-button-text);
		font-size: var(--step--1);
		font-weight: 500;
		text-decoration: none;
		white-space: nowrap;
		transition: background-color 0.15s;
	}

	.about__button:hover,
	.about__button:focus-visible {
		background: var(--color-accent);
	}
}