/* =============================================================
   DCC-i — Pillars Section Refinements
   File: css/dcci-pillars-refined.css
   Purpose: Visual depth & hero continuity for "Explore tools
            and resources across areas of practice" section.
   Scope: Overrides only. Drop this AFTER dcci-portal.css.
   ============================================================= */


/* ──────────────────────────────────────────────────────────────
   1. SECTION BACKGROUND & AMBIENT GLOW
   ────────────────────────────────────────────────────────────── */

.dcci-pillars-band {
  /* Replace flat rgba tint with a soft layered gradient that
     echoes the hero above — light spills downward from the top */
  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(155, 89, 182, 0.18)  0%,
      rgba(155, 89, 182, 0.08) 35%,
      rgba(155, 89, 182, 0.02) 60%,
      transparent              100%
    ),
    linear-gradient(to bottom, #f2ecfa 0%, #e9e2f3 100%);

  /* Section needs relative positioning so ::after glow sits correctly */
  position: relative;
  overflow: visible;

  /* Slightly more breathing room top/bottom */
  padding: 96px 0 100px;
}

/* Ambient glow — soft ellipse bleeding down from the hero above */
.dcci-pillars-band::after {
  content: '';
  position: absolute;
  top: -80px;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 300px;
  background: radial-gradient(
    ellipse,
    rgba(155, 89, 182, 0.15),
    rgba(233, 30, 99, 0.08),
    transparent 70%
  );
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}

/* Ensure inner content sits above the glow layer */
.dcci-pillars-inner {
  position: relative;
  z-index: 1;
}


/* ──────────────────────────────────────────────────────────────
   2. SECTION HEADING — gradient underline anchor
   ────────────────────────────────────────────────────────────── */

.dcci-pillars-heading {
  position: relative;
  display: inline-block; /* shrink-wrap so ::after centres under text */
  padding-bottom: 18px;  /* room for the underline bar */
}

