@charset "UTF-8";

/**
 * Responsive compatibility fixes for the legacy theme templates.
 *
 * This file intentionally excludes the promotion template. Core block rules
 * remain in standard-blocks.css; selectors here target only legacy wrappers
 * and components whose original responsive rules are incomplete.
 */

/* Let layout defects remain visible inside the page while clipping only the
 * viewport's horizontal paint overflow. */
body.body:not(.isjrenew-promo-template) {
	overflow-x: clip;
}

body.body:not(.isjrenew-promo-template) .container {
	overflow: visible;
}

/* Long legacy CTA labels must be allowed to wrap instead of being clipped. */
body.body:not(.isjrenew-promo-template) .btn .btn__link {
	height: auto;
	min-height: 60px;
	overflow-wrap: anywhere;
	padding: 12px 42px;
	text-align: center;
	white-space: normal;
}

body.body:not(.isjrenew-promo-template) .btn.__small .btn__link {
	min-height: 50px;
}

/* The compact home-news link has a fixed 180px shell. Keep its short label
 * and arrow on one line while retaining wrapping for longer legacy CTAs. */
body.body:not(.isjrenew-promo-template) .homeNC .homeNC__btn .btn__link {
	padding-inline: 24px;
	white-space: nowrap;
}

body.body:not(.isjrenew-promo-template)
	.homeNC
	.homeNC__btn.btn.__arrow
	.btn__link::after {
	flex: 0 0 24px;
}

/* Breadcrumb items are inline spans in the legacy markup. Make their intended
 * width and wrapping rules effective, including long Latin strings. */
body.body:not(.isjrenew-promo-template) .breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	max-width: 100%;
}

body.body:not(.isjrenew-promo-template) .breadcrumb__item {
	display: inline-flex;
	flex-wrap: wrap;
	max-width: 100%;
	min-width: 0;
	overflow-wrap: anywhere;
	word-break: break-word;
}

body.body:not(.isjrenew-promo-template)
	.breadcrumb__item
	:is(.breadcrumb__link, .breadcrumb__txt) {
	max-width: 100%;
	min-width: 0;
	overflow-wrap: anywhere;
	word-break: break-word;
}

/* Preserve the source artwork's ratio. Several existing hero files contain
 * text and logos, so a forced crop can remove meaningful content. */
body.body:not(.isjrenew-promo-template) .kv2nd__img {
	height: auto;
}

body.body:not(.isjrenew-promo-template) .kv2nd__img img {
	height: auto !important;
	object-fit: contain;
	max-width: 100% !important;
	width: 100%;
}

body.body:not(.isjrenew-promo-template) .kv2nd.__noimg .kv2nd__img,
body.body:not(.isjrenew-promo-template) .kv2nd__img:empty {
	display: none;
}

/* Article cards: one readable column on small phones, two columns through the
 * tablet/laptop range, then retain the existing four-column desktop rule. */
@media (max-width: 479px) {
	body.body:not(.isjrenew-promo-template)
		.articleList.__upperImg
		.articleList__item,
	body.body:not(.isjrenew-promo-template) .articleList.__upperImg::before,
	body.body:not(.isjrenew-promo-template) .articleList.__upperImg::after {
		max-width: none;
		width: 100%;
	}
}

@media (min-width: 480px) and (max-width: 1199px) {
	body.body:not(.isjrenew-promo-template)
		.articleList.__upperImg
		.articleList__item,
	body.body:not(.isjrenew-promo-template) .articleList.__upperImg::before,
	body.body:not(.isjrenew-promo-template) .articleList.__upperImg::after {
		max-width: none;
		width: calc(50% - 10px);
	}
}

/*
 * Service search-result thumbnails are predominantly landscape artwork and
 * product logos. The legacy left-image card stretched their frame to the full
 * card height, then cropped them excessively. Use a compact 4:3 frame so the
 * artwork remains prominent while cropping only about 15% from each side.
 */
