/*
  Elemental Kin finishing pass.
  Restores only:
  - real motif element positioning
  - tighter vertical rhythm
  - CSS-only colour treatments for selected sections
  No backend colour-block fields.
*/

/* -----------------------------
   Section spacing
----------------------------- */

.section.elemental-kin-editorial-split,
.section.elemental-kin-feature-cta,
.section.elemental-kin-product-gateway,
.section.elemental-kin-support-grid {
  padding-top: clamp(50px, 4.8vw, 78px) !important;
  padding-bottom: clamp(50px, 4.8vw, 78px) !important;
}

.section.elemental-kin-editorial-split {
  padding-top: clamp(48px, 4.5vw, 72px) !important;
  padding-bottom: clamp(46px, 4.2vw, 68px) !important;
}

.section.elemental-kin-product-gateway {
  padding-top: clamp(46px, 4.3vw, 70px) !important;
}

/* -----------------------------
   Real motif system
----------------------------- */

.section.elemental-kin-editorial-split,
.section.elemental-kin-feature-cta,
.section.elemental-kin-product-gateway,
.section.elemental-kin-support-grid {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
}

.section.elemental-kin-editorial-split > .container,
.section.elemental-kin-feature-cta > .container,
.section.elemental-kin-product-gateway > .container,
.section.elemental-kin-support-grid > .container {
  position: relative !important;
  z-index: 5 !important;
}

/* Disable old pseudo-element motifs completely */
.section.elemental-kin-editorial-split::before,
.section.elemental-kin-editorial-split::after,
.section.elemental-kin-feature-cta::before,
.section.elemental-kin-feature-cta::after,
.section.elemental-kin-product-gateway::before,
.section.elemental-kin-product-gateway::after,
.section.elemental-kin-support-grid::before,
.section.elemental-kin-support-grid::after,
.section.elemental-kin-editorial-split .elemental-kin-editorial-split__visual::before,
.section.elemental-kin-editorial-split .elemental-kin-editorial-split__visual::after {
  display: none !important;
  content: none !important;
  background: none !important;
}

/* Base motif shape */
.elemental-kin-route-motif {
  position: absolute !important;
  z-index: 1 !important;
  pointer-events: none !important;
  display: none;
  width: clamp(240px, 24vw, 430px);
  height: clamp(240px, 24vw, 430px);
  background:
    linear-gradient(90deg, var(--ek-colour-accent) 0 48%, transparent 48% 100%) 0 12% / 100% 2px no-repeat,
    linear-gradient(90deg, transparent 0 18%, var(--ek-colour-accent) 18% 76%, transparent 76% 100%) 0 34% / 100% 2px no-repeat,
    linear-gradient(90deg, var(--ek-colour-accent) 0 36%, transparent 36% 100%) 0 58% / 100% 2px no-repeat,
    linear-gradient(90deg, transparent 0 38%, var(--ek-colour-accent) 38% 92%, transparent 92% 100%) 0 82% / 100% 2px no-repeat,
    linear-gradient(180deg, var(--ek-colour-accent) 0 44%, transparent 44% 100%) 16% 0 / 2px 100% no-repeat,
    linear-gradient(180deg, transparent 0 16%, var(--ek-colour-accent) 16% 78%, transparent 78% 100%) 50% 0 / 2px 100% no-repeat,
    linear-gradient(180deg, var(--ek-colour-accent) 0 66%, transparent 66% 100%) 82% 0 / 2px 100% no-repeat;
}

.elemental-kin-route-motif--secondary {
  width: clamp(150px, 16vw, 280px);
  height: clamp(150px, 16vw, 280px);
}

/* Right */
.elemental-kin-editorial-split--decoration-position-right > .elemental-kin-route-motif--primary,
.elemental-kin-feature-cta--decoration-position-right > .elemental-kin-route-motif--primary,
.elemental-kin-product-gateway--decoration-position-right > .elemental-kin-route-motif--primary,
.elemental-kin-support-grid--decoration-position-right > .elemental-kin-route-motif--primary {
  display: block !important;
  right: clamp(40px, 7vw, 140px) !important;
  left: auto !important;
  top: clamp(52px, 8vw, 130px) !important;
  bottom: auto !important;
  transform: none !important;
}

/* Left */
.elemental-kin-editorial-split--decoration-position-left > .elemental-kin-route-motif--primary,
.elemental-kin-feature-cta--decoration-position-left > .elemental-kin-route-motif--primary,
.elemental-kin-product-gateway--decoration-position-left > .elemental-kin-route-motif--primary,
.elemental-kin-support-grid--decoration-position-left > .elemental-kin-route-motif--primary {
  display: block !important;
  left: clamp(40px, 7vw, 140px) !important;
  right: auto !important;
  top: clamp(52px, 8vw, 130px) !important;
  bottom: auto !important;
  transform: none !important;
}

