/* Theme variables */
.tsn{
  --tsn-bg:#8b5a1e;
  --tsn-color:#fff;
  --tsn-radius:0;           /* keep flat like your mock */
  --tsn-maxw: 980px;        /* quote width */
  position: relative;
  color: var(--tsn-color);
  background: var(--tsn-bg);
}

/* Grid with overlay arrows */
.tsn{
  display:grid;
  grid-template-columns: 48px 1fr 48px; /* arrow / track / arrow */
  align-items:center;
  padding: 0;
}

/* Track uses scroll-snap; single slide per view */
.tsn-track{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:100%;
  gap:0;
  padding: 0px 8px;
  scroll-behavior:smooth;
  outline: none;
}

/* Hide scrollbar for WebKit (Chrome/Safari/Edge) */
.tsn-track::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for Firefox */
.tsn-track {
  scrollbar-width: none;  /* Firefox */
}

/* Slide content centered */
.tsn-slide{
  scroll-snap-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  max-width: var(--tsn-maxw);
  margin: 0 auto;
  padding: 8px 16px 18px;
  background: transparent;
  border-radius: var(--tsn-radius);
}

.tsn-quote{
  margin: 0 0 10px;
  font-size: 18px;
  line-height: 1.5;
  font-style: italic;
}
.tsn-author{
 font-size:18px;
}

/* Triangle arrows (no circles) */
.tsn-arrow{
  position:relative;
  width: 48px;
  height: 48px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--tsn-color);
}
.tsn-arrow::before{
  content:"";
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  width:0; height:0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}
.tsn-prev::before{
  left: 16px;
  border-right: 12px solid var(--tsn-color); /* ◀ */
}
.tsn-next::before{
  right: 16px;
  border-left: 12px solid var(--tsn-color);  /* ▶ */
}

/* Hide arrows on small screens; swipe still works */
@media (max-width: 640px){
  .tsn { grid-template-columns: 1fr; }
  .tsn-arrow{ display:none; }
}