/* =========================================
   Empathy Map, light quad layout
   One-line header tag on the right + animations
========================================= */

/* Tokens */
:root{
  --rail-max:1160px;
  --rail-pad:clamp(16px,4vw,48px);

  --ink-900:#1f1f1f;
  --ink-800:#2b3147;
  --ink-700:#2c2c2c;
  --ink-500:#5a6273;

  --card:#ffffff;
  --panel:#f6f7f8;     /* page bg if you need it */
  --brand-blue:#398FBA;
  --gold:#e1a4a1;
  --gold-700:#e1a4a1;

  --radius:14px;
  --shadow:0 10px 24px rgba(0,0,0,.08);
}

/* Section wrapper and rail */
.empathy{ padding:48px 0; background:transparent; }
.empathy-rail{ max-width:var(--rail-max); margin:0 auto; padding:0 var(--rail-pad); }

/* ================= Header: title left, animated rule, tag right ================= */
.empathy-head{
  display:flex; align-items:center; gap:12px;
  margin:0 0 18px;
  min-width:0; /* allows the rule to compress first */
}

/* Title */
.empathy-head h2{
  margin:0;
  font-family:"Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:clamp(26px, 3.2vw, 34px);
  font-weight:700;
  color:var(--ink-800);
  white-space:nowrap;
}

/* Animated divider */
.head-rule{
  flex:1 1 auto;
  min-width:28px;
  height:2px;
  border-radius:2px;
  position:relative;
  overflow:hidden;
  background: rgba(57,143,186,.18);
}
.head-rule::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg, var(--brand-blue) 0%, var(--gold) 100%);
  transform: scaleX(0);
  transform-origin: left center;
}

/* Right-side tag pill */
.empathy-tag{
  margin:0;
  padding:6px 12px;
  background: rgba(242,177,52,.14);
  border:1px solid var(--gold);
  border-radius:999px;
  color:var(--ink-800);
  font-weight:600;
  font-size:clamp(13px, 1.5vw, 14px);
  letter-spacing:.2px;
  white-space:nowrap;
  box-shadow:0 2px 8px rgba(0,0,0,.04);
  opacity:0; transform: translateY(4px);
}

/* Hover polish */
.empathy-tag:hover{
  box-shadow:0 0 0 3px rgba(242,177,52,.18);
}
.empathy-head:hover .head-rule::after{
  animation: headGlow 1.2s ease;
}

/* Header animations */
@media (prefers-reduced-motion: no-preference){
  .head-rule::after{ animation: headDraw .8s ease-out .15s forwards; }
  .empathy-tag{ animation: tagIn .55s ease-out .30s forwards; }
}
@keyframes headDraw{ to{ transform: scaleX(1); } }
@keyframes tagIn{ to{ opacity:1; transform: translateY(0); } }
@keyframes headGlow{
  0%{ box-shadow:none; }
  50%{ box-shadow:0 0 0 6px rgba(242,177,52,.18); }
  100%{ box-shadow:none; }
}

/* ================= Quad block with gold border and cross ================= */
.empathy-quad{
  position:relative;
  background:var(--card);
  border:2px solid var(--gold);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:22px;
  overflow:hidden;
}

/* Cross dividers */
.empathy-quad::before,
.empathy-quad::after{
  content:"";
  position:absolute;
  background:var(--gold);
  opacity:.9;
}
.empathy-quad::before{ /* vertical */
  width:2px; top:18px; bottom:18px; left:50%; transform:translateX(-1px);
}
.empathy-quad::after{  /* horizontal */
  height:2px; left:18px; right:18px; top:50%; transform:translateY(-1px);
}

/* Grid inside */
.empathy-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(260px, 1fr));
  grid-template-rows:repeat(2, auto);
  gap:24px;
}

/* Card */
.em-card{
  position:relative;
  background:var(--card);
  border-radius:12px;
  padding:18px 18px 16px;
  color:var(--ink-700);
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.em-card:hover{
  transform:translateY(-4px);
  background:#fffefb;
  box-shadow:0 12px 24px rgba(0,0,0,.10);
}

/* Badge */
.em-badge{
  position:absolute;
  top:-14px; left:16px;
  display:inline-block;
  background:linear-gradient(180deg, var(--gold), var(--gold-700));
  color:#1e232b;
  font-weight:700;
  font-size:13px;
  letter-spacing:.35px;
  padding:6px 12px;
  border-radius:10px;
  box-shadow:0 6px 14px rgba(0,0,0,.10);
  border:1px solid rgba(0,0,0,.08);
}

/* Lists */
.em-list{
  margin:0;
  padding-left:1.15rem;
  line-height:1.8;
  color:var(--ink-700);
  list-style:disc;
}
.em-list li{ margin:2px 0 8px; }

/* Entrance animation for cards */
@media (prefers-reduced-motion: no-preference){
  .em-card{ animation: em-fade .45s ease both; }
  .em-card:nth-child(2){ animation-delay:.06s; }
  .em-card:nth-child(3){ animation-delay:.12s; }
  .em-card:nth-child(4){ animation-delay:.18s; }
}
@keyframes em-fade{
  from{ opacity:0; transform:translateY(8px); }
  to{ opacity:1; transform:translateY(0); }
}

/* Optional center avatar */
.em-center-avatar{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:74px; height:74px;
  border-radius:50%;
  background:#fff;
  display:grid; place-items:center;
  z-index:2;
  box-shadow:0 10px 22px rgba(0,0,0,.18);
}
.em-center-avatar img{
  width:64px; height:64px; border-radius:50%;
  object-fit:cover;
  border:3px solid var(--gold);
}

/* Mobile: stack cards, hide cross and avatar for a clean layout */
@media (max-width:820px){
  .empathy-quad::before,
  .empathy-quad::after{ display:none; }
  .em-center-avatar{ display:none; }
  .empathy-grid{ grid-template-columns:1fr; gap:18px; }
}