/* ============================================
   OLIABO SCIENCE RESEARCH — Editorial findings + molecular accent
   5 hairline-divided findings on sage. Each finding reads as a
   small editorial moment, NOT a clinical row. Inline molecular
   visual on the inflammation finding foreshadows Pillar 2.
   ============================================ */

.osr {
  position: relative;
  overflow: hidden;
}

.osr__header {
  max-width: 760px;
  margin: 0 0 var(--space-2xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

@media (min-width: 1024px) {
  .osr__header {
    margin-bottom: var(--space-3xl);
  }
}

.osr__eyebrow {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--clr-primary);
  line-height: 1.4;
}

.osr__heading {
  margin: 0;
  font-size: clamp(2rem, 4.5vw + 0.5rem, 3.75rem);
  line-height: 0.98;
  letter-spacing: 0.015em;
  color: var(--clr-primary);
  display: flex;
  flex-direction: column;
  text-wrap: balance;
}

.osr__heading-line1 {
  display: block;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--clr-primary);
}

.osr__heading-line2 {
  display: block;
  font-weight: 400;
  color: var(--clr-primary);
  letter-spacing: 0;
  font-size: 0.85em;
  line-height: 1.05;
  margin-top: var(--space-xs);
}

.osr__lead {
  margin: 0;
  font-size: var(--font-size-base);
  font-weight: 300;
  line-height: 1.6;
  color: var(--clr-text-secondary);
  max-width: 620px;
  text-wrap: pretty;
}

@media (min-width: 1024px) {
  .osr__lead { font-size: var(--font-size-lg); }
}

/* ─── Findings grid — compact card row ─────────────────
   Mobile: horizontal scroll-snap carousel (one card at a time).
   Tablet: 3-col grid (5 findings = 3 + 2 layout, second row left-aligns).
   Desktop: single 5-col row.
   ─────────────────────────────────────────────────────── */
.osr__list {
  list-style: none;
  margin: 0;
  padding: 0 0 var(--space-sm);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 78%;
  gap: var(--space-md);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.osr__list::-webkit-scrollbar { display: none; }

@media (min-width: 600px) {
  .osr__list {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-lg);
    overflow-x: visible;
    scroll-snap-type: none;
    padding-bottom: 0;
  }
}

@media (min-width: 1024px) {
  .osr__list {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-md);
  }
}

@media (min-width: 1280px) {
  .osr__list {
    gap: var(--space-lg);
  }
}

/* Each finding card — typographic vertical lockup.
   visual → topic → finding → citation. Centered. */
.osr__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-md);
  padding: var(--space-xl) var(--space-md);
  border: 1px solid rgba(60, 66, 46, 0.15);
  border-radius: var(--radius-lg);
  background: rgba(253, 252, 250, 0.55);
  scroll-snap-align: start;
  min-width: 0;
}

@media (min-width: 1024px) {
  .osr__item {
    padding: var(--space-xl) var(--space-md);
    gap: var(--space-md);
  }
}

/* Modifier kept for backward compatibility with existing markup,
   but no longer drives a different layout — all items are cards. */
.osr__item--with-visual { /* unused */ }

.osr__item-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
}

.osr__topic {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--clr-primary);
  line-height: 1.4;
}

.osr__finding {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  /* Upright Cormorant per design guide §5 — small editorial scale */
  font-size: clamp(0.9375rem, 0.4vw + 0.85rem, 1.0625rem);
  line-height: 1.45;
  color: var(--clr-primary);
  text-wrap: pretty;
  letter-spacing: 0;
}

.osr__citation {
  margin: var(--space-xs) 0 0;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--clr-text-muted);
  line-height: 1.5;
}

/* ─── Visual accents (ring / molecule / compound badge) ─────
   All variants now sized at 110px so the row reads as a unified
   visual rhythm regardless of which variant each card uses.
   ─────────────────────────────────────────────────────────── */
.osr__visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  text-align: center;
  min-width: 0;
  width: 110px;
  height: 110px;
}

/* Ring chart — circular percentage indicator */
.osr__ring {
  position: relative;
  width: 110px;
  height: 110px;
  color: var(--clr-primary);
}

.osr__ring-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.osr__ring-progress {
  /* Gold accent on the filled arc */
  color: var(--clr-brand-accent);
  /* Darken slightly on light backgrounds for contrast */
  filter: brightness(0.85);
  transition: stroke-dasharray 0.8s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}

.osr__ring-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 12px;
}

.osr__ring-value {
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.005em;
  color: var(--clr-primary);
}

.osr__ring-label {
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--clr-primary);
  opacity: 0.7;
  line-height: 1.3;
  text-wrap: balance;
  max-width: 86px;
}

/* Molecular accent — stylized hex ring */
.osr__molecule {
  width: 110px;
  height: 110px;
  color: var(--clr-primary);
  opacity: 0.6;
  transition: opacity 0.3s ease;
}

.osr__item:hover .osr__molecule {
  opacity: 0.9;
}

/* Compound badge — typographic name in a soft circular card */
.osr__badge {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  border: 1.5px solid var(--clr-primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: var(--space-sm);
  text-align: center;
  background: rgba(60, 66, 46, 0.03);
}

.osr__badge-prefix {
  font-size: 8px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--clr-primary);
  opacity: 0.65;
  line-height: 1.3;
}

.osr__badge-name {
  font-family: var(--font-serif);
  font-size: 0.9375rem;
  font-weight: 400;
  /* Upright Cormorant per design guide §5 */
  color: var(--clr-primary);
  line-height: 1.15;
  text-wrap: balance;
}

.osr__visual-caption {
  margin: 0;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--clr-primary);
  opacity: 0.65;
  line-height: 1.5;
  max-width: 200px;
}

/* ─── Dark variant ─── */
.osr.bg-accent-dark .osr__eyebrow { color: var(--clr-brand-accent); }
.osr.bg-accent-dark .osr__heading-line1 { color: var(--clr-text-inverse); }
.osr.bg-accent-dark .osr__heading-line2 { color: var(--clr-brand-accent); }
.osr.bg-accent-dark .osr__lead { color: var(--clr-text-inverse); opacity: 0.82; }
.osr.bg-accent-dark .osr__item {
  border-color: rgba(253, 252, 250, 0.18);
  background: rgba(253, 252, 250, 0.04);
}
.osr.bg-accent-dark .osr__topic { color: var(--clr-brand-accent); }
.osr.bg-accent-dark .osr__finding { color: var(--clr-text-inverse); }
.osr.bg-accent-dark .osr__citation { color: var(--clr-text-inverse); opacity: 0.6; }
.osr.bg-accent-dark .osr__molecule { color: var(--clr-brand-accent); opacity: 0.7; }
.osr.bg-accent-dark .osr__visual-caption { color: var(--clr-brand-accent); opacity: 0.85; }
.osr.bg-accent-dark .osr__ring,
.osr.bg-accent-dark .osr__ring-value,
.osr.bg-accent-dark .osr__ring-label { color: var(--clr-text-inverse); }
.osr.bg-accent-dark .osr__ring-label { opacity: 0.7; }
.osr.bg-accent-dark .osr__ring-progress { color: var(--clr-brand-accent); filter: none; }
.osr.bg-accent-dark .osr__badge {
  border-color: var(--clr-brand-accent);
  background: rgba(253, 252, 250, 0.04);
}
.osr.bg-accent-dark .osr__badge-prefix,
.osr.bg-accent-dark .osr__badge-name {
  color: var(--clr-brand-accent);
}

/* ─── Reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
  .osr__molecule { transition: none; }
}