/* =============================================
   Applied CAx — Custom Overrides
   Scoped — does not modify baunfire.css
   Standard: 1360px | Break: 1200px | Mobile: 768px
   ============================================= */


/* ------------------------------------------
   BASE — Tab Content View Grid
   ------------------------------------------ */
.tab-content-view {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 3.063rem;
    padding: 101px 5px 96px 5px;
    max-width: 1360px;
}

/* Prevent grid column blowout on content side */
.tab-content-view .tab-content > .tab-pane {
    min-width: 0;
}


/* ------------------------------------------
   FIX 1 — Carousel alignment at large screens
   Equal height items + aligned timeline
   ------------------------------------------ */
.tab-content-view .content-item-carousel {
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
}

.tab-content-view .content-item-carousel .owl-stage {
    display: flex !important;
    align-items: stretch !important;
}

.tab-content-view .content-item-carousel .owl-item {
    display: flex !important;
    align-items: stretch !important;
}

.tab-content-view .carousel-item {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    justify-content: space-between;
}

.tab-content-view .carousel-item-content {
    flex: 1;
}

.tab-content-view .carousel-timeline {
    margin-top: auto;
    flex-shrink: 0;
}

/* Fluid text — prevents wrapping differences between items */
.tab-content-view .carousel-item-content .ct-h4 {
    font-size: clamp(0.95rem, 1.4vw, 1.25rem);
    line-height: 1.3;
}

.tab-content-view .carousel-item-content .ct-p-regular {
    font-size: clamp(0.8rem, 1.1vw, 1rem);
    line-height: 1.5;
}


/* ------------------------------------------
   FIX 2 — Resource card hover flickering
   
   Strategy: isolate card to its own GPU layer,
   lock content height with min-height so the
   internal reflow never escapes to the grid,
   and add a small transition delay so the 
   browser commit happens after layout settles.
   ------------------------------------------ */

/* Outer card — GPU isolated, no layout participation */
.tab-content-view .content-two-resource .resource-item {
    display: flex;
    flex-direction: column;
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;     /* extra Firefox composite hint */
    -webkit-backface-visibility: hidden;
    isolation: isolate;              /* new stacking context — stops bleed to siblings */
}

/* Inner content — fixed minimum height stops the 
   vertical bounce when baunfire's hover kicks in */
.tab-content-view .content-two-resource .resource-item .resource-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    align-self: stretch;
    flex: 1;
    min-height: 160px;               /* locks content box height — adjust if needed */
    contain: layout style;           /* stronger containment — layout + style isolated */
}

/* Pin Learn more to bottom always */
.tab-content-view .content-two-resource .resource-item .resource-content .resource-link {
    margin-top: auto;
    pointer-events: none;
    /* Small delay lets hover transform settle before 
       any internal reflow is painted by the browser */
    transition-delay: 30ms;
}

.tab-content-view .content-two-resource .resource-item .resource-content .resource-link * {
    pointer-events: auto;
}

/* Intercept baunfire hover on the card — 
   re-declare transition so it runs on compositor 
   thread only (transform + opacity), never layout */
.tab-content-view .content-two-resource .resource-item:hover {
    transition: transform 0.25s ease 30ms,
                opacity 0.25s ease 30ms;
}

/* Freeze the resource-content box during hover 
   so its children can't trigger parent reflow */
.tab-content-view .content-two-resource .resource-item:hover .resource-content {
    contain: strict;
}


/* ------------------------------------------