/* Large-screen layout studies for the local Orditach clone.
   These rules are intentionally isolated behind body.mockup-* classes. */

.mockup-switcher {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 100000;
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 7px;
	border: 1px solid rgba(255,255,255,.65);
	border-radius: 13px;
	background: rgba(31,51,56,.9);
	box-shadow: 0 14px 38px rgba(16,24,40,.25);
	backdrop-filter: blur(14px);
}
.mockup-switcher a {
	min-width: 34px;
	box-sizing: border-box;
	padding: 7px 10px;
	border-radius: 8px;
	color: rgba(255,255,255,.82) !important;
	font-size: 13px;
	font-weight: 750;
	line-height: 1;
	text-align: center;
	text-decoration: none;
}
.mockup-switcher a:hover,
.mockup-switcher a:focus-visible { color: #fff !important; background: rgba(255,255,255,.13); }
.mockup-switcher__home { min-width: auto !important; padding-inline: 9px !important; }
.mockup-switcher span { width: 1px; height: 22px; margin-inline: 3px; background: rgba(255,255,255,.22); }
.mockup-panorama .mockup-switcher .is-panorama,
.mockup-canvas .mockup-switcher .is-canvas,
.mockup-rail .mockup-switcher .is-rail { color: #fff !important; background: #f16e00; }

/* --------------------------------------------------------------------------
   A — PANORAMA
   Preserve the current hierarchy, but let the product UI and dense comparison
   content use the space available on 1440–2560px displays.
---------------------------------------------------------------------------- */
@media (min-width: 1280px) {
	body.mockup-panorama {
		--wp--style--global--content-size: min(1120px, calc(100vw - 120px));
		--wp--style--global--wide-size: min(1640px, calc(100vw - 120px));
	}
	.mockup-panorama .otl-hdr__inner,
	.mockup-panorama .otl-breadcrumb__inner,
	.mockup-panorama .otl-foot__inner { max-width: 1640px; }
	.mockup-panorama .otl-hdr__inner { padding-block: .7rem; }
	.mockup-panorama .otl-hero-stage { padding-block: clamp(4.5rem, 6vw, 7rem) !important; }
	.mockup-panorama .otl-hero-stage > .wp-block-columns {
		max-width: min(1640px, calc(100vw - 120px)) !important;
		gap: clamp(4rem, 7vw, 9rem);
	}
	.mockup-panorama .otl-hero-stage .wp-block-column:first-child { flex-basis: 39% !important; }
	.mockup-panorama .otl-hero-stage .wp-block-column:last-child { flex-basis: 61% !important; }
	.mockup-panorama .otl-hero-stage .otl-sol-hero__title { font-size: clamp(2.65rem, 2.25vw, 4rem); }
	.mockup-panorama .otl-hero-stage .otl-sol-hero__intro { font-size: clamp(1.08rem, .55vw + .72rem, 1.35rem); }
	.mockup-panorama .otl-hero-svg { max-width: 900px; }
	.mockup-panorama .otl-tiers { padding-inline: max(3rem, calc((100vw - 1740px) / 2)); }
	.mockup-panorama .otl-tiers__head { max-width: 920px; }
	.mockup-panorama .otl-tiers__scroll,
	.mockup-panorama .otl-tiers__legend { max-width: 1640px; }
	.mockup-panorama .otl-tiers__feat { min-width: 290px; }
	.mockup-panorama .otl-combine { max-width: 1500px; }
	.mockup-panorama .otl-combine__card { padding: 1.15rem 1.4rem; }
	.mockup-panorama .otl-ps { max-width: 1500px !important; gap: 2.5rem; }
	.mockup-panorama .otl-ps__panel { padding: 2.4rem; }
	.mockup-panorama .wp-block-post-content > .otl-sol-mod { padding-block: clamp(4.5rem, 6vw, 7rem) !important; }
	.mockup-panorama .otl-sol-mod > .wp-block-columns {
		max-width: min(1540px, calc(100vw - 160px)) !important;
		gap: clamp(4rem, 8vw, 10rem);
	}
	.mockup-panorama .otl-sol-mod .otl-sol-mod__h { font-size: clamp(2.2rem, 2vw, 3.25rem); }
	.mockup-panorama .otl-sol-mod__list { max-width: 54ch; font-size: 1.08rem; }
	.mockup-panorama .otl-sol-mod__img img { border-radius: 18px; box-shadow: 0 30px 70px -35px rgba(16,24,40,.62); }
}

/* --------------------------------------------------------------------------
   B — MODULE CANVAS
   Keep the sales story full-width, then convert the repetitive module bands
   into a 3 + 2 card composition on very wide displays.
---------------------------------------------------------------------------- */
@media (min-width: 1180px) {
	body.mockup-canvas {
		--canvas-gutter: clamp(28px, 3vw, 64px);
		--wp--style--global--content-size: min(1040px, calc(100vw - 120px));
		--wp--style--global--wide-size: min(1640px, calc(100vw - 120px));
		background: #f3f5f5;
	}
	.mockup-canvas .otl-hdr__inner,
	.mockup-canvas .otl-breadcrumb__inner,
	.mockup-canvas .otl-foot__inner { max-width: 1640px; }
	.mockup-canvas .wp-block-post-content {
		display: grid;
		grid-template-columns: repeat(6, minmax(0, 1fr));
		grid-auto-flow: row;
		gap: 0 28px;
		padding-inline: var(--canvas-gutter);
	}
	.mockup-canvas .wp-block-post-content > * { grid-column: 1 / -1; }
	.mockup-canvas .wp-block-post-content > .alignfull:not(.otl-sol-mod) {
		margin-inline: calc(var(--canvas-gutter) * -1) !important;
	}
	.mockup-canvas .otl-hero-stage > .wp-block-columns { max-width: min(1540px, calc(100vw - 140px)) !important; }
	.mockup-canvas .otl-hero-stage .otl-sol-hero__title { font-size: clamp(2.4rem, 2.15vw, 3.6rem); }
	.mockup-canvas .otl-hero-svg { max-width: 780px; }
	.mockup-canvas .otl-tiers__scroll,
	.mockup-canvas .otl-tiers__legend { max-width: 1540px; }
	.mockup-canvas .otl-combine { max-width: 1440px; }
	.mockup-canvas .wp-block-post-content > .otl-sol-mod {
		position: relative;
		grid-column: auto / span 2;
		min-width: 0;
		margin: 28px 0 0 !important;
		padding: 0 !important;
		overflow: hidden;
		border: 1px solid #dde5e7;
		border-radius: 24px;
		background: #fff !important;
		box-shadow: 0 18px 55px -36px rgba(31,51,56,.58);
	}
	.mockup-canvas .wp-block-post-content > .otl-sol-mod:nth-child(8) { grid-column: 1 / span 2; }
	.mockup-canvas .wp-block-post-content > .otl-sol-mod:nth-child(9) { grid-column: 3 / span 2; }
	.mockup-canvas .wp-block-post-content > .otl-sol-mod:nth-child(10) { grid-column: 5 / span 2; }
	.mockup-canvas .wp-block-post-content > .otl-sol-mod:nth-child(11) { grid-column: 1 / span 3; }
	.mockup-canvas .wp-block-post-content > .otl-sol-mod:nth-child(12) { grid-column: 4 / span 3; }
	.mockup-canvas .otl-sol-mod > .wp-block-columns {
		display: flex;
		flex-direction: column;
		align-items: stretch !important;
		max-width: none !important;
		height: 100%;
		gap: 0;
		margin: 0 !important;
	}
	.mockup-canvas .otl-sol-mod .wp-block-column { width: auto; }
	.mockup-canvas .otl-sol-mod .wp-block-column:has(.otl-sol-mod__img) {
		order: -1;
		flex: 0 0 auto !important;
	}
	.mockup-canvas .otl-sol-mod .wp-block-column:not(:has(.otl-sol-mod__img)) {
		display: flex;
		flex: 1 1 auto;
		flex-direction: column;
		align-items: flex-start;
		box-sizing: border-box;
		padding: clamp(1.5rem, 2.2vw, 2.25rem);
	}
	.mockup-canvas .otl-sol-mod__img { width: 100%; margin: 0; border-radius: 0; background: #e9eef0; }
	.mockup-canvas .otl-sol-mod__img a { border-radius: 0; }
	.mockup-canvas .otl-sol-mod__img img {
		width: 100%;
		aspect-ratio: 16 / 9;
		object-fit: cover;
		object-position: top center;
		border-radius: 0;
		box-shadow: none;
	}
	.mockup-canvas .otl-sol-mod .otl-sol-mod__h { font-size: clamp(1.7rem, 1.5vw, 2.25rem); }
	.mockup-canvas .otl-sol-mod__list { font-size: .98rem; }
	.mockup-canvas .otl-sol-mod .wp-container-core-group-is-layout-91bc6cd1 { margin-top: auto !important; padding-top: 1.2rem; }
	.mockup-canvas .wp-block-post-content > .otl-sol-mod:nth-child(12) { margin-bottom: 38px !important; }
}

@media (min-width: 760px) and (max-width: 1179px) {
	.mockup-canvas .wp-block-post-content {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0 22px;
		padding-inline: 24px;
	}
	.mockup-canvas .wp-block-post-content > * { grid-column: 1 / -1; }
	.mockup-canvas .wp-block-post-content > .alignfull:not(.otl-sol-mod) { margin-inline: -24px !important; }
	.mockup-canvas .wp-block-post-content > .otl-sol-mod {
		grid-column: auto / span 1;
		margin: 22px 0 0 !important;
		padding-inline: 24px !important;
		border: 1px solid #e0e7e9;
		border-radius: 20px;
	}
}

/* --------------------------------------------------------------------------
   C — SPLIT RAIL
   Use the desktop width as hierarchy: comparison copy becomes a left rail,
   while modules alternate across a generous 12-column editorial grid.
---------------------------------------------------------------------------- */
@media (min-width: 1280px) {
	body.mockup-rail {
		--rail-width: min(1780px, calc(100vw - 120px));
		--rail-edge: max(60px, calc((100vw - 1780px) / 2));
		--wp--style--global--content-size: min(1040px, calc(100vw - 120px));
		--wp--style--global--wide-size: var(--rail-width);
	}
	.mockup-rail .otl-hdr__inner,
	.mockup-rail .otl-breadcrumb__inner,
	.mockup-rail .otl-foot__inner { max-width: 1780px; }
	.mockup-rail .otl-hero-stage { padding-block: clamp(5rem, 7vw, 8rem) !important; }
	.mockup-rail .otl-hero-stage > .wp-block-columns {
		max-width: var(--rail-width) !important;
		gap: clamp(4rem, 7vw, 9rem);
	}
	.mockup-rail .otl-hero-stage .wp-block-column:first-child { flex-basis: 36% !important; }
	.mockup-rail .otl-hero-stage .wp-block-column:last-child { flex-basis: 64% !important; }
	.mockup-rail .otl-hero-stage .otl-sol-hero__title { font-size: clamp(2.75rem, 2.5vw, 4.25rem); }
	.mockup-rail .otl-hero-svg { max-width: 1000px; }
	.mockup-rail .otl-tiers {
		display: grid;
		grid-template-columns: minmax(280px, 400px) minmax(780px, 1fr);
		grid-template-rows: auto 1fr;
		column-gap: clamp(3.5rem, 6vw, 8rem);
		align-items: start;
		padding-inline: var(--rail-edge);
	}
	.mockup-rail .otl-tiers__head {
		position: sticky;
		top: 105px;
		grid-column: 1;
		grid-row: 1 / span 2;
		max-width: none;
		margin: 0;
		padding-top: 1.7rem;
		text-align: left;
	}
	.mockup-rail .otl-tiers__title { font-size: clamp(2.2rem, 2.2vw, 3.4rem); }
	.mockup-rail .otl-tiers__legend {
		grid-column: 2;
		grid-row: 1;
		justify-content: flex-start;
		max-width: none;
		margin-inline: 0;
	}
	.mockup-rail .otl-tiers__scroll {
		grid-column: 2;
		grid-row: 2;
		width: 100%;
		max-width: none;
		margin-inline: 0;
	}
	.mockup-rail .otl-combine { max-width: 1600px; }
	.mockup-rail .otl-ps { max-width: 1560px !important; }
	.mockup-rail .wp-block-post-content > .otl-sol-mod {
		position: relative;
		min-height: 590px;
		padding: clamp(5rem, 7vw, 8rem) var(--rail-edge) !important;
		overflow: hidden;
	}
	.mockup-rail .otl-sol-mod > .wp-block-columns {
		display: grid;
		grid-template-columns: repeat(12, minmax(0, 1fr));
		align-items: center !important;
		max-width: var(--rail-width) !important;
		gap: clamp(1.5rem, 2vw, 3rem);
	}
	.mockup-rail .otl-sol-mod .wp-block-column { width: auto; }
	.mockup-rail .otl-sol-mod .wp-block-column:has(.otl-sol-mod__img) { grid-column: 1 / span 7; }
	.mockup-rail .otl-sol-mod .wp-block-column:not(:has(.otl-sol-mod__img)) { grid-column: 9 / span 4; }
	.mockup-rail .wp-block-post-content > .otl-sol-mod:nth-child(9) .wp-block-column:has(.otl-sol-mod__img),
	.mockup-rail .wp-block-post-content > .otl-sol-mod:nth-child(11) .wp-block-column:has(.otl-sol-mod__img) { grid-column: 6 / span 7; }
	.mockup-rail .wp-block-post-content > .otl-sol-mod:nth-child(9) .wp-block-column:not(:has(.otl-sol-mod__img)),
	.mockup-rail .wp-block-post-content > .otl-sol-mod:nth-child(11) .wp-block-column:not(:has(.otl-sol-mod__img)) { grid-column: 1 / span 4; grid-row: 1; }
	.mockup-rail .otl-sol-mod .otl-sol-mod__h { font-size: clamp(2.4rem, 2.25vw, 3.65rem); }
	.mockup-rail .otl-sol-mod__list { font-size: 1.08rem; }
	.mockup-rail .otl-sol-mod__img img { border-radius: 20px; box-shadow: 0 40px 90px -45px rgba(16,24,40,.8); }
	.mockup-rail .otl-sol-mod::before {
		position: absolute;
		right: var(--rail-edge);
		top: 1rem;
		color: #475f65;
		font-size: clamp(7rem, 9vw, 12rem);
		font-weight: 850;
		line-height: 1;
		letter-spacing: -.08em;
		opacity: .055;
		pointer-events: none;
	}
	.mockup-rail .wp-block-post-content > .otl-sol-mod:nth-child(8)::before { content: "01"; }
	.mockup-rail .wp-block-post-content > .otl-sol-mod:nth-child(9)::before { content: "02"; left: var(--rail-edge); right: auto; }
	.mockup-rail .wp-block-post-content > .otl-sol-mod:nth-child(10)::before { content: "03"; }
	.mockup-rail .wp-block-post-content > .otl-sol-mod:nth-child(11)::before { content: "04"; left: var(--rail-edge); right: auto; }
	.mockup-rail .wp-block-post-content > .otl-sol-mod:nth-child(12)::before { content: "05"; }
}

@media (max-width: 1279px) {
	.mockup-rail .otl-tiers { display: block; }
}

@media (max-width: 720px) {
	.mockup-switcher { right: 8px; bottom: 8px; padding: 5px; }
	.mockup-switcher__home,
	.mockup-switcher span,
	.mockup-switcher .is-original { display: none; }
	.mockup-switcher a { min-width: 38px; min-height: 38px; display: grid; place-items: center; padding: 7px; }
}

@media (prefers-reduced-motion: reduce) {
	.mockup-switcher { backdrop-filter: none; }
}