/*
 * Service Cards Shortcode — CSS
 * Desktop: 450px frame (bottom-aligned crop)
 * Mobile & Tablet: 750px frame (full height)
 */

:root {
  --khsc-bg: #FEFEFE;
  --khsc-text: #161714;
  --khsc-border: #e0e0e0;
  --khsc-radius: 30px;
  --khsc-radius-btn: 22px;
  --khsc-shadow: 0 10px 30px rgba(0,0,0,.08);
}

.khsc-wrapper {
  box-sizing: border-box;
  max-width: 1250px;
  margin: 0 auto;
  padding: 0px;
  background: var(--khsc-bg);
  border: 1px solid var(--khsc-border);
  border-radius: var(--khsc-radius);
  color: var(--khsc-text) !important;
  position: relative;
}

.khsc-wrapper * { color: var(--khsc-text) !important; }

/* Base: Mobile & Tablet = 750px */
.khsc-stack {
  position: relative;
  width: 100%;
  height: 350px;
  border-radius: var(--khsc-radius);
  overflow: hidden;
  isolation: isolate;
  background: #f7f7f7;
}

.khsc-card {
  position: absolute;
  inset: 0;
  margin: 0;
  border-radius: var(--khsc-radius);
  box-shadow: var(--khsc-shadow);
  transform-origin: center center;
  transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .4s ease, box-shadow .4s ease;
  will-change: transform;
}

.khsc-card-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%; /* mobile/tablet centered */
  border-radius: var(--khsc-radius);
  user-select: none;
  pointer-events: none;
}

.khsc-card-caption {
  position: absolute;
  inset-inline-start: 16px;
  inset-block-end: 16px;
  margin: 0;
  padding: 10px 14px;
  font-size: clamp(14px, 1.6vw, 18px);
  line-height: 1.35;
  color: #fff !important;
  background: linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.55));
  border-radius: 14px;
  backdrop-filter: blur(2px);
}

/* Layer preview before JS */
.khsc-card:nth-child(1) { transform: translate(-22px, -14px) rotate(-2deg) scale(.98); }
.khsc-card:nth-child(2) { transform: translate(18px, -10px) rotate(1.2deg) scale(.985); }
.khsc-card:nth-child(3) { transform: translate(-12px, 16px) rotate(-.6deg) scale(.99); }
.khsc-card:nth-child(4) { transform: translate(10px, 20px) rotate(.8deg) scale(.992); }
.khsc-card:nth-child(5) { transform: translate(-6px, 6px) rotate(-.2deg) scale(.996); }
.khsc-card:nth-child(6) { transform: translate(8px, -6px) rotate(.4deg) scale(.998); }
.khsc-card:nth-child(7) { transform: translate(-4px, 8px) rotate(-.3deg) scale(1); }
.khsc-card:nth-child(8) { transform: translate(0, 0) rotate(0deg) scale(1); }

.khsc-card.is-active {
  z-index: 10;
  transform: translate(0,0) rotate(0deg) scale(1.005);
  box-shadow: 0 16px 44px rgba(0,0,0,.12);
}

/* Desktop override: 450px frame + bottom-aligned crop */
@media (min-width: 1025px) {
  .khsc-stack { height: 350px; }
  .khsc-card-img { object-position: 50% 100%; }
}

/* General responsive cosmetics */
@media (max-width: 1024px) {
  .khsc-wrapper { padding: 24px; border-radius: 24px; }
  .khsc-stack   { border-radius: 24px; }
}

@media (max-width: 768px) {
  .khsc-wrapper { padding: 18px; border-radius: 20px; }
  .khsc-stack   { border-radius: 20px; }
  .khsc-card-caption { inset-inline-start: 12px; inset-block-end: 12px; padding: 8px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .khsc-card { transition: none; }
}