/**
 * Services Detail Grid — v2 redesign (matches services.html reference)
 * 50/50 text|image split, clean 3×2 grid, no staggered overflow.
 */

/* ── Section: full-width container ── */
.svc-section {
  width: 100% !important;
}

.elementor-widget-mika-services-grid,
.elementor-widget-mika-services-grid .elementor-widget-container {
  width: 100% !important;
  max-width: none !important;
  overflow: visible !important;
}

.svc-section .mika-container {
  max-width: none !important;
  width: 100% !important;
  margin-inline: auto !important;
  padding-inline: clamp(1.25rem, 4vw, 3rem) !important;
}

.svc-layout {
  display: grid !important;
  grid-template-columns: 220px minmax(0, 1fr) !important;
  gap: 2.5rem !important;
  align-items: start !important;
}

/* ── 3×2 grid — equal rows, no masonry stagger ── */
.svc-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 1rem !important;
  padding: 0 !important;
  align-items: stretch !important;
  width: 100% !important;
}

/* ── Card: internal 54% text | 46% image grid ── */
.svc-section .svc-card {
  display: grid !important;
  grid-template-columns: minmax(0, 54%) minmax(0, 46%) !important;
  grid-template-rows: 1fr !important;
  align-items: stretch !important;
  overflow: hidden !important;
  border-radius: 20px !important;
  min-height: 228px !important;
  width: 100% !important;
  position: relative !important;
  transform: none !important;
}

.svc-section .svc-card::before {
  border-radius: 20px !important;
}

.svc-section .svc-card:hover {
  transform: translateY(-4px) !important;
}

/* Text column */
.svc-section .svc-card .svc-card__body {
  grid-column: 1 !important;
  grid-row: 1 !important;
  position: relative !important;
  z-index: 3 !important;
  padding: 1.35rem 1.1rem 1.25rem 1.35rem !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
  justify-content: flex-start !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}

/* Typography — reference sizing */
.svc-section .svc-card .svc-card__title {
  font-family: var(--font-display), 'Sora', sans-serif !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: #14141A !important;
  margin-bottom: 0.45rem !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
  white-space: normal !important;
  max-width: 100% !important;
  text-align: left !important;
}

.svc-section .svc-card .svc-card__desc {
  font-family: var(--font-body), 'Inter', sans-serif !important;
  font-size: 0.8125rem !important;
  line-height: 1.6 !important;
  color: #555 !important;
  margin-bottom: 0.75rem !important;
  flex: 1 !important;
  text-align: left !important;
  word-break: normal !important;
}

.svc-section .svc-card .svc-card__link {
  font-size: 0.65rem !important;
  letter-spacing: 0.09em !important;
  margin-top: auto !important;
  text-align: left !important;
}

.svc-section .svc-card .svc-card__icon {
  width: 46px !important;
  height: 46px !important;
  margin-bottom: 0.75rem !important;
  flex-shrink: 0 !important;
}

.svc-section .svc-card .svc-card__icon svg {
  width: 20px !important;
  height: 20px !important;
}

/* Image column — flush right, full height, no bleed outside card */
.svc-section .svc-card .svc-card__img-container {
  grid-column: 2 !important;
  grid-row: 1 !important;
  position: relative !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 228px !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

.svc-section .svc-card .svc-card__img-container img,
.svc-section .svc-card .svc-card__img-box {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.svc-section .svc-card .svc-card__img-box {
  border-radius: 0 !important;
  transform: none !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

/* Splat decorations — contained in right image half */
.svc-section .svc-card .svc-card__splat {
  position: absolute !important;
  top: 0 !important;
  left: 54% !important;
  width: 46% !important;
  height: 100% !important;
  z-index: 1 !important;
}

/* Per-card torn-edge masks (reference image 3) */
.svc-section .svc-card--3d .svc-card__img-container {
  clip-path: polygon(18% 0%, 100% 0%, 100% 100%, 0% 100%, 10% 85%, 2% 70%, 14% 55%, 3% 40%, 12% 25%, 4% 10%) !important;
}

.svc-section .svc-card--video .svc-card__img-container {
  clip-path: polygon(14% 0%, 100% 0%, 100% 100%, 2% 100%, 12% 82%, 0% 68%, 15% 50%, 2% 32%, 11% 15%) !important;
}

.svc-section .svc-card--branding .svc-card__img-container {
  clip-path: polygon(12% 0%, 100% 0%, 100% 100%, 0% 100%) !important;
}

.svc-section .svc-card--branding .svc-card__img-box {
  transform: rotate(-2deg) scale(1.04) !important;
  transform-origin: center center !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
  border-radius: 8px !important;
  height: 92% !important;
  margin-top: 4% !important;
}

.svc-section .svc-card--print .svc-card__splat {
  top: 0 !important;
  left: 54% !important;
  right: auto !important;
  width: 46% !important;
  height: 100% !important;
  background: #FFD400 !important;
  border-radius: 0 !important;
  transform: none !important;
  clip-path: polygon(20% 0%, 100% 0%, 100% 100%, 0% 100%, 8% 80%, 18% 60%, 6% 40%, 15% 20%) !important;
}

.svc-section .svc-card--print .svc-card__img-container {
  z-index: 2 !important;
}

.svc-section .svc-card--print .svc-card__img-box {
  transform: rotate(-4deg) scale(0.95) !important;
  box-shadow: -4px 8px 20px rgba(0, 0, 0, 0.12) !important;
  border-radius: 8px !important;
  height: 88% !important;
  margin-top: 6% !important;
}

.svc-section .svc-card--marketing .svc-card__splat {
  top: 0 !important;
  left: 54% !important;
  right: auto !important;
  width: 28px !important;
  height: 100% !important;
  background: #0BA37F !important;
  border-radius: 0 !important;
}

.svc-section .svc-card--marketing .svc-card__img-box {
  border-radius: 16px !important;
  transform: none !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18) !important;
  height: 90% !important;
  margin-top: 5% !important;
  width: 88% !important;
  margin-left: auto !important;
}

.svc-section .svc-card--web .svc-card__splat {
  bottom: 8px !important;
  right: 12px !important;
  left: auto !important;
  top: auto !important;
  width: 56px !important;
  height: 36px !important;
}

.svc-section .svc-card--web .svc-card__img-box {
  transform: rotate(2deg) scale(0.96) !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.15) !important;
  border-radius: 8px !important;
  height: 90% !important;
  margin-top: 5% !important;
}

/* Elementor editor — force same layout */
.elementor-widget-mika-services-grid,
.elementor-widget-mika-services-grid .elementor-widget-container {
  width: 100% !important;
  max-width: 100% !important;
}

body.elementor-editor-active .svc-section .svc-card,
body.elementor-editor-preview .svc-section .svc-card {
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Responsive */
@media (max-width: 1100px) {
  .svc-layout {
    grid-template-columns: 200px minmax(0, 1fr) !important;
    gap: 1.75rem !important;
  }
}

@media (max-width: 960px) {
  .svc-layout {
    grid-template-columns: 1fr !important;
  }
  .svc-sidebar {
    position: static !important;
    margin-bottom: 1.5rem !important;
  }
  .svc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 600px) {
  .svc-grid {
    grid-template-columns: 1fr !important;
  }
  .svc-section .svc-card {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }
  .svc-section .svc-card .svc-card__body {
    padding: 1.25rem !important;
  }
  .svc-section .svc-card .svc-card__img-container,
  .svc-section .svc-card .svc-card__splat {
    display: none !important;
  }
}