/* ============================================================
   "Onze creaties" — Elementor (grid карток + c-btn)
   ============================================================ */
   .tf-overons-creaties{ --tf-blue:#3273eb; --tf-accent:#eb6049; background:#f9f9fd; }

/* секція: o-band + гутери g-container */
.e-con.tf-overons-creaties{ padding:4.6875rem 1.5625rem; }
.e-con.tf-overons-creaties-inner{
	display:flex; flex-direction:column;
	gap:3.125rem; width:100%;
}

/* заголовок (.alpha) + вступ */
.tf-overons-creaties-title .elementor-heading-title{
	margin:0; color:var(--tf-blue); font-weight:800;
	font-size:1.875rem; line-height:2.1875rem;
}
.tf-overons-creaties-text{
	margin-top:-1.953125rem;                 /* підтягнути до заголовка (s-text gap) */
	color:#000; font-size:1rem; line-height:1.6666666667;
}
.tf-overons-creaties-text p{ margin:0; }

/* ---- сітка карток ---- */
.tf-case-cards{
	display:grid;
	grid-template-columns:1fr;
	gap:1.5625rem;
}

/* картка (.c-node) */
.tf-case-card{
	--cp:1.5625rem;                          /* внутрішній padding тіла */
	display:flex; flex-direction:column;
	background:#f9f9fd;
	border:.0625rem solid #e6e6e6;
	border-radius:.625rem;
	overflow:hidden;
	transition: .5s cubic-bezier(.22,.61,.36,1);
	height: 100%;
}
.tf-case-card:hover{
	border-color:#f9f9fd;
	box-shadow:-.625rem -.25rem 1.25rem #fff, .625rem .25rem .9375rem #e0e0e5;
}

/* зображення (o-img-contain + multiply) */
.tf-case-card__media{
	position:relative;
	padding-bottom:80%;
	mix-blend-mode:multiply;
	margin-bottom: 45px;
}
.tf-case-card__media img{
	position:absolute; inset:0;
	width:100%; height:100%;
	object-fit:contain; display:block;
}

.tf-overons-creaties-cta{
	text-align: center;
	width: 100%;
}

/* текст (притиснутий донизу → CTA вирівняні по рядку) */
.tf-case-card__text{
	margin:auto var(--cp) 0;
	color:#000; font-size:.875rem; line-height:1.3;
	margin-bottom: 14px;
}

/* CTA (.c-link--primary) — dual-arrow, тригер на ховер картки */
.tf-case-card__cta{
	position:relative; display:inline-block; align-self:flex-start;
	margin:.78125rem var(--cp) var(--cp);
	padding-right:.78125rem;
	color:var(--tf-blue); text-decoration:none; white-space:nowrap;
	font-size:.8125rem; font-weight:500; letter-spacing:.15em; text-transform:uppercase;
	transition:all .5s cubic-bezier(.22,.61,.36,1);
}

.tf-case-card__cta:hover{
	color:var(--tf-blue);
}

.tf-case-card__cta::after,
.tf-case-card__cta::before{
	content:""; position:absolute; top:50%;
	width:.75rem; height:1.0625rem; transform:translateY(-50%);
	background:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNS41MjQiIGhlaWdodD0iOS41NTMiPjxwYXRoIGRhdGEtbmFtZT0iUGF0aCAxOTMiIGQ9Im0xMC43NDcgMC0uODQyLjg0MiAzLjMzMiAzLjMzOEgwdjEuMTk0aDEzLjIzN0w5Ljg5OSA4LjcwNmwuODQ4Ljg0OCA0Ljc3Ny00Ljc3N3oiIGZpbGw9IiMzMjczZWIiLz48L3N2Zz4=") no-repeat 50%/contain;
	transition:all .5s cubic-bezier(.22,.61,.36,1);
	pointer-events:none;
}
.tf-case-card__cta::after{ left:100%; opacity:1; }
.tf-case-card__cta::before{ left:-10%; opacity:0; }
.tf-case-card:hover .tf-case-card__cta{ padding-left:1.5625rem; }
.tf-case-card:hover .tf-case-card__cta::after{ left:110%; opacity:0; }
.tf-case-card:hover .tf-case-card__cta::before{ left:0; opacity:1; }

/* ---- кнопка (.c-btn: оранж + коло) ---- */
.tf-overons-creaties-cta .elementor-button{
	position:relative; overflow:hidden; z-index:1;
	display:inline-flex; align-items:center; justify-content:center;
	height:3.75rem; padding:0 2.1875rem;
	border:none; border-radius:.625rem;
	background-color:var(--tf-accent); color:#fff;
	font-size:.8125rem; font-weight:500; letter-spacing:.15em; line-height:1; text-transform:uppercase;
}
.tf-overons-creaties-cta .elementor-button::before{
	content:""; position:absolute; z-index:-1;
	top:var(--y,50%); left:var(--x,50%);
	width:0; height:0; border-radius:50%;
	background:var(--tf-blue); transform:translate(-50%,-50%);
	transition:width .4s ease-in-out, height .4s ease-in-out;
}
.tf-overons-creaties-cta .elementor-button:hover::before,
.tf-overons-creaties-cta .elementor-button:focus::before{ width:250%; height:250%; }
.tf-overons-creaties-cta .elementor-button .elementor-button-content-wrapper{ position:relative; z-index:1; }

/* ---- ≥768px: 2 колонки ---- */
@media (min-width:768px){
	.e-con.tf-overons-creaties{ padding:6rem 3rem; }
	.e-con.tf-overons-creaties-inner{ gap:3rem; }
	.tf-case-cards{ grid-template-columns:repeat(2,1fr); gap:2rem; }
	.tf-case-card{ --cp:2rem; }
	.tf-overons-creaties-title .elementor-heading-title{ font-size:2.375rem; line-height:2.75rem; }
	.tf-overons-creaties-text{ font-size:1.125rem; line-height:1.875rem; }
	.tf-case-card__text{ font-size:1rem; }
}

/* ---- ≥992px: 3 колонки ---- */
@media (min-width:992px){
	.e-con.tf-overons-creaties{ padding:8rem 4rem; }
	.tf-case-cards{ grid-template-columns:repeat(3,1fr); }
}

/* ---- ≥1200px: 4 колонки, вужчий вступ ---- */
@media (min-width:1200px){
	.e-con.tf-overons-creaties{ padding:10rem 6rem; }
	.tf-case-cards{ grid-template-columns:repeat(4,1fr); }
	.tf-overons-creaties-title .elementor-heading-title{ font-size:3.125rem; line-height:3.625rem; }
	.tf-overons-creaties-text{ font-size:1.25rem; line-height:2.25rem; }
}

/* ---- ≥1550px ---- */
@media (min-width:1550px){
	.e-con.tf-overons-creaties{ padding:12.5rem 10rem; }
	.e-con.tf-overons-creaties-inner{ gap: 70px; }
	.tf-case-cards{ gap:2.5rem; }
	.tf-case-card{ --cp:2.5rem; }
	.tf-overons-creaties-title .elementor-heading-title{ font-size:4.125rem; line-height:4.1875rem; }
	.tf-overons-creaties-text{ font-size:1.5rem; line-height:2.5rem; }
	.tf-case-card__text{ font-size:1.125rem; }
}