/* ============================================================
   Uncommon Christian Network — stylesheet module: who

   The closing section of the home page: "Who we are" and "Support the
   network", joined by a heart medallion.

   All of the artwork is the supplied transparent-PNG sprite set, sliced into
   /assets/img/who/ — globe, tower, waveform, the four ring icons and the
   heart. The violets are sampled from the reference RENDER's type, not from
   the sprites: the glyphs glow brighter and bluer than the words do.

   Own wn-* namespace so it cannot collide with the .hp-* rules in home.css.
   Load order (header.php): base, layout, home, live, media-hub, who, support, pages.
   ============================================================ */

.wn{
  /* The hero's violet, #a775be — the colour of "prayer carries on" in the
     hero tagline. These are the SAME values media-hub.css uses for the media
     console, copied verbatim so the two sections cannot drift apart. Do not
     re-derive this ramp from the artwork; the sprites glow brighter and bluer
     than the hero type, and matching them is what made this section clash. */
  --wn-violet:#a775be;         /* headline accent */
  --wn-violet-hi:#c9a7db;      /* eyebrows, highlights */
  --wn-violet-link:#b98fd0;    /* "Choose an amount" links */
  --wn-violet-lo:#7a568c;      /* gradient body */
  --wn-violet-deep:#4a3358;    /* gradient end */
  --wn-edge:rgba(167,117,190,.34);
  --wn-edge-hi:rgba(167,117,190,.62);
  --wn-glow:rgba(167,117,190,.28);
  --wn-ink:#f2eff3;
  --wn-ink-2:#aaa4ae;
  --wn-ink-3:#8b8592;

  position:relative;z-index:1;isolation:isolate;overflow:hidden;
  padding:clamp(52px,5.5vw,86px) 0 clamp(56px,5.5vw,88px);
  background:
    radial-gradient(ellipse 80% 46% at 50% 104%,rgba(122,86,140,.34),transparent 74%),
    linear-gradient(180deg,#050509 0%,#06060c 48%,#0a0912 100%);
}

.wn-shell{position:relative;width:min(calc(100% - 48px),1200px);margin-inline:auto}

/* ---------- Shared type ---------- */
.wn-half{position:relative;text-align:center}

/* The "Who we are" half splits in two: copy on the left, the four cards in a
   2x2 grid beside it. The support half below stays centred. */
.wn-half--who{
  display:grid;grid-template-columns:minmax(0,0.92fr) minmax(0,1.08fr);
  align-items:center;gap:clamp(28px,4vw,64px);text-align:left}
.wn-half--who .wn-lead,.wn-half--who .wn-free{margin-inline:0;max-width:none}
.wn-half--who .wn-cards{margin-top:0;grid-template-columns:repeat(2,minmax(0,1fr))}
.wn-eyebrow{margin:0 0 12px;color:var(--wn-violet-hi);
  font:700 clamp(11px,.82vw,13px)/1.2 var(--display);letter-spacing:.24em;text-transform:uppercase}
.wn-h2{margin:0 0 20px;color:var(--wn-ink);
  font:800 clamp(32px,3.7vw,54px)/1.06 var(--display);letter-spacing:-.025em;text-wrap:balance}
.wn-h2 span{color:var(--wn-violet);text-shadow:0 0 40px rgba(167,117,190,.45)}
.wn-lead{max-width:720px;margin:0 auto;color:var(--wn-ink-2);
  font-size:clamp(14px,1.05vw,16px);line-height:1.6}
.wn-free{max-width:720px;margin:16px auto 0;color:var(--wn-ink);font-weight:700;
  font-size:clamp(14px,1.05vw,16px);line-height:1.6}

/* ---------- Who we are: four value cards ---------- */
.wn-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;
  margin-top:clamp(30px,3.2vw,44px)}
.wn-card{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  padding:24px 18px 26px;text-align:center;
  border:1px solid var(--wn-edge);border-radius:18px;
  background:linear-gradient(180deg,rgba(20,10,34,.82),rgba(7,5,13,.92));
  box-shadow:inset 0 0 38px rgba(167,117,190,.10);
  transition:border-color .2s,box-shadow .2s}
