/* wp-content/plugins/notts-osteo-elements/assets/css/testimonial-wall.css
 *
 * The testimonial wall.
 *
 * Author: Sean Burn
 */

/* ---------------------------------------------------------------- the wall
 *
 * CSS columns, not grid. These quotes run from two hundred characters to nearly two thousand, and a
 * row-based grid sizes every card in a row to the tallest of them — one long review would leave two
 * craters beside it. Columns let each card end where its words end.
 *
 * The trade is reading order: columns fill top-to-bottom, then across. For a set of testimonials
 * that has no order to lose, it costs nothing.
 */

.nosteo-wall__grid {
  column-count: 1;
  column-gap: clamp(16px, 1.8vw, 26px);
}

@container nosteo-sec (min-width: 640px) {
  .nosteo-wall__grid { column-count: 2; }
}
@container nosteo-sec (min-width: 1000px) {
  .nosteo-wall__grid--3 { column-count: 3; }
  .nosteo-wall__grid--4 { column-count: 3; }
}
@container nosteo-sec (min-width: 1260px) {
  .nosteo-wall__grid--4 { column-count: 4; }
}

@supports not (container-type: inline-size) {
  @media (min-width: 760px) { .nosteo-wall__grid { column-count: 2; } }
  @media (min-width: 1120px) {
    .nosteo-wall__grid--3, .nosteo-wall__grid--4 { column-count: 3; }
  }
  @media (min-width: 1380px) { .nosteo-wall__grid--4 { column-count: 4; } }
}

/* ---------------------------------------------------------------- a card */

.nosteo-wall__card {
  /* The one rule that makes columns usable: without it a card is guillotined across a column
     break and its second half appears at the top of the next one. */
  break-inside: avoid;
  page-break-inside: avoid;

  position: relative;
  display: flow-root;
  margin: 0 0 clamp(16px, 1.8vw, 26px);
  padding: clamp(22px, 2.4vw, 32px);
  background: var(--nosteo-white);
  border: 1px solid var(--nosteo-hair-soft);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(50, 62, 72, 0.04);
  transition: transform 320ms var(--nosteo-ease), box-shadow 320ms var(--nosteo-ease),
              border-color 320ms var(--nosteo-ease);
}

.nosteo-wall__card:hover {
  transform: translateY(-3px);
  border-color: var(--nosteo-hair);
  box-shadow: 0 18px 40px -22px rgba(50, 62, 72, 0.42);
}

.nosteo-wall__mark {
  display: block;
  width: 26px;
  height: auto;
  margin-bottom: 14px;
  color: var(--nosteo-tint-deep, var(--nosteo-tint));
}

.nosteo-wall__quote {
  margin: 0;
  /* The browser default indents a blockquote; here the card is the indent. */
  padding: 0;
  border: 0;
}
.nosteo-wall__quote p {
  margin: 0 0 0.85em;
  font-size: clamp(15px, 1.4vw, 16.5px);
  line-height: 1.68;
  color: var(--nosteo-ink);
}
.nosteo-wall__quote p:last-child { margin-bottom: 0; }

.nosteo-wall__by {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--nosteo-hair-soft);
}
.nosteo-wall__name {
  font-weight: var(--nosteo-weight-strong);
  font-size: 15px;
  color: var(--nosteo-ink);
}
.nosteo-wall__note {
  font-family: var(--nosteo-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--nosteo-muted);
}

/* ---------------------------------------------------------------- arriving
 *
 * `display: none` rather than opacity for a held card: a hidden-but-present card would still take
 * its place in the column flow and leave a gap where nothing is.
 */

.nosteo-wall__card.is-held { display: none; }

/* Cards that have just been let in rise into place, staggered by their position within the batch
   so a group of six arrives as a sequence rather than a slab. */
.nosteo-wall__card.is-arriving {
  animation: nosteo-wall-in 560ms var(--nosteo-ease) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}

@keyframes nosteo-wall-in {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------- more */

.nosteo-wall__more {
  position: relative;
  display: flex;
  justify-content: center;
  margin-top: clamp(20px, 2.4vw, 34px);
}
.nosteo-wall__more[hidden] { display: none; }

/* Sits above the button so the next batch is already arriving before anyone reaches for it. */
.nosteo-wall__sentinel {
  position: absolute;
  left: 0;
  right: 0;
  top: -320px;
  height: 1px;
  pointer-events: none;
}

.nosteo-wall__btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 13px 28px;
  border: 1px solid var(--nosteo-hair);
  border-radius: 999px;
  background: var(--nosteo-white);
  color: var(--nosteo-ink);
  font-family: var(--nosteo-font);
  font-size: 15px;
  font-weight: var(--nosteo-weight-strong);
  cursor: pointer;
  transition: border-color 200ms var(--nosteo-ease), color 200ms var(--nosteo-ease);
}
/* Colour restated on both states — the theme sets a global button hover fill that beats a single
   class, so a hover rule without `background` and `color` would protect nothing. */
.nosteo-wall .nosteo-wall__btn:hover,
.nosteo-wall .nosteo-wall__btn:focus {
  background: var(--nosteo-white);
  border-color: var(--nosteo-accent);
  color: var(--nosteo-accent);
}

.nosteo-wall__count {
  font-family: var(--nosteo-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--nosteo-muted);
}

@media (prefers-reduced-motion: reduce) {
  .nosteo-wall__card,
  .nosteo-wall__btn { transition: none; }
  .nosteo-wall__card:hover { transform: none; }
  /* Still revealed, just without the travel. */
  .nosteo-wall__card.is-arriving { animation: none; }
}