/* research-pro.css: the sophron.eu research overview, made calmer and more like an institutional insights
   hub (Vincent, 8 Oct 2026: "make the research overview a bit nicer and professional"). Loaded LAST on
   research.html (+ the sector-map and analysts views, one document) by build_sophron_research.py
   polish_research(); it only restyles, the library script is unchanged apart from the Latest row. */

/* Hero: slimmer, so the research is above the fold (the sophron build pins it at 620px with !important) */
.rs-hero { min-height: 440px !important; }
.rs-hero__h { font-size: clamp(2.4rem, 4.6vw, 3.6rem); }
.rs-hero__p { max-width: 40em; }

/* Numbers: smaller, one quiet line */
.rs-stats { gap: 44px; margin-top: 22px; }
.rs-stats b { font-size: 1.9rem; }

/* Latest research: a lead story and two more, as on an insights hub */
.rs-latest { margin: 64px 0 0; }
.rs-latest__h { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 12px; border-bottom: 2px solid var(--r-ink); margin-bottom: 26px; }
.rs-latest__h h2 { font-family: var(--r-serif); font-weight: 400; font-size: 1.9rem; letter-spacing: -.01em; color: var(--r-ink); margin: 0; }
.rs-latest__h a { font-size: .84rem; font-weight: 700; color: var(--r-burg); text-decoration: none; }
.rs-latest__h a:hover { text-decoration: underline; }
.rs-latest__grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 40px; }
.rs-lead { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 28px; align-items: start; text-decoration: none; color: inherit; background: none; border: 0; padding: 0; font: inherit; text-align: left; cursor: pointer; }
.rs-lead .rs-cv { width: 200px; box-shadow: 0 18px 36px -22px rgba(40,12,8,.55); }
.rs-lk { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--r-burg); }
.rs-lead h3 { font-family: var(--r-serif); font-weight: 400; font-size: 2rem; line-height: 1.12; color: var(--r-ink); margin: 10px 0 12px; }
.rs-lead p { font-family: var(--r-serif); font-size: 1.08rem; line-height: 1.55; color: var(--r-text); margin: 0 0 14px; }
.rs-lm { font-size: .8rem; color: var(--r-muted); }
.rs-lgo { display: inline-block; margin-top: 16px; font-size: .86rem; font-weight: 700; color: var(--r-burg); border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.rs-lead:hover h3 { color: var(--r-burg); }
.rs-side { display: flex; flex-direction: column; gap: 0; border-left: 1px solid var(--r-line); padding-left: 32px; }
.rs-mini { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 18px; align-items: start; padding: 0 0 22px; margin: 0 0 22px; border-bottom: 1px solid var(--r-line);
  text-decoration: none; color: inherit; background: none; border-left: 0; border-right: 0; border-top: 0; font: inherit; text-align: left; cursor: pointer; }
.rs-mini:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.rs-mini .rs-cv { width: 84px; }
.rs-mini h4 { font-family: var(--r-serif); font-weight: 400; font-size: 1.22rem; line-height: 1.2; color: var(--r-ink); margin: 6px 0 6px; }
.rs-mini:hover h4 { color: var(--r-burg); }

/* Featured (Sector Map): flatter, no floating shadow */
.rs-feat { margin-top: 64px; box-shadow: 0 0 0 1px var(--r-line); border-radius: 2px; }

/* Filters: underline tabs instead of boxed pills */
.rs-ctl { border-bottom: 1px solid var(--r-line); padding-bottom: 0; align-items: flex-end; }
.rs-chips { gap: 0 26px; }
.rs-chip { border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: 12px 0 10px; background: none !important; color: var(--r-muted); font-weight: 600; }
.rs-chip:hover { color: var(--r-ink); border-color: transparent; }
.rs-chip.is-on { background: none; color: var(--r-ink); border-bottom-color: var(--r-burg); }
.rs-chip.is-on b { color: var(--r-burg); }
.rs-group { padding-bottom: 8px; }

/* Shelves: a catalogue, six covers to a row at desktop width */
.rs-shelf { margin: 56px 0 0; }
.rs-shelf__h { border-bottom: 1px solid var(--r-line); padding-bottom: 12px; margin-bottom: 26px; }
.rs-shelf__h h3 { font-size: 1.6rem; }
.rs-shelf__h span { font-size: .96rem; }
.rs-grid { grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); gap: 36px 24px; }
.rs-card__t { font-size: 1.02rem; margin-top: 14px; }
.rs-card__m { font-size: .74rem; }

