/*
 * Responsia front page section blocks.
 *
 * Kept apart from main.css (which carries the article and archive styles) so
 * the sections built from the Figma design can be iterated on on their own.
 * Colors and sizes come from theme.json presets; the few values that are not
 * presets (the sections' own rhythm) are the local custom properties below.
 */

:root {
	/* The design's 88px page gutter and 104px section rhythm, made fluid. */
	--r-pad-inline: clamp(1.25rem, 6.1vw, 5.5rem);
	--r-pad-block: clamp(3rem, 7.2vw, 6.5rem);
	--r-radius: 6px;
	--r-hairline: 1px solid rgba(26, 9, 13, 0.14);
	--r-text-body: var(--wp--preset--color--ink-soft, #4e464b);
	--r-text-muted: var(--wp--preset--color--ink-muted, #6a6066);
	/* The design's text color on the dark plum sections and on the image cards;
	   a warm off-white that is not one of the palette presets. */
	--r-text-on-dark: #fbf4f9;
	/* The panel a customer logo sits on, in the reference listings. */
	--r-logo-panel: #efeae8;
}

/* -------------------------------------------------------------------------
 * Shared section furniture
 * ---------------------------------------------------------------------- */

.responsia-section--base {
	background-color: var(--wp--preset--color--base);
}

.responsia-section--sand {
	background-color: var(--wp--preset--color--sand);
}

.responsia-section--cream {
	background-color: var(--wp--preset--color--cream);
}

/* The 13px spaced-out label above a section heading. */
.responsia-eyebrow,
.is-style-responsia-eyebrow {
	margin: 0;
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 600;
	letter-spacing: 0.16em;
	line-height: 1.5;
	text-transform: uppercase;
}

.responsia-eyebrow--light {
	color: var(--wp--preset--color--base);
}

.is-style-responsia-lead {
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.6;
}

/* The design's pill button, for the links the blocks render themselves. */
.responsia-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.75rem 1.375rem;
	border: 1px solid transparent;
	border-radius: 999px;
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--off-white);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.5;
	text-decoration: none;
}

a.responsia-button:hover,
a.responsia-button:focus,
button.responsia-button:hover,
button.responsia-button:focus {
	background-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--off-white);
	text-decoration: none;
}

.responsia-button--outline {
	border-color: rgba(251, 244, 249, 0.55);
	background-color: transparent;
	color: var(--wp--preset--color--base);
}

a.responsia-button--outline:hover,
a.responsia-button--outline:focus {
	background-color: rgba(251, 244, 249, 0.12);
	color: var(--wp--preset--color--base);
}

.responsia-button--block {
	width: 100%;
	padding: 0.875rem 1.625rem;
	border: 0;
	cursor: pointer;
	font-family: inherit;
}

/* The light "puuteri" pill, registered as a core button style. */
.wp-block-button.is-style-responsia-blush .wp-block-button__link {
	background-color: var(--wp--preset--color--blush);
	color: var(--wp--preset--color--accent);
}

.wp-block-button.is-style-responsia-blush .wp-block-button__link:hover,
.wp-block-button.is-style-responsia-blush .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--base);
}

/* The 8px arrow the design draws as a rotated corner. */
.responsia-chevron {
	flex: none;
	width: 8px;
	height: 8px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: rotate(45deg);
}

/* -------------------------------------------------------------------------
 * Hero
 * ---------------------------------------------------------------------- */

.responsia-hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--r-pad-block) var(--r-pad-inline);
	overflow: hidden;
	background-color: var(--wp--preset--color--accent);
	background-position: center;
	background-size: cover;
	color: #fbf4f9;
}

.responsia-hero__scrim {
	position: absolute;
	inset: 0;
	background-image: linear-gradient(
		to bottom,
		rgba(26, 9, 13, 0.58),
		rgba(26, 9, 13, 0.5) 50%,
		rgba(26, 9, 13, 0.58)
	);
}

.responsia-hero__content {
	position: relative;
	width: 100%;
	max-width: 45.25rem; /* 724px, the design's text column */
	text-align: center;
}

.responsia-hero__content :where(h1, h2) {
	margin: 0;
	color: #fbf4f9;
}

.responsia-hero__content p {
	max-width: 37.5rem; /* 600px */
	margin-inline: auto;
	color: rgba(251, 244, 249, 0.88);
	text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}