body.service-solution:not(.isjrenew-promo-template)
	.searchResult__articleList.articleList.__leftImg
	.articleList__img {
	align-self: center;
	aspect-ratio: 4 / 3;
	background-color: #f5f7f3;
	border-radius: 10px;
	height: auto;
	overflow: hidden;
}

body.service-solution:not(.isjrenew-promo-template)
	.searchResult__articleList.articleList.__leftImg
	.articleList__img
	img {
	background-color: #f5f7f3;
	border-radius: 10px;
	display: block;
	font-family: "object-fit: cover;";
	height: 100% !important;
	min-width: 0;
	object-fit: cover;
	object-position: center;
	width: 100%;
}

@media (min-width: 1030px) {
	body.service-solution:not(.isjrenew-promo-template)
		.searchResult__articleList.articleList.__leftImg
		.articleList__img {
		top: 50%;
		transform: translateY(-50%);
	}
}

/* Remove the fixed 285px horizontal margin that collapses the half-width
 * footer CTA immediately after its desktop breakpoint. */
@media (min-width: 1030px) and (max-width: 1199px) {
	body.body:not(.isjrenew-promo-template)
		.fCta__contact
		> .fCta__inner,
	body.body:not(.isjrenew-promo-template) .fCta__tel > .fCta__inner {
		box-sizing: border-box;
		margin: auto;
		width: min(325px, calc(100% - 80px));
	}
}

body.body:not(.isjrenew-promo-template) .fArea__logoImg {
	max-width: 100%;
	width: 150px;
}

body.body:not(.isjrenew-promo-template) .fArea__logoImg img {
	display: block;
	height: auto;
	max-width: 100%;
	width: 100%;
}

/* The home-page iframe has fixed HTML dimensions. Preserve 16:9 after its
 * containing column becomes narrower than the width attribute. */
body.home:not(.isjrenew-promo-template) .homekv__img {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	width: 100%;
}

body.home:not(.isjrenew-promo-template) .homekv__img iframe {
	aspect-ratio: 16 / 9;
	border: 0;
	display: block;
	height: 100% !important;
	max-height: none !important;
	width: 100% !important;
}

/* The template will add .has-sidebar only when a widget area is active. */
body.column-single:not(.isjrenew-promo-template)
	.content2colWrapper.has-sidebar {
	box-sizing: border-box;
	margin-left: auto;
	margin-right: auto;
	max-width: 1180px;
}

body.column-single:not(.isjrenew-promo-template)
	.content2colWrapper.has-sidebar
	> .sidebar {
	box-sizing: border-box;
	min-width: 0;
	padding: 0 20px 40px;
}

@media (min-width: 1030px) {
	body.column-single:not(.isjrenew-promo-template)
		.content2colWrapper.has-sidebar {
		display: grid;
		gap: 32px;
		grid-template-columns: minmax(0, 1fr) minmax(240px, 280px);
		padding-left: 20px;
		padding-right: 20px;
	}

	body.column-single:not(.isjrenew-promo-template)
		.content2colWrapper.has-sidebar
		> .contentArea {
		max-width: none;
		min-width: 0;
		padding-left: 0;
		padding-right: 0;
		width: 100%;
	}

	body.column-single:not(.isjrenew-promo-template)
		.content2colWrapper.has-sidebar
		> .sidebar {
		padding: 0;
	}

	/* Wide/full core blocks cannot escape into the active sidebar column. */
	body.column-single:not(.isjrenew-promo-template)
		.content2colWrapper.has-sidebar
		> .contentArea
		> :is(.alignwide, .alignfull) {
		--isj-core-alignment-width: 100%;
		margin-left: 0;
		margin-right: 0;
		width: 100%;
	}
}

@media (min-width: 1200px) {
	body.column-single:not(.isjrenew-promo-template)
		.content2colWrapper.has-sidebar {
		padding-left: 0;
		padding-right: 0;
	}
}

/* Match the legacy image/text public layout to its editor presentation. The
 * old 1030px/1200px declarations are deliberately overridden here. */
