/* CM - Review Cards
   Scoped under .cm-rv so nothing leaks into the theme and theme styles
   (blockquote borders, list bullets, font-size inheritance) do not leak in.
   No JavaScript. The mobile swipe row is CSS scroll snap only. */

.cm-rv,
.cm-rv *,
.cm-rv *::before,
.cm-rv *::after {
  box-sizing: border-box;
}

.cm-rv {
  width: 100%;
}

.cm-rv__inner {
  max-width: 1160px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* Section heading. Pinned rather than fluid so it matches every other
   H2 on the page at any screen width. */
.cm-rv .cm-rv__heading {
  margin: 0 0 10px;
  text-align: center;
  font-size: 32px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--cm-rv-text);
}

.cm-rv__sub {
  margin: 0 auto 36px;
  max-width: 62ch;
  text-align: center;
  font-size: 17px;
  line-height: 1.55;
  color: var(--cm-rv-muted);
}

/* Grid */

.cm-rv__grid {
  list-style: none;
  margin: 36px 0 0;
  padding: 0;
  display: grid;
  gap: var(--cm-rv-gap, 24px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}

.cm-rv__grid--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cm-rv__grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cm-rv__grid--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.cm-rv__item {
  display: flex;
  margin: 0;
  padding: 0;
}

.cm-rv__item::before,
.cm-rv__item::marker {
  content: none;
}

/* Card */

.cm-rv__card {
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: var(--cm-rv-card, #FFFFFF);
  border: 1px solid var(--cm-rv-border, #E2E8F0);
  border-radius: var(--cm-rv-radius, 14px);
  padding: 24px;
}

.cm-rv__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 13px;
  line-height: 1.4;
}

.cm-rv__source {
  font-weight: 600;
  color: var(--cm-rv-text);
}

.cm-rv__date {
  color: var(--cm-rv-muted);
  white-space: nowrap;
}

/* Stars */

.cm-rv__stars {
  display: flex;
  gap: 3px;
  margin: 14px 0 14px;
}

.cm-rv__star {
  width: 18px;
  height: 18px;
  display: block;
  fill: var(--cm-rv-star-off, #DDE3EC);
}

.cm-rv__star.is-on {
  fill: var(--cm-rv-star, #FF786E);
}

/* Text */

.cm-rv__title {
  margin: 0 0 8px;
  font-size: 16px;
  line-height: 1.35;
  font-weight: 700;
  color: var(--cm-rv-text);
}

.cm-rv__quote {
  margin: 0 0 20px;
  padding: 0;
  border: 0;
  background: none;
  quotes: "\201C" "\201D";
}

.cm-rv__quote p {
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
  color: var(--cm-rv-text);
}

.cm-rv__quote p::before { content: open-quote; }
.cm-rv__quote p::after { content: close-quote; }

/* Reviewer */

.cm-rv__person {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--cm-rv-muted);
}

.cm-rv__name {
  font-size: 15px;
  font-weight: 600;
  color: var(--cm-rv-text);
}

/* Link */

.cm-rv__link {
  align-self: flex-start;
  margin-top: 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--cm-rv-text);
  text-decoration: underline;
  text-decoration-color: var(--cm-rv-accent, #00F0B4);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.cm-rv__link:hover,
.cm-rv__link:focus {
  color: var(--cm-rv-text);
  text-decoration-color: var(--cm-rv-text);
}

.cm-rv__link:focus-visible {
  outline: 2px solid var(--cm-rv-accent, #00F0B4);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Disclaimer */

.cm-rv__disclaimer {
  margin: 28px auto 0;
  max-width: 920px;
  text-align: center;
}

.cm-rv__disclaimer,
.cm-rv__disclaimer p {
  font-size: 12px;
  line-height: 1.5;
  color: var(--cm-rv-muted);
}

.cm-rv__disclaimer p {
  margin: 0 0 6px;
}

.cm-rv__disclaimer p:last-child {
  margin-bottom: 0;
}

/* Responsive */

@media (max-width: 1024px) {
  .cm-rv__grid--cols-3,
  .cm-rv__grid--cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .cm-rv .cm-rv__heading {
    font-size: 26px;
    line-height: 1.3;
  }

  .cm-rv__inner {
    padding-left: 16px;
    padding-right: 16px;
  }

  .cm-rv__grid,
  .cm-rv__grid--cols-2,
  .cm-rv__grid--cols-3,
  .cm-rv__grid--cols-4 {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 28px;
  }

  .cm-rv__card {
    padding: 20px;
  }

  .cm-rv__quote p {
    font-size: 16px;
  }

  /* Swipe row. CSS scroll snap, no script, no layout shift.
     The row breaks out of the inner padding so the first card lines up
     with the rest of the page content while the next card peeks in
     from the right edge, which is what signals that it scrolls. */
  .cm-rv__grid--swipe {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 86%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 16px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-left: -16px;
    margin-right: -16px;
    padding: 0 16px 4px;
  }

  .cm-rv__grid--swipe::-webkit-scrollbar {
    display: none;
  }

  .cm-rv__grid--swipe .cm-rv__item {
    scroll-snap-align: start;
  }

  /* Progressive enhancement: native scroll dots where the browser
     supports CSS carousel markers. Ignored everywhere else, and the
     row still swipes fine without them. */
  @supports selector(::scroll-marker) {
    .cm-rv__grid--swipe {
      scroll-marker-group: after;
    }

    .cm-rv__grid--swipe::scroll-marker-group {
      display: flex;
      justify-content: center;
      gap: 8px;
      padding-top: 16px;
    }

    .cm-rv__grid--swipe .cm-rv__item::scroll-marker {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: var(--cm-rv-star-off, #DDE4EF);
    }

    .cm-rv__grid--swipe .cm-rv__item::scroll-marker:target-current {
      background-color: var(--cm-rv-text, #051F40);
    }
  }
}