/**
 * Text Cards Widget Styles
 *
 * Breakpoints:
 *   Desktop  > 991px
 *   Mobile  ≤ 991px
 *
 * BEM structure (aligned with Figma Layout 249 — Section Title / Content / Actions):
 *   .wb-text-cards                   Block
 *   .wb-text-cards__container        Inner container (max-width + horizontal padding)
 *   .wb-text-cards__section-title    Intro: tagline wrap + intro content (H2 + lead)
 *   .wb-text-cards__tagline-wrap     Tagline row (Figma "Tagline Wrapper")
 *   .wb-text-cards__intro-content     Heading + description stack (gap 24px)
 *   .wb-text-cards__tagline          Tagline element
 *   .wb-text-cards__title            Main heading
 *   .wb-text-cards__description      Description paragraph
 *   .wb-text-cards__cards            Wrapper around carousel + grid (Figma "Content" frame)
 *   .wb-text-cards__grid             Grid layout container
 *   .wb-text-cards__grid--cols-N     Modifier for column count (1–6)
 *   .wb-text-cards__carousel         Carousel layout container
 *   .wb-text-cards__viewport         Carousel visible area
 *   .wb-text-cards__track            Carousel sliding track
 *   .wb-text-cards__slide            Individual carousel slide wrapper
 *   .wb-text-cards__arrow            Navigation arrow button
 *   .wb-text-cards__arrow--prev/next Arrow direction modifier
 *   .wb-text-cards__dots             Dots navigation container
 *   .wb-text-cards__card             Card element (block in grid and slide in carousel)
 *   .wb-text-cards__card--bg         Modifier: card with background
 *   .wb-text-cards__card-media       Primary media wrapper (image)
 *   .wb-text-cards__card-img         Card image
 *   .wb-text-cards__card-icon        Primary icon container
 *   .wb-text-cards__card-subimg      Secondary image
 *   .wb-text-cards__card-subicon     Secondary icon container
 *   .wb-text-cards__card-title       Card heading
 *   .wb-text-cards__card-desc        Card description
 *   .wb-text-cards__card-content     Text block inside card (Figma "Content": logos + title + body)
 *   .wb-text-cards__card-buttons     Card-level button group
 *   .wb-text-cards__actions          Section-level CTAs row (Figma "Actions")
 */

/* ===========================================
   Block
   =========================================== */

.wb-text-cards {
  overflow-x: clip;
}

/*
 * Figma Layout 249 (desktop 2192:14300, mobile 2257:11162): column stack with
 * gap 80px (desktop) / 48px (mobile) between section title, cards row, and actions.
 */
.wb-text-cards__container {
  display: flex;
  flex-direction: column;
  /*
   * stretch: full-width rows so children span the content width.
   */
  align-items: stretch;
  /*
   * Themes / Elementor often reset `gap` or break flex gap. Major vertical rhythm is applied
   * with explicit padding on .wb-text-cards__cards and .wb-text-cards__actions (see below).
   */
  gap: 0;
  max-width: var(--container-container-large, 80rem);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--page-padding-padding-global, 5%);
  padding-right: var(--page-padding-padding-global, 5%);
}

/*
 * Space between intro (section title) and cards: Figma 48px mobile / 80px desktop.
 * padding-top avoids margin-collapse with global `p { margin-block-end: 0 }` and theme resets.
 */
.wb-text-cards .wb-text-cards__section-title + .wb-text-cards__cards {
  padding-top: 3rem;
}

@media (min-width: 992px) {
  .wb-text-cards .wb-text-cards__section-title + .wb-text-cards__cards {
    padding-top: 5rem;
  }
}

/* Space between cards block and section-level CTAs */
.wb-text-cards .wb-text-cards__cards + .wb-text-cards__actions {
  padding-top: 3rem;
}

@media (min-width: 992px) {
  .wb-text-cards .wb-text-cards__cards + .wb-text-cards__actions {
    padding-top: 5rem;
  }
}

/* ===========================================
   Section title — Figma 2192:14302 "Section Title": column gap 16px; intro H2+lead gap 24px.
   =========================================== */

.wb-text-cards__section-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-16x, 1rem);
  align-self: flex-start; /* keep intro width capped while container uses stretch */
  max-width: 48rem; /* Figma max-w-[768px] */
  width: 100%;
  margin-right: auto;
}

.wb-text-cards__intro-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-24x, 1.5rem);
  width: 100%;
}

/*
 * Global wb-global-styles targets [class*="__tagline"] with inline-block + centering;
 * Layout 249 is start-aligned (Figma items-start).
 */