@media (min-width: 782px) {
	body.body:not(.isjrenew-promo-template) .ttlTxt,
	body.body:not(.isjrenew-promo-template) .contentArea .imgTxt {
		margin-bottom: 60px;
	}

	body.body:not(.isjrenew-promo-template) .contentArea h2,
	body.body:not(.isjrenew-promo-template) .ttlTxt__title {
		font-size: 2.2rem;
		line-height: 2.18182;
		margin-bottom: 20px;
	}

	body.body:not(.isjrenew-promo-template) .contentArea .imgTxt__txtArea h2 {
		font-size: 2.2rem;
		line-height: 1.5;
		margin-bottom: 15px;
	}

	body.body:not(.isjrenew-promo-template) .contentArea h3,
	body.body:not(.isjrenew-promo-template) .ttlTxt__content h3 {
		font-size: 1.8rem;
		line-height: 2;
	}

	body.body:not(.isjrenew-promo-template) .ttlTxt p,
	body.body:not(.isjrenew-promo-template) .ttlTxt__content p,
	body.body:not(.isjrenew-promo-template)
		.contentArea
		p:not(.ttlTxt__titleEn),
	body.body:not(.isjrenew-promo-template) .contentArea .imgTxt__txtArea p {
		font-size: 1.6rem;
	}

	body.body:not(.isjrenew-promo-template) .contentArea .imgTxt {
		align-items: center;
		display: flex;
		flex-direction: row;
		gap: 32px;
		justify-content: space-between;
	}

	body.body:not(.isjrenew-promo-template) .contentArea .imgTxt.__imgFirst {
		flex-direction: row-reverse;
	}

	body.body:not(.isjrenew-promo-template)
		.contentArea
		.imgTxt
		.imgTxt__txtArea,
	body.body:not(.isjrenew-promo-template)
		.contentArea
		.imgTxt.__imgFirst
		.imgTxt__txtArea {
		box-sizing: border-box;
		flex: 1 1 56%;
		margin: 0;
		padding: 0;
		width: auto;
	}

	body.body:not(.isjrenew-promo-template)
		.contentArea
		.imgTxt
		.imgTxt__imgArea {
		flex: 0 1 42%;
		min-width: 0;
		width: auto;
	}
}

/* Extend the existing phone alignment reset through the core block mobile
 * breakpoint, avoiding a one-pixel/142px float-only transition band. */
@media (max-width: 781px) {
	body.body:not(.isjrenew-promo-template)
		.contentArea
		figure.alignright,
	body.body:not(.isjrenew-promo-template)
		.contentArea
		figure.alignleft {
		float: none;
		margin-left: auto;
		margin-right: auto;
		max-width: 100%;
	}

	body.body:not(.isjrenew-promo-template)
		.contentArea
		figure.alignright
		img,
	body.body:not(.isjrenew-promo-template)
		.contentArea
		figure.alignleft
		img {
		height: auto;
		max-width: 100%;
		width: auto;
	}
}

/* Support the semantic <button> version of the hamburger without browser
 * button chrome, and retain a visible keyboard focus indicator. */
body.body:not(.isjrenew-promo-template) button.hHumbBtn {
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	border: 0;
	color: inherit;
	font: inherit;
	line-height: 1;
	padding: 0;
}

body.body:not(.isjrenew-promo-template) .hHumbBtn:focus-visible {
	border-radius: 4px;
	outline: 3px solid #1578c5;
	outline-offset: -4px;
}

body.body:not(.isjrenew-promo-template) button.hHumbBtn .hHumbBtn__inner {
	pointer-events: none;
}

/* The legacy desktop rule disables every telephone link from 600px upward.
 * Restore activation on tablets and other coarse-pointer devices. */
@media (hover: none), (pointer: coarse) {
	body.body:not(.isjrenew-promo-template) a[href*="tel:"] {
		color: #142c41;
		cursor: pointer;
		pointer-events: auto;
		text-decoration: underline;
	}
}