@media (max-width: 1000px) {
  .rs-latest__grid { grid-template-columns: minmax(0, 1fr); }
  .rs-side { border-left: 0; padding-left: 0; border-top: 1px solid var(--r-line); padding-top: 24px; }
}
@media (max-width: 640px) {
  .rs-hero { min-height: 340px !important; }
  .rs-lead { grid-template-columns: 112px minmax(0, 1fr); gap: 18px; } .rs-lead .rs-cv { width: 112px; } .rs-lead h3 { font-size: 1.5rem; }
  .rs-lead p { display: none; }
  .rs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
  .rs-stats { gap: 26px; }
  .rs-chips { gap: 0 18px; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .rs-chip { white-space: nowrap; }
}

/* ---- Hover (8 Oct 2026, Vincent: "add hover effects") -----------------------------------------------
   The same language as the library covers: slow, physical, never bouncy; things lift toward the light. */
.rs-lead .rs-cv, .rs-mini .rs-cv { transform-origin: 50% 100%; transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease; }
.rs-lead:hover .rs-cv, .rs-lead:focus-visible .rs-cv { transform: translateY(-8px) rotateX(3deg) rotateY(-5deg); box-shadow: 0 2px 3px rgba(0,0,0,.06), 18px 40px 60px -28px rgba(40,12,8,.6); }
.rs-mini:hover .rs-cv, .rs-mini:focus-visible .rs-cv { transform: translateY(-5px) rotateY(-6deg); box-shadow: 10px 22px 34px -18px rgba(40,12,8,.55); }
.rs-lead:hover .rs-cv::after, .rs-mini:hover .rs-cv::after { transform: translateX(120%); }
.rs-lead { perspective: 1200px; } .rs-mini { perspective: 900px; }
.rs-lead h3, .rs-mini h4 { transition: color .25s ease; }
.rs-lead h3 { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: color .25s ease, background-size .4s ease; display: inline; padding-bottom: 2px; }
.rs-lead:hover h3 { background-size: 100% 1px; }
.rs-lead h3 + p { margin-top: 12px; }
.rs-lgo { transition: color .25s ease, letter-spacing .3s ease; }
.rs-lgo::after { content: '\2192'; display: inline-block; margin-left: 8px; transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.rs-lead:hover .rs-lgo::after { transform: translateX(5px); }
.rs-mini { transition: background .3s ease; }
.rs-mini:hover .rs-lm, .rs-lead:hover .rs-lm { color: var(--r-text); }
.rs-lm { transition: color .25s ease; }
.rs-lead:focus-visible, .rs-mini:focus-visible { outline: 2px solid rgba(102,16,12,.4); outline-offset: 6px; }

.rs-latest__h a::after { content: '\2192'; display: inline-block; margin-left: 6px; transition: transform .3s ease; }
.rs-latest__h a:hover::after { transform: translateX(4px); }

/* Tabs: the underline grows in from the left on hover */
.rs-chip { position: relative; }
.rs-chip::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: rgba(102,16,12,.35); transform: scaleX(0); transform-origin: left center; transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.rs-chip:hover:not(.is-on)::after { transform: scaleX(1); }
.rs-chip b { transition: color .2s ease; } .rs-chip:hover b { color: var(--r-burg); }

/* Search: a quiet ring on hover, a clear one on focus */
.rs-search__box { transition: border-color .25s ease, box-shadow .25s ease; }
.rs-search__box:hover { border-color: rgba(102,16,12,.35); }
.rs-search__box:focus-within { border-color: var(--r-burg); box-shadow: 0 0 0 3px rgba(102,16,12,.1); }

/* Shelf headings: the rule warms when the shelf is being browsed */
.rs-shelf__h { transition: border-color .4s ease; }
.rs-shelf:hover .rs-shelf__h { border-bottom-color: rgba(102,16,12,.35); }

@media (prefers-reduced-motion: reduce) {
  .rs-lead .rs-cv, .rs-mini .rs-cv, .rs-lgo::after, .rs-chip::after, .rs-latest__h a::after { transition: none !important; }
  .rs-lead:hover .rs-cv, .rs-mini:hover .rs-cv { transform: none; }
}