/*
 * core/cover — the CTA banner with a background image, and the image cards.
 *
 * Colours, padding and heading rhythm live in styles/section-cta.json. What is
 * left here is the content column, which theme.json cannot express: it must
 * constrain the cover's inner container without touching the cover's own
 * background layers.
 *
 * The banner variant without an image is a core/group, so its rules are in
 * core-group.css — this file loads only where a cover block exists.
 *
 * Loaded only on pages that contain a cover block.
 */

/* The content column is 42rem, sitting at the left edge of the wide container.
 *
 * The limit applies to the content only: the cover's background image and dim
 * layer are its direct children, and constraining those would show the dim as a
 * band across the middle of the photograph. */
:root .is-style-section-cta .wp-block-cover__inner-container > * {
	max-inline-size: var( --wp--custom--width--reading );
}

/* The inner container matches .container-wide: 79rem, centred, with the content
   at its left edge rather than in the middle of the screen. Core uses a flow
   layout here, so the children get no margin-inline: auto of their own. */
:root .is-style-section-cta .wp-block-cover__inner-container {
	inline-size: 100%;

	/* .container-wide is 1360px wide including its own side padding, so the
	   content column ends up at 1264px. Matching both halves keeps the text
	   column identical to the source at every width — and the inset comes from
	   the container, not the cover, whose own 1em is zeroed in the variation. */
	max-inline-size: var( --wp--custom--width--outer );
	margin-inline: auto;
	padding-inline: var( --wp--custom--edge--padding );
}

/* Core gives a cover a minimum height; the banner's height comes from its
   padding and its content. */
:root .wp-block-cover.is-style-section-cta {
	min-block-size: 0;
}

/* In the banner, bold is half a step heavier than body text (500, not 600).
   Over a photograph 600 read as a separate heading rather than an emphasised
   sentence. */
:root .is-style-section-cta p strong {
	color: var( --wp--preset--color--white );
	font-weight: 500;
}

/* The last paragraph gets a little more room before the buttons. */
:root .is-style-section-cta p:last-of-type {
	margin-block-end: 1.5rem;
}

/* The label stays at body size where the banner's other paragraphs are large,
   and is white rather than brand green. */
:root .is-style-section-cta .is-style-label {
	margin-block: 0 0.25rem;
	color: var( --wp--preset--color--white );

	/* The label is the smallest step, as in the source. */
	font-size: var( --wp--preset--font-size--small );
}

/* Image card.
 *
 * The card's padding belongs entirely to the cover's inner container (2rem in
 * the source), so the cover's own 1em is zeroed in styles/image-card.json —
 * without that the text starts 17px too far right.
 *
 * Square corners: _cta-cards.scss sets a radius, but in production an inner
 * element covers the corners and the rounding never shows. The card is
 * rectangular, and that is the truth here rather than what the SCSS promises. */
:root .is-style-image-card .wp-block-cover__inner-container {
	inline-size: 100%;
	max-inline-size: none;
	padding: 2rem;
}

:root .wp-block-cover.is-style-image-card {
	overflow: hidden;
}

/* The description uses transparency in the colour (#ffffffe6), not opacity:
   opacity would make the element its own stacking context and dim its children
   too. */
:root .is-style-image-card p {
	margin-block: 0 var( --wp--preset--spacing--40 );
	color: rgba(255, 255, 255, 90%);
}

/* The card's button is .btn--primary in the source, so it darkens on hover
   rather than taking the section style's white. */
:root .is-style-image-card .wp-element-button:hover,
:root .is-style-image-card .wp-element-button:focus {
	background-color: var( --wp--preset--color--primary-dark );
	color: var( --wp--preset--color--white );
}

/* Hero.
 *
 * Ported straight from _hero.scss and Hero.astro. Colours are in
 * styles/section-hero.json; the viewport height, the inner container and the
 * button row are structural and stay here. */

/* Portattu suoraan _hero.scss:stä ja Hero.astrosta. */

