/* "Don't just take our word for it." The research carousel under the hero: short, wide study cards in a slow, endless
   marquee (research-proof.js). Without JavaScript it is a plain horizontal scroller. The round edge arrows
   (.carousel-arrow) are shared with the lifestyle photos and styled in carousel.css. */
.research-proof { background: #fff; border-top: 1px solid #ececec; }
.research-proof .section-heading { align-items: end; }
.research-proof .section-heading h2 { color: var(--aelo-blue, #092e3e); max-width: 620px; }
.research-proof-intro { max-width: 470px; text-wrap: pretty; }
.research-proof-intro p + p { margin-top: 10px; }
.research-proof-journals { color: var(--aelo-blue, #092e3e); font-weight: 600; }

/* The carousel runs edge to edge. Its left and right edges fade out under the arrows (the arrow's width plus 16px),
   and a card at rest starts just after the left fade, so no text sits under an arrow while nothing moves.
   The cards are sized so that whole cards fill the clear middle: 3 on laptops, 4 on wide screens, 2 on tablets, 1 on
   phones, with the next card fading in at each edge. */
.research-proof-carousel {
  --rp-arrow: 40px;
  --rp-arrow-inset: max(4px, calc(var(--gutter) - 26px));
  --rp-fade-start: calc(var(--rp-arrow-inset) + 8px);
  --rp-fade-end: calc(var(--rp-arrow-inset) + var(--rp-arrow) + 16px);
  --rp-cards: 3;
  --rp-gap: 16px;
  position: relative;
  container-type: inline-size;
  margin: 0 calc(-1 * var(--gutter));
}
.research-proof-viewport {
  padding-block: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, transparent var(--rp-fade-start), #000 var(--rp-fade-end), #000 calc(100% - var(--rp-fade-end)), transparent calc(100% - var(--rp-fade-start)));
  mask-image: linear-gradient(to right, transparent var(--rp-fade-start), #000 var(--rp-fade-end), #000 calc(100% - var(--rp-fade-end)), transparent calc(100% - var(--rp-fade-start)));
}
.research-proof-viewport::-webkit-scrollbar { display: none; }
.research-proof-track {
  --rp-card: calc((100cqw - 2 * var(--rp-fade-end) - (var(--rp-cards) - 1) * var(--rp-gap)) / var(--rp-cards));
  display: flex;
  gap: var(--rp-gap);
  width: max-content;
  padding: 0 var(--rp-fade-end);
}
.research-proof-carousel.is-enhanced .research-proof-viewport { overflow: hidden; overflow: clip; touch-action: pan-y pinch-zoom; }
.research-proof-carousel.is-enhanced .research-proof-track { will-change: transform; }
.research-proof-carousel.is-dragging .research-proof-viewport,
.research-proof-carousel.is-dragging .research-proof-viewport * { cursor: grabbing; }

.research-proof-card {
  position: relative;
  display: flex;
  flex: 0 0 var(--rp-card);
  flex-direction: column;
  gap: 10px;
  width: var(--rp-card);
  padding: 14px 18px 8px;
  background: #f4f4f4;
  color: var(--aelo-blue, #092e3e);
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
@supports selector(:has(*)) {
  .research-proof-card:has(.research-proof-link:focus-visible) { outline: 2px solid #995238; outline-offset: 2px; }
  .research-proof-card .research-proof-link:focus-visible { outline: none; }
}

/* Logos: emblems sit on a white circle; a wide wordmark sits on the card. Names stay as text beside them. */
.research-proof-source { display: flex; align-items: center; gap: 12px; min-height: 40px; }
.research-proof-logos { display: flex; flex: none; align-items: center; gap: 6px; max-width: 120px; }
.research-proof-logo { display: grid; place-items: center; flex: none; }
.research-proof-logo--emblem { width: 40px; height: 40px; border: 1px solid #e0e0e0; border-radius: 50%; background: #fff; }
.research-proof-logo--emblem img { width: 28px; height: 28px; object-fit: contain; }
.research-proof-logo--wide img { width: auto; height: 24px; max-width: 112px; object-fit: contain; }
.research-proof-logo img { pointer-events: none; -webkit-user-drag: none; }
.research-proof-origin { display: grid; gap: 1px; min-width: 0; font-size: 12.5px; line-height: 1.3; }
.research-proof-institution { font-weight: 700; }
.research-proof-journal { color: #4d5a5f; }

.research-proof-card h3 { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.35; letter-spacing: -.01em; text-wrap: pretty; }
.research-proof-stat { font-size: 17px; line-height: 1; font-weight: 800; letter-spacing: -.02em; }

.research-proof-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; }
.research-proof-kind { font-size: 10px; font-weight: 700; line-height: 1.3; letter-spacing: .1em; text-transform: uppercase; color: #4d5a5f; }
.research-proof-link {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  font-size: 13px;
  font-weight: 700;
  color: var(--aelo-blue, #092e3e);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.research-proof-link::after { content: ''; position: absolute; inset: 0; }
.research-proof-link span[aria-hidden] { font-size: 15px; text-decoration: none; }

/* Arrows over the left and right edges, centred on the cards, inside the faded edges. */
.research-proof-carousel .carousel-arrow-prev { left: var(--rp-arrow-inset); }
.research-proof-carousel .carousel-arrow-next { right: var(--rp-arrow-inset); }

.research-proof-note { margin-top: 14px; text-align: center; font-size: 13px; line-height: 1.6; }
.research-proof-note a { display: inline-flex; align-items: center; min-height: 44px; color: var(--aelo-blue, #092e3e); text-decoration: underline; text-underline-offset: 4px; }

@media (min-width: 1600px) { .research-proof-carousel { --rp-cards: 4; } }
/* Tablets and phones: the compact card. */
@media (max-width: 1100px) {
  .research-proof-carousel { --rp-cards: 2; --rp-gap: 12px; }
  .research-proof-card { padding: 12px 14px 6px; gap: 8px; }
  .research-proof-source { min-height: 36px; gap: 10px; }
  .research-proof-logo--emblem { width: 36px; height: 36px; }
  .research-proof-logo--emblem img { width: 25px; height: 25px; }
  .research-proof-logo--wide img { height: 21px; }
  .research-proof-origin { font-size: 12px; }
  .research-proof-card h3 { font-size: 14px; }
  .research-proof-stat { font-size: 16px; }
}
@media (max-width: 760px) {
  .research-proof .section-heading h2 { max-width: none; }
  .research-proof-intro { max-width: none; }
  .research-proof-carousel { --rp-cards: 1; --rp-arrow: 34px; --rp-arrow-inset: 1px; }
}