/* ==============================================
   IMPULSE SEO  - Research
   Public research posts, listing page, and the
   homepage research card section.
   Depends on: reset.css, fonts.css, colors.css, styles.css
   ============================================== */

/* ── Placeholder banner ──────────────────────── */
/* Rendered only when data.json carries "placeholder": true.
   Must never appear on master. See research/.claude/creating-a-research-post.md */
.research-placeholder-banner {
  background: #fff4e5;
  border-bottom: 1px solid #f0c89a;
  color: #8a4b08;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-align: center;
  padding: 10px 24px;
}

/* ── Post layout ─────────────────────────────── */
/* Deliberately NOT a .padded-section. That class gets very large horizontal
   padding at wide viewports, and with border-box sizing it would eat the
   760px measure rather than sit outside it. Padding is owned here. */
/* Top padding is deliberately smaller than the bottom. This is the first thing
   under the header and the title IS the content, so it should not sit 150px
   down the page. Bottom keeps its spacing before the footer. */
.research-post {
  max-width: 760px;
  margin: 0 auto;
  padding: 32px 24px 48px;
}

.research-eyebrow {
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--cta);
  margin-bottom: 14px;
}

.research-post h1 {
  font-size: clamp(2rem, 5vw, 2.9rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.12;
  color: var(--text-dark);
  margin-bottom: 18px;
}

.research-standfirst {
  font-size: 1.15rem;
  line-height: 1.7;
  color: var(--text-medium);
  margin-bottom: 20px;
}

.research-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-light);
  padding-bottom: 28px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 40px;
}

.research-post h2 {
  font-size: clamp(1.4rem, 3vw, 1.8rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--text-dark);
  margin: 48px 0 16px;
}

.research-post h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-dark);
  margin: 28px 0 10px;
}

.research-post p,
.research-post li {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--text-medium);
}

.research-post p {
  margin-bottom: 18px;
}

.research-post ul {
  margin: 0 0 18px;
  padding-left: 22px;
  list-style: disc;
}

.research-post li {
  margin-bottom: 10px;
}

.research-post strong {
  color: var(--text-dark);
  font-weight: 700;
}

/* ── Headline figure ─────────────────────────── */
.research-headline {
  background: var(--surface-light);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 36px 28px;
  text-align: center;
  margin: 8px 0 40px;
}

.research-headline-value {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: clamp(3.2rem, 11vw, 5rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--cta);
  display: block;
}

.research-headline-of {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: clamp(1rem, 3vw, 1.25rem);
  font-weight: 600;
  color: var(--text-light);
  letter-spacing: -0.01em;
  display: block;
  margin-top: 6px;
}

.research-headline-claim {
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.55;
  color: var(--text-dark);
  max-width: 460px;
  margin: 18px auto 0;
}

/* ── Chart ───────────────────────────────────── */
.research-chart {
  margin: 0 0 40px;
}

/* Scoped so it beats `.research-post h2` on specificity. */
.research-post .research-chart-title,
.research-chart-title {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-light);
  line-height: 1.5;
  margin: 0 0 20px;
}

.research-bars {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.research-bar-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  align-items: baseline;
}

.research-bar-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-dark);
  line-height: 1.35;
}

.research-bar-value {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-dark);
  white-space: nowrap;
}

.research-bar-value span {
  color: var(--text-light);
  font-weight: 600;
  margin-left: 6px;
}

.research-bar-track {
  grid-column: 1 / -1;
  background: var(--surface-light);
  border-radius: 6px;
  height: 14px;
  overflow: hidden;
}