/* Centre */
.elemental-kin-editorial-split--decoration-position-centre > .elemental-kin-route-motif--primary,
.elemental-kin-feature-cta--decoration-position-centre > .elemental-kin-route-motif--primary,
.elemental-kin-product-gateway--decoration-position-centre > .elemental-kin-route-motif--primary,
.elemental-kin-support-grid--decoration-position-centre > .elemental-kin-route-motif--primary {
  display: block !important;
  left: 50% !important;
  right: auto !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
}

/* Both */
.elemental-kin-editorial-split--decoration-position-both > .elemental-kin-route-motif--primary,
.elemental-kin-feature-cta--decoration-position-both > .elemental-kin-route-motif--primary,
.elemental-kin-product-gateway--decoration-position-both > .elemental-kin-route-motif--primary,
.elemental-kin-support-grid--decoration-position-both > .elemental-kin-route-motif--primary {
  display: block !important;
  right: clamp(40px, 7vw, 140px) !important;
  left: auto !important;
  top: clamp(52px, 8vw, 130px) !important;
  bottom: auto !important;
  transform: none !important;
}

.elemental-kin-editorial-split--decoration-position-both > .elemental-kin-route-motif--secondary,
.elemental-kin-feature-cta--decoration-position-both > .elemental-kin-route-motif--secondary,
.elemental-kin-product-gateway--decoration-position-both > .elemental-kin-route-motif--secondary,
.elemental-kin-support-grid--decoration-position-both > .elemental-kin-route-motif--secondary {
  display: block !important;
  left: clamp(40px, 7vw, 140px) !important;
  right: auto !important;
  bottom: clamp(46px, 7vw, 120px) !important;
  top: auto !important;
  transform: none !important;
}

/* Opacity */
.elemental-kin-editorial-split--decoration-subtle > .elemental-kin-route-motif,
.elemental-kin-feature-cta--decoration-subtle > .elemental-kin-route-motif,
.elemental-kin-product-gateway--decoration-subtle > .elemental-kin-route-motif,
.elemental-kin-support-grid--decoration-subtle > .elemental-kin-route-motif {
  opacity: 0.14 !important;
}

.elemental-kin-editorial-split--decoration-normal > .elemental-kin-route-motif,
.elemental-kin-feature-cta--decoration-normal > .elemental-kin-route-motif,
.elemental-kin-product-gateway--decoration-normal > .elemental-kin-route-motif,
.elemental-kin-support-grid--decoration-normal > .elemental-kin-route-motif {
  opacity: 0.24 !important;
}

.elemental-kin-editorial-split--decoration-strong > .elemental-kin-route-motif,
.elemental-kin-feature-cta--decoration-strong > .elemental-kin-route-motif,
.elemental-kin-product-gateway--decoration-strong > .elemental-kin-route-motif,
.elemental-kin-support-grid--decoration-strong > .elemental-kin-route-motif {
  opacity: 0.38 !important;
}

/* None / image states */
.elemental-kin-editorial-split--decoration-none > .elemental-kin-route-motif,
.elemental-kin-editorial-split--decoration-image > .elemental-kin-route-motif,
.elemental-kin-feature-cta--decoration-none > .elemental-kin-route-motif,
.elemental-kin-feature-cta--decoration-image > .elemental-kin-route-motif,
.elemental-kin-product-gateway--decoration-none > .elemental-kin-route-motif,
.elemental-kin-product-gateway--decoration-image > .elemental-kin-route-motif,
.elemental-kin-support-grid--decoration-none > .elemental-kin-route-motif,
.elemental-kin-support-grid--decoration-image > .elemental-kin-route-motif {
  display: none !important;
}

/* What we do: motif should feel image-side, not over the copy */
.section.elemental-kin-editorial-split .elemental-kin-route-motif {
  width: clamp(185px, 18vw, 315px);
  height: clamp(185px, 18vw, 315px);
}

/* Mobile */
@media (max-width: 900px) {
  .elemental-kin-route-motif {
    width: 250px;
    height: 250px;
  }

  .elemental-kin-route-motif--secondary {
    display: none !important;
  }

  .elemental-kin-editorial-split--decoration-position-right > .elemental-kin-route-motif--primary,
  .elemental-kin-feature-cta--decoration-position-right > .elemental-kin-route-motif--primary,
  .elemental-kin-product-gateway--decoration-position-right > .elemental-kin-route-motif--primary,
  .elemental-kin-support-grid--decoration-position-right > .elemental-kin-route-motif--primary {
    right: -110px !important;
  }

  .elemental-kin-editorial-split--decoration-position-left > .elemental-kin-route-motif--primary,
  .elemental-kin-feature-cta--decoration-position-left > .elemental-kin-route-motif--primary,
  .elemental-kin-product-gateway--decoration-position-left > .elemental-kin-route-motif--primary,
  .elemental-kin-support-grid--decoration-position-left > .elemental-kin-route-motif--primary {
    left: -110px !important;
  }
}

