/* Product screenshots on the public marketing pages (include/marketing-shot.php).
   Load after theme-2026.css and the page stylesheet. */

.t26 .shot-img { display: block; width: 100%; height: auto; }

/* ---- Hero: copy left, device cut-out right ---- */
.t26 .hero-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
	gap: 44px;
	align-items: center;
}
.t26 .hero-split--portrait { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); }
.t26 .hero-split .lead { margin: 18px 0 0; max-width: 540px; }
.t26 .hero-split .hero-ctas { margin-top: 28px; display: flex; gap: 14px; flex-wrap: wrap; }

.t26 .shot-hero { position: relative; margin: 0; }
/* soft sky glow behind the device so it lifts off the burgundy */
.t26 .shot-hero::before {
	content: "";
	position: absolute;
	inset: 6% 4% 10%;
	background: radial-gradient(closest-side, rgba(161,190,197,.38), rgba(161,190,197,0));
	filter: blur(10px);
	pointer-events: none;
}
.t26 .shot-hero picture { position: relative; display: block; }
.t26 .hero-split--portrait .shot-hero { max-width: 380px; justify-self: center; width: 100%; }

/* Pages on the older .hero-grid (home, Flow, Hub, Studio) give the real screenshot more room than the old CSS mock had */
.t26 .hero-grid:has(> .shot-hero) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: 44px; }

/* On wide screens the device sits a little past the copy column */
@media (min-width: 1101px) {
	.t26 .hero-split .shot-hero,
	.t26 .hero-grid > .shot-hero { margin-right: -36px; }
	.t26 .hero-split--portrait .shot-hero { margin-right: 0; }
}

/* ---- Framed screenshot card for light sections ---- */
.t26 .shot-card {
	margin: 0;
	border-radius: 18px;
	overflow: hidden;
	background: var(--ash);
	border: 1px solid rgba(23,31,33,.08);
	box-shadow: 0 24px 50px rgba(23,31,33,.12), 0 4px 12px rgba(23,31,33,.05);
}
.t26 .shot-wide { max-width: 980px; margin: 40px auto 0; }
/* portrait shots (quote tablet, invoice, takeoff panels) keep their shape at a sensible width */
.t26 .shot-card:has(> picture > .is-portrait) { width: 100%; max-width: 400px; margin-left: auto; margin-right: auto; }
.t26 .shot-card:has(> picture > .is-portrait) { max-width: 440px; }
.t26 .shot-wide--sm { max-width: 860px; margin: 30px auto 36px; }
.t26 .shot-illustration { max-width: 680px; }
.t26 .shot-note { margin: 12px 0 0; text-align: center; font-size: 12.5px; color: #8a857d; }

/* Feature detail pages: the body screenshot replaces the old 400px device collage */
.t26.feature-detail .media-split { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); max-width: 1060px; }
.t26.feature-detail .media-split__img.shot-card { display: block; }
.t26.feature-detail .media-split__img.shot-card img { max-width: 100%; width: 100%; border-radius: 0; box-shadow: none; }

/* ---- /features/ product sections: heading + copy + button beside a modest screenshot ---- */
.t26 .fsec-intro {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
	gap: 48px;
	align-items: center;
	margin-bottom: 8px;
}
.t26 .fsec-copy { margin: 14px 0 22px; max-width: 480px; font-size: 16px; line-height: 1.65; }
.t26 .fsec-shot { max-width: 420px; width: 100%; justify-self: end; border-radius: 14px; box-shadow: 0 14px 32px rgba(23,31,33,.10); }

/* ---- Image + copy row (feature pages, Flow, Hub) ---- */
.t26 .shot-row {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
	gap: 48px;
	align-items: center;
	max-width: 1040px;
	margin: 0 auto;
}
.t26 .shot-row--flip { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.t26 .shot-row--flip > .shot-card { order: 2; }
.t26 .shot-row h3 { font-size: 22px; font-weight: 700; margin: 0 0 10px; line-height: 1.25; }
.t26 .shot-row p { margin: 0 0 1em; font-size: 16px; line-height: 1.65; color: #5f5a54; }
.t26 .shot-row p:last-child { margin-bottom: 0; }
.t26 .shot-row a:not(.btn) { color: var(--mah); font-weight: 600; }

/* ---- Homepage "see it in action" tabs ---- */
.t26 .showcase-tabs {
	margin: 34px auto 0;
	display: flex;
	gap: 8px;
	justify-content: center;
	flex-wrap: wrap;
}
.t26 .showcase-tab {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border-radius: 999px;
	border: 1px solid rgba(23,31,33,.15);
	background: #fff;
	color: var(--char);
	font: 600 14px/1.2 inherit;
	font-family: inherit;
	cursor: pointer;
	white-space: nowrap;
	transition: background .15s, color .15s, border-color .15s;
}
.t26 .showcase-tab:hover { border-color: var(--mah); color: var(--mah); }
.t26 .showcase-tab[aria-selected="true"] { background: var(--mah); border-color: var(--mah); color: #fff; }
.t26 .showcase-tab:focus-visible { outline: 2px solid var(--skd); outline-offset: 2px; }
/* Without JS every panel shows, stacked; the script hides all but the selected one */
.t26 .showcase:not(.is-ready) .showcase-tabs { display: none; }
.t26 .showcase-panel { margin-top: 36px; }
.t26 .showcase-panel[hidden] { display: none; }
.t26 .showcase.is-ready .showcase-panel { animation: t26-shot-in .35s ease both; }
@keyframes t26-shot-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
	.t26 .showcase.is-ready .showcase-panel { animation: none; }
}

@media (max-width: 900px) {
	.t26 .hero-split,
	.t26 .hero-split--portrait,
	.t26 .hero-grid:has(> .shot-hero) { grid-template-columns: 1fr; gap: 34px; }
	.t26 .hero-split .shot-hero,
	.t26 .hero-grid > .shot-hero { max-width: 640px; width: 100%; justify-self: center; }
	.t26 .hero-split--portrait .shot-hero { max-width: 300px; }
	.t26 .shot-row,
	.t26 .shot-row--flip { grid-template-columns: 1fr; gap: 26px; }
	.t26 .shot-row > .shot-card,
	.t26 .shot-row--flip > .shot-card { order: -1; }
}
@media (max-width: 760px) {
	.t26 .fsec-intro { grid-template-columns: 1fr; gap: 22px; }
	.t26 .fsec-shot { justify-self: start; max-width: 100%; }
	.t26 .fsec-copy { margin-bottom: 18px; }
	/* tabs become one swipeable row that runs to the screen edges */
	.t26 .showcase-tabs {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		margin: 26px -20px 0;
		padding: 2px 20px 6px;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
	}
	.t26 .showcase-tabs::-webkit-scrollbar { display: none; }
	.t26 .showcase-tab { scroll-snap-align: start; padding: 9px 15px; font-size: 13.5px; }
	.t26 .shot-card { border-radius: 12px; }
	.t26 .shot-wide { margin-top: 28px; }
	.t26 .shot-row h3 { font-size: 20px; }
}
@media (max-width: 560px) {
	.t26 .hero-split .hero-ctas a.btn { width: 100%; text-align: center; box-sizing: border-box; }
}