/* Card Slide (child block) */

.ill-card-slide {
  flex: 0 0 auto;
}

/*
 * Keep the outer slide the same height for all states.
 * (The track uses align-items: stretch, but explicit height prevents "active" slides
 * from growing when additional content becomes visible.)
 */
body:not(.block-editor-page) .ill-card-slider .ill-card-slide {
  height: var(--ill-card-height, 360px);
}
body:not(.block-editor-page) .ill-card-slider .ill-card-slide .ill-card-slide__inner {
  transform: scale(1);
}

body:not(.block-editor-page) .ill-card-slider .ill-card-slide.is-active {
  margin-right: 20px;
  margin-left: 20px; 
}

/* Active card should be visually larger (without affecting layout flow) */
body:not(.block-editor-page) .ill-card-slider .ill-card-slide.is-active .ill-card-slide__inner  {
  transform: scale(1.1);
  transform-origin: center center;
  z-index: 2;
 
}

.ill-card-slide__inner {
  background: var(--ill-card-bg, var(--ill-neutral, #EEEDED));
  padding: 2.25rem;
  /* Keep all slides visually consistent: active content must not grow the card */
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.ill-card-slide__icon svg, 
.ill-card-slide__icon svg path{
 color: var(--ill-primary, #AC9777);
}

.ill-card-slide__icon {
  /* Layout reference: icon without a colored circle behind it */
  display: inline-flex;
  align-items: left;
  justify-content: left;
  font-size: 3rem;
  margin-bottom: 1rem;
  background: transparent;
  color: var(--ill-primary, #AC9777);
  width: auto;
  height: auto;
  border-radius: 0;
  padding: 0;
  /* Avoid any theme/focus glow around the icon */
  outline: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  -webkit-tap-highlight-color: transparent;
  transition: all 0.5s;

  opacity: 0;
}

.is-active .ill-card-slide__icon {
  opacity: 1;
    transition: all 0.5s;

}

/* If the icon contains an SVG, enforce fill color and remove filters */
.ill-card-slide__icon svg {
  fill: currentColor;
  filter: none !important;
}

/* If any global focus styles leak onto children, neutralize inside the icon box */
.ill-card-slide__icon,
.ill-card-slide__icon * {
  outline: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}

.ill-card-slide__title {
  margin: 0 0 .75rem;
  color: var(--ill-text, #605B57);
  font-weight: 700;
}

.ill-card-slide__text {
  color: var(--ill-text, #605B57);
  margin-bottom: 1.5rem;
  /* Prevent long texts from changing card height */
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
}

.ill-card-slide__cta {
  margin-top: auto;
}

/*
 * Frontend behaviour:
 * - Only show title on inactive slides
 * - Show icon + text (and CTA) only on the active slide
 * (Keep editor preview unchanged by scoping away from .block-editor-page)
 */
body:not(.block-editor-page) .ill-card-slider .ill-card-slide:not(.is-active) .ill-card-slide__text,
body:not(.block-editor-page) .ill-card-slider .ill-card-slide:not(.is-active) .ill-card-slide__cta {
  display: none !important;
}

body:not(.block-editor-page) .ill-card-slider .ill-card-slide:not(.is-active) .ill-card-slide__inner {
  justify-content: center;
  text-align: center;

  /* Inactive cards: much lighter background like the layout */
}


body:not(.block-editor-page) .ill-card-slider .ill-card-slide.is-active .ill-card-slide__inner {
  justify-content: flex-start;
  text-align: left;
}


/* Active card background stays fully opaque */
body:not(.block-editor-page) .ill-card-slider .ill-card-slide.is-active .ill-card-slide__inner {
  background: rgba(238, 237, 237, 1);
}



/* Defensive: remove focus ring/outline if the whole slide becomes focusable/clickable */
body:not(.block-editor-page) .ill-card-slider .ill-card-slide:focus,
body:not(.block-editor-page) .ill-card-slider .ill-card-slide:focus-visible {
  outline: 0 !important;
  box-shadow: none !important;
}



/* Inactive cards: keep title visible but softer */
body:not(.block-editor-page) .ill-card-slider .ill-card-slide:not(.is-active) .ill-card-slide__title {
  color: rgba(172, 151, 119, 0.55);
}



/* Prevent any global focus ring/shadow from appearing on the icon/slide (e.g. green outlines) */
body:not(.block-editor-page) .ill-card-slider .ill-card-slide :focus,
body:not(.block-editor-page) .ill-card-slider .ill-card-slide :focus-visible {
  outline: 0 !important;
  box-shadow: none !important;
}