.research-bar-fill {
  height: 100%;
  width: var(--bar-width, 0%);
  border-radius: 6px;
  background: var(--cta);
  transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.research-bar-row[data-tone="good"] .research-bar-fill { background: var(--cta); }
.research-bar-row[data-tone="warn"] .research-bar-fill { background: var(--cta-light); }
.research-bar-row[data-tone="bad"]  .research-bar-fill { background: #b9ccd9; }

/* ── Methodology ─────────────────────────────── */
.research-methodology {
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 3px solid var(--cta);
  border-radius: 10px;
  padding: 24px 26px;
  margin: 40px 0;
}

.research-methodology h2 {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cta);
  margin: 0 0 12px;
}

.research-methodology p,
.research-methodology li {
  font-size: 0.95rem;
  line-height: 1.65;
}

.research-methodology p:last-child,
.research-methodology ul:last-child {
  margin-bottom: 0;
}

/* ── End CTA ─────────────────────────────────── */
.research-end-cta {
  background: var(--surface-dark);
  border-radius: 16px;
  padding: 44px 28px;
  text-align: center;
  margin-top: 56px;
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  align-items: center;
}

.research-end-cta h2 {
  color: var(--white);
  margin: 0 0 12px;
  grid-column: 1 / -1;
}

.research-end-cta > p:not(.research-more) {
  color: rgba(255, 255, 255, 0.8);
  max-width: 440px;
  margin: 0 auto 26px;
  grid-column: 1 / -1;
}

.research-more {
  margin-top: 28px;
  font-size: 0.9rem;
}

.research-more a {
  color: var(--cta);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.research-more a:hover {
  border-bottom-color: var(--cta);
}

.research-end-cta .research-more a {
  color: var(--white);
}

.research-end-cta .research-more a:hover {
  border-bottom-color: var(--white);
}

.research-end-cta .research-more {
  max-width: none;
  margin: 0;
  font-size: 0.95rem;
}

.research-end-cta .cta-svg {
  display: none;
}

/* ── Research cards (listing + homepage) ─────────
   One frame for every card - eyebrow, visual, claim, footer - with only the
   visual differing by [data-card-type]. Keeping the frame fixed is what makes
   a mix of stat, ratio, and bar cards read as one set rather than three
   unrelated components. */
.research-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px 26px 22px;
  text-decoration: none;
  color: inherit;
  min-height: 280px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.research-card:hover {
  transform: translateY(-3px);
  border-color: var(--cta-light);
  box-shadow: 0 14px 36px rgba(12, 118, 189, 0.13);
}

.research-card-eyebrow {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-light);
  margin-bottom: 18px;
}

/* Fixed slot for the visual so the claim starts at the same height on every
   card type, and the crossfade between them does not shuffle the text. */
.research-card-visual {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  min-height: 92px;
}

.research-card-stat {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: clamp(2.4rem, 5.5vw, 3.1rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--cta);
}

.research-card-of {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-light);
  margin-top: 8px;
}

/* New visual types go here: one block per type, keyed off the class its
   build*Visual() function sets. The card frame above stays untouched. */

/* ── Visual: fraction tiles ─────────────────────────────────────────────── */
.research-card-fraction-tiles {
  display: grid;
  grid-template-columns: repeat(var(--fraction-total, 4), minmax(0, 1fr));
  gap: 10px;
  width: min(100%, 286px);
}

.research-card-fraction-tile {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 10px;
  background: #edf4f8;
  color: #91a7b7;
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: clamp(1rem, 4vw, 1.35rem);
  font-weight: 700;
}

.research-card-fraction-tile.is-active {
  background: var(--cta);
  color: var(--white);
}

.research-card-fraction-caption {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 9px;
  margin-top: 10px;
  color: var(--text-light);
  font-size: 0.73rem;
  font-weight: 600;
  line-height: 1.35;
}

.research-card-fraction-caption strong {
  color: var(--text-dark);
  font-size: 0.86rem;
}

/* ── Visual: threshold ruler ───────────────────────────────────────────── */
.research-card-ruler-row {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  min-width: 0;
  width: 100%;
}

