/* Loyo Solutions — layout + FAQ behavior only (spacing lives in Elementor template props) */

@media (min-width: 64rem) {
  .loyo-grid-4 > .loyo-challenge-card.e-flexbox,
  .loyo-grid-4 > .loyo-challenge-card.e-con,
  .loyo-grid-4 > .loyo-product-card.e-flexbox,
  .loyo-grid-4 > .loyo-product-card.e-con {
    flex: 0 0 calc((100% - 6rem) / 4) !important;
    width: calc((100% - 6rem) / 4) !important;
    max-width: calc((100% - 6rem) / 4) !important;
  }

  .loyo-grid-3 > .loyo-gallery-item,
  .loyo-grid-3 > .elementor-element.loyo-gallery-item,
  .loyo-grid-3 > .loyo-related-card.e-flexbox,
  .loyo-grid-3 > .loyo-related-card.e-con {
    flex: 0 0 calc((100% - 4rem) / 3) !important;
    width: calc((100% - 4rem) / 3) !important;
    max-width: calc((100% - 4rem) / 3) !important;
  }
}

@media (max-width: 63.99rem) {
  .loyo-grid-2.e-flexbox,
  .loyo-grid-2.e-con {
    flex-direction: column !important;
    flex-wrap: wrap !important;
  }

  .loyo-grid-2 > .loyo-col.e-flexbox,
  .loyo-grid-2 > .loyo-col.e-con {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

.loyo-grid-3 > .loyo-gallery-item img,
.loyo-grid-3 > .elementor-element.loyo-gallery-item img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

/* FAQ accordion interaction */
.loyo-faq-item:not([data-loyo-faq-init="1"]) > *:nth-child(2) {
  display: none !important;
}

.loyo-faq-item.is-open,
.loyo-faq-item:not(.is-open) {
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.loyo-faq-question {
  cursor: pointer !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  margin-bottom: 0 !important;
  user-select: none;
}

.loyo-faq-question::after {
  content: "+";
  flex: 0 0 auto;
  color: var(--e-global-color-brand, #0b6b45);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.2;
  transition: transform 0.2s ease;
}

.loyo-faq-item.is-open .loyo-faq-question::after {
  transform: rotate(45deg);
}

.loyo-faq-item.is-open {
  background-color: var(--e-global-color-white, #fff) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06) !important;
}

.loyo-faq-answer {
  display: none !important;
  margin-top: 0.75rem !important;
  margin-bottom: 0 !important;
}

.loyo-faq-item.is-open .loyo-faq-answer {
  display: block !important;
}