/* Slick carousel mechanics (arrows, dots, init states). Slick 1.8.1 (CDN) +
   assets/js/carousel.js are enqueued in inc/enqueue.php, so this is live: the
   arrows only appear once carousel.js adds .slick-initialized, which it does
   only when a slide set has more than one slide. */
.carousel-block .ems-slick-container.slick-initialized,
.carousel-block .carousel-arrows {
  position: relative;
}

.carousel-block .ems-slick-container.slick-initialized .slick-arrow,
.carousel-block .carousel-arrows .slick-arrow {  
  width: 40px;
  height: 50px;
  padding: 0 0;
  background-image: none;
    background-color: black;
    -webkit-mask: url("/wp-content/themes/linnworks2026/assets/icons/arrow-right.svg") no-repeat center / contain;
    mask: url("/wp-content/themes/linnworks2026/assets/icons/arrow-right.svg") no-repeat center / contain;
    transition: transform 250ms;
}
.carousel-block .ems-slick-container.slick-initialized .slick-arrow.slick-prev,
.carousel-block .carousel-arrows .slick-arrow.slick-prev {
  transform: rotate(180deg);
}

.carousel-block .ems-slick-container.slick-initialized .slick-arrow:hover,
.carousel-block .carousel-arrows .slick-arrow:hover {
  background-color: var(--wp--preset--color--blue);
}

.carousel-block .ems-slick-container.slick-initialized ul.slick-dots,
.carousel-block .carousel-arrows ul.slick-dots {
  width: 100%;
  list-style: none;
  text-align: center;
  display: inline-flex;
  margin: 15px auto;
  padding: 0;
  align-items: center;
  justify-content: center;
  column-gap: 10px;
}

.carousel-block .ems-slick-container.slick-initialized ul.slick-dots li,
.carousel-block .carousel-arrows ul.slick-dots li {
  display: inline-flex;
}

.carousel-block .ems-slick-container.slick-initialized ul.slick-dots li button,
.carousel-block .carousel-arrows ul.slick-dots li button {
  color: transparent;
  background-color: var(--wp--preset--color--white);
  /* $ems_primary (#28697F) has no close match in the new palette (best hex
     fit was "gray", a poor semantic fit for an interactive dot indicator) —
     mapped to "blue" for role consistency instead. Revisit visually. */
  border: 2px solid var(--wp--preset--color--blue);
  border-radius: 100%;
  width: 15px;
  height: 15px;
  padding: 0;
  overflow: hidden;
}

.carousel-block .ems-slick-container.slick-initialized ul.slick-dots li button:hover,
.carousel-block .carousel-arrows ul.slick-dots li button:hover {
  background-color: var(--wp--preset--color--blue);
  opacity: .6;
}

.carousel-block .ems-slick-container.slick-initialized ul.slick-dots li.slick-active button,
.carousel-block .carousel-arrows ul.slick-dots li.slick-active button {
  background-color: var(--wp--preset--color--blue);
}
.long-quote-text {
    margin-bottom: 2rem;
}
.carousel-block .ems-slick-container {
  opacity: 1;
  transition: 300ms opacity ease-in-out;
}

.carousel-block .ems-slick-container.uninitialized {
  opacity: 0;
  max-height: 0;
}

/* Layout */
.carousel-block {
  padding: 60px 0;
  margin:0 auto;
}

