/**
 * Ou2s Dual Card CTA — unified (heading + 3 cards, OU2 typography & buttons)
 */

.mystic-dcc.mystic-dcc--unified {
  --mystic-dcc-gap: 16px;
  --mystic-dcc-radius: 16px;
  --mystic-dcc-grid-opacity: 0.14;
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-public-sans, "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}

.mystic-dcc.mystic-dcc--unified *,
.mystic-dcc.mystic-dcc--unified *::before,
.mystic-dcc.mystic-dcc--unified *::after {
  box-sizing: border-box;
}

/* Outer shell: white, spec padding */
.mystic-dcc--unified .mystic-dcc__shell {
  width: 100%;
  min-width: 0;
  background: #fff;
  border-radius: var(--mystic-dcc-radius);
  padding: 64px 24px;
  border: 1px solid rgba(20, 20, 20, 0.08);
  box-shadow: 0 4px 24px rgba(15, 23, 42, 0.06);
}

/* No top section heading (empty title, highlight, description): tighter vertical padding */
.mystic-dcc--unified .mystic-dcc__shell.mystic-dcc__shell--no-section-heading {
  padding-top: 48px;
  padding-bottom: 48px;
}

/* ---------- Section heading (OU2 h2 + highlight + description) ---------- */
.mystic-dcc--unified .mystic-dcc__header {
  display: grid;
  gap: clamp(16px, 3vw, 32px);
  align-items: start;
  margin-bottom: 32px;
}

.mystic-dcc--unified .mystic-dcc__header--split {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  column-gap: 32px;
  align-items: center;
}

.mystic-dcc--unified .mystic-dcc__header--split .mystic-dcc__header-col--title {
  min-width: 0;
  flex: 0 1 50%;
  max-width: 50%;
}

.mystic-dcc--unified .mystic-dcc__header--split .mystic-dcc__header-col--desc {
  width: 100%;
  margin-left: 0;
  min-width: 0;
  flex: 0 1 50%;
  max-width: 50%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
}

.mystic-dcc--unified .mystic-dcc__header--central {
  grid-template-columns: 1fr;
  text-align: center;
}

.mystic-dcc--unified .mystic-dcc__header-inner--central {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.mystic-dcc--unified .mystic-dcc__header--central .mystic-dcc__section-title,
.mystic-dcc--unified .mystic-dcc__header--central .mystic-dcc__section-desc,
.mystic-dcc--unified .mystic-dcc__header--central .hero__desc {
  text-align: center;
  width: 100%;
}

.mystic-dcc--unified .mystic-dcc__section-title.hero__title.hero-banner-heading {
  margin: 0;
  color: var(--Black-1000, #141414);
  font-family: "Public Sans", var(--font-public-sans), sans-serif;
  font-size: var(--headline-h2, 48px);
  font-style: normal;
  font-weight: 500;
  line-height: 105%;
  letter-spacing: -1.44px;
}

.mystic-dcc--unified .mystic-dcc__section-title .hero-banner-highlight,
.mystic-dcc--unified .mystic-dcc__section-title .mystic-heading-highlight,
.mystic-dcc--unified .mystic-dcc__section-title .mystic-dcc__hl {
  color: var(--Blue-600, #0f7eba);
  font-family: "Public Sans", var(--font-public-sans), sans-serif;
  font-size: var(--headline-h2, 48px);
  font-style: italic;
  font-weight: 500;
  line-height: 105%;
  letter-spacing: -1.44px;
}

.mystic-dcc--unified .mystic-dcc__section-desc.hero__desc,
.mystic-dcc--unified .mystic-dcc__header .hero__desc {
  margin: 0;
  width: 100%;
  color: var(--Black-700, rgba(20, 20, 20, 0.7));
  font-family: "Public Sans", var(--font-public-sans), sans-serif;
  font-size: var(--Paragraph-p1, 16px);
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  letter-spacing: 0.16px;
}

.mystic-dcc--unified .mystic-dcc__section-desc.hero__desc strong,
.mystic-dcc--unified .mystic-dcc__section-desc.hero__desc b,
.mystic-dcc--unified .mystic-dcc__header .hero__desc strong,
.mystic-dcc--unified .mystic-dcc__header .hero__desc b {
  color: var(--Black-1000, #141414);
  font-weight: 600;
}

.mystic-dcc--unified .mystic-dcc__section-desc.hero__desc a,
.mystic-dcc--unified .mystic-dcc__header .hero__desc a {
  color: var(--blue-900-main, #13496a);
  font-weight: 600;
  text-decoration: underline;
  transition: color 0.2s ease;
}

.mystic-dcc--unified .mystic-dcc__section-desc.hero__desc a:hover,
.mystic-dcc--unified .mystic-dcc__section-desc.hero__desc a:focus-visible,
.mystic-dcc--unified .mystic-dcc__header .hero__desc a:hover,
.mystic-dcc--unified .mystic-dcc__header .hero__desc a:focus-visible {
  color: #0e3b57;
}

.mystic-dcc--unified .mystic-dcc__section-desc p,
.mystic-dcc--unified .mystic-dcc__header .hero__desc p {
  margin: 0 0 10px;
}

.mystic-dcc--unified .mystic-dcc__header .hero__desc p:last-child {
  margin-bottom: 0;
}

/* ---------- Top row: two surface cards ----------
   Flex row (not grid): stays side-by-side inside narrow Elementor columns; grid often collapses to one track when the parent min-width is wrong. */
.mystic-dcc--unified .mystic-dcc__cards-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: var(--mystic-dcc-gap);
  width: 100%;
  min-width: 0;
}

.mystic-dcc--unified .mystic-dcc__cards-row:not(.mystic-dcc__cards-row--single)>* {
  flex: 1 1 0;
  min-width: 0;
  max-width: none;
}

.mystic-dcc--unified .mystic-dcc__cards-row--single {
  flex-direction: column;
  flex-wrap: nowrap;
}

.mystic-dcc--unified .mystic-dcc__cards-row--single>* {
  flex: 0 1 auto;
  width: 100%;
  max-width: 100%;
}

/* Elementor: reinforce horizontal two-card row — only at 600px+ (below 600px cards stack; base + max-width rules win) */
@media (min-width: 600px) {
  .elementor-widget-mystic-dual-card-cta .mystic-dcc--unified .mystic-dcc__cards-row:not(.mystic-dcc__cards-row--single) {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
  }

  .elementor-widget-mystic-dual-card-cta .mystic-dcc--unified .mystic-dcc__cards-row:not(.mystic-dcc__cards-row--single)>* {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
  }
}

.mystic-dcc--unified .mystic-dcc__card--surface {
  position: relative;
  border-radius: var(--mystic-dcc-radius);
  padding: 32px;
  min-height: 360px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.mystic-dcc--unified .mystic-dcc__card--yellow {
  background-color: var(--yellow-300-main, #f7cd46);
  background-image: none;
}

.mystic-dcc--unified .mystic-dcc__card--custom-bg:not(.mystic-dcc__card--yellow) {
  background-color: #fefbf0;
}

/* Caption / c1 — 8px to card heading only (card-inner uses gap: 0 so this is not doubled) */
.mystic-dcc--unified .mystic-dcc__card-caption {
  margin: 0 0 8px;
  font-family: "Public Sans", var(--font-public-sans), sans-serif;
  font-size: var(--Caption-c1, 12px);
  font-style: normal;
  font-weight: 600;
  line-height: 120%;
  letter-spacing: 0.24px;
  text-transform: uppercase;
}

/* Caption / card heading / body accent — warm | blue | black (yellow or custom background) */
.mystic-dcc--unified .mystic-dcc__card--heading-warm .mystic-dcc__card-caption {
  color: #514209;
}

.mystic-dcc--unified .mystic-dcc__card--heading-blue .mystic-dcc__card-caption {
  color: var(--blue-900-main, #13496a);
}

.mystic-dcc--unified .mystic-dcc__card--heading-black .mystic-dcc__card-caption {
  color: var(--Black-1000, #141414);
}

/* Card title — same OU2 stack as Inner Banner (hero__title + hero-banner-heading), scoped to h4 scale */
.mystic-dcc--unified .mystic-dcc__card--surface h3.hero__title.hero-banner-heading.mystic-dcc__card-title {
  margin: 0;
  overflow-wrap: break-word;
  word-wrap: break-word;
  font-family: "Public Sans", var(--font-public-sans), sans-serif;
  font-size: var(--headline-h4, 24px);
  font-style: normal;
  font-weight: 600;
  line-height: 120%;
  letter-spacing: -0.48px;
}

/* 16px below heading when followed by description, button stack, or buttons (card-inner gap removed — see .mystic-dcc__card-inner) */
.mystic-dcc--unified .mystic-dcc__card--surface h3.hero__title.hero-banner-heading.mystic-dcc__card-title:not(:last-child) {
  margin-bottom: 16px;
}

.mystic-dcc--unified .mystic-dcc__card--heading-warm h3.hero__title.hero-banner-heading.mystic-dcc__card-title {
  color: #514209;
}

.mystic-dcc--unified .mystic-dcc__card--heading-blue h3.hero__title.hero-banner-heading.mystic-dcc__card-title {
  color: #13496a;
}

.mystic-dcc--unified .mystic-dcc__card--heading-black h3.hero__title.hero-banner-heading.mystic-dcc__card-title {
  color: var(--Black-1000, #141414);
}

/* Body / rich text — OU2 hero__desc + rich text (direct child only: flex grow; inside desc+btn stack, spacer handles layout) */
.mystic-dcc--unified .mystic-dcc__card-inner>.hero__desc.mystic-dcc__rich-text {
  margin: 0;
  flex: 1;
  font-family: "Public Sans", var(--font-public-sans), sans-serif;
  font-size: var(--Paragraph-p1, 16px);
  font-weight: 400;
  line-height: 160%;
  letter-spacing: 0.16px;
}

.mystic-dcc--unified .mystic-dcc__card-inner .hero__desc.mystic-dcc__rich-text p {
  margin: 0 0 10px;
}

.mystic-dcc--unified .mystic-dcc__card-inner .hero__desc.mystic-dcc__rich-text p:last-child {
  margin-bottom: 0;
}

.mystic-dcc--unified .mystic-dcc__card-desc-btn-stack .hero__desc.mystic-dcc__rich-text {
  flex: 0 1 auto;
  margin: 0;
}

.mystic-dcc--unified .mystic-dcc__card--heading-warm .hero__desc.mystic-dcc__rich-text {
  color: #514209;
}

.mystic-dcc--unified .mystic-dcc__card--heading-warm .mystic-dcc__rich-text strong,
.mystic-dcc--unified .mystic-dcc__card--heading-warm .mystic-dcc__rich-text b {
  color: #514209;
  font-weight: 600;
}

.mystic-dcc--unified .mystic-dcc__card--heading-warm .mystic-dcc__rich-text a {
  color: #514209;
  font-weight: 600;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: none;
  transition: color 0.2s ease;
}

.mystic-dcc--unified .mystic-dcc__card--heading-warm .mystic-dcc__rich-text a:hover,
.mystic-dcc--unified .mystic-dcc__card--heading-warm .mystic-dcc__rich-text a:focus-visible {
  color: #3d3507;
}

.mystic-dcc--unified .mystic-dcc__card--heading-blue .hero__desc.mystic-dcc__rich-text {
  color: var(--Black-1000, #141414);
}

.mystic-dcc--unified .mystic-dcc__card--heading-blue .mystic-dcc__rich-text strong,
.mystic-dcc--unified .mystic-dcc__card--heading-blue .mystic-dcc__rich-text b {
  color: var(--Black-1000, #141414);
  font-weight: 600;
}

.mystic-dcc--unified .mystic-dcc__card--heading-blue .mystic-dcc__rich-text a {
  color: var(--blue-900-main, #13496a);
  font-weight: 600;
  text-decoration: underline;
  transition: color 0.2s ease;
}

.mystic-dcc--unified .mystic-dcc__card--heading-blue .mystic-dcc__rich-text a:hover,
.mystic-dcc--unified .mystic-dcc__card--heading-blue .mystic-dcc__rich-text a:focus-visible {
  color: #0e3b57;
}

.mystic-dcc--unified .mystic-dcc__card--heading-black .hero__desc.mystic-dcc__rich-text {
  color: var(--Black-1000, #141414);
}

.mystic-dcc--unified .mystic-dcc__card--heading-black .mystic-dcc__rich-text strong,
.mystic-dcc--unified .mystic-dcc__card--heading-black .mystic-dcc__rich-text b {
  color: var(--Black-1000, #141414);
  font-weight: 600;
}

.mystic-dcc--unified .mystic-dcc__card--heading-black .mystic-dcc__rich-text a {
  color: var(--blue-900-main, #13496a);
  font-weight: 600;
  text-decoration: underline;
  transition: color 0.2s ease;
}

.mystic-dcc--unified .mystic-dcc__card--heading-black .mystic-dcc__rich-text a:hover,
.mystic-dcc--unified .mystic-dcc__card--heading-black .mystic-dcc__rich-text a:focus-visible {
  color: #0e3b57;
}

/* Description lists: same bullet modes as Ou2s Heading (check__list__point / check__dot__point from style.css) */
.mystic-dcc--unified .hero__desc.mystic-dcc__rich-text.check__list__point>ul,
.mystic-dcc--unified .hero__desc.mystic-dcc__rich-text.check__dot__point>ul {
  margin-top: 0;
  margin-bottom: 10px;
}

.mystic-dcc--unified .mystic-dcc__card-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
  min-height: 0;
  padding-bottom: 0;
}

/* Grid overlay */
.mystic-dcc--unified .mystic-dcc__card--grid-dual::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: var(--mystic-dcc-grid-opacity);
  background-size: 16px 16px;
  background-image:
    linear-gradient(to right, rgba(0, 0, 0, 0.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.07) 1px, transparent 1px);
}

.mystic-dcc--unified .mystic-dcc__card--grid-yellow.mystic-dcc__card--grid-dual::after {
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.45) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.45) 1px, transparent 1px);
}

/* Ou2s Button Lists: markup uses dflex gap24 xclean_button_list — colors from global style.css (.hero__cta.* .hero__btn) */
.mystic-dcc--unified .mystic-dcc__ou2-buttons.xclean_button_list {
  width: 100%;
  gap: 16px;
}

/* Card 1 & 2: push buttons to bottom only when “Description / button spacing” = Auto (card 3 banner keeps its own rule). */
.mystic-dcc--unified .mystic-dcc__card--surface.mystic-dcc__card--desc-btn-gap-auto .mystic-dcc__card-inner>.mystic-dcc__ou2-buttons.xclean_button_list {
  margin-top: auto;
  padding-top: 4px;
}

/* Description + buttons stack (cards 1–2 when both exist): fixed 24px gap, or flex spacer (min 24px) in Auto mode */
.mystic-dcc--unified .mystic-dcc__card-desc-btn-stack {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.mystic-dcc--unified .mystic-dcc__card-desc-btn-stack--fixed {
  gap: 24px;
}

.mystic-dcc--unified .mystic-dcc__card-desc-btn-stack--auto {
  flex: 1;
  min-height: 0;
}

.mystic-dcc--unified .mystic-dcc__card-desc-btn-stack .mystic-dcc__ou2-buttons.xclean_button_list {
  margin-top: 0;
  padding-top: 0;
  flex-shrink: 0;
}

.mystic-dcc--unified .mystic-dcc__card-desc-btn-stack--auto .mystic-dcc__desc-btn-spacer {
  flex: 1 1 auto;
  min-height: 24px;
  min-width: 0;
}

/* Display style Block: full-width row (parent must not shrink-wrap; see mystic-dual-card-cta-widget.php) */
.mystic-dcc--unified .mystic-dcc__ou2-buttons .hero__cta.mystic-dcc__cta--block {
  width: 100%;
  max-width: 100%;
  flex: 1 1 100%;
}

.mystic-dcc--unified .mystic-dcc__ou2-buttons .hero__cta.mystic-dcc__cta--block .hero__btn.block {
  width: 100%;
  max-width: 100%;
}

/* ---------- Card 3 image banner ---------- */
.mystic-dcc--unified .mystic-dcc__banner {
  margin-top: var(--mystic-dcc-gap);
  border-radius: var(--mystic-dcc-radius);
  overflow: hidden;
}

.mystic-dcc--unified .mystic-dcc__banner-media {
  position: relative;
  min-height: 360px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: stretch;
  padding: 32px;
  container-type: inline-size;
  container-name: mystic-dcc-banner;
}

.mystic-dcc--unified .mystic-dcc__banner-media--empty {
  background: linear-gradient(90deg, #4b5563 0%, #d1d5db 100%);
  min-height: 360px;
}

.mystic-dcc--unified .mystic-dcc__banner-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 70%);
}

.mystic-dcc--unified .mystic-dcc__banner-content {
  position: relative;
  z-index: 1;
  max-width: min(100%, 480px);
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  min-width: 0;
}

.mystic-dcc--unified .mystic-dcc__banner .hero__title.hero-banner-heading.mystic-dcc__banner-title {
  margin: 0 0 20px;
  width: 25cqw;
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: break-word;
  word-wrap: break-word;
  color: var(--White-1000, #fff);
  font-family: "Public Sans", var(--font-public-sans), sans-serif;
  font-size: var(--headline-h4, 24px);
  font-style: normal;
  font-weight: 600;
  line-height: 120%;
  letter-spacing: -0.48px;
}

/* Browsers without container query units: 25% of banner content column */
@supports not (width: 1cqw) {
  .mystic-dcc--unified .mystic-dcc__banner-content {
    max-width: 100%;
    width: 100%;
  }

  .mystic-dcc--unified .mystic-dcc__banner .hero__title.hero-banner-heading.mystic-dcc__banner-title {
    width: 25%;
  }
}

.mystic-dcc--unified .mystic-dcc__banner-buttons,
.mystic-dcc--unified .mystic-dcc__banner-buttons.mystic-dcc__ou2-buttons {
  margin-top: auto;
  width: 100%;
}

/* ---------- Stacked layout on tablet/mobile (<=767px): column header/cards, full-width split columns ---------- */
@media (max-width: 767px) {
  .mystic-dcc--unified .mystic-dcc__header--split {
    flex-direction: column;
    row-gap: 16px;
    column-gap: 0;
  }

  /* Force full-width columns on small screens, even if Elementor responsive controls emit fixed px widths. */
  .mystic-dcc--unified .mystic-dcc__header--split .mystic-dcc__header-col--title,
  .mystic-dcc--unified .mystic-dcc__header--split .mystic-dcc__header-col--desc {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 1 100% !important;
    min-width: 0;
  }

  .mystic-dcc--unified .mystic-dcc__header--split .mystic-dcc__header-col--desc {
    align-items: flex-start;
    justify-content: flex-start;
  }
}

/* ---------- Stacked layout only below 600px: tighter shell/card padding + full-width block buttons ---------- */
@media (max-width: 599px) {
  .mystic-dcc--unified .mystic-dcc__shell {
    padding: var(--spacing-09, 48px) var(--spacing-04, 16px);
  }

  .mystic-dcc--unified .mystic-dcc__header--split {
    flex-direction: column;
    row-gap: 16px;
    column-gap: 0;
  }

  .mystic-dcc--unified .mystic-dcc__cards-row:not(.mystic-dcc__cards-row--single) {
    flex-direction: column;
    flex-wrap: nowrap;
  }

  .mystic-dcc--unified .mystic-dcc__cards-row:not(.mystic-dcc__cards-row--single)>* {
    flex: 0 1 auto;
    width: 100%;
    max-width: 100%;
  }

  .mystic-dcc--unified .mystic-dcc__cards-row {
    flex-direction: column;
    flex-wrap: nowrap;
  }

  .mystic-dcc--unified .mystic-dcc__cards-row>* {
    flex: 0 1 auto;
    width: 100%;
    max-width: 100%;
  }

  .mystic-dcc--unified .mystic-dcc__card--surface {
    padding: 32px var(--spacing-04, 16px);
  }

  .mystic-dcc--unified .mystic-dcc__banner-media {
    padding: 32px var(--spacing-04, 16px);
  }

  .mystic-dcc--unified .mystic-dcc__banner .hero__title.hero-banner-heading.mystic-dcc__banner-title {
    width: 100%;
    max-width: 100%;
  }

  .mystic-dcc--unified .mystic-dcc__section-title.hero__title.hero-banner-heading,
  .mystic-dcc--unified .mystic-dcc__section-title .mystic-dcc__hl {
    font-size: var(--headline-h2, 36px);
    letter-spacing: -1.08px;
  }

  /* Stacked: all OU2 button rows full-width block (surface cards + card 3 banner); row start-aligned like desktop */
  .mystic-dcc--unified .mystic-dcc__ou2-buttons.xclean_button_list {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    gap: 16px;
  }

  .mystic-dcc--unified .mystic-dcc__ou2-buttons.xclean_button_list .hero__cta {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
  }

  .mystic-dcc--unified .mystic-dcc__ou2-buttons .hero__cta .hero__btn {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Fixed spacing: keep 24px under description (same as desktop). Do not grow a spacer that pins the button to the card bottom. */
  /* Auto spacing: .mystic-dcc__card-desc-btn-stack--auto already uses flex:1 + .mystic-dcc__desc-btn-spacer to pin buttons. */

  /* No description: buttons stay direct child of .mystic-dcc__card-inner (no stack) — pin to card bottom */
  .mystic-dcc--unified .mystic-dcc__card--surface .mystic-dcc__card-inner>.mystic-dcc__ou2-buttons.xclean_button_list {
    /* margin-top: auto; */
    padding-top: 0;
  }
}

@media (max-width: 480px) {
  .mystic-dcc--unified .mystic-dcc__shell {
    padding: 24px 16px;
  }
}