.research-card-ruler-value {
  min-width: max-content;
  color: var(--cta);
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: clamp(2.35rem, 6vw, 3.1rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.9;
}

.research-card-ruler-value small {
  color: var(--text-light);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0;
}

.research-card-ruler-scale {
  flex: 1;
  min-width: 0;
}

.research-card-ruler-track {
  position: relative;
  display: flex;
  gap: 3px;
  height: 13px;
  margin-bottom: 10px;
}

.research-card-ruler-segment {
  min-width: 0;
  background: #dfeaf2;
}

.research-card-ruler-segment:first-child {
  border-radius: 7px 0 0 7px;
}

.research-card-ruler-segment:nth-child(2) {
  background: #c9deeb;
}

.research-card-ruler-segment:nth-child(3) {
  background: #a7cce2;
}

.research-card-ruler-segment:last-of-type {
  border-radius: 0 7px 7px 0;
}

.research-card-ruler-marker {
  position: absolute;
  top: -8px;
  width: 4px;
  height: 29px;
  margin-left: -2px;
  border-radius: 2px;
  background: var(--cta);
  box-shadow: 0 0 0 4px var(--white);
}

.research-card-ruler-labels {
  display: grid;
  color: var(--text-light);
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.research-card-ruler-labels span {
  min-width: 0;
  overflow: hidden;
  text-align: center;
  white-space: nowrap;
}

.research-card-ruler-labels span:first-child {
  text-align: left;
}

.research-card-ruler-labels span:last-child {
  text-align: right;
}

/* ── Visual: mini bars ───────────────────────── */
.research-card-bars {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.research-card-bar-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3px 10px;
  align-items: baseline;
}

.research-card-bar-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-dark);
  line-height: 1.3;
}

.research-card-bar-value {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-light);
}

.research-card-bar-track {
  grid-column: 1 / -1;
  background: var(--surface-light);
  border-radius: 4px;
  height: 8px;
  overflow: hidden;
}

.research-card-bar-fill {
  height: 100%;
  width: var(--bar-width, 0%);
  border-radius: 4px;
  background: var(--cta);
}

.research-card-bar-row[data-tone="warn"] .research-card-bar-fill { background: var(--cta-light); }
.research-card-bar-row[data-tone="bad"]  .research-card-bar-fill { background: #b9ccd9; }

/* ── Claim and footer ────────────────────────── */
.research-card-claim {
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--text-dark);
  margin-top: 20px;
}

.research-card-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 14px;
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.research-card-footnote {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-light);
}

.research-card-go {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--cta);
  white-space: nowrap;
  transition: transform 0.2s ease;
}

.research-card:hover .research-card-go {
  transform: translateX(3px);
}

.research-card-placeholder {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #8a4b08;
  background: #fff4e5;
  border-radius: 4px;
  padding: 3px 7px;
  margin-bottom: 14px;
  align-self: flex-start;
}

/* ── Listing page grid ───────────────────────── */
/* Overrides .padded-section, which is built for sections sandwiched between
   others. This one sits directly under the header. */
#research-listing {
  padding-top: 40px;
}

.research-listing {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
}

/* ── Homepage research section ───────────────── */
#research-highlight {
  background: var(--surface-light);
}

/* Stacked below 1001px, in a deliberate order: heading, card, dots, button.
   `display: contents` on .research-intro lets its two children be ordered
   around the card rather than staying glued together. */
.research-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  min-width: 0;
  max-width: 1100px;
  margin: 0 auto;
}

.research-intro {
  display: contents;
}

.research-split .heading {
  order: 1;
  margin-bottom: 0;
}

.research-panel {
  order: 2;
  min-width: 0;
  /* Cards and dots are injected from JSON after load. Without reserved space the
     whole page below shifts down, which breaks #contact anchor jumps. Values are
     the measured rendered heights per breakpoint. */
  min-height: 450px;
}

.research-split .research-see-all {
  order: 3;
  margin-top: 0;
}

/* One card at every breakpoint. The single card is the contrast against the
   three-card rows elsewhere on the page. */
.research-rotator {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
}

/* Every post stays in the DOM as a real link; rotation only changes which one
   is active, so crawlers see the full set.
   All cards share one grid cell so the outgoing and incoming cards can cross
   over each other. Stacking also fixes the section height to the tallest card,
   so swapping between cards of different length does not jog the page. */
