/* ------------------------------------------------------------------------- *
 * Cyber Readiness Check, unit reviews: the logo card testimonials. Loaded
 * only on the page, after base.css, see vallem_crc_assets() in inc/crc.php.
 *
 * Verbatim from docs/readiness-review/prototype: no crc-page rules of its own
 * (.crc-h2 is in base.css), then parts/reviews.css, then the reviews rules of
 * parts/v2/v2.css. The .logo-testimonials* names stay unscoped, as in the
 * prototype; they load on this page only.
 * Editor-only rules last, under .editor-styles-wrapper.
 * ------------------------------------------------------------------------- */

/* parts/reviews.css */
/* Reviews: Osmo Supply "Logo Card Testimonials", rules and values as in parts/osmo/logo-testimonials.css.
   Deviations are marked "Vallem:" and listed in parts/reviews.md. */

/* Vallem: section wrapper. White band (Nol, 2026-10-10), the card centred on it, padding as the
   price row. The card colour and its track colour are the two values to turn. */
.crc-reviews {
  --rv-card: #D4EAFF;  /* accent-surface: the card reads as a plate on the white band */
  --rv-track: #ffffff; /* dot bars and pause ground: white on the light blue card */
  display: flex;
  justify-content: center;
  padding: clamp(3rem, 6vw, 5.5rem) var(--gutter);
  background-color: #ffffff;
}

.logo-testimonials {
  width: 100%;
  max-width: 80em; /* Vallem: the page's 1280px row width (Osmo: 52em) */
  color: #18181B; /* Vallem: ink. The original inherits a dark body colour; this page's is white. */
}

.logo-testimonials__card {
  display: flex;
  flex-direction: column;
  gap: 3em;
  padding: 3em;
  border-radius: 1.5em;
  background-color: var(--rv-card); /* Vallem: was #ffffff */
}

.logo-testimonials__list {
  display: grid;
}

.logo-testimonials__item {
  grid-area: 1 / 1;
  align-self: start;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2.25em;
  visibility: hidden;
}

.logo-testimonials__item:first-child {
  visibility: visible;
}

[data-logo-testimonials-item][data-logo-testimonials-status="active"],
[data-logo-testimonials-item][data-logo-testimonials-status="leaving"] {
  visibility: visible;
}

[data-logo-testimonials-item][data-logo-testimonials-status="inactive"] {
  visibility: hidden;
}

.logo-testimonials__logo-slot {
  display: flex;
  height: 2em;
  overflow: hidden;
}

.logo-testimonials__logo {
  display: block;
  width: auto;
  height: 100%;
}

/* Vallem: every logo in one ink, as the Osmo demo's currentColor marks. Image logos are the
   customers' own files, turned to a silhouette; the type-only Testudo mark is currentColor. */
img.logo-testimonials__logo {
  filter: brightness(0);
  opacity: 0.88;
}

/* Vallem: Acibadem is a long single-line wordmark; at full slot height it outweighs the rest. */
.logo-testimonials__logo--wide {
  height: 62%;
  align-self: center;
}

.logo-testimonials__quote {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 2.25em;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.logo-testimonials__details {
  display: flex;
  flex-direction: column;
  gap: 0.125em;
}

.logo-testimonials__name {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1.125em;
  line-height: 1.3;
}

.logo-testimonials__role {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1em;
  line-height: 1.3;
  opacity: 0.55;
}

.logo-testimonials__footer {
  display: flex;
  align-items: center;
}

.logo-testimonials__dots {
  display: flex;
  align-items: center;
  margin-left: -0.375em;
}

.logo-testimonials__dot {
  padding: 0.375em;
  border: none;
  background-color: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.logo-testimonials__dot-bar {
  position: relative;
  display: block;
  width: 0.5em;
  height: 0.5em;
  border-radius: 1em;
  background-color: var(--rv-track); /* Vallem: was #d2e2fb */
  overflow: hidden;
  transition: width 0.6s cubic-bezier(0.65, 0, 0.35, 1), background-color 0.3s ease;
}

[data-logo-testimonials-dot][data-logo-testimonials-status="active"] .logo-testimonials__dot-bar {
  width: 2.5em;
}

.logo-testimonials__dot:hover {
  opacity: 0.6;
}

.logo-testimonials__dot:focus-visible {
  opacity: 0.6;
  outline: 0.125em solid currentColor;
  outline-offset: -0.125em;
  border-radius: 1em;
}

.logo-testimonials__dot-fill {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: inherit;
  background-color: #183CDD; /* Vallem: Vallem blue, was #1e6fec */
  transform-origin: left center;
  transform: scaleX(0);
}


/* Vallem: the wider card keeps a quote measure of about 50 characters by growing the type with it. */
@media screen and (min-width: 1100px) {
  .logo-testimonials__card {
    padding: 4em;
  }

  .logo-testimonials__logo-slot {
    height: 2.5em;
  }

  .logo-testimonials__quote {
    font-size: 2.75em;
  }
}

@media screen and (max-width: 767px) {
  .logo-testimonials__card {
    padding: 1.75em;
  }

  .logo-testimonials__quote {
    font-size: 1.625em;
  }
}

/* Pause, added to the Osmo original (WCAG 2.2.2, touch screens have no hover). Same size and
   colour logic as the dots: Vallem blue mark, the dot bar tint as its ground. */
.logo-testimonials__footer { justify-content: space-between; }
.logo-testimonials__pause { width: 2em; height: 2em; padding: 0; border: none; border-radius: 50%; background-color: var(--rv-track); cursor: pointer; display: grid; place-items: center; }
.logo-testimonials__pause::before { content: ""; width: 0.625em; height: 0.75em; background: linear-gradient(90deg, #183CDD 0 35%, transparent 35% 65%, #183CDD 65% 100%); }
.logo-testimonials__pause[aria-pressed="true"]::before { width: 0; height: 0; margin-left: 0.15em; background: none; border-left: 0.6em solid #183CDD; border-top: 0.375em solid transparent; border-bottom: 0.375em solid transparent; }
.logo-testimonials__pause:hover { opacity: 0.7; }
.logo-testimonials__pause:focus-visible { outline: 0.125em solid #183CDD; outline-offset: 0.125em; }


/* parts/v2/v2.css */
.crc-reviews{flex-direction:column; align-items:center; gap:clamp(1.75rem,3vw,2.5rem)}
.crc-reviews .v2-rev-h{color:#18181B; text-align:center; max-width:18em; margin:0} /* ink: the band is white since 2026-10-10 */

/* Editor only. Every item visible and editable, one under the other, instead
   of five stacked in one cell with all but the first hidden. The logos are
   still in their image figures there, and the image block's edit view writes
   height:auto inline on the img. */
.editor-styles-wrapper .crc-reviews .logo-testimonials__list{gap:3em}
.editor-styles-wrapper .crc-reviews .logo-testimonials__item{grid-area:auto; visibility:visible}
.editor-styles-wrapper .crc-reviews .logo-testimonials__logo-slot{overflow:visible}
.editor-styles-wrapper .crc-reviews .logo-testimonials__logo-slot > *{margin:0}
.editor-styles-wrapper .crc-reviews figure.logo-testimonials__logo img{display:block; width:auto; max-width:none; height:100% !important; filter:brightness(0); opacity:.88}