/***Builder css*****/

/* Base styling for Bricksable Stacking Card */
.bricksable-stacking-card-wrapper.ba-stacking-card-init {
  position: relative;
  width: 100%;
  min-height: 100vh; /* needed so ScrollTrigger pinning gets a proper height */
  overflow-x: hidden;  /* hide off-screen cards horizontally */
  overflow-y: hidden;  /* hide off-screen cards vertically */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Make sure each individual card takes full size */
.ba-stacking-card-init .bricksable-stacking-card-item {
  width: 100%;
  position: absolute;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
}

/* Horizontal orientation: still needs height for pinning */
.ba-stacking-card-init.bricksable-stacking-card-wrapper[data-direction="horizontal"] {
  min-height: 100vh;
  min-width: 100vw;
  flex-direction: row;
  align-items: center; /* Center cards vertically in horizontal mode */
}

/* Ensure cards in horizontal mode are centered vertically */
.ba-stacking-card-init.bricksable-stacking-card-wrapper[data-direction="horizontal"] .bricksable-stacking-card-item {
  top: 50%;
  transform: translateY(-50%);
  margin: 0 auto;
}


/*** Frontend CSS *****/

/* Base styling for Bricksable Stacking Card */
.bricksable-stacking-card-wrapper.ba-stacking-card-frontend {
  position: relative;
  width: 100%;
  min-height: 100vh; /* needed so ScrollTrigger pinning gets a proper height */
  overflow-x: hidden;  /* hide off-screen cards horizontally */
  overflow-y: hidden;  /* hide off-screen cards vertically */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Make sure each individual card takes full size */
.ba-stacking-card-frontend .bricksable-stacking-card-item {
  width: 100%;
  position: absolute;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
}

/* Horizontal orientation: still needs height for pinning */
.ba-stacking-card-frontend.bricksable-stacking-card-wrapper[data-direction="horizontal"] {
  min-height: 100vh;
  min-width: 100vw;
  flex-direction: row;
  align-items: center; /* Center cards vertically in horizontal mode */
}

/* Ensure cards in horizontal mode are centered vertically */
.ba-stacking-card-frontend.bricksable-stacking-card-wrapper[data-direction="horizontal"] .bricksable-stacking-card-item {
  top: 50%;
  transform: translateY(-50%);
  margin: 0 auto;
}