.responsia-hero__content > * + * {
	margin-top: 1.875rem;
}

.responsia-hero__content .wp-block-buttons {
	margin-top: 2.75rem;
	gap: 1.125rem;
}

/* -------------------------------------------------------------------------
 * Esittely ja luvut
 * ---------------------------------------------------------------------- */

.responsia-intro-stats {
	display: grid;
	grid-template-columns: 0.42fr 0.58fr;
	gap: 5rem;
	padding: var(--r-pad-block) var(--r-pad-inline);
}

.responsia-intro-stats__intro :where(h2, h3) {
	margin: 0;
	max-width: 31.5rem;
}

.responsia-intro-stats__intro .responsia-eyebrow {
	margin-bottom: 1rem;
}

.responsia-intro-stats__text {
	margin: 0;
	color: var(--wp--preset--color--ink-soft);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.6;
}

.responsia-intro-stats__stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2.5rem;
	margin-top: 2.5rem;
}

.responsia-stat__value {
	margin: 0;
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--ubuntu);
	font-size: 2.875rem;
	line-height: 1;
}

.responsia-stat__label {
	margin: 0.75rem 0 0;
	color: var(--r-text-muted);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.55;
}

/* -------------------------------------------------------------------------
 * Sivun hero (HSEQ-sivun ja muiden sisäsivujen aloitus)
 * ---------------------------------------------------------------------- */

/* Two even columns: the text sits in the left half at the page gutter, the
   image fills the right half up to the gutter on its side. The 4.5rem gap is
   the design's 72px between the text measure and the image. */
.responsia-page-hero {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 4.5rem;
	padding: 5rem var(--r-pad-inline);
}

.responsia-page-hero__text {
	max-width: 35rem; /* 560px */
}

.responsia-page-hero__heading {
	margin: 0;
	font-size: clamp(2.25rem, 1.4rem + 3.4vw, 3.5rem); /* 56px in the design */
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.responsia-page-hero__lead {
	margin: 1.5rem 0 0;
	max-width: 30rem; /* 480px */
	color: var(--r-text-body);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.6;
}

.responsia-page-hero__cta {
	margin: 2.25rem 0 0;
}

.responsia-page-hero__media {
	border-radius: var(--r-radius);
	background-color: var(--wp--preset--color--cream);
	overflow: hidden;
}

.responsia-page-hero__media img {
	display: block;
	width: 100%;
	aspect-ratio: 632 / 480;
	object-fit: cover;
}

/* -------------------------------------------------------------------------
 * Koulutuskortit (Koulutukset- ja HSEQ-koulutukset-sivut)
 * ---------------------------------------------------------------------- */

.responsia-course-cards {
	padding: var(--r-pad-block) var(--r-pad-inline);
}

.responsia-course-cards__heading {
	margin: 0;
	max-width: 50rem;
}

.responsia-course-cards__lead {
	margin: 1.25rem 0 0;
	max-width: 40rem;
	color: var(--r-text-body);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.6;
}

.responsia-course-cards__grid {
	display: grid;
	grid-template-columns: repeat(var(--r-course-columns, 4), minmax(0, 1fr));
	gap: 1.5rem;
	margin-top: 3rem;
}

.responsia-course-cards--2 .responsia-course-cards__grid {
	--r-course-columns: 2;
}

.responsia-course-cards--3 .responsia-course-cards__grid {
	--r-course-columns: 3;
}

/* The card is one link over a photo: the scrim keeps the text readable however
   light the photo is, and the pill is a span because the whole card is the
   link already. */
.responsia-course-card__link {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 27.5rem; /* 440px */
	padding: 2.5rem 2.125rem;
	border-radius: var(--r-radius);
	background-color: var(--wp--preset--color--contrast);
	box-shadow: 0 10px 26px rgba(26, 9, 13, 0.1);
	overflow: hidden;
	color: var(--r-text-on-dark);
	text-decoration: none;
}

.responsia-course-card__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.responsia-course-card__scrim {
	position: absolute;
	inset: 0;
	background-image: linear-gradient(
		to bottom,
		rgba(26, 9, 13, 0.84),
		rgba(26, 9, 13, 0.52) 52%,
		rgba(26, 9, 13, 0.72)
	);
}

/* The body is pinned to the top of the card and the pill to the bottom, as in
   the design, whatever the card's height turns out to be. */
.responsia-course-card__body {
	position: relative;
	margin-bottom: auto;
}

.responsia-course-card__heading {
	margin: 0;
	color: var(--r-text-on-dark);
	font-size: 1.5rem; /* 24px */
	line-height: 1.22;
	letter-spacing: -0.015em;
}

/* Three across, the cards are wider and the design sets the type a step up. */
.responsia-course-cards--3 .responsia-course-card__link {
	padding: 2.5rem 2.375rem;
}

.responsia-course-cards--3 .responsia-course-card__heading {
	font-size: 1.75rem; /* 28px */
	line-height: 1.2;
}

.responsia-course-card__text {
	margin: 0.875rem 0 0;
	color: rgba(251, 244, 249, 0.86);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.4;
}

.responsia-course-card__cta {
	position: relative;
	align-self: flex-start;
	margin-top: 2rem;
	padding: 0.8125rem 1.5rem;
	border-radius: 999px;
	background-color: var(--wp--preset--color--blush);
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.5;
}

.responsia-course-card__link:hover .responsia-course-card__cta,
.responsia-course-card__link:focus-visible .responsia-course-card__cta {
	background-color: var(--wp--preset--color--base);
}

.responsia-course-card__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
}