.wb-text-cards__section-title [class*='__tagline'] {
  display: block;
  text-align: left;
  justify-content: flex-start;
  align-items: flex-start;
  /* Spacing to next block comes from .wb-text-cards__section-title gap */
  margin-bottom: 0 !important;
}

.wb-text-cards__intro-content [class*='__title'] {
  margin-bottom: 0 !important;
}

.wb-text-cards__description {
  margin-bottom: 0;
}

/* Figma "Content" wrapper: full-width column that holds the cards Row */
.wb-text-cards__cards {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}

/* Figma "Actions": section CTAs; vertical rhythm from .wb-text-cards__container gap */
.wb-text-cards__actions {
  width: 100%;
}

/*
 * Section-level Actions row and per-card CTAs: Figma Actions gap-[24px]; spacing from
 * siblings comes from parent flex/grid — neutralize global .button-group margin-top here.
 * Card-level groups also sit under .wb-text-cards__card flex gap; global margin would stack
 * with that gap (wb-global-styles .button-group margin-top).
 */
.wb-text-cards .wb-text-cards__actions .wb-text-cards__buttons.button-group,
.wb-text-cards .wb-text-cards__buttons.button-group,
.wb-text-cards .wb-text-cards__card-buttons.button-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--spacing-24x, 1.5rem);
  row-gap: var(--spacing-16x, 1rem);
  margin-top: 0 !important;
}

/* Linked card images (render_image_with_link) must fill the media cell like plain <img> */
.wb-text-cards__card-media a {
  display: block;
  width: 100%;
  line-height: 0;
}

/* ===========================================
   Grid — CSS Grid (not flex) so columns stay side-by-side: flex items used to get
   min-width:auto and refuse to shrink, forcing one card per row. minmax(0,1fr) fixes that.
   Row gap matches Figma: 24px mobile / 48px desktop.
   =========================================== */

.wb-text-cards__grid {
  /*
   * Gutters between cards. Use rem + !important so spacing survives theme/Elementor resets
   * that zero out `gap` or custom properties (reported: cards visually flush).
   */
  --wb-text-cards-gutter: 1.5rem;
  display: grid !important;
  width: 100%;
  margin-top: 0;
  column-gap: var(--wb-text-cards-gutter) !important;
  row-gap: var(--wb-text-cards-gutter) !important;
  /* Mobile: single column */
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}

@media (min-width: 768px) {
  .wb-text-cards__grid {
    /* Figma row gap 48px between cards */
    --wb-text-cards-gutter: 3rem;
  }
}

/*
 * Column count from widget setting (.wb-text-cards__grid--cols-N).
 * From md (768px): honor 1–2 columns; from lg (992px): honor up to 6.
 */
@media (min-width: 768px) {
  .wb-text-cards__grid--cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .wb-text-cards__grid--cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 992px) {
  .wb-text-cards__grid--cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .wb-text-cards__grid--cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .wb-text-cards__grid--cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .wb-text-cards__grid--cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

/*
 * Tablet (768–991): configs with 3+ desktop columns collapse to 2 columns (same as previous flex rules).
 */
@media (min-width: 768px) and (max-width: 991px) {
  .wb-text-cards__grid--cols-3,
  .wb-text-cards__grid--cols-4,
  .wb-text-cards__grid--cols-5,
  .wb-text-cards__grid--cols-6 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.wb-text-cards__grid .wb-text-cards__card {
  min-width: 0; /* Extra safety for nested flex / long words */
  height: auto;
}

/* ===========================================
   Card — Figma "Column": border, padding, vertical stack gap 32px; inner "Content" gap 24px.
   =========================================== */

.wb-text-cards__card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Figma Column: gap 32px between image, inner content, card CTA */
  gap: var(--spacing-16x, 2rem);
  border: 2px solid var(--_primitives---opacity--neutral-darkest-15, rgba(11, 0, 6, 0.15));
  border-radius: var(--radius-large, 8px);
  /* Figma p-[48px] — use spacing token (24 steps × base ≈ 48px at default scale) */
  padding: var(--spacing-24x, 3rem);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.wb-text-cards__grid .wb-text-cards__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px var(--_primitives---opacity--neutral-darkest-10, rgba(0, 0, 0, 0.1));
}

/* Vertical rhythm from .wb-text-cards__card gap — no extra margins on direct children */
.wb-text-cards__card > .wb-text-cards__card-media,
.wb-text-cards__card > .wb-text-cards__card-icon {
  margin-bottom: 0;
}

/* Background variant: keep flex column; border/radius may be overridden by Elementor controls */
.wb-text-cards__card--bg {
  border-radius: var(--radius-small, 8px);
  border: 1px solid transparent;
  height: 100%;
}

/* Figma "Content" inside card: logos + H4 + body */
.wb-text-cards__card-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-24x, 1.5rem);
  width: 100%;
}