.wp-block-cover .carousel-block {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.carousel-block__inner {
  position: relative;
}

.carousel-block__inner .carousel-arrows {
  position: absolute !important;
  right: 30px;
  bottom: -12px;
  z-index: 999;
  column-gap: 16px;
  display: none;
}

@media (max-width: 1089.98px) {
  .carousel-block__inner .carousel-arrows {
    bottom: 40px;
  }
}

.carousel-block__inner .carousel-type-split + .carousel-arrows {
  bottom: 40px;
}

.carousel-block__inner .slick-initialized + .carousel-arrows {
  display: flex;
}

.carousel-block .carousel-type-split.slick-initialized {
  padding-bottom: 100px;
}

@media (max-width: 1089.98px) {
  .carousel-block .carousel-type-offset.slick-initialized {
    padding-bottom: 100px;
  }
}

.carousel-block .slick-track {
  display: flex !important;
}

@media (min-width: 1090px) {
  .carousel-block .slick-slide {
    height: inherit !important;
  }
}

.carousel-block .slick-list {
  overflow: visible;
}

.carousel-block .carousel-slide {
  background-color: transparent !important;
  width: 100% !important;
}

@media (max-width: 1089.98px) {
  .carousel-block .carousel-slide {
    height: inherit !important;
  }
}

/* The slide's two-column row. Ported from ems-wp bits/_slides.scss, which was
   missed in the first pass — without it the row is laid out only by the theme's
   minimal `.row` shim (display:flex; flex-wrap:wrap, layout/_site.scss). Because
   the image (flex-basis 50%) and the content (flex-basis calc(50% + 15px)) sum to
   more than 100%, and neither may shrink, the content wrapped onto its own line
   and its flex-grow:1 stretched it to full width — image above, dark card below.
   The deliberate 15px overhang is what lets the content overlap the image: it is
   clipped by `overflow:hidden` in the split variant and pulled back by
   translate(-15px, …) in the offset variant. */
.carousel-block .carousel-slide__inner {
  display: flex;
  height: 100%;
}

@media (min-width: 1090px) {
  .carousel-block .carousel-slide__inner {
    flex-wrap: nowrap;
  }
}

.carousel-block .carousel-slide__inner__content {
  width: calc(50% + 15px);
  flex: 1 0 calc(50% + 15px);
  box-shadow: var(--shadow-card);
  background: var(--wp--preset--gradient--darkblue-to-navy);
  border-radius: 10px;
  color: var(--wp--preset--color--white) !important;
  display: flex;
  padding: 50px;
  flex-wrap: wrap;
  align-content: space-between;
  align-items: flex-start;
}

@media (min-width: 1090px) {
  .carousel-block .carousel-slide__inner__content {
    padding: 50px 0;
    flex-wrap: nowrap;
  }

  .carousel-block .carousel-slide__inner__content__container {
    padding: 0 50px;
    flex: 1 0;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
  }
}

@media (max-width: 1089.98px) {
  .carousel-block .carousel-slide__inner__content {
    margin: 0 0;
    width: 100%;
    border-radius: 0 0 10px 10px;
  }
}

@media (max-width: 779.98px) {
  .carousel-block .carousel-slide__inner__content {
    padding: 20px;
  }
}

.carousel-block .carousel-slide__inner__content__container {
  width: 100%;
}

.carousel-block .carousel-slide__inner__content .headshot {
  border-radius: 1000px;
  margin-left: 50px;
  flex: 1 1 20%;
  max-width: 200px;
}

.carousel-block .carousel-slide__inner__content .content p,
.carousel-block .carousel-slide__inner__content .content div {
  font-weight: var(--weight-semibold);
  font-size: 20px;
  line-height: 26px;
}

@media (min-width: 1090px) {
  .carousel-block .carousel-slide__inner__content .content p,
  .carousel-block .carousel-slide__inner__content .content div {
    font-size: 25px;
    line-height: 40px;
  }
}

.carousel-block .carousel-slide__inner__content .content h3 + p {
  font-weight: initial;
  font-size: initial;
}

.carousel-block .carousel-slide__inner__content .content > * {
  color: var(--wp--preset--color--white) !important;
}

.carousel-block .carousel-slide__inner__content .content.has-headline .long-quote-text p {
  line-height: 27px;
  font-size: 20px;
  font-weight: 300;
}

.carousel-block .carousel-slide__inner__content .content .long-quote-text p {
  color: var(--wp--preset--color--white);
}

.carousel-block .carousel-slide__inner__content__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.carousel-block .carousel-slide__inner__content__bottom__citation {
  display: flex;
  align-items: center;
  column-gap: 20px;
}

@media (max-width: 1089.98px) {
  .carousel-block .carousel-slide__inner__content__bottom__citation {
    column-gap: 10px;
  }
}

@media (max-width: 779.98px) {
  .carousel-block .carousel-slide__inner__content__bottom__citation {
    margin-top: 20px;
  }
}

.carousel-block .quote-icon {
    background-size: 30px;
    background-position: center;
    background-repeat: no-repeat;
    height: 47px;
    width: 47px;
    flex: 0 0 47px;
    display: inline-block;
    border-radius: 10px;
    background-image: url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><defs><clipPath id='b'><rect transform='translate(208 3800)' width='24' height='24' fill='none' stroke='%231354de' data-name='Rectangle 131090'/></clipPath><clipPath id='a'><rect width='21.934' height='18.757' fill='none' stroke='%231354de' stroke-width='1.5' data-name='Rectangle 137200'/></clipPath></defs><g transform='translate(-208 -3800)' clip-path='url(%23b)' data-name='Mask Group 23838'><g transform='translate(230.88 3821) rotate(180)' data-name='Group 38767'><g clip-path='url(%23a)' fill='none' stroke='%231354de' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' data-name='Group 38764'><path transform='translate(-68.554 -3.354)' d='M81.744,17.874l.8,3.591s7.3-2.147,7.3-9.367V4h-8.1v8.1h4.175A5.454,5.454,0,0,1,81.744,17.874Z' data-name='Path 253436'/><path transform='translate(-3.355 -3.354)' d='M4,17.874l.8,3.591s7.3-2.147,7.3-9.367V4H4v8.1H8.175A5.454,5.454,0,0,1,4,17.874Z' data-name='Path 253437'/></g></g></g></svg>");
    filter: drop-shadow(0 20px 60px rgba(36, 176, 179, .4));
    background-color: white;
    padding: 10px;
}

.carousel-block .name {
  font-weight: var(--weight-semibold);
  margin-bottom: 0;
  color: var(--wp--preset--color--white);
}

.carousel-block .title {
  margin-bottom: 0;
  font-weight: 300;
  color: var(--wp--preset--color--white);
}

.carousel-block .name,
.carousel-block .title {
  font-size: 20px;
  line-height: 29px;
}

@media (max-width: 779.98px) {
  .carousel-block .name,
  .carousel-block .title {
    font-size: 17px;
    line-height: 22px;
  }
}

.carousel-block .carousel-slide__inner__image {
  padding: 0 0;
  position: relative;
  overflow: hidden;
  object-fit: cover;
  max-width: unset;
  width: calc(100% + 50px);
  display: flex;
  align-items: center;
}

@media (min-width: 1090px) {
  .carousel-block .carousel-slide__inner__image {
    flex: 0 0 50%;
    box-shadow: var(--shadow-card);
  }
}

@media (max-width: 1089.98px) {
  .carousel-block .carousel-slide__inner__image {
    width: 100%;
    border-radius: 10px 10px 0 0;
  }
}

/* Imagify's WebP delivery (Imagify settings, "picture" method — the only method
   that works on WP Engine's nginx) wraps post images in <picture> and moves the
   img's class onto it. Two consequences here: `> img` stops matching, and
   <picture> becomes the flex item in place of the image — and a flex item with
   no width basis shrinks to its content, so the image no longer fills the pane.

   Giving the picture the full width makes it the same-sized box the image used
   to be, and the inner img's `min-width: 100%` then fills it. The extra selector
   below is still needed: sizing the wrapper does nothing for selector matching. */
.carousel-block .carousel-slide__inner__image > picture {
  width: 100%;
}

.carousel-block .carousel-slide__inner__image > img,
.carousel-block .carousel-slide__inner__image > picture > img {
  object-fit: cover;
  object-position: center;
  min-width: 100%;
}

@media (max-width: 779.98px) {
  .carousel-block .carousel-slide__inner__image > img,
  .carousel-block .carousel-slide__inner__image > picture > img {
    aspect-ratio: 1;
  }
}

/* carousel-type-split / carousel-type-offset (driven by the "slide_style" field) */
.carousel-type-split .carousel-slide__inner {
  border-radius: 10px;
  overflow: hidden;
}

.carousel-type-split .carousel-slide__inner__content {
  border-radius: 0 0 !important;
}

.carousel-type-split .carousel-slide__inner__image img {
    border-radius: 0 0;
    max-height: 300px;
    margin-bottom: -1rem;
    margin-top: -1rem;
}

.carousel-type-offset .carousel-slide {
  padding-top: 50px;
  transition: 650ms all ease-in;
}

.carousel-type-offset .carousel-slide.no-featured-img .carousel-slide__inner__content {
  width: 100%;
}

.carousel-type-offset .carousel-slide__inner__image {
  transition: 650ms transform ease-in;
}

.carousel-type-offset .carousel-slide__inner__content {
  transition: 650ms transform ease-in;
}

@media (min-width: 1090px) {
  .carousel-type-offset .carousel-slide__inner__image {
    transform: translateY(0px);
    border-radius: 10px;
  }

  .carousel-type-offset .slick-active .carousel-slide__inner__image {
    transform: translateY(0);
    border-radius: 10px;
  }

  .carousel-type-offset .carousel-slide__inner__content {
    transform: translate(0, -50px);
  }

  .carousel-type-offset .carousel-slide__inner__image + .carousel-slide__inner__content {
    transform: translate(-15px, -50px);
  }

  .carousel-type-offset .slick-active .carousel-slide__inner__image + .carousel-slide__inner__content {
    transform: translate(-15px, -50px);
  }
}

/* testimonial-slide (content_type = "testimonial") */
.testimonial-slide .content p {
  font-weight: var(--weight-semibold);
  font-size: 25px;
}

.testimonial-slide .content p:before {
  content: '\201C';
}

.testimonial-slide .content p:after {
  content: '\201D';
}

.testimonial-slide .content h3 + p {
  font-weight: initial;
  font-size: initial;
}

.testimonial-slide .carousel-slide__inner__image {
  position: relative;
  overflow: hidden;
}

.testimonial-slide .carousel-slide__inner__image:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: -50px;
  bottom: 0;
  background: rgb(19 84 222 / 55.43%);
  border-radius: 10px;
  opacity: .34;
}

@media (max-width: 1089.98px) {
  .testimonial-slide .carousel-slide__inner__image:before {
    right: 0;
    border-radius: 10px 10px 0 0;
  }
}

.testimonial-slide .carousel-slide__inner__image .logo {
  width: 35%;
  max-width: 200px;
  aspect-ratio: 1 / 1;
  align-items: center;
  justify-content: center;
  display: flex;
  background-color: var(--wp--preset--color--white);
  border-radius: 2000px;
  position: absolute;
  bottom: 20px;
  left: 20px;
}

.testimonial-slide .carousel-slide__inner__image .logo img {
  width: 100px;
  height: 100px;
  object-fit: contain;
}

@media (max-width: 779.98px) {
  .testimonial-slide .carousel-slide__inner__image .logo {
    width: 25%;
  }

  .testimonial-slide .carousel-slide__inner__image .logo img {
    width: calc(100% - 40px);
    height: calc(100% - 40px);
  }
}