/* Video testimonials carousel (src/components/Testimonials.astro), homepage and /reviews/. */

.ts { position: relative; }
/* Same frame as the problem section (#services .pp-grid): grey #171717 frame butting onto the section lines (margin -8px top,
   8px above, below and between the cards like the problem cards (24px at the sides on phones), #0b0b0b inner panels, 24px padding. */
.ts-sec, main.wrap > .ts-sec { padding-bottom: 0; }
.ts-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * 8px) / 3); grid-auto-rows: 1fr; column-gap: 8px; margin: -8px -8px 0; padding: 8px; list-style: none;
  background: #171717; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 8px; scrollbar-width: none; overscroll-behavior-x: contain; }
.ts-track::-webkit-scrollbar { display: none; }
.ts-card { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 24px; border-radius: 6px; background: #0b0b0b; scroll-snap-align: start; }
.ts-v { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; margin: 0 0 24px; border-radius: 4px; object-fit: cover; background: #141414; }
.ts-q { margin: 0 0 24px; flex: 1; }
.ts-q p { margin: 0; font-family: var(--display); font-size: 20px; line-height: 28px; font-weight: 500; letter-spacing: -0.01em; color: var(--text); text-wrap: pretty; }
.ts-n { margin: 0; font-size: 16px; line-height: 24px; font-weight: 500; color: var(--text); }
.ts-r { margin: 0; font-size: 14px; line-height: 20px; color: var(--muted); }

.ts-nav { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; }   /* sits in the section header, under the subline */
.ts-nav[hidden] { display: none; }
/* the arrows: clearly visible on the black (they were #1a1a1a, near invisible), brighter on hover, dim when there is nowhere to go */
.ts-b { display: inline-grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 999px; background: #2a2a2a; color: #f5f5f3; cursor: pointer;
  transition: background-color 200ms ease-out, opacity 200ms ease-out; }
.ts-b:hover:not(:disabled) { background: #3a3a3a; }
.ts-b:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.ts-b svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ts-b:disabled { opacity: .4; cursor: default; }
/* desktop: the track can be dragged with the mouse (testimonials.js); snapping is held off while dragging */
.ts-track.ts-drag { cursor: grabbing; scroll-snap-type: none; user-select: none; }
@media (hover: hover) and (pointer: fine) { .ts-track { cursor: grab; } }

@media (max-width: 1099.98px) { .ts-track { grid-auto-columns: calc((100% - 8px) / 2.2); } }
@media (max-width: 900px) { .ts-track { margin: -8px calc(var(--gutter, 24px) * -1) 0; padding: 8px var(--gutter, 24px); scroll-padding: 0 var(--gutter, 24px); } .ts-nav { justify-content: flex-start; } }
@media (max-width: 639.98px) {
  .ts-track { grid-auto-columns: 82%; }
  .ts-v { margin-bottom: 16px; }
  .ts-q { margin-bottom: 16px; }
  .ts-q p { font-size: 18px; line-height: 28px; }
}

/* Verified checkmark next to client names (src/components/Verified.astro), used here and on /reviews/. */
.ts-n, .rvc-n { display: flex; align-items: center; gap: 6px; }
.vf { flex: none; width: 16px; height: 16px; }
.vf-b { fill: #0095f6; }
.vf-c { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Written reviews carousel (src/components/TextReviews.astro): the same frame and cards, quotes only, a touch smaller. */
.ts-tx .ts-q p { font-size: 18px; line-height: 28px; }
.ts-by { min-height: 44px; }   /* name and date: the names line up across cards with or without a date */

/* the client's logo at the foot of each review card, in white (any artwork: the filter flattens it), left aligned, one height;
   a card whose logo has not arrived yet keeps the same empty slot, so the names stay level across the row */
.ts-lgo { display: block; width: auto; height: 24px; max-width: 200px; margin-top: 24px; object-fit: contain; object-position: left center;
  filter: brightness(0) invert(1); opacity: .9; }

/* star rating above each written review (src/components/Stars.astro): five stars filled to the value, then the figure */
.stars { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; }
.stars-r { position: relative; display: inline-flex; }
.stars-bg, .stars-fg { display: inline-flex; gap: 2px; }
.stars-fg { position: absolute; left: 0; top: 0; overflow: hidden; white-space: nowrap; }
.stars svg { flex: none; width: 16px; height: 16px; }
.stars-bg svg { fill: rgba(255, 255, 255, .18); }
.stars-fg svg { fill: #f5f5f3; }
.stars-n { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums; }

/* written review cards (25 Oct 2026, Dylan: "the images behind the reviews look terrible - style them nicely, use the
   images as some kind of accent"): a plain card; the brand's photo is a banner at its head with the brand logo over it (a
   quiet #141414 banner with the brand name when there is no photo), then stars, quote and the person. */
.ts-tx { position: relative; }
.ts-ban { position: relative; align-self: stretch; display: grid; place-items: center; height: 112px; margin: -8px -8px 24px; border-radius: 4px; overflow: hidden; background: #141414; isolation: isolate; }
.ts-bgi { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 600ms cubic-bezier(.22, 1, .36, 1); }
.ts-ban:has(.ts-bgi)::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(11, 11, 11, .55); }
.ts-tx:hover .ts-bgi { transform: scale(1.06); }
.ts-bl { max-width: 60%; max-height: 40px; width: auto; height: auto; object-fit: contain; filter: brightness(0) invert(1); }
.ts-bt { font-family: var(--display); font-size: 22px; line-height: 28px; font-weight: 500; letter-spacing: -0.01em; color: var(--text); }
.ts-ft { display: flex; align-items: center; gap: 12px; }
.ts-av { flex: none; width: 40px; height: 40px; border-radius: 999px; object-fit: cover; background: #1a1a1a; }
.ts-ft .ts-by { min-height: 0; }
.ts-tx > .ts-lgo { display: none; }
@media (max-width: 639.98px) { .ts-ban { height: 96px; margin-bottom: 16px; } }