/*
 * wb-global-styles applies margin-bottom with !important on [class*="__card-title"].
 * All vertical rhythm inside .wb-text-cards__card-content must come from this block's flex gap only.
 */
.wb-text-cards .wb-text-cards__card-content .wb-text-cards__card-title {
  margin-bottom: 0 !important;
}

.wb-text-cards__card-content .wb-text-cards__card-subimg,
.wb-text-cards__card-content .wb-text-cards__card-subicon {
  margin-bottom: 0;
}

/* Primary media */
.wb-text-cards__card-media {
  margin-bottom: 0;
}

.wb-text-cards__card-img {
  display: block;
  width: 100%;
  height: auto;
}

/* Primary icon: spacing from .wb-text-cards__card gap when top-level */
.wb-text-cards__card-icon {
  margin-bottom: 0;
}

/* Secondary media: default; inside .wb-text-cards__card-content use gap only */
.wb-text-cards__card-subimg {
  display: block;
  max-width: 100%;
  height: auto;
}

.wb-text-cards__card-subicon {
  margin-bottom: 0;
}

/* Card title: fallback margin when not inside .wb-text-cards__card-content */
.wb-text-cards__card-title {
  margin-bottom: var(--spacing-8x, 1rem);
}

.wb-text-cards__card-desc {
  margin-bottom: 0;
}

/* ===========================================
   Carousel
   =========================================== */

.wb-text-cards__carousel {
  display: none; /* JS shows carousel only when active breakpoint requires it */
  position: relative;
  width: 100%;
  margin-top: 0;
  overflow: hidden;
}

.wb-text-cards__viewport {
  overflow: visible; /* Allow peek-bleed to show partial next slide */
  width: 100%;
}

.wb-text-cards__track {
  display: flex;
  gap: var(--spacing-24x, 1.5rem);
  cursor: grab;
  user-select: none;
}

@media (min-width: 992px) {
  .wb-text-cards__track {
    gap: calc(var(--spacing-1x) * 24);
  }
}

.wb-text-cards__track:active {
  cursor: grabbing;
}

.wb-text-cards__slide {
  flex-shrink: 0;
  /* Width is calculated and applied dynamically by JS */
}

.wb-text-cards__slide .wb-text-cards__card {
  height: 100%;
}

/* ===========================================
   Carousel Arrows
   =========================================== */