.wn-card:hover{border-color:var(--wn-edge-hi);box-shadow:0 0 28px rgba(167,117,190,.26)}
/* The icons are the supplied ring glyphs — already lit, so no CSS ring. */
.wn-ico{width:64px;height:auto;margin-bottom:2px}
.wn-card h3{margin:0;color:var(--wn-ink);font:700 clamp(15px,1.15vw,18px)/1.25 var(--display)}
.wn-card p{margin:0;color:var(--wn-ink-3);font-size:13.5px;line-height:1.5}
.wn-card em{font-style:italic;color:var(--wn-ink-2)}

/* ---------- Divider ---------- */
.wn-divider{position:relative;display:grid;place-items:center;
  margin:clamp(34px,3.6vw,52px) 0 clamp(30px,3.4vw,46px)}
.wn-divider::before{
  content:"";position:absolute;left:0;right:0;top:50%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(167,117,190,.55) 22%,rgba(167,117,190,.55) 78%,transparent)}
.wn-divider img{position:relative;width:40px;height:auto;
  filter:drop-shadow(0 0 14px rgba(167,117,190,.75))}

/* ---------- Support ---------- */
.wn-half--support{display:flex;flex-direction:column;align-items:center}
.wn-wave{position:absolute;top:6px;z-index:-1;pointer-events:none;
  width:clamp(200px,25vw,380px);height:auto;opacity:.75}
.wn-wave--l{left:-4%}
.wn-wave--r{right:-4%;transform:scaleX(-1)}

.wn-gives{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;
  max-width:920px;margin:clamp(26px,3vw,40px) auto 0}
.wn-give{
  display:grid;grid-template-columns:64px minmax(0,1fr);align-items:start;gap:16px;
  padding:20px;text-align:left;text-decoration:none;
  border:1px solid var(--wn-edge);border-radius:18px;
  background:linear-gradient(180deg,rgba(20,10,34,.86),rgba(7,5,13,.94));
  transition:border-color .2s,box-shadow .2s}
.wn-give:hover{border-color:var(--wn-edge-hi);box-shadow:0 0 28px rgba(167,117,190,.26)}
.wn-give-ico{width:64px;height:auto}
.wn-give-copy{display:flex;flex-direction:column;gap:7px;min-width:0}
.wn-give-copy b{color:var(--wn-ink);font:700 clamp(15px,1.15vw,18px)/1.25 var(--display)}
.wn-give-copy small{color:var(--wn-ink-3);font-size:13.5px;line-height:1.5}
.wn-give-copy em{margin-top:2px;color:var(--wn-violet-link);font-style:normal;font-weight:700;font-size:13.5px}
.wn-give-copy em i{font-style:normal;display:inline-block;transition:transform .2s}
.wn-give:hover .wn-give-copy em i{transform:translateX(4px)}

.wn-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  margin:clamp(26px,3vw,40px) auto 0;padding:14px 32px;border-radius:999px;
  color:#fff;font:700 clamp(14px,1.1vw,16px)/1 var(--display);text-decoration:none;
  border:1px solid var(--wn-edge-hi);
  background:linear-gradient(135deg,var(--wn-violet),var(--wn-violet-lo) 55%,var(--wn-violet-deep));
  box-shadow:0 0 28px var(--wn-glow),0 0 70px rgba(167,117,190,.24);
  transition:box-shadow .2s,transform .2s}
.wn-cta:hover{box-shadow:0 0 38px rgba(167,117,190,.6),0 0 95px rgba(167,117,190,.3);
  transform:translateY(-1px)}
.wn-cta svg{width:20px;height:20px}
.wn-cta i{font-style:normal;transition:transform .2s}
.wn-cta:hover i{transform:translateX(4px)}

.wn :where(a):focus-visible{outline:2px solid var(--wn-violet-hi);outline-offset:3px}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  /* Stack back to one column: side by side the copy gets too narrow. */
  .wn-half--who{grid-template-columns:1fr;text-align:center;gap:clamp(26px,4vw,40px)}
  .wn-half--who .wn-lead,.wn-half--who .wn-free{margin-inline:auto;max-width:720px}
  .wn-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wn-wave{opacity:.4}
}
@media (max-width:640px){
  .wn-shell{width:calc(100% - 28px)}
  .wn-cards,.wn-gives{grid-template-columns:1fr}
  .wn-wave{display:none}
  .wn-cta{width:100%;padding-inline:16px}
}
@media (prefers-reduced-motion:reduce){
  .wn-cta,.wn-cta i,.wn-give-copy em i{transition:none}
}