/* =================================================
   TESTIMONIALS WALL
   Display grid for /testimonials/. Scoped under .tw-* so it doesn't touch
   the rest of the site. Intentionally brutalist (hard offset shadow, thick
   ink border, square corners) to match the testimonial *form* (testimonial.css)
   it pairs with. Brand colours/fonts come from base.css :root tokens; the
   component-specific brutalist values are defined once below so the card and
   any future additions stay in sync.
   ================================================= */

.tw-grid {
  --tw-paper: #fffdf8;                 /* warm paper tone, matches --tf-paper */
  --tw-border: 2.5px solid var(--ink);
  --tw-shadow: 5px 5px 0 var(--ink);

  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.6rem;
  /* Wider cards: a larger minimum track means fewer, roomier columns (about two
     on a typical desktop, three on very wide screens) instead of a row of thin
     ones. auto-fit collapses empty tracks so a short wall still fills the row. */
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
}

/* Cap the wall width on large screens so the cards stay a comfortable reading
   measure rather than stretching edge to edge (the events-root shell goes
   near full-bleed on desktop). */
@media (min-width: 1100px) {
  .tw-grid {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
  }
}

.tw-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.2rem, 3vw, 1.6rem);
  background: var(--tw-paper);
  border: var(--tw-border);
  box-shadow: var(--tw-shadow);
}

/* Cast testimonials sit in their own sub-wall under the "From our cast"
   divider, and read as the warmer "insider" voice. They're tinted blue to set
   them apart from the (independent, more credible to a newcomer) public cards,
   which keep the default warm-paper + yellow look and lead the page. */
.tw-card--cast {
  --tw-paper: color-mix(in srgb, var(--blue) 6%, #fff);
  --tw-shadow: 5px 5px 0 var(--blue);
  border-color: var(--blue);
}

.tw-card--cast .tw-quote::before {
  color: var(--blue);
}

/* Divider introducing the cast sub-wall: a hairline rule with a centred label
   sitting over it. */
.tw-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 2.6rem 0 0.4rem;
}

.tw-divider::before,
.tw-divider::after {
  content: "";
  flex: 1;
  height: 2px;
  background: var(--ink);
}

.tw-divider-label {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  color: var(--blue);
  white-space: nowrap;
}

@media (min-width: 1100px) {
  .tw-divider {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
  }
}

.tw-quote {
  margin: 0;
  position: relative;
  flex: 1;
}

/* Oversized opening quote mark as a soft brand flourish. */
.tw-quote::before {
  content: "\201C";
  position: absolute;
  top: -0.5rem;
  left: -0.25rem;
  font-family: var(--font-display);
  font-size: 3.2rem;
  line-height: 1;
  color: var(--yellow);
  z-index: 0;
}

.tw-quote p {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--ink);
}

/* Space between paragraphs when a story has more than one. */
.tw-quote p + p {
  margin-top: 0.7rem;
}

.tw-attr {
  border-top: 2px solid var(--ink);
  padding-top: 0.8rem;
}

.tw-name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
}

.tw-sub {
  margin: 0.15rem 0 0;
  font-size: 0.88rem;
  color: var(--text-soft);
}

.tw-social {
  display: inline-block;
  margin-top: 0.4rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--blue);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.tw-social:hover,
.tw-social:focus-visible {
  border-bottom-color: var(--blue);
}

/* Closing call to action: invite the reader to add their own. */
.tw-cta {
  margin-top: 2.5rem;
  text-align: center;
}

.tw-cta-text {
  margin: 0 0 1rem;
  font-size: 1rem;
  color: var(--text-muted);
}