/* Etusivu block layout.
 * Recreates the old ACF front page (Foundation .row / .columns) with core blocks.
 * Loaded on the front end and inside the block editor (enqueue_block_assets).
 */

.etusivu-osio {
	max-width: 75rem;
	margin-left: auto;
	margin-right: auto;
	padding-left: 0.9375rem;
	padding-right: 0.9375rem;
}

.etusivu-osio .wp-block-columns {
	gap: 30px;
	margin-bottom: 0;
}

/* Columns side by side from Foundation's medium breakpoint (core stacks below 782px) */
@media screen and (min-width: 640px) {
	.etusivu-osio .wp-block-columns {
		flex-wrap: nowrap !important;
	}

	.etusivu-osio .wp-block-columns > .wp-block-column {
		flex-basis: 0 !important;
		flex-grow: 1;
	}

	/* Content column + sidebar: medium-7 / medium-5 */
	.etusivu-osio .etusivu-paaosio > .wp-block-column:first-child {
		flex-basis: calc(58.333% - 15px) !important;
		flex-grow: 0;
	}

	.etusivu-osio .etusivu-paaosio > .wp-block-column:last-child {
		flex-basis: calc(41.667% - 15px) !important;
		flex-grow: 0;
	}
}

/* Core columns allow breaking words mid-word; the old layout did not */
.etusivu-osio .wp-block-column {
	word-break: normal;
	overflow-wrap: normal;
}

/* Toimipisteet don't fit three in a row next to the sidebar on tablets */
@media screen and (max-width: 1023px) {
	.etusivu-osio .toimipisteet {
		flex-direction: column;
	}

	.etusivu-osio .toimipisteet .toimipiste {
		flex-basis: auto;
	}
}

/* large-8 / large-4 */
@media screen and (min-width: 1024px) {
	.etusivu-osio .etusivu-paaosio > .wp-block-column:first-child {
		flex-basis: calc(66.666% - 15px) !important;
	}

	.etusivu-osio .etusivu-paaosio > .wp-block-column:last-child {
		flex-basis: calc(33.333% - 15px) !important;
	}
}

/* Classic themes wrap group content in an inner container; let the old
 * flex containers lay out the blocks directly. */
.ajankohtaista > .wp-block-group__inner-container,
.toimipisteet > .wp-block-group__inner-container,
.sidebar-columns > .wp-block-group__inner-container {
	display: contents;
}

/* Blocks inside the old flex containers keep their own spacing */
.ajankohtaista > .wp-block-group__inner-container > *,
.toimipisteet > .wp-block-group__inner-container > *,
.sidebar-columns > .wp-block-group__inner-container > * {
	margin-top: 0;
	margin-bottom: 0;
}

.ajankohtaista h2 {
	margin-bottom: 0;
}

/* Korostettu ajankohtaista (block style), same as the old .highlight */
.ajankohtaista-column.is-style-korostettu {
	background-color: #ffdd00;
	border: 2px solid #ffdd00;
	border-radius: 2px;
	padding: 30px 27px;
	margin-bottom: 20px;
}

.ajankohtaista-column.is-style-korostettu > *:first-child {
	margin-top: 0 !important;
}

.ajankohtaista-column.is-style-korostettu > *:last-child {
	margin-bottom: 0 !important;
}

/* Aukioloajat: day | time table without the theme's table look */
.wp-block-table.aukioloajat {
	margin: 0 0 1rem;
	overflow: visible;
}

.wp-block-table.aukioloajat table {
	width: auto;
	margin: 0;
	border-collapse: collapse;
	font-size: inherit;
	line-height: 1.4;
}

.wp-block-table.aukioloajat tbody,
.wp-block-table.aukioloajat tr {
	border: 0;
	background: none !important;
}

#primary .wp-block-table.aukioloajat td,
.wp-block-table.aukioloajat td {
	padding: 0 1.25em 0 0;
	border: 0;
	font-weight: 400;
	white-space: nowrap;
}

/* Same day column width in every table so the times line up */
.wp-block-table.aukioloajat td:first-child {
	min-width: 4.5em;
}

.toimipiste .wp-block-table.aukioloajat {
	font-size: 15px;
}

.sidebar-column .wp-block-table.aukioloajat table {
	line-height: 1.6;
}

