/*
 Theme Name:   trendz Child Theme
 Theme URI:    https://xingbell.com/
 Description:  Use this child theme to extend Bricks.
 Author:       trendz
 Author URI:   https://xingbell.com/
 Template:     trendz
 Version:      2.4.1
 Text Domain:  trendz
*/

.bricks-is-frontend .fade-up {
  opacity: 0;
  transform: translateY(24px);
}

.bricks-is-frontend .fade-up.is-in {
  animation: fadeUp 0.6s ease forwards;
  animation-delay: var(--d, 0s);
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bricks-is-frontend .fade-up {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* Column class: hover anywhere on the card to zoom its image. */
.bricks-is-frontend .hover-zoom {
  --hover-zoom: 1.08;
  transition: box-shadow 0.3s ease;
}

.bricks-is-frontend .hover-zoom:hover {
  box-shadow: 0 10px 28px rgba(36, 33, 38, 0.12);
}

.bricks-is-frontend .hover-zoom :has(> .brxe-image) {
  overflow: hidden;
  line-height: 0;
}

.bricks-is-frontend .hover-zoom .brxe-image {
  display: block;
}

.bricks-is-frontend .hover-zoom img.brxe-image,
.bricks-is-frontend .hover-zoom .brxe-image img {
  display: block;
  width: 100%;
  transition: transform 0.45s ease;
}

.bricks-is-frontend .hover-zoom:hover img.brxe-image,
.bricks-is-frontend .hover-zoom:hover .brxe-image img {
  transform: scale(var(--hover-zoom));
}

.bricks-is-frontend .hover-zoom .brxe-text-link .icon {
  transition: transform 0.3s ease;
}

.bricks-is-frontend .hover-zoom:hover .brxe-text-link .icon {
  transform: translateX(6px);
}

@media (prefers-reduced-motion: reduce) {
  .bricks-is-frontend .hover-zoom img.brxe-image,
  .bricks-is-frontend .hover-zoom .brxe-image img {
    transition: none;
  }

  .bricks-is-frontend .hover-zoom:hover img.brxe-image,
  .bricks-is-frontend .hover-zoom:hover .brxe-image img {
    transform: none;
  }

  .bricks-is-frontend .hover-zoom {
    transition: none;
  }

  .bricks-is-frontend .hover-zoom .brxe-text-link .icon {
    transition: none;
  }

  .bricks-is-frontend .hover-zoom:hover .brxe-text-link .icon {
    transform: none;
  }
}

/* Limit text to a set number of lines. Add the class on the text element itself. */
.line-clamp-2,
.line-clamp-3,
.line-clamp-5,
.line-clamp-7,
.line-clamp-9,
.line-clamp-11 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.line-clamp-2 { -webkit-line-clamp: 2; }
.line-clamp-3 { -webkit-line-clamp: 3; }
.line-clamp-5 { -webkit-line-clamp: 5; }
.line-clamp-7 { -webkit-line-clamp: 7; }
.line-clamp-9 { -webkit-line-clamp: 9; }
.line-clamp-11 { -webkit-line-clamp: 11; }

/* Hero slider (home): keep the 3336×1248 banner fully visible.

   The slide background uses `background-size: cover`, so any box whose aspect
   ratio differs from 2.673:1 has to crop. Height = width / 2.673 works at every
   width, unlike per-breakpoint heights (718px is only exact at 1920px wide,
   539px only at 1440px; both crop more the further the viewport is from that).

   Below 1280px the copy block needs ~461px, which the image ratio can't give
   (1280 / 2.673 = 479), so smaller screens keep the Bricks fixed height. */
@media (min-width: 1280px) {
  .fb-hero-sync__slider {
    height: auto !important;
    aspect-ratio: 3336 / 1248; /* = 2.673:1 */
  }

  /* Splide writes an inline `height: 600px` on each slide, hence !important. */
  .fb-hero-sync__slider .splide__track,
  .fb-hero-sync__slider .splide__list,
  .fb-hero-sync__slider .splide__slide {
    height: 100% !important;
  }
}