/* ==============================================
   SAFETY PAGE — BANNER VARIANT
   ============================================== */

.ib-page-banner--safety {
    min-height: 540px !important;
}
.ib-page-banner--safety .wp-block-cover__background {
    background: transparent;
    opacity: 0;
}

.ib-safety-banner-bg {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 48px 20px 60px;
    max-width: 1280px;
    margin: 0 auto;
}

.ib-page-banner__subtitle {
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.8;
    margin: 0 0 8px;
}

@media (max-width: 1200px) {
    .ib-safety-banner-bg {
        padding: 40px 20px 40px;
    }
}

@media (max-width: 767px) {
    .ib-page-banner--safety { min-height: 480px !important; }
}

/* ==============================================
   SAFETY PAGE  —  CSR MANAGEMENT
   ============================================= */

.ib-safety-csr-section {
    padding-top: 60px;
    background: #ffffff;
    overflow: hidden;
}

.ib-safety-csr-wrap {
    display: flex;
    align-items: flex-start;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    gap: 72px;
}

.ib-safety-csr-text {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.ib-safety-csr-title {
    margin: 0;
    line-height: 1.5;
    margin-bottom: 20px;
}

.ib-safety-csr-body {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.ib-safety-csr-body p {
    line-height: 1.75;
    margin: 0;
    font-weight: 500;
    color: var(--wp--preset--color--foreground);
}

.ib-safety-csr-photo {
    flex: 0 0 450px;
    max-width: 450px;
    position: relative;
}

.ib-safety-csr-photo img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    aspect-ratio: 1;
    border-radius: 16px;
}

/* Pillars strip */
.ib-safety-csr-pillars {
    padding-top: 80px;
    position: relative;
    z-index: 2;
}

.ib-safety-csr-pillars-inner {
    display: flex;
    margin: 0 auto;
}

.ib-safety-csr-pillar {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 24px;
}

.ib-safety-csr-pillar__icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ib-safety-csr-pillar__icon img {
    width: 80px;
    height: 80px;
    object-fit: contain;
}

.ib-safety-csr-pillar__title {
    font-size: var(--wp--preset--font-size--lg);
    font-weight: 600;
    margin: 20px 0 8px;
    line-height: normal;
    text-transform: capitalize;
}

.ib-safety-csr-pillar__desc {
    margin: 0;
    line-height: normal
}

/* ==============================================
   SAFETY PAGE  —  SAFETY INITIATIVES
   ============================================= */

.ib-safety-initiatives-section {
    background: #ffffff;
    padding: 80px 0;
    overflow: hidden;
}

.ib-safety-initiatives-inner {
    margin: 0 auto;
}

/* Flex accordion slider — no Swiper, no glitch */
.ib-safety-slider-wrap {
    position: relative;
}

/* Swiper container — height only; Swiper itself sets overflow:hidden */
.ib-safety-accordion {
    height: 420px;
}

/* Suppress every animation while the JS loop snaps from a clone back to its
   real twin, so the position/width/desc/photo changes commit in one paint. */
.ib-safety-accordion.is-snapping,
.ib-safety-accordion.is-snapping * {
    transition: none !important;
}

/* Inactive slide: 1 part of 4 (gaps = 2×8 px = 16 px) */
.ib-safety-acc-slide {
    width: calc((100% - 16px) / 4);
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    transition: width 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Active slide: 2 parts of 4 → 50 % of usable width */
.ib-safety-acc-slide.swiper-slide-active {
    width: calc((100% - 16px) / 2);
}

.ib-safety-slide-item {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Photo fills entire slide */
.ib-safety-slide-photo {
    position: absolute;
    inset: 0;
    background: #1a1a1a;
}

.ib-safety-slide-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.55s ease;
}

.ib-safety-acc-slide.swiper-slide-active .ib-safety-slide-photo img {
    transform: scale(1.04);
}

/* Gradient overlay */
.ib-safety-slide-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.18) 55%, transparent 100%);
    pointer-events: none;
}

/* Content overlay */
.ib-safety-slide-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    z-index: 2;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

/* Numbered circle — always visible */
.ib-safety-slide-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.75);
    color: #ffffff;
    font-size: 24px;
    font-weight: 400;
    line-height: 1;
    flex-shrink: 0;
}

.ib-safety-slide-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: hidden;
    flex: 1;
    min-width: 0;
}

/* Title: always visible; truncate on narrow inactive slides */
.ib-safety-slide-title {
    color: #ffffff;
    font-weight: 500;
    font-size: var(--wp--preset--font-size--lg);
    margin: 0;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 28px;
    transition: max-height 0.35s ease;
}

.ib-safety-slide-desc {
    color: #fff;
    margin: 0;
    line-height: 1.65;
    font-size: var(--wp--preset--font-size--base);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.35s ease 0.55s, transform 0.35s ease 0.55s;
}

.ib-safety-acc-slide.swiper-slide-active .ib-safety-slide-title {
    max-height: 84px;
}

.ib-safety-acc-slide.swiper-slide-active .ib-safety-slide-desc {
    max-height: 200px;
    opacity: 1;
    transform: translateY(0);
    transition: max-height 0.45s ease-in 0.55s, opacity 0.35s ease 0.55s, transform 0.35s ease 0.55s;
}

/* Slider nav arrows */
.ib-safety-slider-nav {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 24px;
}

/* ==============================================
   SAFETY PAGE  —  RESPONSIVE
   ============================================= */

@media (max-width: 1024px) {
    .ib-safety-csr-wrap {
        gap: 40px;
        flex-direction: column;
        text-align: center;
        align-items: center;
    }
    .ib-safety-slide-num {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }
    .ib-safety-slide-title {
        font-size: var(--wp--preset--font-size--lg);
    }
}

@media (max-width: 767px) {
    .ib-safety-csr-section {
        padding-top: 40px;
    }
    .ib-safety-csr-text {
        flex: none;
    }
    .ib-safety-csr-photo {
        flex: none;
        min-height: 260px;
    }
    .ib-safety-csr-pillars {
        padding: 48px 0;
    }
    .ib-safety-csr-pillars-inner {
        flex-direction: column;
        gap: 32px;
    }
    .ib-safety-csr-pillar + .ib-safety-csr-pillar {
        padding-top: 32px;
    }
    .ib-safety-initiatives-section {
        padding: 48px 0;
    }
    .ib-safety-accordion {
        height: 320px;
    }
    .ib-safety-acc-slide,
    .ib-safety-acc-slide.swiper-slide-active,
    .ib-safety-acc-slide:nth-last-child(-n+2).swiper-slide-active {
        width: 100%;
    }
    .ib-safety-slide-num {
        width: 32px;
        height: 32px;
        font-size: 16px;
    }
    .ib-safety-slide-title {
        font-size: var(--wp--preset--font-size--md);
    }
    .ib-safety-csr-pillar__title {
        margin: 12px 0 4px;
    }
    .ib-safety-acc-slide.swiper-slide-active .ib-safety-slide-desc {
        max-height: 254px;
    }
}