/* base.css — fontti, tokenit, reset ja jaetut osat.
   Natiivi CSS, ei build-vaihetta. Arvot luettu Figmasta (tiedosto UvlQ7h4EKQjyV4vQI7oXhN). */

/* Inter — Figman fontti. Paikallinen woff2, ei ulkoista pyyntöä. */
@font-face {
	font-family: Inter;
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url("../fonts/inter-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 800;
	font-display: swap;
	src: url("../fonts/inter-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;
}

:root {
	/* Värit — nimet Figman muuttujista */
	--c-brand:        #ed1b24;  /* Alibi Red */
	--c-accent:       #cc3333;
	--c-yellow:       #ffcc00;  /* Alibi Yellow */
	--c-black:        #000000;  /* Alibi Dark */
	--c-dark:         #121212;  /* Alibi Dark Grey */
	--c-ink:          #14141a;  /* teksti keltaisen päällä */
	--c-card-alt:     #24242b;
	--c-card:         #2b2b2b;  /* Alibi grey */
	--c-media:        #383845;
	--c-thumb:        #4d4d59;
	--c-excerpt:      #666673;
	--c-muted:        #595966;
	--c-grey:         #999999;  /* Alibi Grey text */
	--c-grey-200:     #dadae0;
	--c-grey-100:     #d5d5da;
	--c-light:        #f2f2f2;  /* Alibi Light Grey */
	--c-text:         #1a1a1f;
	--c-white:        #ffffff;
	--c-blue:         #06377b;  /* Poliisin nettivinkki */

	--c-ad-bg:        #ede8de;
	--c-ad-border:    #d1c7b8;
	--c-ad-label:     #998c7a;
	--c-ad-size:      #b2a899;

	/* Typografia */
	--font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	/* Rytmi */
	--sp-1: 6px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
	--sp-5: 20px; --sp-6: 24px; --sp-7: 28px; --sp-8: 32px;
	--sp-10: 40px; --sp-12: 48px; --sp-15: 60px;

	/* Layout — Figmassa 1440 leveä sivu, 120 px reunat → 1200 px sisältö */
	--container: 1200px;
	--gutter: clamp(16px, 8.34vw, 120px);
}

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

body {
	margin: 0;
	background: var(--c-white);
	color: var(--c-text);
	font-family: var(--font-sans);
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 2px; }
h1, h2, h3, p, ul { margin: 0; }
ul { list-style: none; padding: 0; }

/* Sisältöleveys. Kavenee reunoista ennen kuin sisältö kapenee. */
.container {
	width: min(var(--container), 100% - 2 * var(--gutter));
	margin-inline: auto;
}

/* Ruudunlukijoille */
.screen-reader-text {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	left: -9999px;
	z-index: 100;
	padding: var(--sp-3) var(--sp-4);
	background: var(--c-brand);
	color: var(--c-white);
	font-weight: 700;
}
.skip-link:focus {
	left: var(--sp-4);
	top: var(--sp-4);
}

/* --- Jaetut osat --- */

.meta {
	color: var(--c-accent);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1px;
}
.meta--small { font-size: 11px; }

.badge {
	display: inline-block;
	width: fit-content;
	padding: var(--sp-1) var(--sp-3);
	color: var(--c-white);
	font-size: 11px;
	font-weight: 700;
	line-height: normal;
	white-space: nowrap;
}
.badge--breaking { background: var(--c-brand); }

.link-arrow {
	color: var(--c-accent);
	font-size: 13px;
	font-weight: 600;
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 36px;
	font-size: 15px;
	font-weight: 700;
	line-height: normal;
	white-space: nowrap;
	border: 0;
	cursor: pointer;
}
.btn:hover { text-decoration: none; filter: brightness(1.08); }
.btn--pill   { border-radius: 30px; }
.btn--small  { padding: 5px 12px; font-size: 12px; border-radius: 14px; }
.btn--red    { background: var(--c-brand);  color: var(--c-white); }
.btn--yellow { background: var(--c-yellow); color: var(--c-ink); }
.btn--white  { background: var(--c-white);  color: var(--c-black); border-radius: 100px; }

/* Mainospaikka — sama komponentti paraati-, sisältö- ja neliömainokselle. */
.ad-slot {
	display: flex;
	flex-direction: column;
	gap: var(--sp-1);
	align-items: center;
	justify-content: center;
	height: var(--ad-h, 300px);
	background: var(--c-ad-bg);
	border: 1px dashed var(--c-ad-border);
	border-radius: 4px;
	text-align: center;
}
.ad-slot__label {
	color: var(--c-ad-label);
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
}
.ad-slot__size {
	color: var(--c-ad-size);
	font-size: 11px;
}

.adband { padding-block: var(--sp-3); }
.adband--leaderboard { background: var(--c-light); padding-block: var(--sp-6); }
.adband--mid { background: var(--c-white); }