/* TTP Book Publishing Showcase — every value can be changed from the widget's Style tab. */
.ttp-bp{
	--ttp-bp-accent:#017762;
	--ttp-bp-top:30px;
	--ttp-bp-gap:30px;
	--ttp-bp-overlap:64px;
	display:flex;flex-direction:column;gap:var(--ttp-bp-gap);
	font-family:inherit;
}
.ttp-bp *,.ttp-bp *::before,.ttp-bp *::after{box-sizing:border-box}
.ttp-bp--empty{padding:24px;color:#8c8c8c;background:#111;border-radius:12px;font-size:14px}

/* ---- row (one service) ---- */
.ttp-bp .ttp-bp__row{
	position:relative;background:#ffffff;border-radius:16px;padding:56px 32px 48px;
	overflow:hidden;box-shadow:0 10px 40px rgba(0,0,0,.06);
}
.ttp-bp--stack .ttp-bp__row{position:sticky;top:var(--ttp-bp-stick,var(--ttp-bp-top));min-height:var(--ttp-bp-rowh,0px);display:flex;flex-direction:column;justify-content:center}
.ttp-bp--stack .ttp-bp__row.is-tall{position:relative;top:auto;min-height:0}
.ttp-bp .ttp-bp__band{position:absolute;left:0;right:0;bottom:0;height:72%;background:var(--ttp-bp-accent);pointer-events:none}

.ttp-bp__inner{
	width:100%;position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
	align-items:center;max-width:1140px;margin:0 auto;
}
.ttp-bp--no-image .ttp-bp__inner{grid-template-columns:minmax(0,1fr)}

/* ---- image panel ---- */
.ttp-bp .ttp-bp__media{
	position:relative;min-height:420px;border-radius:12px;overflow:hidden;
	background:#0d3b33;transform:translateX(var(--ttp-bp-overlap));
	box-shadow:4px 5px 15px 1px rgba(0,0,0,.28);
}
.ttp-bp .ttp-bp__media img,.ttp-bp .ttp-bp__img{
	position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;display:block;border-radius:0;
}

/* ---- dark card ---- */
.ttp-bp .ttp-bp__card{
	position:relative;z-index:2;min-height:380px;background:#0b0b0b;color:#fff;
	border-radius:12px;padding:44px 48px;transform:translateX(calc(var(--ttp-bp-overlap) * -1));
	display:flex;flex-direction:column;justify-content:center;
	box-shadow:0 20px 50px rgba(0,0,0,.25);
}
.ttp-bp--no-image .ttp-bp__card{transform:none}

/* zig-zag: image on the right */
.ttp-bp__row.is-reverse .ttp-bp__inner{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.ttp-bp__row.is-reverse .ttp-bp__media{order:2;transform:translateX(calc(var(--ttp-bp-overlap) * -1))}
.ttp-bp__row.is-reverse .ttp-bp__card{order:1;transform:translateX(var(--ttp-bp-overlap))}

.ttp-bp .ttp-bp__eyebrow{
	position:relative;display:inline-flex;align-items:center;gap:10px;align-self:flex-start;
	margin:0 0 8px;font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55);
}
.ttp-bp .ttp-bp__eyebrow::after{content:"";width:22px;border-bottom:1px solid var(--ttp-bp-accent)}
.ttp-bp .ttp-bp__title{
	margin:0 0 16px;padding:0;color:#fff;font-weight:700;line-height:1.05;
	font-size:clamp(26px,3.2vw,42px);letter-spacing:.01em;
}
.ttp-bp-upper-yes .ttp-bp .ttp-bp__title{text-transform:uppercase}
.ttp-bp .ttp-bp__desc{margin:0 0 20px;color:#d2d2d2;font-size:16px;line-height:1.7;white-space:pre-line}

.ttp-bp__tags{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.ttp-bp .ttp-bp__tags li{
	margin:0;display:inline-flex;align-items:center;gap:10px;overflow:hidden;
	border:1px solid rgba(255,255,255,.85);border-radius:10px;padding:0 14px 0 0;
	font-size:13px;line-height:1;color:#fff;
}
.ttp-bp .ttp-bp__tag-ico{display:inline-flex;align-items:center;padding:7px 9px;background:var(--ttp-bp-accent)}
.ttp-bp__tag-ico svg{width:11px;height:11px;display:block}

.ttp-bp .ttp-bp__btn{
	align-self:flex-start;display:inline-flex;align-items:center;gap:14px;padding:14px 22px;border-radius:10px;
	background:var(--ttp-bp-accent);border:1px solid var(--ttp-bp-accent);color:#fff;text-decoration:none;
	font-weight:500;font-size:15px;line-height:1.2;transition:background-color .3s,color .3s,border-color .3s;
}
.ttp-bp .ttp-bp__btn:hover,.ttp-bp .ttp-bp__btn:focus-visible{background:#fff;border-color:#fff;color:var(--ttp-bp-accent)}
.ttp-bp__btn svg{width:16px;height:16px;flex:none;transition:transform .3s}
.ttp-bp__btn:hover svg{transform:translate(2px,2px)}

/* ---- tablet ---- */
@media (max-width:1024px){
	.ttp-bp{--ttp-bp-overlap:28px}
	.ttp-bp .ttp-bp__row{padding:15px 20px 36px}
	/* tablet & phone: each card keeps its own height (no equal-height padding), content starts at the top */
	.ttp-bp--stack .ttp-bp__row{min-height:0;justify-content:flex-start}
	.ttp-bp .ttp-bp__media{min-height:340px}
	.ttp-bp .ttp-bp__card{padding:34px 32px;min-height:320px}
}
/* ---- phone: image on top, card overlapping below it ---- */
@media (max-width:767px){
	.ttp-bp .ttp-bp__row{padding:14px 14px 20px}
	.ttp-bp .ttp-bp__band{height:62%}
	.ttp-bp__inner,.ttp-bp__row.is-reverse .ttp-bp__inner{grid-template-columns:minmax(0,1fr)}
	.ttp-bp .ttp-bp__media,.ttp-bp__row.is-reverse .ttp-bp__media{order:1;transform:none;width:100%;max-width:100%;min-height:200px;aspect-ratio:auto}
	.ttp-bp .ttp-bp__card,.ttp-bp__row.is-reverse .ttp-bp__card{order:2;transform:none;margin:-36px 10px 0;min-height:0;padding:26px 22px}
	.ttp-bp--no-image .ttp-bp__card{margin:0}
	.ttp-bp .ttp-bp__title{font-size:26px}
}
@media (prefers-reduced-motion:reduce){
	.ttp-bp--stack .ttp-bp__row{position:relative;top:auto}
	.ttp-bp *{transition:none!important}
}

/* ---- entrance + stacking animation (only when JS adds .ttp-bp--anim, so content is never hidden without JS) ---- */
.ttp-bp--anim .ttp-bp__inner{transform-origin:50% 0;transform:scale(calc(1 - var(--ttp-bp-depth,0) * .06));filter:brightness(calc(1 - var(--ttp-bp-depth,0) * .35));will-change:transform}
.ttp-bp--anim .ttp-bp__media{clip-path:inset(0 100% 0 0 round 12px);transition:clip-path 1.1s cubic-bezier(.65,.05,.25,1)}
.ttp-bp--anim .ttp-bp__row.is-reverse .ttp-bp__media{clip-path:inset(0 0 0 100% round 12px)}
.ttp-bp--anim .ttp-bp__media img{transform:scale(1.18);transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}
.ttp-bp--anim .ttp-bp__row.is-in .ttp-bp__media,.ttp-bp--anim .ttp-bp__row.is-reverse.is-in .ttp-bp__media{clip-path:inset(0 0 0 0 round 12px)}
.ttp-bp--anim .ttp-bp__row.is-in .ttp-bp__media img{transform:scale(1)}
.ttp-bp--anim .ttp-bp__card{opacity:0;transition:opacity .8s ease .15s}
.ttp-bp--anim .ttp-bp__row.is-in .ttp-bp__card{opacity:1}
.ttp-bp--anim .ttp-bp__card>*{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.ttp-bp--anim .ttp-bp__row.is-in .ttp-bp__card>*{opacity:1;transform:none}
.ttp-bp--anim .ttp-bp__row.is-in .ttp-bp__card>*:nth-child(1){transition-delay:.25s}
.ttp-bp--anim .ttp-bp__row.is-in .ttp-bp__card>*:nth-child(2){transition-delay:.35s}
.ttp-bp--anim .ttp-bp__row.is-in .ttp-bp__card>*:nth-child(3){transition-delay:.45s}
.ttp-bp--anim .ttp-bp__row.is-in .ttp-bp__card>*:nth-child(4){transition-delay:.55s}
.ttp-bp--anim .ttp-bp__row.is-in .ttp-bp__card>*:nth-child(5){transition-delay:.65s}
.ttp-bp--anim .ttp-bp__band{transform:scaleY(0);transform-origin:50% 100%;transition:transform 1s cubic-bezier(.65,.05,.25,1)}
.ttp-bp--anim .ttp-bp__row.is-in .ttp-bp__band{transform:none}
@media (prefers-reduced-motion:reduce){
	.ttp-bp--anim .ttp-bp__inner{transform:none;filter:none}
	.ttp-bp--anim .ttp-bp__media,.ttp-bp--anim .ttp-bp__row.is-reverse .ttp-bp__media{clip-path:none}
	.ttp-bp--anim .ttp-bp__media img,.ttp-bp--anim .ttp-bp__card,.ttp-bp--anim .ttp-bp__card>*,.ttp-bp--anim .ttp-bp__band{opacity:1;transform:none}
}