/* ============================================================
   THE TALK OF LIFE — public visitor counters
   ============================================================ */

.visitor-counts{
  position:relative;
  overflow:hidden;
  padding:clamp(34px,5vw,70px) 0;
  border-top:1px solid rgba(255,232,177,.16);
  background:
    radial-gradient(circle at 18% 30%,rgba(139,75,195,.18),transparent 25rem),
    linear-gradient(145deg,#0b0611 0%,#1b0a2a 52%,#09050f 100%);
}

.visitor-counts::before{
  content:"";
  position:absolute;
  width:360px;
  aspect-ratio:1;
  right:-180px;
  top:-210px;
  border:1px solid rgba(255,232,177,.08);
  border-radius:50%;
  box-shadow:0 0 0 38px rgba(255,255,255,.008),0 0 0 76px rgba(255,255,255,.006);
  pointer-events:none;
}

.visitor-count-panel{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(230px,.78fr) minmax(0,1.22fr);
  align-items:center;
  gap:clamp(24px,4.5vw,68px);
  padding:clamp(22px,3vw,38px);
  border:1px solid rgba(255,232,177,.25);
  border-radius:7px 32px 7px 32px;
  background:linear-gradient(145deg,rgba(57,24,86,.72),rgba(12,6,20,.9));
  box-shadow:0 24px 68px rgba(2,0,8,.42),inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(16px);
}

.visitor-count-intro .eyebrow{margin-bottom:8px}

.visitor-count-title{
  margin:0;
  color:var(--cream);
  font-family:var(--font-display);
  font-size:clamp(30px,3.4vw,48px);
  font-weight:400;
  letter-spacing:.015em;
  line-height:1.05;
  text-transform:uppercase;
}

.visitor-count-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(10px,1.6vw,20px);
}

.visitor-count-card{
  min-width:0;
  padding:clamp(16px,2.2vw,26px);
  border:1px solid rgba(255,232,177,.2);
  border-radius:18px;
  background:rgba(255,255,255,.045);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045);
  text-align:center;
  transition:transform .28s ease,border-color .28s ease,background .28s ease,box-shadow .28s ease;
}

.visitor-count-icon{
  width:32px;
  height:32px;
  margin:0 auto 7px;
  color:var(--gold-1);
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.visitor-count-number{
  display:block;
  overflow-wrap:anywhere;
  color:var(--gold-1);
  font-family:var(--font-display);
  font-size:clamp(36px,5vw,64px);
  font-weight:400;
  letter-spacing:.025em;
  line-height:1;
  text-shadow:0 8px 26px rgba(223,170,73,.18);
  font-variant-numeric:tabular-nums;
}

.visitor-count-label{
  display:block;
  margin-top:8px;
  color:#fff8ec;
  font-size:14px;
  font-weight:700;
  letter-spacing:.08em;
  line-height:1.35;
  text-transform:uppercase;
}

.visitor-count-caption{
  display:block;
  margin-top:5px;
  color:#cdbdcd;
  font-size:12px;
  line-height:1.45;
}

.visitor-count-status{
  grid-column:1/-1;
  margin:2px 0 0;
  color:#bdaebd;
  font-size:12px;
  line-height:1.5;
  text-align:right;
}

@media (hover:hover) and (pointer:fine){
  .visitor-count-card:hover{
    transform:translateY(-5px);
    border-color:rgba(255,232,177,.46);
    background:rgba(255,255,255,.065);
    box-shadow:0 18px 38px rgba(2,0,8,.28),inset 0 1px 0 rgba(255,255,255,.06);
  }
}

@media (max-width:760px){
  .visitor-count-panel{
    grid-template-columns:1fr;
    gap:20px;
    border-radius:5px 25px 5px 25px;
  }

  .visitor-count-intro{text-align:center}
  .visitor-count-intro .eyebrow{justify-content:center}
  .visitor-count-status{text-align:center}
}

@media (max-width:420px){
  .visitor-counts{padding:28px 0}

  .visitor-count-panel{
    padding:16px 12px;
    gap:16px;
  }

  .visitor-count-grid{gap:8px}

  .visitor-count-card{
    padding:14px 8px 15px;
    border-radius:14px;
  }

  .visitor-count-icon{
    width:27px;
    height:27px;
  }

  .visitor-count-number{font-size:clamp(31px,11vw,48px)}
  .visitor-count-label{font-size:12px;letter-spacing:.055em}
  .visitor-count-caption{font-size:11px}
}

@media (prefers-reduced-motion:reduce){
  .visitor-count-card{transition:none}
}