/* Subtle section colour rhythm.
   CSS-only. No backend colour-block fields.
   These are soft washes to stop the page feeling too white.
*/

.section.elemental-kin-editorial-split {
  background:
    radial-gradient(circle at 88% 18%, rgba(234, 217, 200, 0.34) 0 18%, transparent 42%),
    var(--ek-colour-light) !important;
}

.section.elemental-kin-feature-cta {
  background:
    linear-gradient(90deg, rgba(212, 223, 201, 0.34) 0 32%, transparent 32% 100%),
    var(--ek-colour-light) !important;
}

.section.elemental-kin-product-gateway {
  background:
    linear-gradient(180deg, rgba(217, 228, 234, 0.42) 0 28%, transparent 28% 100%),
    var(--ek-colour-light) !important;
}

.section.elemental-kin-support-grid {
  background:
    radial-gradient(circle at 12% 12%, rgba(212, 223, 201, 0.32) 0 16%, transparent 38%),
    radial-gradient(circle at 92% 82%, rgba(234, 217, 200, 0.26) 0 14%, transparent 36%),
    var(--ek-colour-light) !important;
}

/* Support card logos/images */
.elemental-kin-support-grid__card-media {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  min-height: 46px !important;
  margin-bottom: 22px !important;
}

.elemental-kin-support-grid__card-media img {
  display: block !important;
  max-width: 128px !important;
  max-height: 56px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

/* ---------------------------------------------------------
   Soft colour wash correction.
   Replaces hard colour blocks with low-contrast Kin-style washes.
   No editor colour-block fields. No hard split backgrounds.
--------------------------------------------------------- */

/* What we do: warm editorial glow near the image side */
.section.elemental-kin-editorial-split {
  background:
    radial-gradient(circle at 86% 20%, rgba(234, 217, 200, 0.28) 0 0, rgba(234, 217, 200, 0.22) 16%, transparent 42%),
    radial-gradient(circle at 8% 92%, rgba(212, 223, 201, 0.18) 0 0, rgba(212, 223, 201, 0.14) 14%, transparent 38%),
    var(--ek-colour-light) !important;
}

/* Scorecard: soft green field, no hard edge */
.section.elemental-kin-feature-cta {
  background:
    radial-gradient(circle at 8% 18%, rgba(212, 223, 201, 0.36) 0 0, rgba(212, 223, 201, 0.24) 18%, transparent 46%),
    radial-gradient(circle at 92% 86%, rgba(234, 217, 200, 0.18) 0 0, rgba(234, 217, 200, 0.13) 14%, transparent 38%),
    var(--ek-colour-light) !important;
}

/* Digital toolkits: cooler, lighter editorial wash */
.section.elemental-kin-product-gateway {
  background:
    radial-gradient(circle at 82% 16%, rgba(217, 228, 234, 0.42) 0 0, rgba(217, 228, 234, 0.28) 18%, transparent 46%),
    radial-gradient(circle at 12% 88%, rgba(212, 223, 201, 0.18) 0 0, rgba(212, 223, 201, 0.12) 14%, transparent 38%),
    var(--ek-colour-light) !important;
}

/* Support: very gentle dual wash behind the card grid */
.section.elemental-kin-support-grid {
  background:
    radial-gradient(circle at 12% 14%, rgba(212, 223, 201, 0.28) 0 0, rgba(212, 223, 201, 0.2) 16%, transparent 42%),
    radial-gradient(circle at 92% 82%, rgba(234, 217, 200, 0.22) 0 0, rgba(234, 217, 200, 0.15) 14%, transparent 38%),
    var(--ek-colour-light) !important;
}

/* Remove any remaining sense of a hard band from panels */
.section.elemental-kin-feature-cta,
.section.elemental-kin-product-gateway,
.section.elemental-kin-support-grid {
  background-attachment: scroll !important;
}

/* Keep the card/panel surfaces clean against the softer washes */
.elemental-kin-feature-cta__panel,
.elemental-kin-product-gateway__note,
.elemental-kin-support-grid__card {
  background: rgba(255, 253, 250, 0.86) !important;
  backdrop-filter: blur(2px);
}

/* Support logos/images */
.elemental-kin-support-grid__card-media {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  min-height: 46px !important;
  margin-bottom: 22px !important;
}

.elemental-kin-support-grid__card-media img {
  display: block !important;
  max-width: 128px !important;
  max-height: 56px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}