/* Taustaväri (group block style): full width light grey background.
 * The box-shadow extends the colour to the window edges without
 * changing the content width; clip-path keeps it from overflowing. */
.wp-block-group.is-style-tausta {
	margin-top: 50px;
	padding-top: 10px;
	padding-bottom: 50px;
	background-color: #f4f4f4;
	box-shadow: 0 0 0 100vmax #f4f4f4;
	clip-path: inset(0 -100vmax);
}

/* White review cards on the coloured background */
.is-style-tausta .lsgr {
	--lsgr-card: #fff;
}

.is-style-tausta .lsgr-card {
	box-shadow: 0 1px 3px rgb(0 0 0 / 6%);
}

/* Palvelukortti */
.palvelukortti {
	display: block;
	color: inherit;
}

.palvelukortti:hover {
	text-decoration: none !important;
}

.box-suositut .btn {
	text-align: center;
	padding: 10px 30px;
	border: 2px solid #000;
	border-radius: 2px;
	margin: 0 auto;
	display: block;
	max-width: 230px;
	background: #fd0;
	font-weight: 700;
	transition: all 0.5s ease;
}

/* Uutiskirje (CF7 form + privacy text) */
.box-uutiskirje p.txt-tietosuoja:last-child {
	margin-bottom: 0;
}

#tarjoukset {
	max-width: calc(50% - 15px);
}

@media screen and (max-width: 640px) {
	#tarjoukset {
		max-width: none;
	}
}

/* Editor: front page sections as wide as on the front end (classic theme
 * editor limits blocks to 840px) */
.editor-styles-wrapper .etusivu-osio.wp-block {
	max-width: 75rem;
}

.editor-styles-wrapper .etusivu-osio .wp-block {
	max-width: none;
}

/* Editor: theme font and headings in the front page sections */
.editor-styles-wrapper .etusivu-osio {
	font-family: "Gotham Rounded A", "Gotham Rounded B", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
	color: #000;
}

.editor-styles-wrapper .etusivu-osio,
.editor-styles-wrapper .etusivu-osio * {
	box-sizing: border-box;
}

.editor-styles-wrapper .etusivu-osio :is(h1, h2, h3, h4, h5, h6) {
	font-family: inherit;
	font-weight: 600;
	line-height: 1.4;
}

/* The editor gives every block 28px vertical margins and auto side margins;
 * the front end doesn't */
.editor-styles-wrapper .etusivu-osio.wp-block,
.editor-styles-wrapper .etusivu-osio .wp-block {
	margin-top: 0;
	margin-bottom: 0;
}

.editor-styles-wrapper .etusivu-osio .wp-block {
	margin-left: 0;
	margin-right: 0;
}

.editor-styles-wrapper .etusivu-osio :is(h1, h2, h3, h4, h5, h6).wp-block {
	margin-bottom: .5rem;
}

.editor-styles-wrapper .etusivu-osio :is(p, ul, ol, .wp-block-table).wp-block {
	margin-bottom: 1rem;
}

.editor-styles-wrapper .etusivu-osio a {
	color: #000;
	text-decoration: none;
}

.editor-styles-wrapper .etusivu-osio :is(p, li) a {
	border-bottom: 3px solid #fff08e;
}

.editor-styles-wrapper .etusivu-otsikko h2 {
	font-size: 1.7rem;
	margin: 0 auto;
	padding-top: 30px;
}

/* Editor: intro (front end rules are in style.css) */
.editor-styles-wrapper .content-intro {
	font-size: 1.1rem;
}

.editor-styles-wrapper .content-intro h1 {
	font-size: 2.2rem;
}

.editor-styles-wrapper .content-intro p {
	line-height: 1.6;
}

/* Editor: Varaa aika / Soita buttons (front end: app.css + style.css) */
.editor-styles-wrapper .etusivu-osio .button-group {
	display: flex;
	justify-content: center;
	gap: 15px;
	margin: 0 0 1rem;
}

.editor-styles-wrapper .button-group :is(.btn-varaa, .btn-soita) a {
	display: block;
	position: relative;
	padding: 1.044rem 2rem .9rem .9rem;
	border-radius: 2px;
	background: #fd0;
	color: #000;
	font-size: .9rem;
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
}

