/* Text Cards Pile Widget Styles */

/* Main container */
.wb-text-cards-pile {
    position: relative;
    overflow: visible;
}

.wb-text-cards-pile__container {
    max-width: 100%;
    margin: 0 auto;
    position: sticky;
    top: 0;
    height: 100vh;
}

.wb-text-cards-pile__grid {
    position: absolute;
    gap: var(--wb-spacing-md, 2rem);
    margin: 0 auto;
    perspective: 1000px;
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Card Base Styles */
.wb-text-cards-pile__card {
    position: absolute;
    background: var(--e-global-color-primary, #ffffff);
    border-radius: var(--radius-small);
    padding: var(--spacing-16x);
    box-shadow: 0 4px 20px var(--_primitives---opacity--neutral-darkest-10, rgba(11,0,6,0.1));
    border: 1px solid var(--_primitives---opacity--neutral-darkest-5, rgba(11,0,6,0.05));
    transform-origin: center bottom;
    will-change: transform;
    overflow: hidden;
    transform: translateY(30px);
}

/* Animation entrance */
.wb-text-cards-pile__card--animated {
    opacity: 1;
    transform: translateY(0);
    position: absolute;
}

/* Hover Effects */
.wb-text-cards-pile--hover-enabled .wb-text-cards-pile__card:hover {
    transform: translateY(-10px) rotate(0deg) scale(1.02);
    z-index: 10;
    box-shadow: 0 20px 40px var(--_primitives---opacity--neutral-darkest-15, rgba(11,0,6,0.15));
}

.wb-text-cards-pile--hover-enabled .wb-text-cards-pile__card--hovered {
    transform: translateY(-10px) rotate(0deg) scale(1.02);
    z-index: 10;
    box-shadow: 0 20px 40px var(--_primitives---opacity--neutral-darkest-15, rgba(11,0,6,0.15));
}

.wb-text-cards-pile--hover-enabled .wb-text-cards-pile__card--others-hovered {
    transform: translateY(20px) rotate(2deg);
    opacity: 0.8;
}

/* Focus state for accessibility */
.wb-text-cards-pile__card--focused {
    outline: 2px solid var(--e-global-color-accent, #df006e);
    outline-offset: 2px;
    z-index: 10;
}

/* Icon Wrapper */
.wb-text-cards-pile__icon-wrapper {
    margin-bottom: var(--spacing-16x);
}

.wb-text-cards-pile__icon i,
.wb-text-cards-pile__icon svg {
    display: block;
}

/* Card Content */
.wb-text-cards-pile__card-content {
    position: relative;
    z-index: 2;
}

.wb-text-cards-pile__card-title {
    margin: 0 0 var(--wb-spacing-sm, 1rem) 0;
    font-size: var(--e-global-typography-e84df36-font-size, 1.25rem);
    line-height: 1.4;
    color: var(--e-global-color-text, #0b0006);
}

.wb-text-cards-pile__card-description {
    margin: 0;
    font-size: var(--e-global-typography-3702067-font-size, 0.95rem);
    line-height: 1.6;
    color: var(--e-global-color-c868736, #544c50);
}

/* ========================================
   TEXT CARDS PILE LAYOUT STYLES
   ======================================== */

/* Section container styles - replaces padding-global, container-large, padding-section-large wrappers */
.wb-text-cards-pile-wrapper .wb-text-cards-pile {
  max-width: var(--container-container-large, 80rem);
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 991px) {
  .wb-text-cards-pile-wrapper .wb-text-cards-pile {
    padding-left: var(--wb-spacing-md, 2rem);
    padding-right: var(--wb-spacing-md, 2rem);
    /* Padding vertical handled globally */
  }
}

@media (max-width: 767px) {
  .wb-text-cards-pile-wrapper .wb-text-cards-pile {
    padding-left: var(--wb-spacing-sm, 1rem);
    padding-right: var(--wb-spacing-sm, 1rem);
    /* Padding vertical handled globally */
  }
}

/* Base wrapper styles */
.wb-text-cards-pile-wrapper {
    width: 100%;
}

/* Description spacing */
.wb-text-cards-pile-wrapper .wb-text-cards-pile .wb-text-cards-pile__description {
  margin-bottom: 0;
}

/* ========================================
   OTHER LAYOUTS
   ======================================== */

/* Cards only layout */
.wb-text-cards-pile-wrapper.wb-cards-only {
    padding-left: var(--page-padding-padding-global, 4rem);
    padding-right: var(--page-padding-padding-global, 4rem);
    max-width: var(--container-container-large, 80rem);
    margin-left: auto;
    margin-right: auto;
}

.wb-text-cards-pile-wrapper.wb-cards-only .wb-cards-only__buttons-wrapper {
    position: relative;
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh + var(--spacing-16x, 80px));
    padding-bottom: var(--spacing-xxlarge, 80px);
}

@media (max-width: 991px) {
    .wb-text-cards-pile-wrapper.wb-cards-only {
        padding-left: var(--wb-spacing-md, 2rem);
        padding-right: var(--wb-spacing-md, 2rem);
    }
}

@media (max-width: 767px) {
    .wb-text-cards-pile-wrapper.wb-cards-only {
        padding-left: var(--wb-spacing-sm, 1rem);
        padding-right: var(--wb-spacing-sm, 1rem);
    }
}

/* Layout grid adjustments for cards */
.wb-text-cards-pile .layout16_content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-16x, 2rem);
    align-items: start;
}

.wb-text-cards-pile .layout16_content.wb-text-first {
    grid-template-columns: 1fr 1fr;
}

.wb-text-cards-pile .layout16_content.wb-cards-first {
    grid-template-columns: 1fr 1fr;
}

.wb-text-cards-pile .layout16_content.wb-cards-bottom {
    grid-template-columns: 1fr;
    gap: var(--spacing-12x, 3rem);
}

.wb-text-cards-pile .wb-cards-bottom__cards {
    margin-top: var(--wb-spacing-md, 2rem);
}

.wb-text-cards-pile .layout16_content.wb-no-cards {
    display: block;
    grid-template-columns: none;
}

.wb-text-cards-pile .layout16_content.wb-no-cards .layout16_content-left {
    max-width: none;
    width: 100%;
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.wb-text-cards-pile .layout16_content.wb-text-first .layout16_content-left {
    padding: var(--section-padding-padding-section-large, 7rem) 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media screen and (min-width: 768px) {
    .wb-text-cards-pile .layout16_content.wb-text-first .layout16_content-left {
        position: sticky;
        top: 0;
        height: 100vh;
    }
}

@media (max-width: 991px) {
    .wb-text-cards-pile .layout16_content,
    .wb-text-cards-pile .layout16_content.wb-text-first,
    .wb-text-cards-pile .layout16_content.wb-cards-first {
        grid-template-columns: 1fr;
        gap: var(--wb-spacing-md, 2rem);
    }

    .wb-text-cards-pile .layout16_cards-wrapper {
        min-height: 300px;
        margin-top: var(--wb-spacing-sm, 1rem);
    }
}

@media (max-width: 767px) {
    .wb-text-cards-pile .layout16_content,
    .wb-text-cards-pile .layout16_content.wb-text-first,
    .wb-text-cards-pile .layout16_content.wb-cards-first {
        display: block;
        gap: var(--wb-spacing-md, 1.5rem);
    }

    .wb-text-cards-pile .layout16_cards-wrapper {
        min-height: 250px;
        margin-top: var(--wb-spacing-md, 1.5rem);
    }

    .wb-text-cards-pile__title {
        font-size: var(--text-size-title-mobile, 2rem);
    }
}

@media (max-width: 479px) {
    .wb-text-cards-pile .layout16_cards-wrapper {
        min-height: 200px;
    }

    .wb-text-cards-pile__title {
        font-size: var(--text-size-title-mobile-small, 1.75rem);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .wb-text-cards-pile__grid {
        max-width: 100%;
        gap: var(--wb-spacing-md, 1.5rem);
    }
    
    .wb-text-cards-pile__card {
        padding: var(--wb-spacing-md, 1.5rem);
        border-radius: var(--radius-small);
    }
    
    .wb-text-cards-pile__icon {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }
    
    .wb-text-cards-pile__card-title {
        font-size: var(--e-global-typography-text-font-size, 1.125rem);
    }
    
    .wb-text-cards-pile__card-description {
        font-size: var(--e-global-typography-text-font-size, 0.9rem);
    }
}

@media (max-width: 480px) {
    .wb-text-cards-pile__card {
        padding: var(--wb-spacing-sm, 1.25rem);
    }
    
    .wb-text-cards-pile__icon-wrapper {
        margin-bottom: var(--wb-spacing-sm, 1rem);
    }
    
    .wb-text-cards-pile__icon {
        width: 45px;
        height: 45px;
        font-size: 18px;
        border-radius: var(--radius-small);
    }
    
    .wb-text-cards-pile__card-title {
        font-size: var(--e-global-typography-text-font-size, 1rem);
        margin-bottom: var(--wb-spacing-xs, 0.75rem);
    }
}

.wb-text-cards-pile__card {
    width: 30rem;
    max-width: 95%;
}

/* Header styles - Commented for future use */
/* .wb-text-cards-pile__header {
    text-align: center;
    margin-bottom: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
} */

/* Tagline and title spacing - applied via wb-global-styles.css (--spacing-8x, --spacing-12x) */
/* .wb-text-cards-pile__title {
    margin-bottom: 0;
} */

/* ========================================
   DESCRIPTION BACKGROUND LAYOUT
   ======================================== */

/* Container for description background layout */
.wb-description-background__container {
    position: relative;
    min-height: 600px;
}

/* Description text as background - debe estar dentro del contenedor sticky de las cards */
.wb-description-background__text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    pointer-events: none;
}

.wb-description-background__description {
    line-height: 1;
    text-align: center;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Cards container - positioned above description - debe mantener sticky para animación */
.wb-description-background__cards {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

/* El texto de fondo debe estar dentro del contenedor sticky de las cards para mantenerse fijo.
   Use 80vh so buttons below remain visible in viewport (cards + buttons fit on screen). */
.wb-description-background__cards .wb-text-cards-pile__container {
    position: sticky;
    top: 0;
    height: 80vh;
}

/* Mover el texto de fondo dentro del contenedor sticky - ahora está dentro de wb-text-cards-pile__container */
.wb-text-cards-pile__container .wb-description-background__text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    pointer-events: none;
}

.wb-description-background__cards .wb-text-cards-pile__grid {
    /* Keep absolute position for animation to work. Match container height. */
    height: 80vh;
}

.wb-description-background__cards .wb-text-cards-pile--hover-enabled .wb-text-cards-pile__card:hover {
    transform: translateY(-10px) rotate(0deg) scale(1.02);
    z-index: 10;
}

/* Buttons inside cards container - below wb-text-cards-pile__grid (visible in viewport) */
.wb-text-cards-pile__buttons {
    position: relative;
    z-index: 3;
    margin-top: auto;
    padding-top: var(--spacing-16x);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

/* Container needs flex when it has buttons, so margin-top: auto pushes buttons to bottom */
.wb-description-background__cards .wb-text-cards-pile__container {
    display: flex;
    flex-direction: column;
}

/* Responsive adjustments for description background layout */
@media (max-width: 991px) {
    .wb-description-background__container {
        min-height: 500px;
    }
    
    .wb-description-background__description {
        font-size: clamp(2rem, 6vw, 5rem);
    }
    
    .wb-description-background__cards {
        max-width: 100%;
    }
}

@media (max-width: 767px) {
    /* En móvil: descripción arriba de las cards, pero mantener animación */
    .wb-description-background__container {
        min-height: auto;
        position: relative; /* Para posicionar descripción relativa a este contenedor */
    }
        
    /* Container sticky MANTIENE posición sticky para animación - NO CAMBIAR */
    .wb-description-background__cards .wb-text-cards-pile__container {
        position: sticky;
        height: 80vh;
        display: flex;
        flex-direction: column;
    }
    
    /* Descripción: posicionar arriba del contenedor de cards */
    /* La descripción está dentro del sticky container, moverla arriba usando top negativo */
    .wb-description-background__container .wb-text-cards-pile__container .wb-description-background__text {
        position: inherit;
        height: auto !important; /* Sobrescribir height: 100% del estilo desktop */
    }
    
    /* Grid de cards MANTIENE absolute para animación - NO TOCAR */
    .wb-description-background__cards .wb-text-cards-pile__grid {
        position: absolute;
        height: 80vh;
    }
    
    /* Cards MANTIENEN absolute para animación - NO TOCAR */
    .wb-description-background__cards .wb-text-cards-pile__card {
        position: absolute;
    }
    
    .wb-description-background__description {
        font-size: clamp(1.5rem, 5vw, 3rem);
        white-space: normal;
        line-height: 1.2;
    }
    
    .wb-text-cards-pile__buttons {
        padding-top: var(--spacing-16x);
        position: relative;
        z-index: 3;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .wb-text-cards-pile__card {
        transition: none;
        opacity: 1;
        transform: none;
    }
    
    .wb-text-cards-pile--hover-enabled .wb-text-cards-pile__card:hover,
    .wb-text-cards-pile--hover-enabled .wb-text-cards-pile__card--hovered {
        transform: none;
        box-shadow: 0 4px 20px var(--_primitives---opacity--neutral-darkest-10, rgba(11,0,6,0.1));
    }
}

/* ==========================================
   MOBILE SCROLL ANIMATION
   Class .wb-tcp-mobile-active is added by JS when the two-phase
   animation is initialised (viewport width < 768 px).
   Applies to all layout variants.
   ========================================== */

@media (max-width: 767px) {

    /* Wrapper becomes the positioning context for the sticky section + spacer */
    .wb-tcp-mobile-active {
        position: relative;
    }

    /* ── Sticky viewport ── */

    /* Standard layouts (text_left, cards_left, cards_bottom, description_background):
       the outer .section_layout16 sticks to the top and shows a full-viewport frame. */
    .wb-tcp-mobile-active:not(.wb-cards-only) > .section_layout16 {
        position: sticky;
        top: 0;
        height: 100vh;
        overflow: hidden;
    }

    /* cards_only: the cards section is a direct child, so it becomes sticky itself. */
    .wb-tcp-mobile-active.wb-cards-only > [data-rotate-offset] {
        position: sticky;
        top: 0;
        height: 100vh;
        overflow: hidden;
    }

    /* ── Intermediate containers fill the sticky section height ── */

    .wb-tcp-mobile-active .layout16_component,
    .wb-tcp-mobile-active .wb-description-background__container,
    .wb-tcp-mobile-active .wb-description-background__cards {
        height: 100%;
    }

    /* ── text_left / cards_left: layout16_content is the primary flex column ── */

    /*
     * CRITICAL: align-items: stretch overrides the base align-items: start inherited
     * from the desktop grid layout. Without it, flex items don't stretch horizontally.
     * Result of missing stretch:
     *   cards-wrapper natural width ≈ 0 (all content is position:absolute)
     *   → grid width:100% = 0 → cards max-width:95% = 0 → cards invisible.
     */
    .wb-tcp-mobile-active .layout16_content.wb-text-first,
    .wb-tcp-mobile-active .layout16_content.wb-cards-first {
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        height: 100%;
        width: 100%;
    }

    /* Text column: always at the top regardless of DOM order.
       (Fixes cards_left where text is second in the DOM.) */
    .wb-tcp-mobile-active .layout16_content-left {
        flex-shrink: 0;
        order: -1;
        width: 100%;
    }

    /* Cards wrapper fills remaining height, always full-width */
    .wb-tcp-mobile-active .layout16_cards-wrapper {
        flex: 1;
        min-height: 0;
        position: relative;
        width: 100%;
    }

    /* ── cards_bottom ── */

    /* Text section shrinks to its natural height
       (.layout16_component is made flex-column by JS inline style) */
    .wb-tcp-mobile-active .layout16_content.wb-cards-bottom {
        flex-shrink: 0;
        width: 100%;
    }

    /* Cards wrapper fills the remaining height */
    .wb-tcp-mobile-active .wb-cards-bottom__cards {
        flex: 1;
        min-height: 0;
        position: relative;
        width: 100%;
    }

    /* ── Cards section and container fill parent ── */

    /* Explicit width: 100% prevents natural-width collapse when all children
       are position:absolute (they don't contribute to intrinsic sizing). */
    .wb-tcp-mobile-active [data-rotate-offset] {
        height: 100%;
        width: 100%;
    }

    /* Override the inner sticky used by description_background on desktop.
       JS drives positioning; we only need a relative containing block. */
    .wb-tcp-mobile-active .wb-text-cards-pile__container {
        position: relative !important;
        top: auto !important;
        height: 100% !important;
        width: 100%;
    }

    /* Grid: keep 100 vh height so that absolutely-positioned cards are centred
       at 50 vh within the grid.  JS applies translateY to shift the grid so
       that its centre aligns with the viewport centre.
       left:0 + right:0 + width:auto is the most reliable way to span the full
       containing-block width for position:absolute elements, bypassing any
       padding-induced shrinkage from parent selectors. */
    .wb-tcp-mobile-active .wb-text-cards-pile__grid {
        height: 100vh;
        left: 0;
        right: 0;
        width: auto;
    }

    /* Cards: keep absolute positioning for the pile stacking effect.
       max-width: 90vw overrides the base max-width:95% (% of grid) so cards
       are always bounded by the viewport, not by a potentially-collapsed grid. */
    .wb-tcp-mobile-active .wb-text-cards-pile__card {
        position: absolute;
        max-width: 90vw;
    }
}