/* -------------------------------------------------------------------------
 * Numeroidut askeleet (Koulutukset-sivu)
 * ---------------------------------------------------------------------- */

.responsia-steps {
	display: grid;
	grid-template-columns: 0.42fr 0.58fr;
	align-items: start;
	gap: 4.5rem;
	padding: var(--r-pad-block) var(--r-pad-inline);
	background-color: var(--wp--preset--color--accent);
	color: var(--r-text-on-dark);
}

.responsia-steps--media-right .responsia-steps__media {
	order: 2;
}

.responsia-steps__media {
	border-radius: var(--r-radius);
	background-color: var(--wp--preset--color--cream);
	overflow: hidden;
}

.responsia-steps__media img {
	display: block;
	width: 100%;
	aspect-ratio: 507 / 440;
	object-fit: cover;
}

.responsia-steps__heading {
	margin: 0;
	color: var(--r-text-on-dark);
}

/* The numbers are a CSS counter, so reordering the steps renumbers them. */
.responsia-steps__list {
	counter-reset: responsia-step;
	display: grid;
	gap: 1.375rem; /* 22px */
	margin: 2rem 0 0;
	padding: 0;
	list-style: none;
}

.responsia-step {
	display: grid;
	grid-template-columns: 2.375rem minmax(0, 1fr); /* 38px + text */
	gap: 1.25rem;
	align-items: start;
	counter-increment: responsia-step;
}

.responsia-step::before {
	content: counter(responsia-step);
	display: grid;
	place-items: center;
	width: 2.375rem;
	height: 2.375rem;
	border-radius: 50%;
	background-color: rgba(251, 244, 249, 0.12);
	color: var(--r-text-on-dark);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.5;
}

/* The step's own heading is body font in the design, not Ubuntu. */
.responsia-step__heading {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 1.375rem; /* 22px */
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--r-text-on-dark);
}

.responsia-step__text {
	margin: 0.375rem 0 0;
	max-width: 35rem;
	color: rgba(251, 244, 249, 0.78);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.5;
}

/* -------------------------------------------------------------------------
 * Kurssin tiedot (koulutussivun sivupalkki)
 * ---------------------------------------------------------------------- */

.responsia-course-facts {
	padding: 2.5rem 2.25rem;
	border-radius: var(--r-radius);
	background-color: var(--wp--preset--color--cream);
}

