/*
Theme Name: Siirto casino
Description: Vaalea teema suomalaisten pankkimaksujen ja kasinoiden vertailuun.
Author: Nordkap-verkosto
Version: 1.0.3
*/

/* ==========================================================================
   siirto-kasinot-net.io

   Deliberately unlike the sibling sites in the network: those are dark-header,
   single-column article pages with a table-of-contents rail on the right. This
   one is light end to end, splits the hero so the top-ranked casino sits beside
   the H1 above the fold, and runs a sticky ranking rail down the LEFT so the
   list travels with the reader. Nothing here inherits a dark slab.
   ========================================================================== */

:root {
	/* paper + warm neutrals */
	--paper: #fbf9f6;
	--card: #ffffff;
	--cream: #f2ece4;
	--cream-2: #f8f4ee;
	--line: #e6ded3;
	--line-2: #cdbfae;

	/* ink */
	--ink: #241a1c;
	--ink-2: #5a4a4c;
	--ink-3: #877578;

	/* one hot accent, used only for action */
	--act: #8c1d3f;
	--act-d: #6d1430;
	--act-l: #b8305a;
	--act-tint: #f7e9ee;

	/* trust blue, used only for verification cues */
	--trust: #1f5d4c;
	--trust-tint: #e7f1ed;

	--star: #f0a500;
	--ok: #1c7f4c;
	--ok-tint: #e8f5ed;
	--bad: #b83227;
	--bad-tint: #fbebe9;
	--warn: #8a6209;
	--warn-tint: #fdf4e3;

	--w: 1180px;
	--rail: 268px;
	--r: 14px;
	--r-lg: 22px;

	--sh-1: 0 1px 2px rgba(20, 33, 43, .06);
	--sh-2: 0 4px 14px rgba(20, 33, 43, .08);
	--sh-3: 0 14px 40px rgba(20, 33, 43, .12);

	--ff-display: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	--ff: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

/* --------------------------------------------------------------- base --- */

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

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

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--ff);
	font-size: 17px;
	line-height: 1.62;
	-webkit-font-smoothing: antialiased;
}

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

a { color: var(--trust); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }

h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .5em; font-weight: 800; letter-spacing: -.015em; }
h1 { font-size: clamp(2rem, 4.4vw, 3rem); }
h2 { font-size: clamp(1.45rem, 2.4vw, 1.9rem); }
h3 { font-size: 1.16rem; font-weight: 700; }
p { margin: 0 0 1.05em; }

strong { font-weight: 700; }

.wrap { width: min(100% - 40px, var(--w)); margin-inline: auto; }

:focus-visible { outline: 3px solid var(--act); outline-offset: 2px; border-radius: 4px; }

.skip {
	position: absolute; left: -9999px;
}
.skip:focus {
	left: 12px; top: 12px; z-index: 200; background: #fff; padding: 10px 16px;
	border-radius: var(--r); box-shadow: var(--sh-2);
}

/* -------------------------------------------------------------- topbar --- */
/* White and thin. Every sibling puts a dark slab here. */

.topbar {
	position: sticky; top: 0; z-index: 80;
	background: rgba(253, 251, 247, .92);
	backdrop-filter: saturate(160%) blur(10px);
	border-bottom: 1px solid var(--line);
}
.admin-bar .topbar { top: 32px; }
@media (max-width: 782px) { .admin-bar .topbar { top: 46px; } }

.topbar .bar {
	display: flex; align-items: center; gap: 16px;
	min-height: 62px;
}

.topbar .brand { display: flex; align-items: center; margin-right: auto; }
.topbar .brand img { height: 28px; width: auto; display: block; }

.topbar .cta {
	background: var(--act); color: #fff;
	padding: 10px 18px; border-radius: 999px;
	font-weight: 800; font-size: .86rem;
	box-shadow: var(--sh-1);
	white-space: nowrap;
}
.topbar .cta:hover, .topbar .cta:focus-visible { background: var(--act-d); text-decoration: none; }

/* Slim reveal bar: appears on scroll with the top offer. Replaces the
   bottom sticky bar the other sites use. */
