/* ==========================================================
   K9 Paw – K9 Security Showcase widget
   ========================================================== */
.k9sc {
	--k9-gold: #DCA54A;
	--k9-shape-dark: #1c1c1c;
	--k9-step: 12px;
	position: relative;
	overflow: hidden;
	padding: 50px 0;
	background: #f8f5ef;
	font-family: var(--k9-font, 'Roboto', sans-serif);
	color: #4a4a4a;
}
.k9sc *, .k9sc *::before, .k9sc *::after { box-sizing: border-box; }

.k9sc__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, .85fr);
	grid-template-areas: "left content right";
	column-gap: 50px;
	align-items: center;
}
.k9sc--no-left .k9sc__grid  { grid-template-columns: minmax(0, 1.3fr) minmax(0, .85fr); grid-template-areas: "content right"; padding-left: 5%; }
.k9sc--no-right .k9sc__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); grid-template-areas: "left content"; padding-right: 5%; }
.k9sc--no-left.k9sc--no-right .k9sc__grid { grid-template-columns: 1fr; grid-template-areas: "content"; padding: 0 5%; }

.k9sc__left    { grid-area: left; }
.k9sc__right   { grid-area: right; }
.k9sc__content { grid-area: content; max-width: 680px; position: relative; z-index: 2; }

