/* BTR ZigZag Elementor Addon (Pro)
   Layout + responsive stack + safe defaults
*/

.btr-zigzag,
.btr-zigzag * {
  box-sizing: border-box;
}

.btr-zigzag {
  --btr-image-width: 48%;
  --btr-stack-gap: 18px;
  --btr-content-align: left;
  --btr-btn-align: var(--btr-content-align);
  --btr-btn-align: var(--btr-content-align);
  --btr-image-object-position: 50% 50%;
  --btr-card-maxw: 1100px;
  width: 100%;
  max-width: var(--btr-card-maxw);
  margin-left: auto;
  margin-right: auto;
}

.btr-zigzag__row {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 48px;
}

.btr-zigzag--right .btr-zigzag__row {
  flex-direction: row-reverse;
}

.btr-zigzag__media {
  flex: 0 0 var(--btr-image-width);
  min-width: 0;
}

.btr-zigzag__content {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: var(--btr-content-align);
}

/* Title */
.btr-zigzag__title {
  margin: 0 0 12px 0;
}

/* Text & Lists */
.btr-zigzag__text {
  margin: 0;
}

.btr-zigzag__text p {
  margin: 0 0 12px 0;
}

.btr-zigzag__text p:last-child {
  margin-bottom: 0;
}

.btr-zigzag__text ul,
.btr-zigzag__text ol {
  margin: 10px 0 10px 1.15em;
  padding: 0;
}

.btr-zigzag__text li {
  margin: 0 0 8px 0;
}

.btr-zigzag__text li:last-child {
  margin-bottom: 0;
}

/* Image box */
.btr-zigzag__imgbox {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 0px;
}

.btr-zigzag__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--btr-image-object-position);
}

/* Ratio helpers */
.btr-zigzag--ratio-original .btr-zigzag__imgbox {
  height: auto;
}

.btr-zigzag--ratio-original .btr-zigzag__img {
  height: auto;
}

.btr-zigzag--ratio-16-9 .btr-zigzag__imgbox::before,
.btr-zigzag--ratio-4-3 .btr-zigzag__imgbox::before,
.btr-zigzag--ratio-1-1 .btr-zigzag__imgbox::before,
.btr-zigzag--ratio-3-4 .btr-zigzag__imgbox::before {
  content: "";
  display: block;
}

.btr-zigzag--ratio-16-9 .btr-zigzag__imgbox::before { padding-top: 56.25%; }
.btr-zigzag--ratio-4-3  .btr-zigzag__imgbox::before { padding-top: 75%; }
.btr-zigzag--ratio-1-1  .btr-zigzag__imgbox::before { padding-top: 100%; }
.btr-zigzag--ratio-3-4  .btr-zigzag__imgbox::before { padding-top: 133.333%; }

/* Custom ratio: padding-top is provided via inline CSS variable on wrapper */
.btr-zigzag--ratio-custom .btr-zigzag__imgbox::before {
  content: "";
  display: block;
  padding-top: var(--btr-img-custom-pt, 100%);
}

.btr-zigzag--ratio-16-9 .btr-zigzag__img,
.btr-zigzag--ratio-4-3  .btr-zigzag__img,
.btr-zigzag--ratio-1-1  .btr-zigzag__img,
.btr-zigzag--ratio-3-4  .btr-zigzag__img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.btr-zigzag--ratio-custom .btr-zigzag__img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/* Optional fixed height only for original ratio */
.btr-zigzag--has-fixed-height.btr-zigzag--ratio-original .btr-zigzag__imgbox {
  height: var(--btr-image-height, auto);
}

.btr-zigzag--has-fixed-height.btr-zigzag--ratio-original .btr-zigzag__img {
  height: 100%;
}

/* Button */
.btr-zigzag__btnwrap {
  margin-top: 18px;
  text-align: var(--btr-btn-align);
}

.btr-zigzag__btn {
  display: inline-flex;
  width: auto;
  max-width: 100%;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  line-height: 1;
}

/* Full width button on mobile (optional via widget switch) */
@media (max-width: 767px) {
  .btr-zigzag--btn-full-mobile .btr-zigzag__btnwrap {
    width: 100%;
  }

  .btr-zigzag--btn-full-mobile .btr-zigzag__btn {
    width: 100%;
    justify-content: center;
  }
}

/* Tablet stack when enabled */
@media (max-width: 1024px) {
  .btr-zigzag--stack-tablet .btr-zigzag__row {
    flex-direction: column;
    gap: var(--btr-stack-gap);
  }

  .btr-zigzag--stack-tablet .btr-zigzag__media,
  .btr-zigzag--stack-tablet .btr-zigzag__content {
    flex: 1 1 auto;
    width: 100%;
  }

  .btr-zigzag--stack-tablet.btr-zigzag--mobile-text-first .btr-zigzag__media { order: 2; }
  .btr-zigzag--stack-tablet.btr-zigzag--mobile-text-first .btr-zigzag__content { order: 1; }
}

/* Mobile: ALWAYS stack (never break) */
@media (max-width: 767px) {
  .btr-zigzag .btr-zigzag__row {
    flex-direction: column;
    gap: var(--btr-stack-gap);
  }

  .btr-zigzag .btr-zigzag__media,
  .btr-zigzag .btr-zigzag__content {
    flex: 1 1 auto;
    width: 100%;
  }

  .btr-zigzag.btr-zigzag--mobile-text-first .btr-zigzag__media { order: 2; }
  .btr-zigzag.btr-zigzag--mobile-text-first .btr-zigzag__content { order: 1; }

  /* Mejor lectura en móvil: texto a la izquierda */
  .btr-zigzag__content { text-align: left; }
	.btr-zigzag__title { text-align: center; }

  /* Title always centered on mobile */
  .btr-zigzag__title {
    text-align: center !important;
  }

	  /* Button: por defecto NO se estira. Se centra dentro de la columna. */
	  .btr-zigzag__btnwrap {
	    text-align: center;
	  }
}