.responsia-course-facts__heading {
	margin: 0;
	font-size: 1.5rem; /* 24px */
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.responsia-course-facts__list {
	display: grid;
	gap: 1.5rem;
	margin: 1.5rem 0 0;
}

.responsia-course-facts__row > dt {
	margin: 0;
}

.responsia-course-facts__value {
	margin: 0.5rem 0 0;
	color: var(--color-nav-link, #3e363b);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.6;
}

/* -------------------------------------------------------------------------
 * Referenssit: nostettu case ja case-ruudukko (Figma 1:734)
 * ---------------------------------------------------------------------- */

/* Customer logos are shown in grey at 68%, so a wall of brand colours does not
   compete with the page's own. */
.responsia-logo,
.case-card .wp-block-post-featured-image img {
	max-width: 12.5rem; /* 200px */
	max-height: 4.375rem; /* 70px */
	width: auto;
	height: auto;
	object-fit: contain;
	filter: grayscale(1);
	opacity: 0.68;
}

.responsia-reference-feature {
	display: grid;
	grid-template-columns: 0.575fr 0.425fr;
	align-items: center;
	gap: 4rem;
	padding: 4.75rem var(--r-pad-inline) 4rem;
}

/* The logo panel: a light box the logo is centred in, whatever its shape. */
.responsia-reference-feature__media,
.case-card .wp-block-post-featured-image {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2.5rem;
	border-radius: var(--r-radius);
	background-color: var(--r-logo-panel);
}

.responsia-reference-feature__media {
	min-height: 26.25rem; /* 420px */
}

.responsia-reference-feature__media .responsia-logo {
	max-width: 26.5rem;
	max-height: 7.5rem; /* 120px */
}

.responsia-reference-feature__heading {
	margin: 0;
	max-width: 32rem;
}

.responsia-reference-feature__heading a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.responsia-reference-feature__heading a:hover,
.responsia-reference-feature__heading a:focus-visible {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.responsia-reference-feature__quote {
	margin: 1.5rem 0 0;
	max-width: 32.5rem; /* 520px */
	border: 0;
	padding: 0;
	color: var(--color-nav-link, #3e363b);
	font-size: 1.1875rem; /* 19px */
	line-height: 1.6;
}

.responsia-reference-feature__quote p {
	margin: 0;
}

.responsia-reference-feature__author {
	margin: 1.25rem 0 0;
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.5;
}

/* The case listing: the same card rhythm as the blog grid, but the image is a
   logo on its panel rather than a photo. */
.case-cards .wp-block-post-template {
	gap: 2.75rem 1.5rem !important;
}

.case-card .wp-block-post-featured-image {
	height: 15.625rem; /* 250px */
	margin: 0;
}

/* Nothing in the card should swallow the stretched link's clicks. */
.case-card .wp-block-post-featured-image img {
	pointer-events: none;
}

.case-card .wp-block-post-title {
	margin: 1rem 0 0;
	font-size: 1.5rem; /* 24px */
	line-height: 1.28;
}

.case-card .wp-block-post-title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.case-card .wp-block-post-title a:hover,
.case-card .wp-block-post-title a:focus-visible {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

/* -------------------------------------------------------------------------
 * Palvelukortit
 * ---------------------------------------------------------------------- */

.responsia-service-cards {
	padding: var(--r-pad-block) var(--r-pad-inline);
}

.responsia-service-cards__heading {
	margin: 1rem 0 0;
	max-width: 45rem;
}

.responsia-service-cards__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem;
	margin-top: 4rem;
}

.responsia-service-card {
	display: flex;
	flex-direction: column;
	padding: 2.25rem 2.125rem 2.5rem;
	border-radius: var(--r-radius);
	background-color: var(--wp--preset--color--sand-deep);
}

/* The optional label above a card's heading (ISO 9001, ISO 14001, ...). */
.responsia-service-card .responsia-eyebrow {
	margin: 0 0 0.875rem;
}

.responsia-service-card__heading {
	margin: 0 0 1rem;
}

.responsia-service-card__text {
	margin: 0 0 1.5rem;
	color: var(--r-text-body);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
}

.responsia-service-card__links {
	margin: 0 0 1.625rem;
	padding: 0;
	list-style: none;
}

.responsia-service-card__links a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.8125rem 0;
	border-bottom: var(--r-hairline);
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--medium);
	text-decoration: none;
}

.responsia-service-card__links a:hover,
.responsia-service-card__links a:focus {
	color: var(--wp--preset--color--primary);
}

/* The button sits on the card's bottom edge however long the text runs. */
.responsia-service-card__cta {
	margin: auto 0 0;
}

/* -------------------------------------------------------------------------
 * Referenssisitaatti
 * ---------------------------------------------------------------------- */

.responsia-quote-feature {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 31.5rem;
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
}

.responsia-quote-feature__text {
	padding: clamp(3rem, 6.7vw, 6rem) var(--r-pad-inline);
}

.responsia-quote-feature__quote {
	margin: 2rem 0 0;
	padding: 0;
	border: 0;
	max-width: 58.75rem;
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--ubuntu);
	font-size: var(--wp--preset--font-size--xx-large);
	letter-spacing: -0.01em;
	line-height: 1.35;
}

.responsia-quote-feature__author {
	margin: 2.25rem 0 0;
	font-size: var(--wp--preset--font-size--large);
}

.responsia-quote-feature__role {
	margin: 0;
	color: rgba(255, 255, 255, 0.7);
	font-size: var(--wp--preset--font-size--large);
}

.responsia-quote-feature__logo {
	margin: 2rem 0 0;
}

/* The logo keeps the white card the design puts behind it. */
.responsia-quote-feature__logo img {
	display: block;
	width: auto;
	height: 30px;
	padding: 0.875rem 1.25rem;
	background-color: var(--wp--preset--color--base);
	box-sizing: content-box;
}

.responsia-quote-feature__cta {
	margin: 2rem 0 0;
}

.responsia-quote-feature__media {
	min-height: 100%;
	background-color: var(--wp--preset--color--cream);
}

.responsia-quote-feature__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* -------------------------------------------------------------------------
 * Kuva ja nosto
 * ---------------------------------------------------------------------- */

.responsia-media-feature {
	display: grid;
	grid-template-columns: 0.4fr 0.6fr;
	align-items: center;
	gap: 4.5rem;
	padding: var(--r-pad-block) var(--r-pad-inline);
}

.responsia-media-feature--media-right .responsia-media-feature__media {
	order: 2;
}

.responsia-media-feature__media {
	border-radius: var(--r-radius);
	background-color: var(--wp--preset--color--cream);
	overflow: hidden;
}

.responsia-media-feature__media img {
	display: block;
	width: 100%;
	aspect-ratio: 477 / 460;
	object-fit: cover;
}

.responsia-media-feature__text :where(h2, h3) {
	margin: 1.625rem 0 0;
}

.responsia-media-feature__body {
	margin: 1.5rem 0 0;
	max-width: 35rem;
	color: var(--r-text-body);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.6;
}

/* The design's bulleted list: a 7px dot at the first line's optical centre,
   16px from the text. Drawn as a pseudo-element rather than a list marker, so
   the dot keeps its exact size and stays put when a bullet wraps. */
.responsia-media-feature__list {
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 1rem;
	max-width: 38rem; /* 608px */
	color: var(--r-text-body);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.6;
}

.responsia-media-feature__list li {
	position: relative;
	padding-left: 1.4375rem; /* 7px dot + 16px gap */
}

.responsia-media-feature__list li::before {
	content: "";
	position: absolute;
	top: 0.6875rem;
	left: 0;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: currentColor;
}

.responsia-media-feature__cta {
	margin: 2rem 0 0;
}

/* -------------------------------------------------------------------------
 * Ajankohtaista (Sisältönosto-blokin Responsia-ilme)
 * ---------------------------------------------------------------------- */

.responsia-section--posts,
.wp-block-responsia-latest-posts .wp-block-post-featured-image img {
	border-radius: var(--r-radius);
}

.wp-block-responsia-latest-posts .wp-block-post-title {
	font-family: var(--wp--preset--font-family--ubuntu);
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1.28;
}

/* -------------------------------------------------------------------------
 * Henkilöesittely
 * ---------------------------------------------------------------------- */

.responsia-profile {
	display: grid;
	grid-template-columns: 18.75rem minmax(0, 1fr);
	gap: 4rem;
	align-items: start;
	padding: clamp(3rem, 6.7vw, 6rem) var(--r-pad-inline);
}

.responsia-profile__photo {
	width: 18.75rem;
	border-radius: var(--r-radius);
	background-color: var(--wp--preset--color--cream);
	overflow: hidden;
}

.responsia-profile__photo img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
}

