/* Testimonials carousel — minimal styles, designed to match existing theme */
.se-testimonials-grid{display:grid;grid-template-columns:86px 1fr 1fr 1fr 1fr 86px;gap:1.25rem;align-items:center;position:relative}

.se-totem-col{display:flex;align-items:center;justify-content:center}
.se-totem-col .se-totem-image{width:86px;height:auto;max-height:480px;object-fit:contain}

.se-carousel-col{grid-column:2 / span 4}

.se-testimonials-carousel{display:block;overflow:hidden;position:relative;padding:1rem 0}
.se-testimonial-slide{flex:0 0 100%;box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;gap:1rem;padding:1.25rem;background:rgba(255,255,255,0.03);border-radius:12px;border:1px solid rgba(255,255,255,0.04);min-height:120px;position:relative;z-index:2;cursor:pointer}
.se-testimonial-img img{width:84px;height:84px;border-radius:64px;object-fit:cover;border:2px solid rgba(255,255,255,0.06)}
.se-testimonial-inside{flex:1}
.se-testimonial-body{margin-bottom:.5rem}
.se-testimonial-text{color:var(--sd-cream,#f7f0e6);font-size:1rem;line-height:1.5}
.se-testimonial-author{display:block;color:#F9F4EB;font-weight:800;margin-top:.5rem}
.se-testimonial-time{font-size:.85rem;color:rgba(255,255,255,0.6)}
.se-testimonials-controls{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);display:flex;justify-content:space-between;padding:0 1rem;pointer-events:none}
.se-testimonials-controls button{pointer-events:all;background:linear-gradient(180deg, rgba(0,0,0,0.5), rgba(0,0,0,0.25));border:0;padding:.5rem .9rem;border-radius:999px;color:#F9F4EB;cursor:pointer;display:flex;align-items:center;gap:.4rem;font-weight:700;box-shadow:0 6px 24px rgba(0,0,0,0.35)}
.se-testimonials-dots{display:flex;gap:.5rem;justify-content:center;margin-top:.75rem}
.se-testimonials-dot{width:8px;height:8px;background:rgba(255,255,255,0.2);border-radius:99px;display:inline-block}
.se-testimonials-dots{pointer-events:all}
.se-testimonials-dot{cursor:pointer}
.se-testimonials-dot.is-active{background:var(--se-gold)}

/* Removed 4-column layout — carousel shows 3 columns maximum on desktop */
@media(min-width:900px){
  .se-testimonials-carousel{padding:2rem 0}
  /* 3 items on desktop */
  .se-testimonial-slide{flex:0 0 calc(33.333% - 1rem)}
  /* horizontal layout on desktop: small avatar left, content right */
  .se-testimonial-slide{flex-direction:row;align-items:center}
  .se-testimonial-img{flex:0 0 auto;margin-right:1rem}
  .se-testimonial-inside{flex:1}
  /* grid fallback: 3 columns when JS not active */
  .se-testimonials-carousel:not(.se-carousel-js){grid-template-columns:repeat(3,1fr)}
}

/* Large screens: show 3 cards side-by-side and show brand totem images */
@media(min-width:1200px){
  .se-testimonial-slide{flex:0 0 calc(33.333% - 1rem)}
  .se-testimonials-carousel{gap:1.5rem}
  /* keep totem columns inline inside the grid on large screens */
  .se-totem-col{pointer-events:none}
}

@media(min-width:1400px){
  /* extra-large screens: show 4 cards */
  .se-testimonial-slide{flex:0 0 calc(25% - 1rem)}
  .se-testimonials-wrapper{padding:0 120px}
  .se-testimonials-carousel:not(.se-carousel-js){grid-template-columns:repeat(4,1fr)}
}

@media(max-width:1199px){
  /* hide the totems on smaller screens */
  .se-totem-col{display:none}
  /* collapse grid to a single centered carousel column */
  .se-testimonials-grid{grid-template-columns:1fr;}
  .se-carousel-col{grid-column:1}
}

/* make the carousel overflow hidden and nicely centered */
.se-testimonials-wrapper .se-testimonials-carousel{will-change:transform}

.se-testimonials-controls button svg{width:18px;height:18px}

.se-testimonial-card{display:flex;flex-direction:column;justify-content:space-between}

.se-testimonial-img img{width:64px;height:64px;border-radius:50%;}

/* inner moving track inside the viewport */
.se-testimonials-track{display:flex;align-items:stretch;gap:inherit;will-change:transform}

/* When JS is present the carousel switches into 'track' mode; default grid layout is a graceful fallback */
.se-testimonials-carousel.se-carousel-js{display:block;overflow:hidden}
.se-testimonials-carousel.se-carousel-js .se-testimonials-track{display:flex}

/* ensure the carousel viewport hides overflow and centers content */
.se-testimonials-carousel{overflow:hidden}

/* Mobile safeguard: if JS miscalculates, show stacked slides so testimonials are visible.
   This keeps the desktop carousel intact but provides a reliable, accessible fallback
   on narrow screens where touch/swipe may be flaky. */
@media (max-width: 599px){
  /* Keep the stacked fallback only when JS is NOT available. When JS is present we want
     the carousel 'track' layout active so the scripts can display a single swipeable slide. */
  .se-testimonials-carousel:not(.se-carousel-js) .se-testimonials-track{ display: block !important; transform: none !important; width: auto !important; }
  .se-testimonials-carousel:not(.se-carousel-js) .se-testimonial-slide{ display:block !important; flex: none !important; width: auto !important; max-width: none !important; margin-bottom: 1rem !important; }
  /* keep dots visible below the stacked list */
  .se-testimonials-dots{ position: relative !important; margin-top: .75rem !important; }
}

/* Make mobile testimonial cards more solid to avoid multiple translucent layers showing through
   when the hero image is visible behind the list. This gives a single-card feeling on phones. */
@media (max-width: 599px){
  .se-testimonial-slide{ background: rgba(13,13,13,0.6) !important; border: 1px solid rgba(255,255,255,0.06) !important; }
  .se-testimonial-text{ color: rgba(249,244,235,0.95) !important; }
}

/* Defensive: if JS briefly miscalculates widths, ensure each slide cannot expand beyond viewport
   so the track never completely hides a slide. This keeps one readable slide in view on phones. */
@media (max-width: 599px){
  .se-testimonials-carousel.se-carousel-js .se-testimonial-slide{ flex: 0 0 92vw !important; max-width: 92vw !important; margin-left:auto !important; margin-right:auto !important; }
}