/* ==========================================================================
   SWIPER CARD CAROUSEL OVERRIDES — Runway Digital
   Styles the Swiper coverflow carousels across all card-grid sections.
   ========================================================================== */

/* ── Global overflow fix (prevent horizontal bleed) ──────────────────────── */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

* {
    box-sizing: border-box;
}

/* ── Container safety ────────────────────────────────────────────────────── */
.container-rd,
.why-section-container,
.stages-container,
.arsenal-container,
.partner-diff-container {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

/* ── Hero grid: force single column below 1024px ─────────────────────────── */
@media (max-width: 1023px) {
    .hero-grid {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        gap: 0 !important;
    }

    .hero-content,
    .hero-form-card {
        width: 100% !important;
        max-width: 100% !important;
        flex-shrink: 0 !important;
    }

    .hero-container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .hero-subhead {
        max-width: 100% !important;
        margin-top: 0.5rem !important;
        margin-bottom: 0.85rem !important;
    }

    .industry-switcher {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ── Search-ads-industries section: force full-width column ──────────────── */
@media (max-width: 1023px) {
    .search-ads-industries-section .container-rd,
    .search-industry-split-grid {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    .search-industry-split-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.5rem !important;
    }

    .search-ads-industries-section {
        overflow: hidden !important;
    }
}

/* ── Global section & container overflow fix ─────────────────────────────── */
section,
.section-rd {
    overflow-x: hidden !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* ── Swiper slide cards — base sizing ────────────────────────────────────── */
.rd-card-slide {
    height: auto;
    display: flex;
    align-items: stretch;
}

.rd-card-slide > * {
    width: 100%;
    flex: 1 1 auto;
    box-sizing: border-box;
}

/* ── Navigation buttons ──────────────────────────────────────────────────── */
.swiper-button-prev[class*="rd-nav-"],
.swiper-button-next[class*="rd-nav-"] {
    --swiper-navigation-size: 28px;
    --swiper-navigation-color: #202124;
    width: 36px;
    height: 36px;
    background: #ffffff;
    border-radius: 50%;
    border: 1px solid rgba(32, 33, 36, 0.12);
    box-shadow: 0 2px 8px rgba(32, 33, 36, 0.08);
    top: 50%;
    transform: translateY(-50%);
}

.swiper-button-prev[class*="rd-nav-"]::after,
.swiper-button-next[class*="rd-nav-"]::after {
    font-size: 12px;
    font-weight: 700;
    color: #202124;
}

/* ── Pagination bullets ──────────────────────────────────────────────────── */
.swiper-pagination[class*="rd-pagi-"] {
    position: relative;
    margin-top: 1.25rem;
    bottom: auto;
}

.swiper-pagination[class*="rd-pagi-"] .swiper-pagination-bullet {
    width: 6px;
    height: 6px;
    background: rgba(32, 33, 36, 0.25);
    opacity: 1;
    transition: background 250ms ease, transform 250ms ease;
}

.swiper-pagination[class*="rd-pagi-"] .swiper-pagination-bullet-active {
    background: #fbbc05;
    transform: scale(1.4);
}

/* ── 3D Card Stack-Up Transition Animation ─────────────────────────────── */
.swiper[class*="rd-swiper-"] .swiper-slide {
    transition: transform 450ms cubic-bezier(0.25, 1, 0.5, 1), opacity 450ms ease, box-shadow 450ms ease !important;
    transform-origin: center bottom;
}

.swiper[class*="rd-swiper-"] .swiper-slide:not(.swiper-slide-active) {
    opacity: 0.78;
    filter: none;
    transform: scale(0.93) translateY(8px) !important;
}

.swiper[class*="rd-swiper-"] .swiper-slide-active {
    opacity: 1;
    transform: scale(1.025) translateY(-4px) !important;
    z-index: 30 !important;
}

/* ── Pricing section special: highlight active (middle) slide ────────────── */
.rd-swiper-pricing .swiper-slide-active .pricing-card.google-glow {
    transform: scale(1.02);
    transition: transform 300ms ease;
}

/* ── Why-cards-grid, search-intent-grid, stages-grid, arsenal-grid, pricing-grid:
   When Swiper JS rewrites the DOM, these become Swiper parent containers ──── */
.why-cards-grid[data-rd-swiper],
.search-intent-grid[data-rd-swiper],
.stages-grid[data-rd-swiper],
.arsenal-grid[data-rd-swiper],
.pricing-grid[data-rd-swiper] {
    display: block !important;
    grid-template-columns: none !important;
    overflow: hidden;
    position: relative;
}

/* ── Mobile spacing adjustments ──────────────────────────────────────────── */
@media (max-width: 767px) {
    /* Section heading spacing */
    .why-header,
    .stages-header-block,
    .arsenal-header,
    .partner-diff-header {
        margin-bottom: 1.5rem !important;
        padding: 0 0.25rem;
    }

    /* Card inner padding on mobile */
    .why-card {
        padding: 1.15rem !important;
    }

    .intent-card {
        padding: 1rem !important;
    }

    .stage-card {
        padding: 1rem !important;
    }

    .arsenal-card {
        padding: 1.15rem !important;
    }

    /* Navigation hide on narrow mobile */
    [class*="rd-nav-"] {
        display: none;
    }
}

/* ── Tablet: show nav buttons ────────────────────────────────────────────── */
@media (min-width: 480px) {
    [class*="rd-nav-"] {
        display: flex !important;
    }
}

/* Pop-zoom overflow fix — allow cards to zoom out of container */
.swiper[class*="rd-swiper-"] {
    overflow: visible !important;
}
.swiper[class*="rd-swiper-"] .swiper-wrapper {
    overflow: visible !important;
}
.rd-card-slide {
    overflow: visible !important;
}