.responsia-profile__body :where(h2, h3) {
	margin: 0;
}

.responsia-profile__role {
	margin: 0.875rem 0 0;
	color: var(--r-text-muted);
	font-size: var(--wp--preset--font-size--eyebrow);
	letter-spacing: 0.09em;
	line-height: 1.6;
	text-transform: uppercase;
}

.responsia-profile__contact {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	margin: 1.375rem 0 0;
	padding: 0;
	list-style: none;
}

.responsia-profile__contact a,
.responsia-profile__contact span {
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--large);
	text-decoration: none;
}

.responsia-profile__intro p {
	margin: 1.75rem 0 0;
	color: var(--r-text-body);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
}

/* -------------------------------------------------------------------------
 * Yhteydenottolomake
 * ---------------------------------------------------------------------- */

.responsia-contact {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 5rem;
	padding: var(--r-pad-block) var(--r-pad-inline);
	background-color: var(--wp--preset--color--charcoal);
	color: var(--wp--preset--color--base);
}

.responsia-contact :where(h2, h3) {
	margin: 0;
	color: var(--wp--preset--color--base);
}

.responsia-contact__text {
	margin: 1.5rem 0 0;
	max-width: 28.75rem;
	color: rgba(255, 255, 255, 0.72);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.6;
}

.responsia-contact__form h3 {
	margin-bottom: 0.875rem;
	font-size: 1.75rem;
	letter-spacing: -0.015em;
	line-height: 1.5;
}

