/*
 * SEO pillar page (page-hakukoneoptimointi.php). Components the utility build does not have,
 * written with the theme tokens so they follow the colours, radii and type of the site.
 */

/* On wider screens headings keep "hakukoneoptimointi" whole; phones still need the hyphen to fit */
@media (min-width: 40rem) {
	#sisalto h1,
	#sisalto h2 {
		hyphens: manual;
	}
}

/* Hero: eyebrow pill and trust row on the gradient */
.pl-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-2);
	border-radius: var(--radius-pill);
	background: color-mix(in oklab, var(--color-white) 16%, transparent);
	padding: var(--spacing-1) var(--spacing-4);
	font-size: var(--text-sm);
	font-weight: var(--font-weight-bold);
	color: var(--color-white);
}
.pl-trust {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-3) var(--spacing-6);
	margin-top: var(--spacing-8);
	color: var(--color-white);
	font-size: var(--text-sm);
	font-weight: var(--font-weight-bold);
}
.pl-trust li {
	display: flex;
	align-items: center;
	gap: var(--spacing-2);
}
.pl-hero-figure {
	margin-inline: auto;
	width: 100%;
	max-width: 28rem;
}
@media (min-width: 64rem) {
	.pl-hero-figure {
		max-width: none;
	}
}

/* Key figures under the hero */
.pl-stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--spacing-4);
}
.pl-stats li {
	border-radius: var(--radius-card);
	background: var(--color-surface);
	padding: var(--spacing-6);
}
.pl-stats strong {
	display: block;
	font-size: var(--text-price);
	line-height: 1;
	font-weight: var(--font-weight-bold);
	color: var(--color-accent);
	font-variant-numeric: tabular-nums;
}
.pl-stats span {
	display: block;
	margin-top: var(--spacing-2);
	color: var(--color-ink-2);
}
@media (min-width: 64rem) {
	.pl-stats {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--spacing-6);
	}
}

/* Definition: the answer to "mitä hakukoneoptimointi on" set apart for readers and snippets */
.pl-definition {
	border-left: 4px solid var(--color-accent);
	padding-left: var(--spacing-6);
	font-size: var(--text-lg);
	line-height: 1.6;
	color: var(--color-ink);
}

/* Comparison table */
.pl-table {
	width: 100%;
	border-collapse: collapse;
	text-align: left;
	font-size: var(--text-sm);
}
.pl-table th,
.pl-table td {
	padding: var(--spacing-4);
	vertical-align: top;
	border-bottom: 1px solid var(--color-line);
}
.pl-table tr:last-child th,
.pl-table tr:last-child td {
	border-bottom: 0;
}
.pl-table thead th {
	font-weight: var(--font-weight-bold);
	color: var(--color-ink-2);
}
.pl-table thead th.pl-col-seo {
	color: var(--color-accent);
}
.pl-table tbody th {
	font-weight: var(--font-weight-bold);
	color: var(--color-ink);
	width: 30%;
}
.pl-table td.pl-col-seo {
	background: var(--color-accent-soft);
	color: var(--color-ink);
	font-weight: var(--font-weight-bold);
}
@media (min-width: 40rem) {
	.pl-table {
		font-size: var(--text-base);
	}
}

/* Process: numbered steps joined by a line, across on desktop and down on phones */
.pl-steps {
	display: grid;
	gap: var(--spacing-8);
	counter-reset: step;
}
.pl-steps li {
	position: relative;
	padding-left: var(--spacing-16);
}
.pl-steps li::before {
	counter-increment: step;
	content: counter(step, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--spacing-12);
	height: var(--spacing-12);
	border-radius: var(--radius-pill);
	background-image: linear-gradient(135deg, var(--color-hero-from), var(--color-hero-to));
	color: var(--color-white);
	font-weight: var(--font-weight-bold);
	box-shadow: 0 0 0 6px var(--color-surface);
}
.pl-steps li:not(:last-child)::after {
	content: "";
	position: absolute;
	left: calc(var(--spacing-6) - 1px);
	top: var(--spacing-12);
	bottom: calc(var(--spacing-8) * -1);
	width: 2px;
	background: color-mix(in oklab, var(--color-accent) 30%, transparent);
}
@media (min-width: 64rem) {
	.pl-steps {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--spacing-6);
	}
	.pl-steps li {
		padding-left: 0;
		padding-top: var(--spacing-20);
	}
	.pl-steps li:not(:last-child)::after {
		left: var(--spacing-12);
		right: calc(var(--spacing-6) * -1);
		top: calc(var(--spacing-6) - 1px);
		bottom: auto;
		width: auto;
		height: 2px;
	}
}

/* Services bento: a dark lead tile beside linked service tiles */
.pl-bento {
	display: grid;
	gap: var(--spacing-4);
}
.pl-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-3);
	border-radius: var(--radius-card);
	border: 1px solid var(--color-line);
	background: var(--color-white);
	padding: var(--spacing-6);
	transition: border-color 0.15s ease-out, box-shadow 0.2s ease-out, transform 0.2s ease-out;
}
.pl-tile:hover {
	border-color: var(--color-accent);
	box-shadow: 0 8px 24px -8px color-mix(in oklab, var(--color-ink) 18%, transparent);
	transform: translateY(-2px);
}
.pl-tile-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--spacing-10);
	height: var(--spacing-10);
	border-radius: var(--radius-chip);
	background: var(--color-accent-soft);
	color: var(--color-accent);
}
.pl-tile-lead {
	border: 0;
	background-image: linear-gradient(160deg, var(--color-ink) 55%, var(--color-hero-from));
	color: var(--color-white);
	padding: var(--spacing-8);
}
.pl-tile-lead:hover {
	transform: none;
	box-shadow: none;
}
@media (min-width: 40rem) {
	.pl-bento {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.pl-tile-lead {
		grid-column: span 2;
	}
}
@media (min-width: 64rem) {
	.pl-bento {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--spacing-6);
	}
	.pl-tile-lead {
		grid-column: span 1;
		grid-row: span 2;
	}
}

/* Timeline: fixed column for the period so the descriptions line up */
.pl-period {
	width: 6rem;
}

/* Audiences: cards with an accent edge */
.pl-audience {
	border-radius: var(--radius-card);
	background: var(--color-white);
	padding: var(--spacing-6);
	box-shadow: inset 4px 0 0 var(--color-accent);
}

/* Pricing rows */
.pl-plan {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-4);
	border-radius: var(--radius-card);
	border: 1px solid var(--color-line);
	background: var(--color-white);
	padding: var(--spacing-6);
}
.pl-plan-featured {
	border: 2px solid var(--color-accent);
}

/* Expandable FAQ: details/summary states have no utility classes */
.faq-item {
	border-bottom: 1px solid var(--color-line);
}
.faq-item > summary {
	list-style: none;
	padding-block: var(--spacing-6);
}
.faq-item > summary::-webkit-details-marker {
	display: none;
}
.faq-item .faq-icon {
	transition: background-color 0.15s ease-out, color 0.15s ease-out;
}
.faq-item .faq-icon svg {
	transform: rotate(90deg);
	transition: transform 0.2s ease-out;
}
.faq-item[open] .faq-icon {
	background: var(--color-accent);
	color: var(--color-white);
}
.faq-item[open] .faq-icon svg {
	transform: rotate(-90deg);
}
.faq-item .faq-answer {
	padding-bottom: var(--spacing-6);
	max-width: 65ch;
}

@media (prefers-reduced-motion: reduce) {
	.pl-tile,
	.faq-item .faq-icon,
	.faq-item .faq-icon svg {
		transition: none;
	}
	.pl-tile:hover {
		transform: none;
	}
}