.dcci-pillars-heading::after {
  content: '';
  display: block;
  width: 80px;
  height: 3px;
  margin: 12px auto 0;
  background: linear-gradient(to right, #9b59b6, #e91e63);
  border-radius: 2px;
}

/* Pull header bottom spacing down slightly to give the underline room */
.dcci-pillars-header {
  margin-bottom: 68px;
}

/* Subtext — explicit centering + wrap for longer copy */
.dcci-pillars-subtext {
  text-align: center;
  white-space: normal;
  max-width: 720px;
}


/* ──────────────────────────────────────────────────────────────
   3. GRID — slightly more row breathing room
   ────────────────────────────────────────────────────────────── */

.dcci-pillars-grid {
  gap: 24px; /* was 20px — extra row breathing room */
}


/* ──────────────────────────────────────────────────────────────
   4. CARD SURFACE — white, elevated, clearly separated
   ────────────────────────────────────────────────────────────── */

.dcci-pcard {
  /* Override the tinted-glass look with a clean white surface */
  background: #ffffff;
  border-radius: 16px;

  /* Subtle purple-tinted border — less vivid than the current colour accent */
  border: 1px solid rgba(155, 89, 182, 0.08);
  border-top: 1.5px solid rgba(var(--pc-r), var(--pc-g), var(--pc-b), 0.35);

  /* Layered shadow: wide soft + tight crisp */
  box-shadow:
    0 10px 30px rgba(46, 50, 64, 0.08),
    0  2px  8px rgba(46, 50, 64, 0.04);

  /* Sits above the section's glow layer */
  position: relative;
  z-index: 1;

  /* Smooth all property transitions */
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

/* ──────────────────────────────────────────────────────────────
   5. PER-CARD COLOUR IDENTITY — soft inner glow (::before)
      Uses existing --pc-r / --pc-g / --pc-b tokens already set
      on each .dcci-pcard--* modifier class.
   ────────────────────────────────────────────────────────────── */

.dcci-pcard::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  pointer-events: none;

  /* Default: radial glow using the card's own colour token */
  background: radial-gradient(
    circle at top left,
    rgba(var(--pc-r), var(--pc-g), var(--pc-b), 0.10),
    transparent 60%
  );

  z-index: 0;
}

/* Ensure card body content renders above the glow overlay */
.dcci-pcard-body {
  position: relative;
  z-index: 1;
}

/* Fine-tune glow strength per pillar so lighter colours
   don't wash out and darker ones don't feel heavy */
.dcci-pcard--safeguarding::before   { background: radial-gradient(circle at top left, rgba(233,  30,  99, 0.11), transparent 60%); }
.dcci-pcard--mental-cap::before     { background: radial-gradient(circle at top left, rgba( 52, 152, 219, 0.11), transparent 60%); }
.dcci-pcard--person-centred::before { background: radial-gradient(circle at top left, rgba( 46, 204, 113, 0.10), transparent 60%); }
.dcci-pcard--neurodiversity::before { background: radial-gradient(circle at top left, rgba(230, 126,  34, 0.10), transparent 60%); }
.dcci-pcard--legal::before          { background: radial-gradient(circle at top left, rgba(155,  89, 182, 0.12), transparent 60%); }
.dcci-pcard--coproduction::before   { background: radial-gradient(circle at top left, rgba( 54,  70, 158, 0.11), transparent 60%); }


/* ──────────────────────────────────────────────────────────────
   6. HOVER STATE — lift with deeper shadow
   ────────────────────────────────────────────────────────────── */

.dcci-pcard-wrap:hover .dcci-pcard {
  transform: translateY(-6px);
  border-color: rgba(155, 89, 182, 0.12);
  border-top-color: rgba(var(--pc-r), var(--pc-g), var(--pc-b), 0.60);

  box-shadow:
    0 18px 40px rgba(46, 50, 64, 0.12),
    0  4px 12px rgba(46, 50, 64, 0.06);
}

/* Circle shadow on hover — keep subtle */
.dcci-pcard-wrap:hover .dcci-pcard-circle {
  box-shadow:
    0 0 0 2.5px rgba(var(--pc-r), var(--pc-g), var(--pc-b), 0.30),
    0 5px 14px rgba(0, 0, 0, 0.15),
    0 2px 5px  rgba(0, 0, 0, 0.10);
}


/* ──────────────────────────────────────────────────────────────
   7. DESCRIPTION OPACITY — slightly more readable
   ────────────────────────────────────────────────────────────── */

.dcci-pcard-desc {
  opacity: 0.70; /* was 0.62 — a touch easier to read on white */
}


/* ──────────────────────────────────────────────────────────────
   8. SIGNAL TAGS — keep vivid on white background
   ────────────────────────────────────────────────────────────── */

/* Tools tag — slightly stronger tint on white */
.dcci-pcard-signal-tag:first-child {
  background: rgba(var(--pc-r), var(--pc-g), var(--pc-b), 0.11);
  border: 1.5px solid rgba(var(--pc-r), var(--pc-g), var(--pc-b), 0.24);
}

/* Resources tag — outline slightly more visible */
.dcci-pcard-signal-tag:last-child {
  border: 1.5px solid rgba(var(--pc-r), var(--pc-g), var(--pc-b), 0.34);
}


/* ──────────────────────────────────────────────────────────────
   9. REDUCED-MOTION SAFETY NET
   ────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .dcci-pcard,
  .dcci-pcard-wrap:hover .dcci-pcard {
    transition: box-shadow 0.2s ease;
    transform: none;
  }
  .dcci-pcard-wrap:hover .dcci-pcard {
    transform: none;
  }
}


/* ──────────────────────────────────────────────────────────────
   10. RESPONSIVE ADJUSTMENTS
   ────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .dcci-pillars-band {
    padding: 72px 0 80px;
  }
  .dcci-pillars-band::after {
    width: 500px;
    height: 200px;
  }
  .dcci-pillars-grid {
    gap: 18px;
  }
}

@media (max-width: 560px) {
  .dcci-pillars-band {
    padding: 56px 0 64px;
  }
  .dcci-pillars-band::after {
    width: 320px;
    height: 140px;
    filter: blur(28px);
  }
  .dcci-pillars-grid {
    gap: 14px;
  }
  .dcci-pillars-header {
    margin-bottom: 48px;
  }
}