/*
 * core/group — the parts of the theme's group styles that theme.json cannot
 * express. Colours, padding and typography live in styles/link-card.json.
 *
 * Loaded only on pages that contain a group block.
 */

/* Link card: a whole card that is one click target.
 *
 * The flex row itself comes from the block's own layout attribute, so what is
 * left here is the stacking context for the stretched link, the arrow, and the
 * hover and focus states. theme.json supports pseudo-classes only on link and
 * button elements; a block-level :hover in a style variation is dropped
 * silently, so both states live here. */
.is-style-link-card {
	position: relative;
	transition-property: color, background-color, border-color, opacity, transform;
	transition-duration: 200ms;
	transition-timing-function: ease-out;
}

.is-style-link-card:hover,
.is-style-link-card:focus-within {
	background-color: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--white );
}

/* The link stretches over the card so the whole box is clickable, while the
   accessible name stays the link text alone. */
.is-style-link-card a::after {
	content: '';
	position: absolute;
	inset: 0;
}

/* The arrow is a pseudo-element rather than the source's own span, so screen
   readers do not read it as content. Its 1.5rem size against the body's 1.6
   line height is what sets the card's height. */
.is-style-link-card::after {
	content: '\2192';
	flex-shrink: 0;
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1.6;
	color: var( --wp--preset--color--primary );
	transition: color 200ms ease-out, transform 200ms ease-out;
}

/* The arrow shifts a quarter rem on hover. Without the movement the row only
   changes colour, and the arrow says nothing about where it leads. */
.is-style-link-card:hover::after,
.is-style-link-card:focus-within::after {
	transform: translateX( 0.25rem );
	color: var( --wp--preset--color--white );
}


/* Contact box.
 *
 * One fixed component, identified by its style variation. Its parts are styled
 * as descendants rather than through classes of their own: the structure is
 * generated, not composed by an editor, and the source (_portabletext.scss)
 * treats it as a single unit.
 *
 * Colours, padding and margins come from styles/contact-box.json.
 */

/* The row: stacked on mobile, side by side from md. Core's flex layout has no
   setting for a stacking breakpoint. */
:root .is-style-contact-box > .wp-block-group.is-layout-flex {
	flex-direction: column;
	gap: 1rem;
	align-items: flex-start;
}

@media (min-width: 768px) {

	:root .is-style-contact-box > .wp-block-group.is-layout-flex {
		flex-direction: row;
		gap: 1.5rem;
		align-items: center;
	}
}

/* The details column. The email address is one long word: overflow-wrap:
   break-word (from body) lets it break only once it overflows and does not
   lower the box's minimum width, so on a 320px screen the box pushed past the
   page edge. `anywhere` folds the break into the sizing. */
:root .is-style-contact-box > .wp-block-group.is-layout-flex > .wp-block-group:last-child {
	flex: 1;
	min-inline-size: 0;
	overflow-wrap: anywhere;
}

/* The link rows sit 0.25rem apart. Spelled out box > row > details > links,
   because a looser descendant selector also caught the details column and
   turned it into a flex stack with gaps of its own. */
:root .is-style-contact-box > .wp-block-group.is-layout-flex > .wp-block-group > .wp-block-group {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

/* Inside the box everything sits flush: the label's usual 0.25rem below it
   would push the links away from the role. Needs three classes, because
   is-style-label's own rule is more specific than the variation's styles. */
:root .is-style-contact-box .is-style-label {
	margin-block: 0;
}


/* CTA banner, the variant without an image: a core/group rather than a cover,
   so its rules live here. Colours, padding and heading rhythm are in
   styles/section-cta-plain.json. */
:root .is-style-section-cta-plain > * {
	max-inline-size: var( --wp--custom--width--reading );
	margin-inline: auto;
}

/* The plain banner's heading is a direct child of the section, so the generic
   section-heading rule ([class*="is-style-section-"] > h2) matches it and wins
   on specificity over the variation's styles. The image variant escapes this
   because its heading sits inside the cover's inner container. */
:root .is-style-section-cta-plain > h2 {
	margin-block: 0 1rem;
	font-size: var( --wp--preset--font-size--xxx-large );
	line-height: 1.05;
}

/* The buttons sit in a flex container, which the section's text-align does not
   reach. */
:root .is-style-section-cta-plain .wp-block-buttons {
	justify-content: center;
}

:root .is-style-section-cta-plain p strong {
	color: var( --wp--preset--color--white );
	font-weight: 500;
}

:root .is-style-section-cta-plain p:last-of-type {
	margin-block-end: 1.5rem;
}

:root .is-style-section-cta-plain .is-style-label {
	margin-block: 0 0.25rem;
	color: var( --wp--preset--color--white );
	font-size: var( --wp--preset--font-size--small );
}

/* The label steps up from 0.875rem to 1rem at md, as in the source. */
@media (min-width: 768px) {

	:root .is-style-section-cta-plain .is-style-label {
		font-size: var( --wp--preset--font-size--medium );
	}
}


/* Source card: an external article with its publisher, title and summary.
 *
 * Colours, padding and typography are in styles/source-card.json. What is left
 * here is the row layout, the stretched link, the arrow and the states that
 * theme.json cannot reach: block-level :hover (a style variation's :hover is
 * dropped silently), :focus-within, and the descendants that follow the
 * card's own hover. */
:root .is-style-source-card {
	position: relative;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	transition-property: color, background-color, border-color, opacity, transform;
	transition-duration: 200ms;
	transition-timing-function: ease-out;
}

:root .is-style-source-card > .wp-block-group {
	flex: 1;
}

:root .is-style-source-card a::after {
	content: '';
	position: absolute;
	inset: 0;
}

/* An outward arrow at the card's right edge, as a pseudo-element so screen
   readers do not read it. */
:root .is-style-source-card::after {
	content: '\2197';
	flex-shrink: 0;
	color: var( --wp--preset--color--text-secondary );
	font-size: 1.125rem;
	line-height: 1.6;
	transition: color 200ms ease-out;
}

:root .is-style-source-card:hover,
:root .is-style-source-card:focus-within {
	background-color: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--white );
}