.offerbar {
	position: fixed; left: 0; right: 0; top: 0; z-index: 90;
	background: var(--ink); color: #fff;
	transform: translateY(-100%);
	transition: transform .22s ease;
	box-shadow: var(--sh-2);
}
.offerbar.on { transform: translateY(0); }
.admin-bar .offerbar { top: 32px; }

.offerbar .in {
	display: flex; align-items: center; gap: 14px;
	min-height: 56px;
}
.offerbar img { height: 22px; width: auto; filter: brightness(0) invert(1); opacity: .95; }
.offerbar .t { font-size: .9rem; font-weight: 600; margin-right: auto; }
.offerbar .t b { font-weight: 800; }
.offerbar .b {
	background: var(--act); color: #fff; font-weight: 800; font-size: .85rem;
	padding: 9px 18px; border-radius: 999px; white-space: nowrap;
}
.offerbar .b:hover { background: var(--act-l); text-decoration: none; }
@media (max-width: 640px) { .offerbar .t span { display: none; } }

/* ---------------------------------------------------------------- hero --- */
/* Split: heading and credibility on the left, the number-one pick on the
   right, both above the fold. */

.hero {
	background: var(--cream);
	border-bottom: 1px solid var(--line);
	padding: 40px 0 44px;
}

.hero .grid {
	display: grid;
	grid-template-columns: minmax(0, 1.28fr) minmax(0, 1fr);
	gap: 44px;
	align-items: start;
}

.eyebrow {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: .76rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
	color: var(--act-d);
	background: var(--act-tint);
	border-radius: 999px; padding: 6px 13px;
	margin-bottom: 16px;
}

.hero h1 { margin-bottom: 14px; }

.hero .lead {
	font-size: 1.12rem; color: var(--ink-2); margin-bottom: 20px; max-width: 54ch;
}

/* fact strip: four verified numbers, not a bullet list */
.facts {
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px; margin: 0 0 22px;
}
.facts div {
	background: var(--card); border: 1px solid var(--line);
	border-radius: var(--r); padding: 11px 12px;
}
.facts dt, .facts .k {
	font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
	color: var(--ink-3); margin-bottom: 3px;
}
.facts dd, .facts .v { margin: 0; font-size: .98rem; font-weight: 800; color: var(--ink); }

.hero-btns { display: flex; flex-wrap: wrap; gap: 12px; }

.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	font-weight: 800; border-radius: 999px; padding: 13px 24px;
	border: 1px solid transparent; cursor: pointer; font-size: .95rem;
	font-family: inherit;
}
.btn-act { background: var(--act); color: #fff; box-shadow: var(--sh-1); }
.btn-act:hover, .btn-act:focus-visible { background: var(--act-d); text-decoration: none; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover, .btn-ghost:focus-visible { background: var(--card); text-decoration: none; }
.btn-sm { padding: 9px 16px; font-size: .84rem; }

/* byline */
.byline {
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
	margin: 0 0 20px; font-size: .84rem; color: var(--ink-2);
}
.byline .bl-item { display: flex; align-items: center; gap: 9px; }
.byline img { width: 30px; height: 30px; border-radius: 50%; display: block; flex: none; }
.byline .bl-txt { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 5px; }
.byline b { color: var(--ink); font-weight: 700; }
.byline a { color: var(--trust); }
.byline .bl-date { color: var(--ink-3); }

/* ------------------------------------------------------ hero pick card --- */

.pick {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	box-shadow: var(--sh-3);
	overflow: hidden;
	position: relative;
}
.pick .tag {
	background: var(--ink); color: #fff;
	font-size: .72rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
	padding: 8px 16px; display: flex; align-items: center; gap: 8px;
}
.pick .tag .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--act-l); }
.pick .bd { padding: 20px; }
.pick .logo {
	height: 40px; width: auto; max-width: 150px; object-fit: contain; display: block;
	margin-bottom: 12px;
}
.pick .nm { font-size: 1.1rem; font-weight: 800; margin: 0 0 6px; }
.pick .offer {
	font-size: 1.5rem; font-weight: 800; line-height: 1.2; margin: 10px 0 4px;
	letter-spacing: -.02em;
}
.pick .sub { font-size: .86rem; color: var(--ink-2); margin-bottom: 14px; }
.pick .btn { width: 100%; }
.pick .micro {
	display: block; text-align: center; font-size: .76rem; color: var(--ink-3); margin-top: 9px;
}
.pick .why {
	display: block; text-align: center; font-size: .8rem; margin-top: 10px;
	padding-top: 12px; border-top: 1px solid var(--line);
}

