/* ==========================================================
   K9 Paw – Challenges Cards widget
   ========================================================== */
.k9ch {
	--k9-gold: #DCA54A;
	position: relative;
	overflow: hidden;
	padding: 110px 50px 120px;
	background: #f8f5ef;
	font-family: var(--k9-font, 'Roboto', sans-serif);
	color: #555;
}
.k9ch *, .k9ch *::before, .k9ch *::after { box-sizing: border-box; }
.k9ch__inner { position: relative; z-index: 2; max-width: 1560px; margin: 0 auto; }

/* Decorations */
.k9ch__shape { position: absolute; z-index: 0; pointer-events: none; }
.k9ch__shape--tl {
	top: 100px; left: 100px; width: 100px; height: 170px;
	background: linear-gradient(160deg, #f0cf8c, var(--k9-gold) 60%, #b98633);
	clip-path: polygon(0 0, 35% 0, 100% 100%, 65% 100%);
}
.k9ch__shape--br {
	right: 0; bottom: 0; width: 210px; height: 210px;
	background: #151515;
	clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.k9ch__shape--br::before {
	content: ""; position: absolute; left: 0; bottom: 0; width: 110px; height: 120px;
	background: linear-gradient(200deg, #f0cf8c, var(--k9-gold));
	clip-path: polygon(55% 0, 100% 0, 45% 100%, 0 100%);
}
.k9ch__corner-ic { position: absolute; right: 30px; bottom: 34px; color: var(--k9-gold); font-size: 44px; }
.k9ch__corner-ic svg { width: 44px; height: 44px; fill: currentColor; }
.k9ch__wm {
	position: absolute; top: 0; right: 60px; z-index: 0; pointer-events: none;
	font-size: 340px; line-height: 1; color: rgba(220,165,74,.07);
}
.k9ch__wm svg { width: 340px; height: 340px; fill: currentColor; }

/* Heading */
.k9ch__head { text-align: center; max-width: 1080px; margin: 0 auto 60px; }
.k9ch__sub {
	font-size: 17px; font-weight: 600; letter-spacing: 5px; text-transform: uppercase;
	color: var(--k9-gold); margin-bottom: 16px;
}
.k9ch__title {
	font-family: var(--k9-font, 'Roboto', sans-serif);
	font-size: 58px; font-weight: 800; line-height: 1.12; letter-spacing: -.5px;
	color: #111; margin: 0;
}
.k9ch__title em {
	font-style: normal;
	background: linear-gradient(180deg, #e9c47c 0%, var(--k9-gold) 55%, #a87929 100%);
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent; color: var(--k9-gold);
}
.k9ch__desc { margin-top: 14px; font-size: 17px; line-height: 1.6; color: #666; }
.k9ch__desc p { margin: 0 0 8px; color: inherit; font: inherit; }

/* Grid */
.k9ch__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; }

.k9ch__card {
	position: relative;
	display: flex; flex-direction: column; align-items: flex-start;
	min-height: 370px;
	padding: 32px 36px 90px 38px;
	background: #fdfbf7;
	border: 1px solid rgba(0,0,0,.04);
	border-radius: 14px;
	box-shadow: 0 14px 36px rgba(60,40,0,.07);
	transition: transform .4s ease, box-shadow .4s ease, border-color .4s ease, background-color .4s ease;
}
/* top gold accent line – grows on hover */
.k9ch__card::before {
	content: ""; position: absolute; top: -1px; left: 0; height: 3px; width: 88px;
	background: var(--k9-gold); border-radius: 14px 0 3px 0;
	transition: width .5s ease;
}
.k9ch__card:hover {
	transform: translateY(-8px);
	background-color: #fff;
	border-color: rgba(220,165,74,.35);
	box-shadow: 0 26px 50px rgba(60,40,0,.13);
}
.k9ch__card:hover::before { width: 100%; border-radius: 14px 14px 0 0; }

.k9ch__ic {
	display: inline-flex; align-items: center; justify-content: center;
	width: 110px; height: 110px; margin-bottom: 26px;
	border-radius: 50%;
	background: #f5ecdc;
	color: #c1891f; font-size: 48px;
	transition: background .4s ease, color .4s ease, transform .5s ease;
}
.k9ch__ic svg { width: 48px; height: 48px; fill: currentColor; }
.k9ch__card:hover .k9ch__ic { background: var(--k9-gold); color: #171717; transform: rotateY(360deg); }

.k9ch__ctitle {
	font-family: var(--k9-font, 'Roboto', sans-serif);
	font-size: 26px; font-weight: 700; line-height: 1.25; color: #111;
	margin: 0 0 12px;
	transition: color .3s ease;
}
.k9ch__card:hover .k9ch__ctitle { color: #a87929; }
.k9ch__ctext, .k9ch__ctext p { font-size: 19px; line-height: 1.55; color: #555; margin: 0; }

.k9ch__arrow {
	position: absolute; right: 26px; bottom: 26px;
	width: 52px; height: 52px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	border: 2px solid var(--k9-gold); background: transparent;
	color: #171717 !important; font-size: 16px; text-decoration: none !important;
	transition: background-color .3s ease, transform .3s ease, color .3s ease;
}
.k9ch__arrow svg { width: 16px; height: 16px; fill: currentColor; }
.k9ch__card:hover .k9ch__arrow { background-color: var(--k9-gold); transform: translateX(4px); }
.k9ch__arrow:focus-visible { outline: 2px solid var(--k9-gold); outline-offset: 3px; }
.k9ch__stretch::after { content: ""; position: absolute; inset: 0; }
.k9ch__stretch { position: static; }
.k9ch__arrow.k9ch__stretch { position: absolute; }
.k9ch__arrow.k9ch__stretch::after { inset: -2000px; }
.k9ch__card { overflow: hidden; }
.k9ch__stretch--hidden { position: absolute; inset: 0; z-index: 1; }

.k9ch__foot { text-align: center; margin-top: 50px; }

/* Entrance */
.k9ch--animate.k9ch--ready .k9ch__card { opacity: 0; transform: translateY(30px); }
.k9ch--animate.k9ch--ready.is-in .k9ch__card {
	opacity: 1; transform: none;
	transition: opacity .6s ease calc(var(--i, 0) * .12s), transform .6s ease calc(var(--i, 0) * .12s), box-shadow .4s ease, border-color .4s ease, background-color .4s ease;
}
.k9ch--animate.k9ch--ready.is-in .k9ch__card:hover { transform: translateY(-8px); transition-delay: 0s; }

@media (prefers-reduced-motion: reduce) {
	.k9ch__card, .k9ch__ic, .k9ch__card::before { transition: none !important; }
	.k9ch--animate.k9ch--ready .k9ch__card { opacity: 1; transform: none; }
}

/* ==========================================================
   Responsive
   ========================================================== */
@media (max-width: 1366px) {
	.k9ch { padding: 90px 40px 100px; }
	.k9ch__title { font-size: 48px; }
	.k9ch__grid { gap: 20px; }
	.k9ch__card { padding: 28px 26px 84px; min-height: 330px; }
	.k9ch__ic { width: 92px; height: 92px; font-size: 40px; }
	.k9ch__ic svg { width: 40px; height: 40px; }
	.k9ch__ctitle { font-size: 22px; }
	.k9ch__ctext, .k9ch__ctext p { font-size: 16px; }
	.k9ch__shape--tl { left: 40px; width: 70px; height: 120px; }
}
@media (max-width: 1024px) {
	.k9ch { padding: 70px 30px 90px; }
	.k9ch__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.k9ch__title { font-size: 40px; }
	.k9ch__sub { font-size: 14px; letter-spacing: 3.5px; }
	.k9ch__card { min-height: 0; }
	.k9ch__wm { font-size: 220px; }
	.k9ch__wm svg { width: 220px; height: 220px; }
	.k9ch__shape--tl { display: none; }
	.k9ch__shape--br { width: 140px; height: 140px; }
	.k9ch__shape--br::before { width: 72px; height: 80px; }
	.k9ch__corner-ic { right: 18px; bottom: 20px; font-size: 30px; }
}
@media (max-width: 767px) {
	.k9ch { padding: 56px 16px 90px; }
	.k9ch__head { margin-bottom: 34px; }
	.k9ch__sub { font-size: 12px; letter-spacing: 2.5px; }
	.k9ch__title { font-size: 30px; }
	.k9ch__grid { grid-template-columns: 1fr; gap: 16px; }
	.k9ch__card {
		display: grid; grid-template-columns: 64px 1fr; column-gap: 16px; align-items: start;
		padding: 22px 70px 22px 20px;
	}
	.k9ch__ic { grid-row: span 2; width: 64px; height: 64px; margin: 0; font-size: 26px; }
	.k9ch__ic svg { width: 26px; height: 26px; }
	.k9ch__ctitle { font-size: 19px; margin-bottom: 6px; }
	.k9ch__ctext, .k9ch__ctext p { font-size: 15px; }
	.k9ch__arrow { width: 42px; height: 42px; right: 16px; top: 50%; bottom: auto; transform: translateY(-50%); }
	.k9ch__card:hover .k9ch__arrow { transform: translateY(-50%) translateX(3px); }
	.k9ch__wm { display: none; }
	.k9ch__foot .k9-btn { width: 100%; }
}