/* Testimonials & Videos Grid Section */

.testimonials-videos-grid {
  position: relative;
  width: 100%;
}

/* Gradient Overlays */
.testimonials-videos-grid .gradient-overlay {
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
  z-index: 1;
}

.testimonials-videos-grid .gradient-overlay--top {
  top: 0;
  height: var(--gradient-height, 150px);
  background: linear-gradient(to bottom, var(--gradient-color, #000) 0%, transparent 100%);
}

.testimonials-videos-grid .gradient-overlay--bottom {
  bottom: 0;
  height: var(--gradient-height, 150px);
  background: linear-gradient(to top, var(--gradient-color, #000) 0%, transparent 100%);
}

.testimonials-videos-grid-inner {
  position: relative;
  width: 100%;
  z-index: 2;
}

/* Section Heading */
.testimonials-videos-grid .section-heading {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.testimonials-videos-grid .section-heading.text-left {
  text-align: left;
}

.testimonials-videos-grid .section-heading.text-center {
  text-align: center;
}

.testimonials-videos-grid .section-heading.text-right {
  text-align: right;
}

@media (min-width: 640px) {
  .testimonials-videos-grid .section-heading {
    display: flex !important;
    flex-direction: column !important;
    align-items: center;
    gap: var(--space-md);
  }
  
  .testimonials-videos-grid .section-heading.text-left {
    align-items: flex-start;
  }
  
  .testimonials-videos-grid .section-heading.text-center {
    align-items: center;
  }
  
  .testimonials-videos-grid .section-heading.text-right {
    align-items: flex-end;
  }
  
  .testimonials-videos-grid .section-heading h2 {
    margin: 0;
  }
}

/* Section Description */
.testimonials-videos-grid .section-description {
  width: 100%;
  max-width: 800px;
  margin-top: 0;
}

@media (min-width: 640px) {
  .testimonials-videos-grid .section-description {
    max-width: 800px;
    width: 100%;
  }
}

.testimonials-videos-grid .section-description p {
  margin: 0;
  line-height: 1.6;
  text-align: inherit;
}

/* Cards Grid - Masonry Layout (JS-powered even distribution) */
.testimonials-videos-grid .cards-grid.layout-masonry {
  display: flex;
  gap: var(--space-xl);
  width: 100%;
}

/* Mobile Horizontal Scroll Mode */
@media (max-width: 767px) {
  /* Don't clip - let cards be visible as they scroll */
  .testimonials-videos-grid {
    overflow: visible;
  }
  
  .testimonials-videos-grid .container,
  .testimonials-videos-grid .container-full {
    overflow: visible;
  }
  
  .testimonials-videos-grid .testimonials-videos-grid-inner {
    overflow: visible;
  }
  
  .testimonials-videos-grid .cards-grid.layout-masonry.mobile-scroll {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: var(--space-md, 16px);
    padding-bottom: var(--space-md);
    /* Left side: extend scroll area past container padding so cards are visible */
    /* but use scroll-padding to maintain visual gap when snapping */
    margin-left: calc(-1 * var(--space-md, 16px));
    padding-left: var(--space-md, 16px);
    scroll-padding-left: var(--space-md, 16px);
    /* Right side: mirror the left gutter. A -100vw/100vw pair made the box
       wider than the viewport (391px at 375px), so the whole page scrolled
       sideways; this matches the collection-tiles-grid rail convention. */
    margin-right: calc(-1 * var(--space-md, 16px));
    padding-right: var(--space-md, 16px);
    /* Hide scrollbar but keep functionality */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  
  .testimonials-videos-grid .cards-grid.layout-masonry.mobile-scroll::-webkit-scrollbar {
    display: none;
  }
  
  /* Override masonry columns in mobile scroll mode */
  .testimonials-videos-grid .cards-grid.layout-masonry.mobile-scroll .masonry-column {
    display: contents;
  }
  
  /* Cards in mobile scroll mode - fixed width so next card peeks in. */
  .testimonials-videos-grid .cards-grid.layout-masonry.mobile-scroll .testimonial-card,
  .testimonials-videos-grid .cards-grid.layout-masonry.mobile-scroll .video-card {
    flex: 0 0 auto;
    width: 250px;
    min-width: 250px;
    max-width: 250px;
    scroll-snap-align: start;
  }
}

/* Tablet masonry: the .layout-masonry rule removes the cards' own
   max-width (296px) so they stretch to fill the column. With
   columns_tablet=1 that means each card occupies the full container
   width — making a 9:16 video card absurdly tall. Cap it back
   below desktop so cards stay proportional. */
@media (min-width: 768px) and (max-width: 1023px) {
  .testimonials-videos-grid .cards-grid.layout-masonry .testimonial-card,
  .testimonials-videos-grid .cards-grid.layout-masonry .video-card {
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Card typography: below desktop the cards are narrower, so the
   `text-lg` review copy looks oversized relative to body text in
   neighboring sections. Drop card text down to the theme's body
   sizing on tablet, and one step smaller on mobile. */
@media (max-width: 1023px) {
  .testimonials-videos-grid .review-text {
    font-size: var(--font-size-base) !important;
    line-height: 1.55;
  }
  .testimonials-videos-grid .testimonial-author-name {
    font-size: var(--font-size-sm) !important;
  }
}

@media (max-width: 767px) {
  .testimonials-videos-grid .review-text {
    font-size: var(--font-size-sm) !important;
    line-height: 1.5;
  }
}

/* Masonry columns */
.testimonials-videos-grid .cards-grid.layout-masonry .masonry-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  min-width: 0; /* Prevent flex items from overflowing */
}

/* Cards within masonry columns */
.testimonials-videos-grid .cards-grid.layout-masonry .testimonial-card,
.testimonials-videos-grid .cards-grid.layout-masonry .video-card {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

/* Testimonial cards use flex for internal layout */
.testimonials-videos-grid .cards-grid.layout-masonry .testimonial-card {
  display: flex;
}

/* Video cards use block */
.testimonials-videos-grid .cards-grid.layout-masonry .video-card {
  display: block;
}

/* Testimonial Card - Simple 3-row layout */
.testimonials-videos-grid .testimonial-card {
  width: 100%;
  max-width: 296px;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  box-sizing: border-box;
  align-self: stretch;
}

/* Fixed Height Mode (default) - Testimonial cards match video card aspect ratio */
.testimonials-videos-grid .cards-grid.layout-masonry .testimonial-card {
  /* overflow: hidden; */
}

/* Content-Based Height - Cards size to their content */
.testimonials-videos-grid .cards-grid.layout-masonry.content-based-height .testimonial-card {
  aspect-ratio: auto;
  overflow: visible;
}


/* Ensure border radius utilities work on testimonial cards */
.testimonials-videos-grid .testimonial-card.rounded-none { border-radius: 0 !important; }
.testimonials-videos-grid .testimonial-card.rounded-sm { border-radius: var(--radius-sm) !important; }
.testimonials-videos-grid .testimonial-card.rounded { border-radius: var(--radius-base) !important; }
.testimonials-videos-grid .testimonial-card.rounded-md { border-radius: var(--radius-md) !important; }
.testimonials-videos-grid .testimonial-card.rounded-lg { border-radius: var(--radius-lg) !important; }
.testimonials-videos-grid .testimonial-card.rounded-xl { border-radius: var(--radius-xl) !important; }
.testimonials-videos-grid .testimonial-card.rounded-2xl { border-radius: var(--radius-2xl) !important; }
.testimonials-videos-grid .testimonial-card.rounded-3xl { border-radius: var(--radius-3xl) !important; }

.testimonials-videos-grid .testimonial-card.card-with-shadow {
  transition: opacity 0.6s ease-out, transform 0.6s ease-out, box-shadow 0.3s ease;
}

.testimonials-videos-grid .testimonial-card.card-with-shadow:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1) !important;
}

.testimonials-videos-grid .testimonial-card:not(.card-with-shadow):hover {
  transform: none;
  box-shadow: none !important;
}

/* Stars Rating - Row 1 */
.testimonials-videos-grid .stars-rating {
  display: flex;
  gap: var(--space-xs);
  margin-bottom: var(--space-sm);
  flex-shrink: 0;
}

/* Star Sizes */
.testimonials-videos-grid .stars-rating.stars-size-small .star {
  font-size: 16px;
}

.testimonials-videos-grid .stars-rating.stars-size-medium .star {
  font-size: 24px;
}

.testimonials-videos-grid .stars-rating.stars-size-large .star {
  font-size: 32px;
}

.testimonials-videos-grid .star {
  line-height: 1;
  display: inline-block;
  position: relative;
}

/* Half star styling */
.testimonials-videos-grid .stars-rating.stars-size-small .star-half {
  width: 16px;
  height: 16px;
  line-height: 16px;
}

.testimonials-videos-grid .stars-rating.stars-size-medium .star-half {
  width: 24px;
  height: 24px;
  line-height: 24px;
}

.testimonials-videos-grid .stars-rating.stars-size-large .star-half {
  width: 32px;
  height: 32px;
  line-height: 32px;
}

.testimonials-videos-grid .star-half {
  display: inline-block;
  position: relative;
}

.testimonials-videos-grid .star-half-left {
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
  display: inline-block;
  text-align: left;
}

.testimonials-videos-grid .star-half-right {
  position: absolute;
  right: 0;
  top: 0;
  width: 50%;
  height: 100%;
  opacity: 0.3;
  display: inline-block;
  text-align: right;
}

/* Star empty color is controlled by the star_color_empty setting */

/* Review Text - Row 2 */
.testimonials-videos-grid .review-text {
  margin: 0;
  line-height: 1.6;
}

/* Typing cursor animation */
.testimonials-videos-grid .typing-cursor {
  display: inline;
  animation: blink 0.7s infinite;
  margin-left: 2px;
  font-weight: normal;
  transition: opacity 0.3s ease;
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* Author Info */
.testimonials-videos-grid .testimonial-author {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding-top: var(--space-md);
}

.testimonials-videos-grid .testimonial-author-avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
}

.testimonials-videos-grid .testimonial-author-avatar .author-avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.testimonials-videos-grid .testimonial-author-name {
  line-height: 1.3;
}


/* Video Card */
.testimonials-videos-grid .video-card {
  width: 100%;
  max-width: 296px;
  position: relative;
  overflow: hidden;
  aspect-ratio: 9 / 16;
  cursor: pointer;
  box-shadow: none !important;
}

/* Ensure border radius utilities work on video cards */
.testimonials-videos-grid .video-card.rounded-none { border-radius: 0 !important; }
.testimonials-videos-grid .video-card.rounded-sm { border-radius: var(--radius-sm) !important; }
.testimonials-videos-grid .video-card.rounded { border-radius: var(--radius-base) !important; }
.testimonials-videos-grid .video-card.rounded-md { border-radius: var(--radius-md) !important; }
.testimonials-videos-grid .video-card.rounded-lg { border-radius: var(--radius-lg) !important; }
.testimonials-videos-grid .video-card.rounded-xl { border-radius: var(--radius-xl) !important; }
.testimonials-videos-grid .video-card.rounded-2xl { border-radius: var(--radius-2xl) !important; }
.testimonials-videos-grid .video-card.rounded-3xl { border-radius: var(--radius-3xl) !important; }

.testimonials-videos-grid .video-card.card-with-shadow {
  transition: opacity 0.6s ease-out, transform 0.6s ease-out, box-shadow 0.3s ease;
}

.testimonials-videos-grid .video-card.card-with-shadow:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2) !important;
}

.testimonials-videos-grid .video-card:not(.card-with-shadow):hover {
  transform: none;
  box-shadow: none !important;
}

.testimonials-videos-grid .video-thumbnail-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.testimonials-videos-grid .video-thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Video Element (native HTML5 video) */
.testimonials-videos-grid .video-element {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

/* Play Button Overlay */
.testimonials-videos-grid .play-button-overlay {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.testimonials-videos-grid .video-card:hover .play-button-overlay {
  background-color: rgba(0, 0, 0, 0.9);
  transform: scale(1.1);
}

.testimonials-videos-grid .play-icon {
  width: 20px;
  height: 20px;
  color: white;
  flex-shrink: 0;
}


/* Background Image Handling */
/* Section background - spans full width regardless of container */
.testimonials-videos-grid {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Container inner background - only for container-specific background image */
.testimonials-videos-grid-inner {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Mobile Scroll Navigation */
.testimonials-videos-grid .mobile-scroll-nav {
  display: none;
}

@media (max-width: 767px) {
  .testimonials-videos-grid .mobile-scroll-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--space-md, 16px);
    padding: var(--space-sm, 8px) var(--space-md);
  }
  
  /* Reversed layout: Dots left, Arrows right */
  .testimonials-videos-grid .mobile-scroll-nav.controls-layout-reversed {
    flex-direction: row-reverse;
  }
  
  .testimonials-videos-grid .mobile-scroll-nav.controls-layout-reversed .scroll-dots {
    justify-content: flex-start;
  }
  
  /* Pagination Dots - matches video-carousel style */
  .testimonials-videos-grid .scroll-dots {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--space-sm, 8px);
  }
  
  .testimonials-videos-grid .scroll-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full, 9999px);
    background: rgba(0, 0, 0, 0.3);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all 0.3s ease;
  }
  
  .testimonials-videos-grid .scroll-dot:hover {
    background: rgba(0, 0, 0, 0.5);
    transform: scale(1.2);
    cursor: pointer;
  }
  
  .testimonials-videos-grid .scroll-dot.active {
    width: 32px;
    background: rgba(0, 0, 0, 0.8);
  }
  
  .testimonials-videos-grid .scroll-dot:focus {
    outline: 2px solid rgba(0, 0, 0, 0.5);
    outline-offset: 2px;
  }
  
  /* Navigation Arrows - matches video-carousel style */
  .testimonials-videos-grid .scroll-arrows {
    display: flex;
    align-items: center;
    gap: var(--space-sm, 8px);
  }
  
  .testimonials-videos-grid .scroll-arrow {
    /* 44px, not 40: this rule only applies in the mobile scroll layout, so it is
       a touch target and 44x44 is the minimum comfortable size. */
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full, 9999px);
    /* Give the button an edge.

       It was a white circle on a cream page with no border, a 10% drop shadow and
       opacity 0.7 — so the only thing that actually read was the shadow, which is
       why the client described it as "they don't have an outline but do have a
       shadow, it's like you can see half of the button".

       A 1px ring in the muted token measures 4.89:1 against the cream #F9F7F2,
       comfortably over the 3:1 WCAG minimum for a non-text control boundary,
       where the old shadow was nowhere near it. The shadow goes: this brand is
       flat and warm, and the ring is doing the job the shadow was failing at.
       Full opacity too — the 0.7 was the other half of the "half a button" look;
       the disabled state below still dims, so the affordance is unchanged. */
    border: 1px solid var(--clr-text-muted, #6C6C6C);
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 1;
    flex-shrink: 0;
  }
  
  .testimonials-videos-grid .scroll-arrow:hover:not(:disabled) {
    transform: scale(1.1);
    border-color: var(--clr-primary, #49473E);
    cursor: pointer;
  }
  
  .testimonials-videos-grid .scroll-arrow:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }
  
  .testimonials-videos-grid .scroll-arrow:focus {
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }
  
  .testimonials-videos-grid .scroll-arrow svg {
    width: 24px;
    height: 24px;
  }
}