.rate { display: flex; align-items: center; gap: 7px; font-size: .88rem; }
.rate .n { font-weight: 800; }
.rate .stars { color: var(--star); letter-spacing: 1px; }

/* --------------------------------------------------------------- shell --- */
/* Two columns, ranking rail on the LEFT. */

.shell {
	display: grid;
	grid-template-columns: var(--rail) minmax(0, 1fr);
	gap: 46px;
	align-items: start;
	padding: 40px 0 20px;
}

.rail { position: sticky; top: 86px; min-width: 0; }

.rail .blk {
	background: var(--card); border: 1px solid var(--line);
	border-radius: var(--r-lg); padding: 16px; margin-bottom: 18px;
	box-shadow: var(--sh-1);
}
.rail h2 {
	font-size: .78rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
	color: var(--ink-3); margin: 0 0 12px;
}

/* compact ranked mini-list that travels with the reader */
.mini { list-style: none; margin: 0; padding: 0; }
.mini li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); }
.mini li:first-child { border-top: 0; }
.mini .r {
	flex: none; width: 21px; height: 21px; border-radius: 6px;
	background: var(--cream); color: var(--ink); font-size: .74rem; font-weight: 800;
	display: grid; place-items: center;
}
.mini li:first-child .r { background: var(--act); color: #fff; }
.mini .nm { flex: 1; min-width: 0; font-size: .85rem; font-weight: 700; }
.mini .nm span { display: block; font-size: .74rem; font-weight: 600; color: var(--ink-3); }
.mini .go {
	flex: none; font-size: .74rem; font-weight: 800; color: var(--act-d);
	border: 1px solid var(--line-2); border-radius: 999px; padding: 5px 10px;
}
.mini .go:hover { background: var(--act); color: #fff; border-color: var(--act); text-decoration: none; }

.railnav { list-style: none; margin: 0; padding: 0; }
.railnav li { margin: 0 0 2px; }
.railnav a {
	display: block; padding: 6px 10px; border-radius: 7px;
	font-size: .85rem; color: var(--ink-2); border-left: 2px solid transparent;
}
.railnav a:hover { background: var(--cream-2); text-decoration: none; }
.railnav a.on { color: var(--ink); font-weight: 700; border-left-color: var(--act); background: var(--cream-2); }

/* --------------------------------------------------------------- prose --- */

.prose { min-width: 0; max-width: 74ch; }
.prose section { margin: 0 0 42px; scroll-margin-top: 92px; }
.prose h2 { margin-top: 0; }
.prose h3 { margin: 1.6em 0 .5em; }
.prose ul, .prose ol { margin: 0 0 1.1em; padding-left: 1.25em; }
.prose li { margin-bottom: .4em; }

.sec-art {
	display: block; width: 100%; height: auto;
	border-radius: var(--r); margin: 0 0 18px;
}

.note {
	background: var(--cream-2); border: 1px solid var(--line);
	border-left: 3px solid var(--act);
	border-radius: var(--r); padding: 13px 16px; font-size: .93rem;
}

.callout {
	background: var(--trust-tint); border: 1px solid #d6dbf5;
	border-radius: var(--r); padding: 15px 17px; margin: 0 0 1.1em;
}
.callout p:last-child { margin-bottom: 0; }

.steps { counter-reset: s; list-style: none; padding: 0; }
.steps li {
	counter-increment: s; position: relative; padding-left: 42px; margin-bottom: 14px;
}
.steps li::before {
	content: counter(s); position: absolute; left: 0; top: 1px;
	width: 28px; height: 28px; border-radius: 50%;
	background: var(--ink); color: #fff;
	font-size: .85rem; font-weight: 800; display: grid; place-items: center;
}

/* tables scroll inside their own box rather than widening the page */
.tw { overflow-x: auto; margin: 0 0 24px; min-width: 0; -webkit-overflow-scrolling: touch; }
.tbl { width: 100%; min-width: 460px; border-collapse: collapse; font-size: .94rem; background: var(--card); }
.tbl caption { caption-side: bottom; padding-top: 9px; font-size: .8rem; color: var(--ink-3); text-align: left; }
.tbl th, .tbl td { padding: 11px 13px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl thead th { background: var(--ink); color: #fff; font-weight: 700; white-space: nowrap; }
.tbl thead th strong { color: inherit; }
.tbl tbody tr:nth-child(even) { background: var(--cream-2); }
.tbl td:nth-child(2) { font-variant-numeric: tabular-nums; }

.yes { color: var(--ok); font-weight: 700; }
.no { color: var(--bad); font-weight: 700; }

.srcs { padding-left: 1.2em; }
.srcs li { margin-bottom: 7px; }
.log { font-size: .9rem; color: var(--ink-2); background: var(--cream-2); border-radius: var(--r); padding: 12px 15px; }

/* ----------------------------------------------------------- toplists --- */
/* Top three render as a card grid; the rest as compact rows. Siblings use
   uniform horizontal rows throughout. */

.tl-grid {
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px; margin: 0 0 26px;
}

.gcard {
	background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
	display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--sh-1);
	transition: box-shadow .16s ease, transform .16s ease;
}
.gcard:hover { box-shadow: var(--sh-2); transform: translateY(-2px); }
.gcard.lead { border-color: var(--act); box-shadow: var(--sh-2); }

.gcard .hd {
	display: flex; align-items: center; gap: 8px;
	padding: 9px 14px; font-size: .71rem; font-weight: 800;
	letter-spacing: .08em; text-transform: uppercase;
	background: var(--cream); color: var(--ink-2); border-bottom: 1px solid var(--line);
}
.gcard.lead .hd { background: var(--act); color: #fff; border-bottom-color: var(--act); }

.gcard .bd { padding: 16px; display: flex; flex-direction: column; flex: 1; }
.gcard .logo { height: 34px; width: auto; max-width: 130px; object-fit: contain; margin-bottom: 10px; }
.gcard .nm { font-weight: 800; font-size: 1rem; margin-bottom: 4px; }
.gcard .offer { font-size: 1.22rem; font-weight: 800; line-height: 1.22; margin: 9px 0 3px; letter-spacing: -.015em; }
.gcard .sub { font-size: .82rem; color: var(--ink-2); margin-bottom: 12px; }
.gcard .chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 13px; }
.gcard .ft { margin-top: auto; }
.gcard .btn { width: 100%; }
.gcard .micro { display: block; text-align: center; font-size: .74rem; color: var(--ink-3); margin-top: 8px; }

.chip {
	font-size: .73rem; font-weight: 700; padding: 4px 9px; border-radius: 999px;
	background: var(--cream); color: var(--ink-2); border: 1px solid var(--line);
}
.chip.ok { background: var(--ok-tint); color: var(--ok); border-color: #c8e6d5; }
.chip.warn { background: var(--warn-tint); color: var(--warn); border-color: #f0dfb8; }

/* compact rows for ranks 4+ */
.tl-rows { display: grid; gap: 10px; margin: 0 0 26px; }
.rrow {
	display: grid; grid-template-columns: 30px 118px minmax(0, 1fr) auto;
	align-items: center; gap: 14px;
	background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
	padding: 12px 14px;
}
.rrow .r { font-weight: 800; color: var(--ink-3); }
.rrow .logo { height: 28px; width: auto; max-width: 118px; object-fit: contain; }
.rrow .mid { min-width: 0; }
.rrow .offer { font-weight: 800; font-size: .98rem; }
.rrow .sub { font-size: .8rem; color: var(--ink-3); }

@media (max-width: 640px) {
	.rrow { grid-template-columns: 26px 1fr; row-gap: 9px; }
	.rrow .logo { grid-column: 2; }
	.rrow .mid { grid-column: 2; }
	.rrow .btn { grid-column: 2; justify-self: start; }
}

/* details expander */
.more { margin-top: 11px; border-top: 1px solid var(--line); padding-top: 10px; }
.more summary {
	cursor: pointer; font-size: .82rem; font-weight: 700; color: var(--ink-2); list-style: none;
}
.more summary::-webkit-details-marker { display: none; }
.more summary::after { content: " ▾"; }
.more[open] summary::after { content: " ▴"; }
.more dl { margin: 10px 0 0; font-size: .84rem; }
.more dt { font-weight: 700; color: var(--ink-3); }
.more dd { margin: 0 0 8px; }

/* ----------------------------------------------------------------- faq --- */

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
	cursor: pointer; padding: 15px 34px 15px 0; font-weight: 700; position: relative;
	list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
	content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
	font-size: 1.3rem; font-weight: 400; color: var(--act);
}
.faq details[open] summary::after { content: "–"; }
.faq .a { padding: 0 0 16px; color: var(--ink-2); }
.faq .a p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------- footer --- */
/* Light. Every sibling ends on a dark slab. */

.foot {
	background: var(--cream);
	border-top: 1px solid var(--line);
	margin-top: 40px;
	padding: 40px 0 26px;
	font-size: .9rem;
	color: var(--ink-2);
}
.foot .cols {
	display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 32px;
	padding-bottom: 26px; border-bottom: 1px solid var(--line-2);
}
.foot h2 {
	font-size: .76rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
	color: var(--ink); margin: 0 0 12px;
}
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: 7px; }
.foot a { color: var(--ink-2); }
.foot a:hover { color: var(--act-d); }
.foot .logo { height: 26px; margin-bottom: 12px; }

.tg {
	display: inline-flex; align-items: center; gap: 7px;
	border: 1px solid var(--line-2); border-radius: 999px;
	padding: 6px 13px; margin-top: 12px; font-weight: 700; font-size: .84rem;
	color: var(--ink);
}
.tg:hover { border-color: var(--act); color: var(--act-d); text-decoration: none; }

.foot .base {
	display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
	padding-top: 20px; font-size: .82rem; color: var(--ink-3);
}
.foot .badges { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.foot .badges img { width: 40px; height: 40px; object-fit: contain; opacity: .85; }
.foot .resp { flex: 1; min-width: 260px; }

/* --------------------------------------------------------- responsive --- */

@media (max-width: 1080px) {
	:root { --rail: 236px; }
	.shell { gap: 32px; }
	.hero .grid { gap: 30px; }
}

@media (max-width: 940px) {
	.hero .grid { grid-template-columns: minmax(0, 1fr); }
	.pick { max-width: 460px; }
	.shell { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.rail { position: static; margin-bottom: 30px; }
	.rail .railblk-nav { display: none; }
	.prose { max-width: none; }
	.tl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.foot .cols { grid-template-columns: 1fr 1fr; gap: 26px; }
}

@media (max-width: 640px) {
	body { font-size: 16px; }
	.wrap { width: min(100% - 32px, var(--w)); }
	.hero { padding: 26px 0 30px; }
	.facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tl-grid { grid-template-columns: minmax(0, 1fr); }
	.foot .cols { grid-template-columns: 1fr; }
	.hero-btns .btn { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
	* { animation: none !important; transition: none !important; }
}

/* --- 18+ age badge ------------------------------------------------------
   Drawn in CSS rather than shipped as artwork: `color: inherit` means it takes
   the surrounding footer's text colour, so it is legible on a dark slab and on
   a light footer without two versions of a PNG. Sized so "18+" clears the ring
   even in the Arial fallback. */
.age-badge {
	inline-size: 34px;
	block-size: 34px;
	border-radius: 50%;
	border: 2px solid currentColor;
	color: inherit;
	font-size: 11px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.01em;
	display: inline-grid;
	place-items: center;
	flex: none;
	opacity: .92;
}

/* --- variant: filled --------------------------------------------------- */
h1, h2, h3 { letter-spacing: -.03em; font-weight: 800; }

.eyebrow { background: var(--act); color: #fff; }

.gcard { background: var(--cream-2); border-color: transparent; }
.gcard.lead { background: var(--card); border-color: var(--act); }
.gcard .hd { background: transparent; border-bottom: 0; color: var(--ink-3); padding-bottom: 0; }
.gcard.lead .hd { background: transparent; color: var(--act); }
.rrow { background: var(--cream-2); border-color: transparent; }
.facts div { background: var(--cream-2); border-color: transparent; }
.rail .blk { background: var(--cream-2); border-color: transparent; box-shadow: none; }
.pick { border-color: transparent; }
.pick .tag { background: var(--act); }
.btn-act { color: #fff; }
.tbl thead th { background: var(--act); }
.tbl tbody tr:nth-child(even) { background: var(--cream-2); }
.chip { background: var(--card); }
.offerbar { background: var(--act-d); }
.offerbar .b { background: #fff; color: var(--act-d); }
.sec-art { border-radius: var(--r-lg); }

/* --- supplied screenshots ---------------------------------------------- */
.shot { margin: 0 0 26px; max-width: 340px; }
.shot img {
	display: block; width: 100%; height: auto;
	border-radius: var(--r-lg); background: #fff;
	box-shadow: 0 6px 22px rgba(36, 26, 28, .12);
}
.shot figcaption {
	margin-top: 11px; font-size: .84rem; line-height: 1.5; color: var(--ink-2);
	background: var(--cream-2); border-radius: var(--r); padding: 10px 13px;
}
@media (max-width: 600px) { .shot { max-width: 100%; } }


/* A bare wordmark needs padding inside the card that a screenshot does not. */
.shot img.mark { padding: 18px 16px; object-fit: contain; }

/* Siirto wordmark under the hero pick. The SVG carries its own light plate, so
   it needs no background of its own against the dark hero column. */
.hero-mark {
	display: block;
	margin: 14px auto 0;
	width: 150px;
	height: auto;
	opacity: .92;
}

/* Hero pick and the Siirto wordmark share one grid cell, so the mark sits
   directly under the card instead of wrapping to a new grid row. */
.pick-col { display: block; }

/* Mobile hero: title and byline first so the reader knows where they are, then
   the offer card, then the explanation. The copy column becomes display:contents
   so its children and the card can be ordered as one stack; row-gap goes to 0 so
   each element keeps its own margins instead of inheriting the 30px grid gap.
   hero: offer card above the explanation */
@media (max-width: 940px) {
	.hero .grid { row-gap: 0; }
	.hero .grid > div:first-child { display: contents; }
	.hero .grid > div:first-child > .eyebrow { order: 1; }
	.hero .grid > div:first-child > h1 { order: 2; }
	.hero .grid > div:first-child > .byline { order: 3; }
	.hero .grid > .pick-col { order: 4; max-width: 460px; margin: 22px 0 6px; }
	.hero .grid > div:first-child > .lead { order: 5; }
	.hero .grid > div:first-child > .facts { order: 6; }
	.hero .grid > div:first-child > .hero-btns { order: 7; }
}

/* Named editorial opinion inside the article. Deliberately a different shape to
   the .note boxes so a reader can tell a person is speaking, and the portrait
   plus linked name make the attribution checkable. author quote */
.authorquote {
	margin: 26px 0; padding: 24px 26px 20px;
	background: var(--bg-alt, #f3f1f7);
	border-radius: 16px;
	text-align: center;
}
.aq-face {
	display: block; width: 72px; height: 72px; border-radius: 50%;
	margin: 0 auto 14px; background: #fff;
}
.authorquote .aq-text {
	margin: 0; padding: 0; border: 0; font-style: normal;
}
.authorquote .aq-text p {
	margin: 0; font-size: 1.02rem; line-height: 1.6; font-weight: 600;
	color: var(--tx, #1b1b2b);
}
/* straight quotes, per house style */
.authorquote .aq-text p::before { content: "\0022"; }
.authorquote .aq-text p::after  { content: "\0022"; }
.aq-by {
	margin-top: 14px; font-size: .82rem; line-height: 1.45;
	display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.aq-by .aq-name { font-weight: 700; text-decoration: none; }
.aq-by .aq-name:hover { text-decoration: underline; }
.aq-by .aq-role { color: #58586e; }

@media (max-width: 640px) {
	.authorquote { padding: 20px 18px 16px; margin: 22px 0; }
	.authorquote .aq-text p { font-size: .97rem; }
}

/* Refinement: the quote was reading as loud as a section of its own. Narrower
   than the text column, smaller portrait and lighter type, so it sits inside the
   section as an aside rather than competing with it. author quote smaller */
.authorquote {
	max-width: 560px;
	margin: 22px auto;
	padding: 18px 22px 15px;
	border-radius: 14px;
}
.aq-face { width: 54px; height: 54px; margin-bottom: 10px; }
.authorquote .aq-text p {
	font-size: .93rem;
	line-height: 1.55;
	font-weight: 500;
}
.aq-by { margin-top: 10px; font-size: .76rem; }
.aq-by .aq-role { font-size: .72rem; }

@media (max-width: 640px) {
	.authorquote { max-width: none; padding: 16px 16px 13px; margin: 18px 0; }
	.authorquote .aq-text p { font-size: .9rem; }
	.aq-face { width: 48px; height: 48px; }
}

/* --- toimituksen testikommentit -------------------------------------------
   Card track with a page counter, mid-page. One row that scroll-snaps rather
   than a wrapping grid, so the same block takes four cards or nine without the
   section changing height. Colours come from this theme's own palette; the
   accent is darkened where the brand colour is too light to read as text. */
.tk { --tk-card: #f8f4ee; --tk-line: #e6ded3; --tk-ink: #241a1c;
      --tk-soft: #5a4a4c; --tk-faint: #877578; --tk-accent: #8c1d3f;
      margin: 44px 0; }
.tk > h2 { margin-bottom: 10px; }
.tk-lead { color: var(--tk-soft); margin-bottom: 20px; }

.tk-wrap { position: relative; }
.tk-track {
	display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 32px) / 3);
	gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
	scroll-padding-left: 0; padding-bottom: 4px;
	scrollbar-width: none; -ms-overflow-style: none;
}
.tk-track::-webkit-scrollbar { display: none; }
.tk-track:focus-visible { outline: 2px solid var(--tk-accent); outline-offset: 3px; }

.tk-card {
	position: relative; scroll-snap-align: start;
	background: var(--tk-card); border: 1px solid var(--tk-line);
	border-radius: 10px; padding: 16px 18px 18px;
}
.tk-q {
	position: absolute; top: 6px; right: 12px;
	font-size: 30px; line-height: 1; font-weight: 700;
	color: var(--tk-line); pointer-events: none;
}
.tk-head {
	display: flex; justify-content: space-between; align-items: baseline;
	gap: 10px; padding-right: 26px; margin-bottom: 8px;
}
.tk-who { font-weight: 700; color: var(--tk-ink); font-size: .95rem; }
.tk-brand { font-weight: 700; color: var(--tk-accent); font-size: .95rem; white-space: nowrap; }
.tk-card p { margin: 0; color: var(--tk-soft); font-size: .93rem; line-height: 1.55; }

.tk-foot {
	display: flex; justify-content: space-between; align-items: center;
	margin-top: 14px;
}
.tk-count { color: var(--tk-faint); font-size: .85rem; }
.tk-count b { color: var(--tk-ink); }
.tk-nav { display: flex; gap: 8px; }
.tk-btn {
	width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
	border: 1px solid var(--tk-line); background: transparent;
	color: var(--tk-soft); font-size: 1.05rem; line-height: 1;
	display: grid; place-items: center;
}
.tk-btn:hover:not(:disabled) { border-color: var(--tk-accent); color: var(--tk-accent); }
.tk-btn:disabled { opacity: .35; cursor: default; }
/* Four cards on a wide screen still page; one screenful of cards does not. */
.tk-single .tk-foot { display: none; }

@media (max-width: 900px) {
	.tk-track { grid-auto-columns: calc((100% - 16px) / 2); }
}
@media (max-width: 620px) {
	.tk-track { grid-auto-columns: 86%; }
	.tk { margin: 32px 0; }
}

/* --- arvostelut: hub list and review card ---------------------------------
   One row per casino: identity, offer and facts, action. Three columns on a
   wide screen, stacked below 860px. Colours are this theme's own, with the
   accent darkened where the brand colour is too light to read as text. */
.rv-list { --rv-card: #ffffff; --rv-tint: #f8f4ee; --rv-line: #e6ded3;
           --rv-ink: #241a1c; --rv-soft: #5a4a4c; --rv-faint: #877578;
           --rv-accent: #8c1d3f;
           display: grid; gap: 14px; margin: 26px 0 34px; }

.rv-row {
	display: grid; grid-template-columns: minmax(0, 1fr) 186px;
	grid-template-areas: "lead act" "mid act";
	gap: 10px 18px; align-items: start;
	background: var(--rv-card); border: 1px solid var(--rv-line);
	border-radius: 12px; padding: 16px 18px;
}
.rv-lead { display: flex; align-items: center; gap: 12px; min-width: 0; }
.rv-rank {
	flex: none; width: 26px; height: 26px; border-radius: 50%;
	display: grid; place-items: center; font-weight: 800; font-size: .8rem;
	background: var(--rv-accent); color: #fff;
}
/* Fixed plate, flex not grid: a percentage height on a centred grid item
   resolves to auto and a tall logo overflows. */
.rv-logo {
	flex: none; width: 104px; height: 48px; border-radius: 8px;
	background: var(--rv-tint); display: flex; align-items: center;
	justify-content: center; overflow: hidden; padding: 6px 8px;
}
.rv-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.rv-logo i { font-style: normal; font-weight: 800; color: var(--rv-soft); }
.rv-id { display: grid; gap: 2px; min-width: 0; }
.rv-id b { color: var(--rv-ink); font-size: 1.02rem; }
.rv-rate { color: var(--rv-faint); font-size: .84rem; }

.rv-mid { display: grid; gap: 3px; min-width: 0; }
.rv-lab {
	font-size: .64rem; font-weight: 700; letter-spacing: .09em;
	text-transform: uppercase; color: var(--rv-faint);
}
.rv-bonus { font-weight: 700; color: var(--rv-ink); font-size: 1rem; line-height: 1.3; }
.rv-spins { color: var(--rv-accent); font-weight: 600; font-size: .86rem; }
.rv-facts {
	display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 6px;
	padding-top: 8px; border-top: 1px solid var(--rv-line);
}
.rv-facts div { display: flex; gap: 6px; font-size: .82rem; }
.rv-facts span { color: var(--rv-faint); }
.rv-facts b { color: var(--rv-soft); font-weight: 600; }

.rv-act { display: grid; justify-items: center; gap: 6px; }
.rv-act .rv-go { width: 100%; text-align: center; }
.rv-more { font-size: .86rem; font-weight: 600; color: var(--rv-accent); }
.rv-soon { font-size: .82rem; color: var(--rv-faint); }
.rv-fine { font-size: .68rem; color: var(--rv-faint); }

.rv-single { margin-top: 0; }
.rv-single .rv-row { background: var(--rv-tint); }

@media (max-width: 620px) {
	.rv-row { grid-template-columns: 1fr; grid-template-areas: "lead" "mid" "act"; }
	.rv-act { justify-items: stretch; align-self: stretch; }
}
.rv-lead { grid-area: lead; }
.rv-mid  { grid-area: mid; }
.rv-act  { grid-area: act; align-self: center; }
.rv-id b { overflow-wrap: anywhere; }