/**
 * Jerry Ketola — mobile layout overrides
 */

@media screen and (max-width: 768px) {
	/* Top bar: keep the left-column booking text, hide social icons */
	.top-bar-col--2,
	.top-bar-social {
		display: none !important;
	}

	.top-bar--two-columns .top-bar-inner {
		flex-direction: row;
		justify-content: center;
		gap: 0;
	}

	.top-bar-col--1 {
		justify-content: center;
		width: 100%;
	}

	/* Stats cells: icon | text in every cell, no wrap-under */
	.icon-boxes-grid {
		align-items: stretch;
	}

	.icon-boxes-grid > .icon-box {
		min-width: 0;
		max-width: 100%;
		height: 100%;
		display: grid !important;
		grid-template-columns: var(--ib-icon-size, 35px) minmax(0, 1fr) !important;
		align-items: start !important;
		align-content: start;
		column-gap: 12px;
		text-align: left !important;
	}

	.icon-boxes-block .icon-box .icon-box-icon {
		grid-column: 1;
		margin: 0 !important;
	}

	.icon-boxes-block .icon-box .icon-box-body {
		grid-column: 2;
		min-width: 0 !important;
		width: auto !important;
		text-align: left !important;
	}

	.icon-boxes-block .icon-box .icon-box-icon-heading,
	.icon-boxes-block .icon-box .icon-box-content {
		overflow-wrap: break-word;
		word-break: normal;
	}

	.jk-vv-process .icon-box {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	/* Title-only page heroes (blog listing): no leftover min-height band */
	.hero-block {
		min-height: 0 !important;
		padding-top: 16px !important;
		padding-bottom: 24px !important;
	}

	.hero-block.hero-block--full-width-narrow {
		padding-bottom: 8px !important;
	}

	body.header-overlay-active .hero-block {
		padding-top: calc(var(--mestari-header-height, 64px) + 12px) !important;
	}

	.hero-block > .container {
		min-height: 0 !important;
		justify-content: flex-start !important;
	}

	.hero-block + .posts-block {
		padding-top: 8px !important;
	}

	/* Search results title band (inline Customizer padding is 100px/100px) */
	.mestari-blog-hero {
		padding-top: 24px !important;
		padding-bottom: 16px !important;
	}

	/* Blog listing + read more: 2 columns, same card chrome */
	.posts-block,
	.posts-block > .container,
	.single-read-more,
	.blog-archive .mestari-posts-grid {
		max-width: 100%;
		min-width: 0;
	}

	.posts-block:not(.posts-block--style-slider) .mestari-posts-grid,
	.single-read-more .mestari-posts-grid,
	.blog-archive .mestari-posts-grid,
	.blog-archive .mestari-posts-grid--columns {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
		width: 100%;
		max-width: 100%;
	}

	.posts-block--style-feed .mestari-posts-grid,
	.posts-block--style-list .mestari-posts-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.posts-block .mestari-card,
	.single-read-more .mestari-card,
	.blog-archive .mestari-card {
		display: flex;
		flex-direction: column;
		height: 100%;
		width: 100%;
		max-width: 100%;
		min-width: 0;
		overflow: hidden;
		border: 1px solid rgba(0, 0, 0, 0.12);
		box-sizing: border-box;
	}

	.posts-block--style-feed .mestari-card,
	.posts-block--style-list .mestari-card {
		flex-direction: row;
	}

	.posts-block .mestari-card img,
	.single-read-more .mestari-card img,
	.blog-archive .mestari-card img {
		max-width: 100%;
		contain-intrinsic-size: none !important;
	}

	.posts-block .mestari-card-cats,
	.single-read-more .mestari-card-cats,
	.blog-archive .mestari-card-cats {
		max-width: 100%;
	}

	/* Break a word only when it cannot fit on a line by itself */
	.posts-block .mestari-card-title,
	.single-read-more .mestari-card-title,
	.blog-archive .mestari-card-title {
		overflow-wrap: break-word;
		word-break: normal;
		hyphens: auto;
	}

	.posts-block .mestari-card-thumb,
	.single-read-more .mestari-card-thumb,
	.blog-archive .mestari-card-thumb {
		aspect-ratio: 2 / 1;
		width: 100%;
		overflow: hidden;
	}

	.posts-block .mestari-card-thumb img,
	.single-read-more .mestari-card-thumb img,
	.blog-archive .mestari-card-thumb img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.posts-block .mestari-card-body,
	.single-read-more .mestari-card-body,
	.blog-archive .mestari-card-body,
	.posts-block .mestari-card.mestari-card--no-thumb .mestari-card-body,
	.single-read-more .mestari-card.mestari-card--no-thumb .mestari-card-body,
	.blog-archive .mestari-card.mestari-card--no-thumb .mestari-card-body {
		padding: 14px;
		text-align: left;
		align-items: flex-start;
		justify-content: flex-start;
	}

	.posts-block .mestari-card .mestari-card-excerpt,
	.single-read-more .mestari-card .mestari-card-excerpt,
	.blog-archive .mestari-card .mestari-card-excerpt {
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	/* Price list table (stacked cards): readable text and card edges */
	.mestari-table .mestari-table-normal tbody td {
		font-size: 15px;
	}

	.mestari-table .mestari-table-normal tbody td::before {
		font-size: 12px;
	}

	.mestari-table .mestari-table-normal tbody tr.mestari-table-row--feature {
		border-color: rgba(0, 0, 0, 0.18);
		margin-bottom: 16px;
	}

	/* Help me choose: drop stacked container + card side padding */
	.hmc-form-container .hmc-mestari-container.container,
	.hmc-form-container .container {
		padding-left: 12px;
		padding-right: 12px;
	}

	.hmc-form-container .hmc-step,
	.hmc-form-container .hmc-step-card,
	.hmc-layout-preset--soft_cards .hmc-step-card {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.hmc-form-container .hmc-step-options {
		gap: 12px;
	}
}

/* Phones: one card per row. Two 130-180px columns broke long Finnish words
   mid-word and made 8-12 line titles. */
@media screen and (max-width: 560px) {
	.posts-block:not(.posts-block--style-slider) .mestari-posts-grid,
	.single-read-more .mestari-posts-grid,
	.blog-archive .mestari-posts-grid,
	.blog-archive .mestari-posts-grid--columns {
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 20px !important;
	}
}

/* Small phones: stat rows put the icon above the text, so words such as
   "AMMATILLISTA" or "Metsälä" are not split mid-word next to the icon. */
@media screen and (max-width: 480px) {
	.icon-boxes-block:not(.jk-vv-testimonials) .icon-boxes-grid > .icon-box {
		grid-template-columns: minmax(0, 1fr) !important;
		row-gap: 6px;
	}

	.icon-boxes-block:not(.jk-vv-testimonials) .icon-boxes-grid > .icon-box .icon-box-icon {
		grid-column: 1;
		grid-row: 1;
	}

	.icon-boxes-block:not(.jk-vv-testimonials) .icon-boxes-grid > .icon-box .icon-box-body {
		grid-column: 1;
		grid-row: 2;
	}
}

/* Large phones in landscape and small tablets (561-768px): the stacked
   one-column layout keeps a readable line length and images do not fill
   the whole screen. */
@media screen and (min-width: 561px) and (max-width: 768px) {
	.entry-content .wp-block-column > :is(p, ul, ol, h1, h2, h3) {
		max-width: 36em;
	}

	.entry-content .wp-block-column > figure,
	.entry-content .wp-block-column > .wp-block-jerryketola-kuva-kehyksilla,
	.entry-content .wp-block-column > .wp-block-mestariteema-framed-image {
		max-width: 480px !important;
		width: 100% !important;
		margin-left: 0 !important;
		margin-right: auto !important;
	}
}

/* Smallest phones (under 375px) */
@media screen and (max-width: 374px) {
	/* Stat rows: a little more room so "VASTAANOTTO" / "PROFESSIONAL" fit */
	.icon-boxes-block:not(.jk-vv-testimonials) .icon-boxes-grid > .icon-box {
		padding-left: 8px !important;
		padding-right: 8px !important;
	}

	/* Price table cards: label above the value, so long words are not split */
	.mestari-table .mestari-table-normal tbody td {
		grid-template-columns: minmax(0, 1fr);
		gap: 2px;
	}
}