:root .is-style-section-hero {

	/* .hero-viewport: 100dvh miinus ylätunniste, jotta hero päättyy tarkalleen
	   ruudun alareunaan eikä työnnä seuraavaa osiota ylätunnisteen verran alas.
	   Ylätunniste on mobiilissa 5rem ja lg:stä 7.5rem (2.5 + 5). */
	min-block-size: calc( 100dvh - 5rem - var( --wp-admin--admin-bar--height, 0px ) );

	/* Ytimen cover-lohkolla on oma 1em sivupehmuste. Alkuperäisessä hero on
	   pehmusteeton ja väli tulee vain sisäkääreen .container-widestä; ilman
	   nollausta mobiilissa kertyi 40 px eikä 24, ja otsikko rivittyi väärin. */
	padding-inline: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

@media (min-width: 1024px) {

	:root .is-style-section-hero {
		min-block-size: calc( 100dvh - 7.5rem - var( --wp-admin--admin-bar--height, 0px ) );
	}
}

/* Väri säiliöön, kuten .hero__inner — alaotsikko perii sen. */
:root .is-style-section-hero .wp-block-cover__inner-container {
	padding-block: 5rem;

	/* Hero on .container-wide -kääreen sisällä: pystypehmusteen lisäksi myös
	   sivupehmuste 1.5rem -> sm 2rem -> lg 3rem. Ilman sitä mobiilissa teksti
	   ulottui reunaan asti ja otsikko mahtui yhdelle riville kahden sijaan. */
	padding-inline: var( --wp--custom--edge--padding );
	text-align: center;
	color: var(--wp--preset--color--white);
	max-inline-size: var( --wp--custom--width--outer );
}

@media (min-width: 640px) {

	:root .is-style-section-hero .wp-block-cover__inner-container {
		padding-inline: 2rem;
	}
}

@media (min-width: 1024px) {

	:root .is-style-section-hero .wp-block-cover__inner-container {
		padding-inline: 3rem;
	}
}

/* Hero-teksti on aina valkoinen kuvan päällä, teemavariaatiosta riippumatta.
   !important on tässä perusteltu: WordPressin omat väriluokat ja theme.jsonin
   prose-väri osuvat samoihin elementteihin !importantilla, ja tummaa tekstiä
   valokuvan päällä ei lue kukaan. Tämä on kontrastisääntö, ei tyylivalinta. */
:root .is-style-section-hero .wp-block-cover__inner-container :is(h1, h2, h3, p, li, a) {
	color: #fff !important;
	max-inline-size: none;
}

/* _hero.scss: .hero on flex ja __inner kutistuu sisältöönsä, jonka levein
   osa on 48rem leveä ingressi — otsikko rivittyy siis samalla mitalla.
   Ilman rajausta pidempi otsikko levittäytyisi koko 85rem:iin.

   Koko tulee portaikosta tiedoston lopussa (_hero.scss vaihtaa sen
   breakpointeissa, ei liukuvasti). */
:root .is-style-section-hero h1 {
	margin-block-end: 2rem;
	font-size: 2.25rem;
	line-height: 1.1;
}

@media (min-width: 640px) {

	:root .is-style-section-hero h1 {
		font-size: 3rem;
	}
}

@media (min-width: 768px) {

	:root .is-style-section-hero h1 {
		font-size: 3.75rem;
	}
}

@media (min-width: 1024px) {

	:root .is-style-section-hero h1 {
		font-size: var(--wp--preset--font-size--hero);
	}
}


/* Tarkkuus sama kuin yllä olevalla väripakotuksella, joka nollaa leveyden. */
:root .is-style-section-hero .wp-block-cover__inner-container > h1 {
	max-inline-size: var( --wp--style--global--content-size );
	margin-inline: auto;
}

:root .is-style-section-hero .wp-block-cover__inner-container > p {
	max-inline-size: var( --wp--style--global--content-size );
	margin: 0 auto 3rem;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
}

/* _hero.scss: &__subtitle kasvaa md:ssä 1.125rem -> 1.25rem. */
@media (min-width: 768px) {

	:root .is-style-section-hero .wp-block-cover__inner-container > p {
		font-size: 1.25rem;
	}
}

/* _hero.scss: &__buttons on mobiilissa pystyssä ja keskitetty, sm:stä rivi. */
:root .is-style-section-hero .wp-block-buttons {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;
}

@media (min-width: 640px) {

	:root .is-style-section-hero .wp-block-buttons {
		flex-direction: row;
	}
}

/* Toissijainen painike: valkoinen ääriviiva, ei täyttöä. */

/* Sanityn "outline" kääntyy Astrossa outline-white -tyyliksi: valkoinen
   2px ääriviiva läpinäkyvällä pohjalla, hoverissa täyttö. Sama koskee heroa
   ja CTA-kortteja, joissa painike on kuvan päällä. */

/* Tarkkuus .wp-block-button mukaan: yleinen ääriviivasääntö (täyttö tummaksi)
   on myöhemmin tiedostossa, ja kuvan päällä painike täyttyy valkoiseksi. */
:root .is-style-section-hero .wp-block-button.is-style-outline > .wp-block-button__link,
:root .is-style-image-card .wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	border: 2px solid var(--wp--preset--color--white);
	color: var(--wp--preset--color--white);
}

:root .is-style-section-hero .wp-block-button.is-style-outline > .wp-block-button__link:hover,
:root .is-style-section-hero .wp-block-button.is-style-outline > .wp-block-button__link:focus-visible,
:root .is-style-image-card .wp-block-button.is-style-outline > .wp-block-button__link:hover,
:root .is-style-image-card .wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
	border-color: var(--wp--preset--color--white);
	background: var(--wp--preset--color--white);

	/* Ytimen väriluokat (.has-white-color) ovat !important, joten ilman tätä
	   teksti jäi valkoiseksi valkoisella pohjalla — painike näytti tyhjältä
	   laatikolta. Sisältöön ei enää kirjoiteta väriluokkaa, mutta vanhat
	   sivut voivat sen yhä sisältää. */
	color: var(--wp--preset--color--primary-dark) !important;
}

/* Logo: alkuperäisessä .header__logo-img on 3.5rem korkea, leveys vapaa. */
.vml-header .wp-block-site-logo img {
	block-size: 3.5rem;
	inline-size: auto;
}


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

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

/* The card title steps up at md, as in _cta-cards.scss. */
@media (min-width: 768px) {

	:root .is-style-image-card :is(h2, h3) {
		font-size: var( --wp--preset--font-size--section-title );
	}
}