/* The testimonial wall: a dense field of customer quote cards on the light blue ground, the same cards as the
   customer-stories page (solution.css .eds-vc__card), set in columns so many are visible at once. */

.eds-wall { background: var(--eds-mist); padding: 56px var(--eds-gutter-phone) 64px; }
@media (min-width: 600px) { .eds-wall { padding: 72px var(--eds-gutter-tablet) 80px; } }
@media (min-width: 1024px) { .eds-wall { padding: 96px var(--eds-gutter-desktop) 96px; } }
.eds-wall__in { width: 100%; max-width: var(--eds-content-max); margin-inline: auto; }

.eds-wall__head { display: flex; flex-direction: column; gap: 24px; margin: 0 0 36px; }
@media (min-width: 900px) { .eds-wall__head { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 48px; margin-bottom: 48px; } }
.eds-wall__eyebrow { margin: 0 0 12px; font: 600 var(--eds-eyebrow)/var(--eds-eyebrow-lh) var(--eds-font-display); letter-spacing: 1.5px; text-transform: uppercase; color: var(--eds-blue); }
.eds-wall h2 { margin: 0; font: 700 32px/40px var(--eds-font-display); letter-spacing: -.3px; color: var(--eds-navy); text-wrap: balance; }
@media (min-width: 1024px) { .eds-wall h2 { font-size: var(--eds-h2); line-height: var(--eds-h2-lh); } }
.eds-wall__intro { max-width: 40rem; margin: 14px 0 0; font: 400 var(--eds-lead)/var(--eds-lead-lh) var(--eds-font-body); color: var(--eds-navy); }
.eds-wall__count { display: flex; align-items: baseline; gap: 14px; margin: 0; flex: none; }
.eds-wall__count strong { font: 700 56px/56px var(--eds-font-display); letter-spacing: -1px; color: var(--eds-navy); }
.eds-wall__count span { max-width: 10rem; font: 600 15px/20px var(--eds-font-display); color: var(--eds-slate); }

.eds-wall__grid { columns: 1; column-gap: 20px; }
@media (min-width: 700px) { .eds-wall__grid { columns: 2; } }
@media (min-width: 1100px) { .eds-wall__grid { columns: 3; } }
.eds-wall__card { display: block; break-inside: avoid; margin: 0 0 20px; padding: 28px; background: var(--eds-white); }
.eds-wall__mark { display: block; height: 40px; overflow: hidden; font: 400 100px/80px var(--eds-font-quote); color: var(--eds-gold); }
.eds-wall__card blockquote { margin: 8px 0 0; padding: 0; border: 0; font: 600 19px/28px var(--eds-font-display); color: var(--eds-navy); }
.eds-wall__card figcaption { margin-top: 24px; }
.eds-wall__name { display: block; font: 700 16px/24px var(--eds-font-body); color: var(--eds-navy); }
.eds-wall__role { display: block; font: 400 14px/20px var(--eds-font-body); color: var(--eds-slate); }

/* the tags in the count are links */
.eds-wall__count a { color: var(--eds-blue); text-decoration: none; }
.eds-wall__count a:hover, .eds-wall__count a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.eds-wall__count span { max-width: 12rem; }

/* the page for one tag */
.eds-wall--page { padding-top: 56px; }
.eds-wall__chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 36px; }
.eds-wall__chips a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border: 1.5px solid var(--eds-navy); border-radius: var(--eds-radius-pill); background: var(--eds-white); font: 600 15px/22px var(--eds-font-display); color: var(--eds-navy); text-decoration: none; transition: background var(--eds-t-hover) var(--eds-ease), color var(--eds-t-hover) var(--eds-ease); }
.eds-wall__chips a span { font-weight: 500; color: var(--eds-slate); }
.eds-wall__chips a:hover, .eds-wall__chips a.is-current { background: var(--eds-navy); color: var(--eds-white); }
.eds-wall__chips a:hover span, .eds-wall__chips a.is-current span { color: #d6e4ee; }
.eds-wall__pager ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 32px 0 0; padding: 0; list-style: none; }
.eds-wall__pager li { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.eds-wall__pager :is(a, span) { display: inline-block; min-width: 40px; padding: 8px 14px; border: 1.5px solid var(--eds-navy); background: var(--eds-white); font: 600 15px/22px var(--eds-font-display); color: var(--eds-navy); text-align: center; text-decoration: none; }
.eds-wall__pager span.current, .eds-wall__pager a:hover { background: var(--eds-navy); color: var(--eds-white); }
.eds-wall__pager span.dots { border-color: transparent; background: none; }