/* =====================================================
   research.css  —  JMI Research page styles
   Depends on: style.css (--gold, --gold-dark, --text-dark, --text-light, spacing vars)
   ===================================================== */

/* Extra tokens not in style.css */
.research-page {
  --rblue:      #3468af;
  --rblue-dk:   #1e3f6e;
  --rblue-lt:   #edf2fa;
  --rdark:      #1c1c1e;
  --rmid:       #555f6e;
  --rlight:     #f4f6f9;
  --rborder:    #dde3ec;
  --rradius:    6px;
  --rshadow:    0 4px 20px rgba(0,0,0,.09);
  --rshadow-lg: 0 10px 40px rgba(0,0,0,.14);
  --rserif:     'Playfair Display', Georgia, serif;
  font-family:  Arial, sans-serif;
  color:        var(--text-dark);
}

/* ── HERO ─────────────────────────────────────────── */
.rsch-hero__img-wrap {
  border-top:    4px solid var(--gold);
  border-bottom: 4px solid var(--gold);
  line-height:   0;
  overflow:      hidden;
  background:    #f0f0f0;
}
.rsch-hero__img {
  width:      100%;
  display:    block;
  max-height: 380px;
  object-fit: cover;
  object-position: center 25%;
}
.rsch-hero__text {
  text-align:  center;
  padding:     3rem 1.5rem 3.5rem;
  background:  linear-gradient(180deg, var(--rblue-dk) 0%, var(--rblue) 100%);
}
.rsch-eyebrow {
  display:       inline-block;
  background:    rgba(195,160,76,.15);
  border:        1px solid rgba(195,160,76,.4);
  color:         var(--gold);
  font-size:     .7rem;
  font-weight:   700;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:       .3rem .9rem;
  border-radius: 2rem;
  margin-bottom: 1rem;
}
.rsch-hero__title {
  font-family:  var(--rserif);
  font-size:    clamp(1.9rem, 4.5vw, 3.2rem);
  font-weight:  900;
  color:        #fff;
  line-height:  1.15;
  margin-bottom:.9rem;
}
.rsch-hero__title em { font-style:italic; color:var(--gold); }
.rsch-pills { display:flex; justify-content:center; gap:.5rem; flex-wrap:wrap; margin-bottom:1.2rem; }
.rsch-pill  { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); color:rgba(255,255,255,.8); font-size:.7rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding:.25rem .75rem; border-radius:2rem; }
.rsch-hero__sub     { font-size:.95rem; color:rgba(255,255,255,.65); margin-bottom:.8rem; }
.rsch-hero__authors { font-size:.8rem;  color:rgba(255,255,255,.5); border-top:1px solid rgba(255,255,255,.12); padding-top:1rem; margin-top:.8rem; }

/* ── STAT STRIP ───────────────────────────────────── */
.rsch-stats        { background:var(--rblue-dk); padding:2.5rem 1.5rem; }
.rsch-stats__inner { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(255,255,255,.1); max-width:1100px; margin:0 auto; border-radius:var(--rradius); overflow:hidden; }
.rsch-stat         { background:var(--rblue-dk); padding:1.8rem 1rem; text-align:center; }
.rsch-stat__val    { font-family:var(--rserif); font-size:2.4rem; font-weight:900; color:var(--gold); line-height:1; margin-bottom:.3rem; }
.rsch-stat__label  { font-size:.72rem; color:rgba(255,255,255,.6); font-weight:600; letter-spacing:.04em; text-transform:uppercase; line-height:1.3; }

/* ── SECTIONS ─────────────────────────────────────── */
.rsch-section          { padding:4.5rem 0; }
.rsch-section--alt     { background:var(--rlight); }
.rsch-section--dark    { background:var(--rblue-dk); }
.rsch-container        { max-width:960px;  margin:0 auto; padding:0 1.5rem; }
.rsch-container-wide   { max-width:1180px; margin:0 auto; padding:0 1.5rem; }

