/* ================================
   Block: Text and Image (FLEX)
   ================================ */

.ddo-text-image {
  /* vertical rhythm only; gutters live on header/inner */
padding: 4rem 1.6rem;
  transition: background-color 0.3s ease;
}

/* === Background tints === */
.bg-ddo-gold-tint-1  { background-color: #F5E0B0; }
.bg-ddo-gold-tint-2  { background-color: #FFF0D9; }
.bg-ddo-gold-tint-3  { background-color: #FFFAF0; }
.bg-ddo-green-tint-1 { background-color: #8AC9C2; }
.bg-ddo-green-tint-2 { background-color: #D6F5EB; }
.bg-ddo-green-tint-3 { background-color: #EDF7F7; }
.bg-ddo-purple { background-color: #662B80; }

/* ---- Shared container rules (title + columns align) ---- */
.ddo-ti__header,
.ddo-ti__inner {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  /* internal gutters – fallback to 16px if the WP variables aren't defined */
  padding-left: 16px;
  padding-right: 16px;
}

/* If the block is alignfull/alignwide, honor site global padding vars */
.ddo-text-image.alignfull .ddo-ti__header,
.ddo-text-image.alignfull .ddo-ti__inner,
.ddo-text-image.alignwide .ddo-ti__header,
.ddo-text-image.alignwide .ddo-ti__inner {
  padding-left: var(--wp--style--root--padding-left, 16px);
  padding-right: var(--wp--style--root--padding-right, 16px);
}

/* ---- Title ---- */
.ddo-ti__header {
  text-align: center;
  margin-bottom: 32px;
}
.ddo-ti__title {
  margin: 0;
  line-height: 1.1;
  letter-spacing: -0.01em;
  font-size: clamp(1.75rem, 1.3rem + 1.5vw, 2.5rem);
}

/* ---- Columns (flex) ---- */
.ddo-ti__inner {
  display: flex;
  align-items: center;
  gap: 4rem;
}

.ddo-ti__media,
.ddo-ti__content {
  flex: 1 1 50%;
  min-width: 0;
	 align-items: center;/* prevent overflow from long content */
}
/* let the media area grow to fill the column width */
.ddo-ti__media { display:flex; align-items: stretch; }
.ddo-ti__media-box { flex: 1 1 auto; max-width: none; }  /* ignore any cap unless ACF sets one */
.ddo-ti__media .reveal { width: 100%; display: block; } 
/* single image */
.ddo-ti__img { width: 100%; height: auto; display: block; }

/* splide */
.ddo-ti__media-box .ti-splide,
.ddo-ti__media-box .splide__track,
.ddo-ti__media-box .splide__list,
.ddo-ti__media-box .splide__slide { width: 100%; }
/* Desktop flip */
.ddo-text-image.is-flipped .ddo-ti__inner {
  flex-direction: row-reverse;
}

/* Image */
.ddo-ti__img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
filter: drop-shadow(0 0 20px rgba(0, 0, 0, .06));
}

/* Content spacing */
.ddo-ti__wysiwyg > *:first-child { margin-top: 0; }
.ddo-ti__wysiwyg > *:last-child  { margin-bottom: 0 !important; }
.ddo-ti__actions { margin-top: 1.55rem; }

/* ================================
   Mobile (≤980px)
   ================================ */
@media (max-width: 980px) {
  /* Always stack; image first regardless of flip */
  .ddo-ti__inner,
  .ddo-text-image.is-flipped .ddo-ti__inner {
    flex-direction: column;
    align-items: stretch;             /* make both columns full width of padded inner */
    gap: clamp(26px, 2.5vw, 20px);
  }

  .ddo-ti__media,
  .ddo-ti__content {
    flex: 0 0 auto;
    width: 100%;
  }


  /* Image fills the column so edges align with text inside the gutters */
  .ddo-ti__img { width: 100%; }
}
/* === Splide carousel styles scoped to the block === */
.ddo-text-image .splide__track { border-radius: 12px; overflow: hidden; }
.ddo-text-image .splide__slide img { display: block; width: 100%; height: auto; }

/* Splide essentials */
.ddo-text-image .splide__track { overflow: hidden; position: relative; }
.ddo-text-image .splide__list  { display: flex; margin: 0; padding: 0; list-style: none; }
.ddo-text-image .splide__slide { min-width: 100%; }
/* Make the carousel a fixed-ratio box and let slides fill it */
.ddo-text-image .ti-splide { width: 100%; }
.ddo-text-image .splide__track { height: 100%; }
.ddo-text-image .splide__list  { height: 100%; }
.ddo-text-image .splide__slide { height: 100% !important; }
.ddo-text-image .splide__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* or contain */
  display: block;
}
.ddo-text-image .ti-splide { width: 100%; aspect-ratio: 3 / 2; position: relative; }
/* ================================
   Column Split Variants
   ================================ */

.ddo-ti__inner.split-9-3  .ddo-ti__media { flex: 0 0 25%; }
.ddo-ti__inner.split-9-3  .ddo-ti__content { flex: 0 0 75%; }

.ddo-ti__inner.split-8-4  .ddo-ti__media { flex: 0 0 32%; }
.ddo-ti__inner.split-8-4  .ddo-ti__content { flex: 0 0 67%; }

.ddo-ti__inner.split-7-5  .ddo-ti__media { flex: 0 0 42%; }
.ddo-ti__inner.split-7-5  .ddo-ti__content { flex: 0 0 58%; }

.ddo-ti__inner.split-6-6  .ddo-ti__media,
.ddo-ti__inner.split-6-6  .ddo-ti__content { flex: 0 0 50%; }

.ddo-ti__inner.split-3-9  .ddo-ti__media { flex: 0 0 75%; }
.ddo-ti__inner.split-3-9  .ddo-ti__content { flex: 0 0 25%; }

.ddo-ti__inner.split-4-8  .ddo-ti__media { flex: 0 0 67%; }
.ddo-ti__inner.split-4-8  .ddo-ti__content { flex: 0 0 32%; }

.ddo-ti__inner.split-5-7  .ddo-ti__media { flex: 0 0 58%; }
/*.ddo-ti__inner.split-5-7  .ddo-ti__content { flex: 0 0 42%; }*/
/* Optional content logo */
.ddo-ti__logo {
  margin-bottom: 16px;
  display: inline-block; /* shrink to logo width */
}

.ddo-ti__logo-img {
  width: auto;
  height: auto;
  max-width: 220px; /* overridden by inline style from ACF */
  display: block;
}

@media (max-width: 980px) {
  .ddo-ti__logo-img {
    max-width: 100%;
    height: auto;
  }
	.ddo-text-image {
    padding: 3rem 1.6rem;
    transition: background-color 0.3s 
ease;
}
}
/* Constrain the media content without breaking flex-basis splits */
.ddo-ti__media-box {
  width: 100%;
  max-width: var(--ti-media-max, none); /* set by inline style when ACF value exists */
  margin-left: auto;
  margin-right: auto;                   /* keeps it centered inside its column */
  display: block;
}

/* Make sure inner pieces respect the cap */
.ddo-ti__media-box .ti-splide,
.ddo-ti__media-box .splide__track,
.ddo-ti__media-box .splide__list,
.ddo-ti__media-box .splide__slide,
.ddo-ti__media-box .ddo-ti__img {
  width: 100%;
}