.responsia-contact__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.875rem;
}

.responsia-field {
	display: flex;
	flex-direction: column;
	gap: 0.4375rem;
	margin: 0 0 0.875rem;
}

.responsia-field__label {
	color: rgba(255, 255, 255, 0.72);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
}

.responsia-field__input {
	display: block;
	width: 100%;
	padding: 0.75rem 0.9375rem;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: var(--r-radius);
	background-color: rgba(255, 255, 255, 0.06);
	box-sizing: border-box;
	color: var(--wp--preset--color--base);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.5;
}

.responsia-field__input::placeholder {
	color: rgba(255, 255, 255, 0.5);
}

.responsia-field__input:focus {
	border-color: rgba(255, 255, 255, 0.6);
	outline: 2px solid transparent;
	outline-offset: 2px;
}

.responsia-field__input--area {
	min-height: 7rem;
	resize: vertical;
}

.responsia-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	margin: 0 0 0.5rem;
	color: rgba(255, 255, 255, 0.72);
	font-size: 0.9375rem;
	line-height: 1.5;
}

.responsia-checkbox input[type="checkbox"],
.responsia-checkbox__box {
	flex: none;
	width: 18px;
	height: 18px;
	margin: 0.125rem 0 0;
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: 4px;
	background-color: rgba(255, 255, 255, 0.06);
	appearance: none;
}

.responsia-checkbox input[type="checkbox"]:checked {
	border-color: var(--wp--preset--color--primary);
	background-color: var(--wp--preset--color--primary);
}

.responsia-contact__submit {
	margin: 0.375rem 0 0;
}

.responsia-contact__notice {
	margin: 0 0 1rem;
	padding: 0.75rem 1rem;
	border-radius: var(--r-radius);
	font-size: var(--wp--preset--font-size--medium);
}

.responsia-contact__notice--success {
	background-color: rgba(255, 255, 255, 0.12);
}

.responsia-contact__notice--error {
	background-color: rgba(158, 34, 130, 0.28);
}

/* The honeypot: reachable to a bot's parser, invisible to a visitor. */
.responsia-contact__trap {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* -------------------------------------------------------------------------
 * Editor-only: the link repeater rows in the sidebar
 * ---------------------------------------------------------------------- */

.responsia-link-row {
	margin-bottom: 1rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid rgba(26, 9, 13, 0.12);
}

.responsia-link-row__actions {
	display: flex;
	gap: 0.25rem;
	margin-top: 0.25rem;
}

/* -------------------------------------------------------------------------
 * Narrow screens: every section becomes one column
 * ---------------------------------------------------------------------- */

@media (max-width: 60rem) {
	.responsia-service-cards__grid,
	.responsia-course-cards__grid,
	.responsia-intro-stats__stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 48rem) {
	.responsia-intro-stats,
	.responsia-quote-feature,
	.responsia-media-feature,
	.responsia-page-hero,
	.responsia-steps,
	.responsia-profile,
	.responsia-contact,
	.responsia-service-cards__grid,
	.responsia-course-cards__grid,
	.responsia-intro-stats__stats,
	.responsia-contact__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 2rem;
	}

	.responsia-media-feature--media-right .responsia-media-feature__media,
	.responsia-steps--media-right .responsia-steps__media {
		order: 0;
	}

	.responsia-quote-feature__media img {
		aspect-ratio: 3 / 2;
		height: auto;
	}

	.responsia-profile,
	.responsia-profile__photo {
		width: auto;
	}

	.responsia-profile {
		grid-template-columns: minmax(0, 1fr);
	}
}