/* ---------- Image shapes ---------- */
.k9sc__media { position: relative; }
.k9sc__frame {
	position: relative; z-index: 2;
	height: 560px; overflow: hidden;
}
.k9sc__frame img {
	display: block; width: 100%; height: 100% !important; max-width: none;
	object-fit: cover; transition: transform .8s ease;
}
.k9sc-zoom-yes .k9sc__media:hover .k9sc__frame img { transform: scale(1.06); }
.k9sc__shape { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

/* Left: angled frame with point on the right */
.k9sc__left .k9sc__frame,
.k9sc__left .k9sc__shape--gold { clip-path: polygon(0 4%, 82% 10%, 100% 58%, 80% 100%, 0 88%); }
.k9sc__left .k9sc__shape--gold { background: var(--k9-gold); transform: translate(12px, 10px); }
.k9sc__left .k9sc__shape--dark {
	inset: -8% 0 -8% 0; z-index: 0;
	background: var(--k9-shape-dark);
	clip-path: polygon(0 0, 62% 0, 70% 11%, 0 7%);
}
.k9sc__left .k9sc__shape--dark::after {
	content: ""; position: absolute; top: 0; left: 62%; width: 6%; height: 11%;
	background: var(--k9-gold);
}

.k9sc__left::before {
	content: ""; position: absolute; inset: -8% 0 -8% 0; z-index: 0; pointer-events: none;
	background: var(--k9-shape-dark);
	clip-path: polygon(0 84%, 58% 95%, 46% 100%, 0 100%);
}

/* Right: slanted parallelogram */
.k9sc__right .k9sc__frame,
.k9sc__right .k9sc__shape--gold { clip-path: polygon(30% 4%, 100% 0, 100% 90%, 0 100%); }
.k9sc__right .k9sc__shape--gold { background: var(--k9-gold); transform: translate(-12px, -14px); }
.k9sc__right .k9sc__shape--dark {
	inset: auto 0 -10% 0; height: 40%; z-index: 0;
	background: var(--k9-shape-dark);
	clip-path: polygon(45% 40%, 100% 0, 100% 100%, 30% 100%);
}

/* Dots */
.k9sc__dots {
	--k9-dots: var(--k9-gold);
	position: absolute; z-index: 3; width: 64px; height: 64px;
	background-image: radial-gradient(var(--k9-dots) 2px, transparent 2.5px);
	background-size: 16px 16px;
	opacity: .9;
}
.k9sc__left .k9sc__dots  { left: 6%; bottom: -4%; }
.k9sc__right .k9sc__dots { right: 6%; top: 14%; }

/* ---------- Content ---------- */
.k9sc__sub {
	display: flex; align-items: center; gap: 16px;
	font-size: 15px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
	color: var(--k9-gold);
	margin-bottom: 14px;
}
.k9sc__line { display: inline-block; width: 42px; height: 2px; background: var(--k9-gold); flex: none; }

.k9sc__title {
	font-family: var(--k9-font, 'Roboto', sans-serif);
	font-size: 50px; font-weight: 800; line-height: 1.15;
	color: #171717; margin: 0 0 18px;
}
.k9sc__gold { display: block; color: var(--k9-gold); }

.k9sc__desc { font-size: 17px; line-height: 1.7; color: #555; margin-bottom: 22px; }
.k9sc__desc p { margin: 0 0 10px; color: inherit; font: inherit; }
.k9sc__desc p:last-child { margin-bottom: 0; }

/* List */
.k9sc__list { list-style: none; margin: 0 0 32px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.k9sc__item { margin: 0; }
.k9sc--stagger .k9sc__item { padding-left: calc(var(--i, 0) * var(--k9-step) + 18px); }
.k9sc__item-in { display: flex; align-items: center; gap: 0; text-decoration: none !important; }
.k9sc__ic {
	position: relative; z-index: 1;
	flex: 0 0 60px; width: 60px; height: 60px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--k9-gold); color: #3a2a10; font-size: 22px;
	box-shadow: 0 6px 14px rgba(220,165,74,.35);
	transition: transform .35s ease, background-color .35s ease, color .35s ease;
}
.k9sc__ic svg { width: 22px; height: 22px; fill: currentColor; }
.k9sc__txt {
	--k9-bar: rgba(255,255,255,.95);
	flex: 1; margin-left: -8px; padding: 14px 20px 14px 26px;
	background: linear-gradient(90deg, var(--k9-bar) 0%, transparent 100%);
	font-size: 16px; font-weight: 400; line-height: 1.45; color: #222;
	transition: transform .35s ease;
}
.k9sc__item:hover .k9sc__ic { transform: rotate(-12deg) scale(1.08); background: #171717; color: var(--k9-gold); }
.k9sc__item:hover .k9sc__txt { transform: translateX(6px); }

/* Button */
.k9sc__btn--slant { transform: skewX(-14deg); }
.k9sc__btn--slant > span { transform: skewX(14deg); }
.k9sc__btn--slant.k9-btn-fx:hover { transform: translateY(-3px) skewX(-14deg); }
.k9sc__btn--slant.k9-btn-fx:hover .k9-arrow { transform: skewX(14deg) translateX(5px); }

/* ==========================================================
   Responsive
   ========================================================== */
@media (max-width: 1366px) {
	.k9sc__grid { column-gap: 36px; }
	.k9sc__title { font-size: 42px; }
	.k9sc__frame { height: 480px; }
}

@media (max-width: 1024px) {
	.k9sc { padding: 60px 0; }
	.k9sc__grid,
	.k9sc--no-left .k9sc__grid,
	.k9sc--no-right .k9sc__grid {
		grid-template-columns: 1fr 1fr;
		grid-template-areas: "content content" "left right";
		row-gap: 60px; column-gap: 30px; padding: 0;
	}
	.k9sc--no-left .k9sc__grid  { grid-template-areas: "content content" "right right"; }
	.k9sc--no-right .k9sc__grid { grid-template-areas: "content content" "left left"; }
	.k9sc__content { max-width: 760px; margin: 0 auto; padding: 0 30px; }
	.k9sc__title { font-size: 40px; }
	.k9sc__frame { height: 380px; }
	.k9sc__right { margin-right: 0; }
}

@media (max-width: 767px) {
	.k9sc { padding: 50px 0; }
	.k9sc__grid,
	.k9sc--no-left .k9sc__grid,
	.k9sc--no-right .k9sc__grid {
		grid-template-columns: 1fr;
		grid-template-areas: "content" "left" "right";
		row-gap: 50px;
	}
	.k9sc__right { display: none; }
	.k9sc--right-mobile .k9sc__right { display: block; }
	.k9sc__content { padding: 0 16px; }
	.k9sc__sub { font-size: 12px; gap: 10px; letter-spacing: 1.5px; }
	.k9sc__line { width: 28px; }
	.k9sc__title { font-size: 30px; }
	.k9sc__desc { font-size: 15px; }
	.k9sc--stagger .k9sc__item { padding-left: 0; }
	.k9sc__ic { flex-basis: 48px; width: 48px; height: 48px; font-size: 18px; }
	.k9sc__txt { font-size: 14px; padding: 12px 14px 12px 20px; }
	.k9sc__btn { width: 100%; }
	.k9sc__btn--slant { transform: skewX(-8deg); }
	.k9sc__btn--slant > span { transform: skewX(8deg); }
	.k9sc__btn--slant.k9-btn-fx:hover { transform: translateY(-2px) skewX(-8deg); }
	.k9sc__btn--slant.k9-btn-fx:hover .k9-arrow { transform: skewX(8deg) translateX(5px); }
	.k9sc__frame { height: 320px; }
	.k9sc__left  { margin-right: 24px; }
	.k9sc__right { margin-left: 24px; }
	.k9sc__dots { width: 48px; height: 48px; }
}