:root .is-style-source-card:hover::after,
:root .is-style-source-card:focus-within::after,
:root .is-style-source-card:hover :is(h3, p, a),
:root .is-style-source-card:focus-within :is(h3, p, a) {
	color: var( --wp--preset--color--white );
}

/*
 * The summary is clamped to three lines, not two.
 *
 * Two was enough for the default type, but WCAG 1.4.12 requires the page to
 * survive line-height 1.5, letter-spacing .12em and word-spacing .16em. Under
 * those the longest summary needs three lines (scrollHeight 63px against a
 * 42px box), and because the box also has overflow: hidden the third line was
 * dropped with no way to reach it — the text exists nowhere else on the page.
 */
:root .is-style-source-card p:last-child {
	display: -webkit-box;
	margin-block: 0.5rem 0;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
}

:root .is-style-source-card p:first-child {
	margin-block: 0 0.25rem;
}

/* is-style-card-meta — the category and date line under a card title. The
   children carry their own margins elsewhere, so they are reset here. */
:root .is-style-card-meta {
	gap: 0.75rem;
	color: var(--wp--preset--color--text-secondary);
}

:root .is-style-card-meta p,
:root .is-style-card-meta div {
	margin: 0;
}

/* The key figures: one column, two from 640px, three from 1024.
 *
 * Core's grid takes min(columnCount, floor(content / minimumColumnWidth)), and
 * no single minimum gives these steps — 640px needs 288px or less to fit two,
 * 1023px needs more than 320px to stay at two. So columnCount states the three
 * and the steps below it are written out.
 *
 * The source's grid has no column gap: the figures fill the row edge to edge. */
@media (max-width: 639px) {

	:root .is-style-section-stats .wp-block-group.is-layout-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (min-width: 640px) and (max-width: 1023px) {

	:root .is-style-section-stats .wp-block-group.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Tarkistuslista: yksi sarake, kolme 768 pikselistä. Lähteessä ei ole kahden
   sarakkeen välivaihetta, eikä ytimen ruudukko osaa hypätä yhdestä kolmeen —
   sarakemäärä on lohkon attribuutti ja tämä on porras sen alla.
   :has() tunnistaa ruudukon sisällöstä, jolloin kääre ei tarvitse omaa
   luokkaa. */
@media (max-width: 767px) {

	:root .wp-block-group.is-layout-grid:has( > .is-style-step ) {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* is-style-contact-box ja is-style-colored-box — rikkaan tekstin laatikot.
 *
 * Pehmuste kasvaa md-koossa, mitä lohkotyylivariaatio ei osaa ilmaista.
 * :root-etuliite on latausjärjestyksen takia: variaation oma 1.5rem tulee
 * ytimen Global Stylesista, joka tulostuu lohkotyylitiedostojen jälkeen.
 * Ilman etuliitettä laatikko kutistui 8 px joka reunasta. */
@media (min-width: 768px) {

	:root .is-style-contact-box,
	:root .is-style-colored-box {
		padding: 2rem;
	}
}

/* .colored-box--accent: limetti 20 %:n peitolla. */
:root .is-style-colored-box.has-accent-tone {
	background-color: color-mix( in srgb, var(--wp--preset--color--accent) 20%, transparent );
}

:root .is-style-colored-box.has-gray-tone {
	background-color: #f9fafb;
}

/* Suorat lapset ilman omia marginaaleja, sisempi rytmi säilyy. */
:root .is-style-contact-box > :is(h1, h2, h3, h4, p, div),
:root .is-style-colored-box > :is(h1, h2, h3, h4, p, div) {
	margin-block: 0;
}