.wb-text-cards__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--_ui-styles---buttons--arrow-size, 48px);
  height: var(--_ui-styles---buttons--arrow-size, 48px);
  background-color: var(--e-global-color-background, #fff);
  border: 1px solid var(--e-global-color-neutral_lighter, #E5E5E5);
  border-radius: var(--_ui-styles---radius--full, 50%);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.wb-text-cards__arrow:hover {
  background-color: var(--e-global-color-neutral_lightest, #F5F5F5);
  border-color: var(--e-global-color-neutral_light, #CCCCCC);
}

.wb-text-cards__arrow--prev { left: var(--_spacing---padding-global-percent, 5%); }
.wb-text-cards__arrow--next { right: var(--_spacing---padding-global-percent, 5%); }

.wb-text-cards__arrow svg {
  width: var(--_ui-styles---buttons--arrow-icon-size, 16px);
  height: var(--_ui-styles---buttons--arrow-icon-size, 16px);
  color: var(--e-global-color-text, #333);
  pointer-events: none;
}

/* ===========================================
   Carousel Dots
   =========================================== */

.wb-text-cards__dots {
  display: flex;
  justify-content: center;
  gap: var(--_spacing---gap-dots, 0.5rem);
  margin-top: var(--_spacing---margin-dots, 2rem);
}

.wb-text-cards__dot {
  width: var(--_ui-styles---dots--size, 10px);
  height: var(--_ui-styles---dots--size, 10px);
  border-radius: var(--_ui-styles---radius--full, 50%);
  background-color: var(--e-global-color-neutral_light, #CCCCCC);
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.wb-text-cards__dot:hover {
  background-color: var(--e-global-color-neutral, #999999);
}

.wb-text-cards__dot--active {
  background-color: var(--e-global-color-primary, #DF006E);
  transform: scale(1.2);
}

/* ===========================================
   Responsive — Tablet (≤ 991px) — carousel arrows only (grid uses rules above)
   =========================================== */

@media (max-width: 991px) {
  .wb-text-cards__arrow--prev { left: var(--_spacing---padding-mobile, 1rem); }
  .wb-text-cards__arrow--next { right: calc(5vw + 1rem + var(--_spacing---padding-mobile, 1rem)); }
}

/* ===========================================
   Responsive — Mobile (≤ 767px) — single column grid
   =========================================== */

@media (max-width: 767px) {
  /* One column regardless of --cols-* (matches Figma mobile stack) */
  .wb-text-cards__grid {
    grid-template-columns: minmax(0, 1fr) !important;
    /* 24px between stacked cards */
    --wb-text-cards-gutter: 1.5rem;
    column-gap: 1.5rem !important;
    row-gap: 1.5rem !important;
  }

  .wb-text-cards__track {
    gap: 1.5rem;
  }

  .wb-text-cards__arrow {
    width: var(--_ui-styles---buttons--arrow-size-mobile, 40px);
    height: var(--_ui-styles---buttons--arrow-size-mobile, 40px);
  }

  .wb-text-cards__arrow svg {
    width: var(--_ui-styles---buttons--arrow-icon-size-mobile, 14px);
    height: var(--_ui-styles---buttons--arrow-icon-size-mobile, 14px);
  }

  .wb-text-cards__arrow--prev { left: var(--_spacing---padding-mobile, 0.5rem); }
  .wb-text-cards__arrow--next { right: calc(5vw + 1rem + var(--_spacing---padding-mobile, 0.5rem)); }
}

/* ===========================================
   Desktop carousel — keep within container (Figma: cards sit inside padded column;
   negative full-bleed caused layout/overflow issues in the editor and on narrow viewports).
   =========================================== */

@media (min-width: 992px) {
  .wb-text-cards__arrow--prev {
    left: calc(var(--_spacing---padding-global-percent, 5%) + 1rem);
  }

  .wb-text-cards__arrow--next {
    right: calc(var(--_spacing---padding-global-percent, 5%) + 1rem);
  }
}

/* ===========================================
   JS-controlled visibility
   The carousel starts hidden; JS sets display:block
   when the active breakpoint requires carousel mode.
   The adjacent sibling rule avoids a JS round-trip
   to hide the grid when carousel becomes visible.
   =========================================== */

/* Carousel and grid remain adjacent siblings inside .wb-text-cards__cards */
.wb-text-cards__carousel[style*='display: block'] + .wb-text-cards__grid {
  display: none !important;
}

/* ===========================================
   ELEMENTOR EDITOR — text cards carousel
   Peek (overflow: visible on viewport) and 5vw-based arrow offsets can spill
   past the column in the preview. Contain the track; use the same %/rem
   strategy as the desktop "no full-bleed" rules so arrows stay inside the widget.
   =========================================== */
body.elementor-editor-active .wb-text-cards__viewport {
  overflow: hidden;
}

body.elementor-editor-active .wb-text-cards__arrow--prev {
  left: calc(var(--_spacing---padding-global-percent, 5%) + 1rem);
}

body.elementor-editor-active .wb-text-cards__arrow--next {
  right: calc(var(--_spacing---padding-global-percent, 5%) + 1rem);
}

@media (max-width: 991px) {
  body.elementor-editor-active .wb-text-cards__arrow--prev {
    left: var(--_spacing---padding-mobile, 1rem);
  }

  body.elementor-editor-active .wb-text-cards__arrow--next {
    right: calc(1rem + var(--_spacing---padding-mobile, 1rem));
  }
}

@media (max-width: 767px) {
  body.elementor-editor-active .wb-text-cards__arrow--prev {
    left: var(--_spacing---padding-mobile, 0.5rem);
  }

  body.elementor-editor-active .wb-text-cards__arrow--next {
    right: calc(1rem + var(--_spacing---padding-mobile, 0.5rem));
  }
}

body.elementor-editor-active .elementor-element .wb-text-cards {
  min-width: 0;
  max-width: 100%;
}

/* ===========================================
   ELEMENTOR EDITOR / preview iframe — card inner layout
   Prevents theme leakage (e.g. space-between) and flex min-height quirks when
   [data-wb-animation] or editor chrome affects layout. Mirrors admin + device body.
   =========================================== */
body.elementor-editor-active .wb-text-cards__card,
body[class*='elementor-device-'] .wb-text-cards__card {
  justify-content: flex-start;
}

body.elementor-editor-active .wb-text-cards__card-content,
body[class*='elementor-device-'] .wb-text-cards__card-content {
  justify-content: flex-start;
  flex-grow: 0;
  min-height: 0;
}