/* JJ Testimonial Block Grid (Standalone) */

/* Base */
.jj-tbg{ gap: var(--jj-gap, 24px); }

/* Card */
.jj-tbg-card{
  display:block;
  border:1px solid rgba(0,0,0,.12);
  border-top:6px solid var(--jj-pill-color, rgba(0,0,0,.12));
  border-radius:8px;
  background:#fff;
  text-decoration:none;
  color:inherit;
  break-inside: avoid;
}
.jj-tbg-inner{ padding: var(--jj-card-pad, 28px 28px 24px); }

/* Pill */
.jj-tbg-pill{
  display:inline-block;
  padding:6px 10px 6px 0;
  border-radius:4px;
  font-size:12px;
  font-weight: 700;
  letter-spacing:.08em;
  text-transform:uppercase;
  border:0px solid rgba(0,0,0,.12);
  margin:0 0 14px;
  color: var(--jj-pill-color);
  background: transparent;
}
.jj-tbg-pill:empty{ display:none; }

/* Quote */
.jj-tbg-quote{
  font-style:italic;
  line-height:1.6;
  margin:0 0 28px;
}
.jj-tbg-quote p{ margin:0; }
.jj-tbg-quote p + p{ margin-top:10px; }
.jj-tbg-quote:before{ content:""; }
.jj-tbg-quote:after{ content:""; }

/* Divider + footer box */
.jj-tbg-divider{
  border-top:1px solid rgba(0,0,0,.12);
  margin-top:18px;
  padding-top:16px;
}
.jj-tbg-footer{
  display:inline-block;
  border:0px solid rgba(0,0,0,.18);
  border-radius:6px;
  padding:10px 2px;
}
.jj-tbg-name{ font-weight:700; }
.jj-tbg-role{ opacity:.85; margin-top:2px;font-size: 12px; }

/* Grid mode (non-masonry) */
.jj-tbg-grid{
  display:grid;
}
.jj-tbg-cols-1{ grid-template-columns: 1fr; }
.jj-tbg-cols-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.jj-tbg-cols-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.jj-tbg-cols-4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1000px){
  .jj-tbg-cols-3, .jj-tbg-cols-4{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .jj-tbg-cols-2, .jj-tbg-cols-3, .jj-tbg-cols-4{ grid-template-columns: 1fr; }
}

/* Span-all in grid mode */
.jj-tbg-grid .jj-tbg-span-all{
  grid-column: 1 / -1;
}

/* Masonry mode (CSS columns) */
.jj-tbg-masonry{
  column-count:2;
  column-gap: var(--jj-gap, 24px);
}
@media (max-width: 640px){
  .jj-tbg-masonry{ column-count:1; }
}

.jj-tbg-masonry .jj-tbg-card{
  width:100%;
  margin: 0 0 var(--jj-gap, 24px) 0;
  transition: .24s ease all;
}
.jj-tbg-card:hover {
	transition: .24s ease all;
	box-shadow: 2px 22px 32px #eee;
}

/* Span-all in masonry mode (supported modern browsers) */
.jj-tbg-masonry .jj-tbg-span-all{
  column-span: all;
  width:100%;
  min-height: 315px;
  margin: var(--jj-gap, 24px) 0;
}