.editor-styles-wrapper .button-group .btn-soita a {
	padding-right: 1rem;
	background: #000;
	color: #fefefe;
}

/* Editor: Ajankohtaista */
.editor-styles-wrapper .ajankohtaista {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin: 50px 0 !important;
	padding: 30px;
	border-top: 1px solid #ffdd00;
}

.editor-styles-wrapper .ajankohtaista h2 {
	font-size: 1.7rem;
}

.editor-styles-wrapper .etusivu-osio .ajankohtaista :is(ul, ol) {
	margin: 0 0 1rem 20px;
	padding-left: 0;
	line-height: 1.6;
}

/* Editor: sidebar boxes */
.editor-styles-wrapper .sidebar-columns {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.editor-styles-wrapper .sidebar-column {
	background-color: #f8f8f8;
	padding: 30px;
}

.editor-styles-wrapper .sidebar-column h5 {
	font-size: 1.16rem;
}

.editor-styles-wrapper .sidebar-column p {
	line-height: 1.6;
}

/* Arrow on the Varaa aika button, as on the front end
 * (other content buttons: block-buttons.css) */
.editor-styles-wrapper .button-group .btn-varaa a::after {
	content: "›";
	position: absolute;
	top: 4px;
	right: 10px;
	font-size: 36px;
	line-height: 36px;
	transform: scale(.7);
}

/* Editor: Suositut lääkäripalvelut (front end rules are in style.css) */
.editor-styles-wrapper .box-suositut {
	background: #fd0;
	padding: 30px;
	border-radius: 2px;
	margin-top: 30px;
	font-weight: 700;
}

.editor-styles-wrapper .box-suositut h3 {
	font-size: 1.2rem;
	text-align: center;
	padding: 10px 0;
	margin: 0 0 8px;
}

.editor-styles-wrapper .box-suositut p {
	text-align: center;
	font-weight: 400;
	line-height: 1.6;
	margin: 0 0 16px;
}

.editor-styles-wrapper .box-suositut .btn {
	color: #212529;
	line-height: 1.5;
}

/* Editor: Juttuja terveydestä (front end rules are in style.css) */
.editor-styles-wrapper .box-latest {
	margin-top: 30px;
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}

.editor-styles-wrapper .listablogi {
	display: flex;
	flex-direction: column;
	flex-basis: calc(33.333% - 30px * 2 / 3);
	margin-bottom: 20px;
}

.editor-styles-wrapper .listablogi .listakuva {
	width: 100%;
	padding: 0;
}

.editor-styles-wrapper .listablogi .list-img {
	aspect-ratio: 2 / 1;
	width: 100%;
	background-position: center;
	background-size: cover;
}

.editor-styles-wrapper .listablogi .content-column {
	display: block;
	width: 100%;
	padding: 20px 30px;
	flex-grow: 1;
	background-color: #f8f8f8;
	color: #000;
	text-decoration: none;
}

.editor-styles-wrapper .listablogi h5 {
	font-size: 1.2rem;
	text-align: center;
	margin: 0 0 8px;
}

/* Editor: toimipisteet look the same as on the front end
 * (front end rules are in style.css, which the editor doesn't load). */
.editor-styles-wrapper .toimipisteet {
	display: flex;
	flex-direction: row;
	gap: 12px;
	margin-top: 50px;
	margin-bottom: 50px;
}

.editor-styles-wrapper .toimipisteet .toimipiste {
	background-color: #f8f8f8;
	padding: 30px 27px;
	flex: 0 0 calc(33.333% - 12px * 2 / 3);
	min-width: 0;
	border-radius: 2px;
	border: 1px solid #ffdd00;
	word-break: normal;
	overflow-wrap: normal;
}

.editor-styles-wrapper .toimipiste h3 {
	font-size: 1.2rem;
	margin: 0 0 8px;
}

.editor-styles-wrapper .toimipiste p {
	font-size: 15px;
	line-height: 1.4;
	margin: 0 0 16px;
}

.editor-styles-wrapper .toimipiste p:last-child {
	margin-bottom: 0;
}

/* Editor: links in the theme's block previews would leave the editor;
 * a click selects the block instead */
.editor-styles-wrapper [data-type^="perusterveys/"] a {
	pointer-events: none;
}