.research-rotator .research-card {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition:
    opacity 0.55s ease,
    transform 0.55s ease,
    visibility 0s linear 0.55s;
}

.research-rotator .research-card.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity 0.55s ease,
    transform 0.55s ease,
    visibility 0s;
}

/* ── Rotator dots ────────────────────────────── */
.research-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 22px;
}

.research-dot {
  width: 30px;
  height: 4px;
  padding: 0;
  border: none;
  border-radius: 2px;
  background: var(--border);
  cursor: pointer;
  transition: background 0.3s ease, width 0.3s ease;
}

.research-dot:hover {
  background: var(--cta-light);
}

.research-dot[aria-current="true"] {
  background: var(--cta);
  width: 44px;
}

.research-dot:focus-visible {
  outline: 2px solid var(--cta);
  outline-offset: 3px;
}

.research-see-all {
  text-align: center;
  margin-top: 32px;
}

@media (prefers-reduced-motion: reduce) {
  .research-rotator .research-card,
  .research-dot,
  .research-bar-fill {
    transition: none;
  }
}

/* ── Responsive ──────────────────────────────── */
@media (min-width: 600px) {
  .research-bar-row {
    grid-template-columns: 1fr auto;
  }
}

@media (max-width: 420px) {
  .research-card-ruler-row {
    gap: 10px;
  }

  .research-card-ruler-value {
    font-size: 2rem;
  }

  .research-card-ruler-labels {
    font-size: 0.45rem;
    letter-spacing: 0.02em;
  }
}

@media (max-width: 480px) {
  .research-end-cta {
    grid-template-columns: 1fr;
  }

  .research-end-cta .cta-wrapper,
  .research-end-cta .research-more {
    justify-self: center;
  }

  .research-end-cta .research-more {
    margin-top: 14px;
  }
}

@media (min-width: 700px) {
  .research-listing {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1001px) {
  #research-listing {
    padding-top: 48px;
  }

  .research-listing {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Copy left, card and dots right. .research-intro goes back to being a real
     box so the heading and button sit together in the left column. */
  /* Top-aligned, not centered: the two columns differ in height by ~140px, and
     centering the shorter one leaves every edge floating against nothing. */
  .research-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 56px;
    align-items: start;
  }

  .research-intro {
    display: block;
  }

  .research-intro .heading {
    text-align: left;
    margin-bottom: 28px;
  }

  .research-intro .sub-heading {
    margin-left: 0;
    max-width: none;
  }

  .research-intro .research-see-all {
    text-align: left;
    margin-top: 0;
  }

  /* Larger, since it is now carrying the right half on its own. */
  .research-split .research-card {
    padding: 38px 36px 28px;
    min-height: 330px;
  }

  .research-split .research-card-stat {
    font-size: clamp(2.8rem, 4vw, 3.6rem);
  }

  .research-split .research-card-fraction-tiles {
    width: min(100%, 320px);
  }

  .research-split .research-card-visual {
    min-height: 132px;
  }

  .research-split .research-card-claim {
    font-size: 1.12rem;
  }

  .research-post {
    padding: 48px 24px 80px;
  }

  .research-headline {
    padding: 48px 36px;
  }
}


/* ── Research listing handoff ─────────────────── */
/* Closing CTA on research.html. Deliberately not .research-see-all, which the
   homepage research section also uses. */
.research-handoff {
  text-align: center;
  margin-top: 56px;
  padding-top: 44px;
  border-top: 1px solid var(--border);
}

.research-handoff h2 {
  font-size: clamp(1.5rem, 3vw, 1.9rem);
  font-weight: 800;
  color: var(--text-dark);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 12px;
}

.research-handoff p {
  font-size: 1rem;
  color: var(--text-medium);
  line-height: 1.7;
  max-width: 520px;
  margin: 0 auto 26px;
}

@media (min-width: 600px) {
  .research-panel {
    min-height: 380px;
  }
}

@media (min-width: 1000px) {
  .research-panel {
    min-height: 450px;
  }
}