/* =========================
   Ad Results (Portfolio) page
   Uses theme tokens: --bg, --accent, --line, --radius, --shadow
========================= */

/* ---- Hero panel (dark, matches homepage hero) ---- */
.adr-hero{
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  color: var(--text);
  padding: 72px 0 64px;
}
.adr-hero-title{
  margin: 18px 0 12px;
  font-size: clamp(2rem, 3.6vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: aliceblue;
  max-width: 22ch;
}
.adr-hero-accent{ color: var(--accent); display: block; }
.adr-hero-desc{
  margin: 0;
  max-width: 62ch;
  color: rgba(234,240,255,.72);
}

/* ---- Spend ledger (signature element) ---- */
.adr-ledger{
  margin-top: 40px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.04);
  overflow: hidden;
}
.adr-ledger-head{
  padding: 12px 20px;
  border-bottom: 1px solid var(--line);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(234,240,255,.55);
}
.adr-ledger-grid{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
.adr-ledger-cell{
  padding: 18px 20px;
  border-right: 1px solid var(--line);
}
.adr-ledger-cell:last-child{ border-right: 0; }
.adr-ledger-cur{
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: rgba(234,240,255,.5);
}
.adr-ledger-amt{
  margin-top: 6px;
  font-size: clamp(1.15rem, 1.9vw, 1.55rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.adr-ledger-lbl{
  margin-top: 4px;
  font-size: .82rem;
  color: rgba(234,240,255,.62);
}

/* ---- Hero stats ---- */
.adr-stats{
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.adr-stat{
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 18px;
}
.adr-stat-value{
  font-size: clamp(1.3rem, 2.2vw, 1.8rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: aliceblue;
  font-variant-numeric: tabular-nums;
}
.adr-stat-label{
  margin-top: 4px;
  font-size: .85rem;
  color: rgba(234,240,255,.62);
}
.adr-note{
  margin: 18px 0 0;
  font-size: .82rem;
  color: rgba(234,240,255,.45);
}

/* ---- Content sections (light) ---- */
.adr-section{ padding: 72px 0 64px; }
.adr-section--alt{ background: #f7f8fb; }
.adr-section .section-title{ text-align: left; }
.adr-section-sub{
  margin: 12px 0 0;
  max-width: 66ch;
  color: rgba(11,18,32,.62);
}
.adr-legend{
  display: flex;
  gap: 18px;
  margin-top: 18px;
  font-size: .82rem;
  font-weight: 650;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(11,18,32,.5);
}
.adr-legend-item{ display: inline-flex; align-items: center; gap: 7px; }
.adr-dot{
  width: 9px; height: 9px;
  border-radius: 3px;
  display: inline-block;
}
.adr-dot--spend{ background: var(--accent); }
.adr-dot--result{ background: #0e9f6e; }

/* ---- Case cards ---- */
.adr-case{
  margin-top: 30px;
  background: #fff;
  border: 1px solid rgba(11,18,32,.08);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(11,18,32,.06);
  overflow: hidden;
}
.adr-case-shot{
  display: block;
  width: 100%;
  border-bottom: 1px solid rgba(11,18,32,.08);
}
.adr-case-body{ padding: 22px 24px 24px; }
.adr-case-platform{
  font-size: .74rem;
  font-weight: 750;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(11,18,32,.45);
}
.adr-case-title{
  margin: 8px 0 8px;
  font-size: 1.2rem;
  letter-spacing: -0.015em;
}
.adr-case-desc{
  margin: 0;
  color: rgba(11,18,32,.66);
  font-size: .96rem;
  max-width: 80ch;
}

/* ---- Chips ---- */
.adr-chips{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.adr-chip{
  font-size: .82rem;
  font-weight: 650;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-variant-numeric: tabular-nums;
}
.adr-chip--spend{
  color: #8a5a00;
  background: rgba(245,163,0,.12);
  border-color: rgba(245,163,0,.3);
}
.adr-chip--result{
  color: #0b6b4a;
  background: rgba(14,159,110,.1);
  border-color: rgba(14,159,110,.3);
}
.adr-chip--note{
  color: rgba(11,18,32,.6);
  background: rgba(11,18,32,.05);
  border-color: rgba(11,18,32,.12);
}

/* ---- Two-column case grid ---- */
.adr-grid-2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  margin-top: 0;
}
.adr-grid-2 .adr-case{ margin-top: 30px; }

/* ---- Stack cards ---- */
.adr-stack-grid{
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.adr-stack-card{
  background: #fff;
  border: 1px solid rgba(11,18,32,.08);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(11,18,32,.06);
  padding: 22px;
}
.adr-stack-card h3{
  margin: 0 0 8px;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}
.adr-stack-card p{
  margin: 0;
  color: rgba(11,18,32,.62);
  font-size: .93rem;
}

/* ---- CTA panel ---- */
.adr-cta{
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  color: var(--text);
  padding: 72px 0;
}
.adr-cta-inner{ text-align: center; }
.adr-cta h2{
  margin: 0;
  font-size: clamp(1.7rem, 2.6vw, 2.5rem);
  letter-spacing: -0.02em;
  color: aliceblue;
}
.adr-cta p{
  margin: 14px auto 26px;
  max-width: 58ch;
  color: rgba(234,240,255,.72);
}
.adr-cta-actions{
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.adr-btn-outline{
  background: transparent;
  border-color: rgba(255,255,255,.3);
  color: var(--text);
}
.adr-btn-outline:hover{
  border-color: rgba(255,255,255,.55);
  background: rgba(255,255,255,.06);
}

/* ---- Responsive ---- */
@media (max-width: 1024px){
  .adr-ledger-grid{ grid-template-columns: repeat(2, 1fr); }
  .adr-ledger-cell{ border-bottom: 1px solid var(--line); }
  .adr-ledger-cell:nth-child(2n){ border-right: 0; }
  .adr-stats{ grid-template-columns: repeat(2, 1fr); }
  .adr-stack-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 860px){
  .adr-grid-2{ grid-template-columns: 1fr; gap: 0; }
}
@media (max-width: 640px){
  .adr-hero{ padding: 52px 0 46px; }
  .adr-section{ padding: 52px 0 46px; }
  .adr-ledger-grid{ grid-template-columns: 1fr; }
  .adr-ledger-cell{ border-right: 0; }
  .adr-stats{ grid-template-columns: 1fr 1fr; }
}