/* Ben, 2026-08-31: "I don't really like Read more there — display the full quotes and make it a little bit longer." The full text is ALREADY in the DOM; GoHighLevel clamps it with CSS and adds a link. So this is not a content change, it is deleting a clamp. */ /* Ben, 2026-08-31, after seeing both: *"it would look better if this just says Read more and all the cards are the same size."* So the clamp and the link stay — the earlier version unclamped them and the cards ended up three different heights, which looked worse than the truncation it fixed. What was missing was never the full text; it was equal height. ⚠️ AND THE UNCLAMP MUST NEVER TOUCH LAYOUT CONTAINERS. The first attempt matched [class*="content"], which caught `.testimonial-carousel-content` — the 3-column GRID — and forced display:block on it, collapsing three cards into one. */ /* Equal height has to be set at BOTH levels — the item wrapper and the card inside it. Setting it on one alone left the cards 291px and 266px, which is the ragged look Ben flagged. */ /* Ben, 2026-08-31: "make the review cards a little bit longer, more like a 4:5 … one or two more lines". The clamp comes from GoHighLevel at 4 lines; 6 plus a min-height gives the taller proportion without letting one long quote set the height for all three. */ /* 8 lines, not 6 — at 360px the card had a band of empty space under a 6-line quote, which is the "fill the box" Ben asked for. Anything longer still truncates to "Read more", so the cards stay uniform. */ /* ⚠️ LEFT AT GOOGLE HIGHLEVEL'S OWN PROPORTIONS ON PURPOSE. An 8-line clamp and a 360px min-height were tried and reverted — Ben, 2026-08-31: *"put it back at the squares, it looked better"*, because a short interview then sat in a tall box looking stranded. The full quote is still injected, so "Read more" now reveals a complete sentence rather than one that stops mid-word; only the card geometry is theirs. */ [id^="testimonial-"] .testimonial-item, [id^="testimonial-"] .testimonial-grid-item, [id^="testimonial-"] [class*="grid-item"] { height: 100% !important; display: flex !important; flex-direction: column !important; } /* ⚠️ `flex: 0 0 auto` HERE WAS THE BUG — it forbade the card from growing, so the columns stayed 266px and 291px no matter what height:100% said above. The card must GROW to fill the stretched grid row; only the footer block inside it should hold its size. */ [id^="testimonial-"] .testimonial-item > .testimonial-grid-item, [id^="testimonial-"] .testimonial-item > * { flex: 1 1 auto !important; } [id^="testimonial-"] .slide-testimonials, [id^="testimonial-"] .testimonial-carousel-content { align-items: stretch !important; } [class*="testimonial"] [class*="grid-item"] { height: auto !important; } [id^="testimonial-"] .carousel__slide { min-height: 0 !important; } /* ⚠️ THE TESTIMONIAL CAROUSEL DOES NOT ADVANCE, AND THE JS IS NOT THE REASON. Measured on next.skiller.app 2026-08-31: the shim sets `translateX(-100%)` on the track correctly, but the track measures **0px wide**, so -100% of 0 is 0 and nothing moves. ⛔ AND THE OBVIOUS FIX MADE IT WORSE. Forcing `display:flex; width:100%` on the track and `flex:0 0 100%` on the slides took the SLIDES to 0px as well — the zero width comes from further up the chain, not from the track. Reverted rather than left in: a change that makes a broken thing more broken is worse than the bug. The real cause is somewhere in `.testimonial-carousel` / `.testimonial-container` sizing that went with the framework, and it needs measuring up the ancestor chain, not another guess at the leaf. */ /* The arrows are pointer-events:none on the track so the slides stay clickable; the buttons themselves have to opt back in or nothing is clickable at all. */ .carousel__arrow { pointer-events: none; } .carousel__arrow > * { pointer-events: auto; cursor: pointer; } .carousel__pagination { cursor: pointer; } /* A