.rsch-label { display:inline-flex; align-items:center; gap:.45rem; font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin-bottom:.7rem; }
.rsch-label::before { content:''; display:block; width:20px; height:2px; background:var(--gold); }
.rsch-section-title      { font-family:var(--rserif); font-size:clamp(1.5rem,2.8vw,2.2rem); font-weight:700; color:var(--rblue); line-height:1.2; margin-bottom:.4rem; }
.rsch-section-title--light { color:#fff; }
.rsch-rule               { width:44px; height:3px; background:var(--gold); margin:1rem 0 1.8rem; border-radius:2px; }
.rsch-h3                 { font-family:var(--rserif); font-size:1.15rem; color:var(--rblue); margin-bottom:.8rem; }

/* ── ABSTRACT ─────────────────────────────────────── */
.rsch-abstract-box { background:var(--rblue); border-radius:var(--rradius); padding:2.2rem; color:rgba(255,255,255,.9); font-size:.94rem; line-height:1.8; border-left:5px solid var(--gold); box-shadow:var(--rshadow-lg); margin-bottom:2rem; }
.rsch-abstract-box__label { font-size:.66rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin-bottom:.7rem; }

.rsch-meta-grid      { display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; margin-top:1.8rem; }
.rsch-meta-card      { background:#fff; border:1px solid var(--rborder); border-top:3px solid var(--gold); border-radius:var(--rradius); padding:1.2rem 1rem; }
.rsch-meta-card__label { font-size:.66rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--rmid); margin-bottom:.35rem; }
.rsch-meta-card__val   { font-family:var(--rserif); font-size:1rem; font-weight:700; color:var(--rblue); line-height:1.3; }
.rsch-meta-card__val small { font-weight:400; font-size:.82rem; }

/* ── CALLOUT ──────────────────────────────────────── */
.rsch-callout { background:#fdf6e3; border-left:4px solid var(--gold); border-radius:0 var(--rradius) var(--rradius) 0; padding:1.2rem 1.4rem; margin:1.8rem 0; font-size:.92rem; color:var(--rdark); line-height:1.7; }

/* ── TABLES ───────────────────────────────────────── */
.rsch-table-wrap { overflow-x:auto; border-radius:var(--rradius); box-shadow:var(--rshadow); margin:1.2rem 0; }
.rsch-table      { width:100%; border-collapse:collapse; font-size:.86rem; }
.rsch-table thead tr { background:var(--rblue); color:#fff; }
.rsch-table thead th { padding:.8rem .9rem; text-align:center; font-weight:700; font-size:.74rem; letter-spacing:.06em; text-transform:uppercase; }
.rsch-table tbody tr:nth-child(even) { background:var(--rblue-lt); }
.rsch-table tbody td { padding:.7rem .9rem; text-align:center; border-bottom:1px solid var(--rborder); }
.rsch-table-source { font-size:.72rem; color:var(--rmid); margin-top:.35rem; font-style:italic; }

/* ── KPI STRIP ────────────────────────────────────── */
.rsch-kpi-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(26,62,110,.12); border-radius:var(--rradius); overflow:hidden; margin-top:2rem; }
.rsch-kpi       { background:var(--rblue); padding:1.6rem 1rem; text-align:center; }
.rsch-kpi__val  { font-family:var(--rserif); font-size:1.9rem; font-weight:900; color:var(--gold); line-height:1; margin-bottom:.3rem; }
.rsch-kpi__label { font-size:.72rem; color:rgba(255,255,255,.65); font-weight:600; line-height:1.3; text-transform:uppercase; letter-spacing:.04em; }

/* ── PROCESS FLOW ─────────────────────────────────── */
.rsch-process { display:flex; align-items:flex-start; position:relative; margin:2rem 0; }
.rsch-process::before { content:''; position:absolute; top:27px; left:27px; right:27px; height:2px; background:linear-gradient(90deg,var(--gold),var(--rblue)); z-index:0; }
.rsch-step        { flex:1; display:flex; flex-direction:column; align-items:center; text-align:center; position:relative; z-index:1; padding:0 .4rem; }
.rsch-step__circle { width:54px; height:54px; border-radius:50%; background:var(--rblue); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--rserif); font-size:1.2rem; font-weight:700; border:3px solid var(--gold); margin-bottom:.7rem; box-shadow:0 4px 12px rgba(26,69,128,.22); }
.rsch-step__label  { font-size:.75rem; font-weight:700; color:var(--rblue); line-height:1.3; }
.rsch-step__sub    { font-size:.67rem; color:var(--rmid); margin-top:.2rem; }

/* ── TWO COL ──────────────────────────────────────── */
.rsch-two-col { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-top:2rem; }
.rsch-photo   { width:100%; border-radius:var(--rradius); box-shadow:var(--rshadow); border:2px solid var(--rborder); display:block; }
.rsch-caption { font-size:.75rem; color:var(--rmid); margin-top:.45rem; text-align:center; font-style:italic; }
.rsch-list-box { background:var(--rblue-lt); border-radius:var(--rradius); padding:1.1rem; margin-top:1rem; }
.rsch-list-box__title { font-size:.82rem; color:var(--rblue); font-weight:700; margin-bottom:.4rem; }
.rsch-list-box ul { font-size:.8rem; color:var(--rmid); padding-left:1.2rem; line-height:1.85; }

/* ── CHARTS ───────────────────────────────────────── */
.rsch-chart-header  { text-align:center; margin-bottom:2.5rem; }
.rsch-chart-intro   { max-width:620px; margin:.8rem auto 0; color:var(--rmid); font-size:.87rem; }
.rsch-phase         { display:inline-block; padding:.4rem 1.2rem; border-radius:2rem; font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin-bottom:.8rem; }
.rsch-phase--pre    { background:#fee2e2; color:#991b1b; }
.rsch-phase--post   { background:#d1fae5; color:#065f46; }
.rsch-chart-grid    { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-bottom:1.5rem; }
.rsch-chart-card    { background:#fff; border:1px solid var(--rborder); border-radius:var(--rradius); padding:1.3rem .9rem .9rem; box-shadow:var(--rshadow); display:flex; flex-direction:column; align-items:center; transition:transform .2s,box-shadow .2s; }
.rsch-chart-card:hover { transform:translateY(-3px); box-shadow:var(--rshadow-lg); }
.rsch-chart-card canvas { max-width:170px; max-height:170px; }
.rsch-chart-title   { font-size:.78rem; font-weight:700; color:var(--rblue); text-align:center; margin-top:.7rem; line-height:1.3; }

/* ── QUOTES ───────────────────────────────────────── */
.rsch-quotes-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.3rem; }
.rsch-quote       { background:#fff; border:1px solid var(--rborder); border-radius:var(--rradius); padding:1.8rem; box-shadow:var(--rshadow); position:relative; }
.rsch-quote::before { content:'\201C'; font-family:var(--rserif); font-size:4.5rem; color:var(--gold); opacity:.22; position:absolute; top:-.4rem; left:.9rem; line-height:1; }
.rsch-quote__text { font-family:var(--rserif); font-style:italic; font-size:.92rem; color:var(--rdark); line-height:1.7; margin-bottom:.9rem; position:relative; z-index:1; }
.rsch-quote__role { font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--rblue); }

/* ── PHOTO COMPARISON ─────────────────────────────── */
.rsch-compare-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.3rem; margin-top:1.5rem; }
.rsch-compare-col  { display:flex; flex-direction:column; gap:1rem; }
.rsch-photo-card   { border-radius:var(--rradius); overflow:hidden; box-shadow:var(--rshadow-lg); position:relative; }
.rsch-photo-card--tall { flex:1; }
.rsch-photo-card__img  { width:100%; height:240px; object-fit:cover; display:block; }
.rsch-photo-card__img--full { height:100%; min-height:240px; }
.rsch-photo-card__label    { position:absolute; bottom:0; left:0; right:0; padding:.7rem .9rem; font-size:.74rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#fff; }
.rsch-photo-card__label--jmi   { background:rgba(26,69,128,.86); }
.rsch-photo-card__label--chaos { background:rgba(180,30,30,.82); }

/* ── BENEFITS ─────────────────────────────────────── */
.rsch-benefits { display:grid; grid-template-columns:repeat(4,1fr); gap:.9rem; margin-top:2rem; }
.rsch-benefit  { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-top:3px solid var(--gold); border-radius:var(--rradius); padding:1.2rem .9rem; text-align:center; font-size:.78rem; font-weight:600; color:rgba(255,255,255,.85); line-height:1.4; }
.rsch-benefit__icon { font-size:1.6rem; margin-bottom:.5rem; }

/* ── AUTHORS ──────────────────────────────────────── */
.rsch-author-grid    { display:grid; grid-template-columns:repeat(3,1fr); gap:1.3rem; margin-top:1.8rem; }
.rsch-author         { background:#fff; border:1px solid var(--rborder); border-radius:var(--rradius); padding:1.6rem; box-shadow:var(--rshadow); }
.rsch-author__avatar { width:50px; height:50px; border-radius:50%; background:var(--rblue); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--rserif); font-size:1.2rem; font-weight:700; border:3px solid var(--gold); margin-bottom:.9rem; }
.rsch-author__name   { font-family:var(--rserif); font-size:1rem; font-weight:700; color:var(--rblue); margin-bottom:.15rem; }
.rsch-author__creds  { font-size:.72rem; font-weight:700; letter-spacing:.04em; color:var(--gold); margin-bottom:.5rem; }
.rsch-author__role   { font-size:.78rem; color:var(--rmid); margin-bottom:.7rem; line-height:1.4; }
.rsch-author__disclosure { font-size:.73rem; color:var(--rmid); line-height:1.5; border-top:1px solid var(--rborder); padding-top:.7rem; font-style:italic; }

/* ── REFERENCES ───────────────────────────────────── */
.rsch-refs    { list-style:none; display:flex; flex-direction:column; gap:.7rem; margin-top:1.3rem; counter-reset:ref-counter; }
.rsch-refs li { display:flex; gap:.9rem; font-size:.83rem; color:var(--rmid); line-height:1.6; padding-bottom:.7rem; border-bottom:1px solid var(--rborder); counter-increment:ref-counter; }
.rsch-refs li::before { content:counter(ref-counter)'.'; font-weight:700; color:var(--rblue); font-family:var(--rserif); font-size:.95rem; min-width:1.4rem; }
.rsch-refs a  { color:var(--rblue); }

/* ── ANIMATIONS ───────────────────────────────────── */
.fade-up         { opacity:0; transform:translateY(24px); transition:opacity .55s ease, transform .55s ease; }
.fade-up.visible { opacity:1; transform:translateY(0); }

/* ── RESPONSIVE ───────────────────────────────────── */
@media (max-width: 768px) {
  .rsch-stats__inner, .rsch-kpi-strip { grid-template-columns:repeat(2,1fr); }
  .rsch-meta-grid, .rsch-two-col, .rsch-quotes-grid,
  .rsch-compare-grid, .rsch-author-grid, .rsch-benefits { grid-template-columns:1fr; }
  .rsch-chart-grid  { grid-template-columns:repeat(2,1fr); }
  .rsch-process     { flex-direction:column; align-items:center; gap:1rem; }
  .rsch-process::before { display:none; }
}
@media (max-width: 480px) {
  .rsch-chart-grid { grid-template-columns:1fr; }
}

/* ── PDF Download button ──────────────────────────── */
.rsch-pdf-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: .6rem;
  margin-bottom: .2rem;
  padding: .4rem 1.1rem;
  background: transparent;
  border: 1px solid rgba(195,160,76,.5);
  color: var(--gold);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2rem;
  transition: background .2s, border-color .2s, color .2s;
}
.rsch-pdf-btn:hover {
  background: rgba(195,160,76,.15);
  border-color: var(--gold);
  color: var(--gold);
}