/* ==========================================================================
   retire-with-components.css
   Legacy page styles (Homepage, Platform, and other pages not yet rebuilt
   on the design system). Do not add new styles here. Delete this file and
   its import in layout.css only after no page uses these classes.
   ========================================================================== */

/* ==== Homepage ==== */
.elementor .homepage-hero {
    background-color: var(--background-tertiary-inverse);
}

.homepage-hero .heading h1 {
    font-family: var(--typography-font-brand);
    color: var(--content-primary-inverse);
    font-size: var(--font-size-48);
    letter-spacing: var(--ls-neg-96);
    line-height: var(--line-height-120);
    font-weight: var(--font-weight-500);
    margin: 0 0 20px 0;
    padding: 0;
}

.homepage-hero .subheading .elementor-heading-title {
    color: var(--content-secondary-inverse);
    /* Body/b20-bold */
    font-family: var(--typography-font-primary);
    font-size: 20px;
    font-style: normal;
    font-weight: var(--weight-bold);
    line-height: var(--lh-relaxed); /* 29.6px */
    letter-spacing: var(--ls-neg-20);
    margin-bottom: 40px;
}

.homepage-hero a {
    text-decoration: none;
    color: var(--color-white-a100);
    font-weight: var(--font-weight-500);
}

.homepage-hero a:hover {
    text-decoration: underline;
}

.elementor .success-included-section h2,
.elementor .blog-section h2,
.elementor .solutions-section h2,
.elementor .cta-1col-section h2,
.elementor .products-section h2,
.elementor .platform-section h2 {
    font-family: var(--typography-font-secondary);
    font-size: 14px;
    font-style: normal;
    font-weight: var(--weight-regular);
    line-height: var(--lh-none); /* 14px */
    letter-spacing: var(--ls-pos-14);
    text-transform: uppercase;
    color: var(--content-primary);
    margin-bottom: 16px;
}

.elementor .success-included-section h3,
.elementor .blog-section h3,
.elementor .solutions-section h3,
.elementor .cta-1col-section h3,
.elementor .products-section h3,
.elementor .platform-section h3 {
    font-size: 32px;
    font-style: normal;
    font-weight: var(--weight-bold);
    line-height: var(--lh-tight); /* 38.4px */
    letter-spacing: var(--ls-neg-64);
    font-family: var(--typography-font-brand);
}

.solutions-section .title p {
    color: var(--content-primary, #141413);

    /* Overline/o14 */
    font-family: var(--typography-font-secondary);
    font-size: 14px;
    font-style: normal;
    font-weight: var(--weight-regular);
    line-height: var(--lh-none); /* 14px */
    letter-spacing: var(--ls-pos-14);
    text-transform: uppercase;
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
}

.products-section .product-container .title p {
    color: var(--content-primary);
    font-family: var(--typography-font-primary);
    font-size: 16px;
    font-style: normal;
    font-weight: var(--weight-bold);
    line-height: var(--lh-relaxed); /* 23.68px */
    letter-spacing: var(--ls-neg-32);
    margin-bottom: 8px;
}

.solutions-section .description p,
.products-section .product-container .description p {
    color: var(--content-secondary);
    font-size: 16px;
    font-style: normal;
    font-weight: var(--weight-regular);
    line-height: var(--lh-relaxed); /* 23.68px */
    letter-spacing: var(--ls-neg-016);
}

.products-section .product-container .chevron img {
    width: 24px;
    height: 24px;
    padding: 14px;
    box-sizing: content-box;
}

.products-section .product-container .chevron img:hover {
    border-radius: 100px;
    background: var(--color-black-a08, rgba(0, 0, 0, 0.08));
}
.products-section .product-container .mobile-link p {
    font-family: var(--content-primary);
    font-size: 16px;
    font-style: normal;
    font-weight: var(--weight-regular);
    line-height: var(--lh-relaxed); /* 23.68px */
    letter-spacing: var(--ls-neg-016);
    text-decoration-line: underline;
}
.products-section .product-container .mobile-link p:hover {
    text-decoration-line: none;
}

/* ==== Homepage Platform Section ==== */
.elementor .platform-section {
    background-color: var(--color-background-inverse);
}

.platform-section h2 {
    font-family: var(--typography-font-secondary);
    color: var(--content-primary-inverse);
    font-size: 14px;
    font-style: normal;
    font-weight: var(--weight-regular);
    line-height: var(--lh-none); /* 14px */
    letter-spacing: var(--ls-pos-14);
    text-transform: uppercase;
    color: var(--content-primary);
    margin-bottom: 16px;
    color: var(--content-primary-inverse);
}

.platform-section h3 {
    font-size: 32px;
    color: var(--content-primary-inverse);
    font-style: normal;
    font-weight: var(--weight-bold);
    line-height: var(--lh-tight); /* 38.4px */
    letter-spacing: var(--ls-neg-64);
    font-family: var(--typography-font-brand);
}

.platform-section .inner-map {
    background-color: #1f1f1f;
    border-radius: var(--image-border-radius);
}

.platform-section .inner-code .overline-heading p,
.platform-section .inner-video .overline-heading p,
.platform-section .inner-map .overline-heading p {
    color: var(--color-white-a100);
    font-family: var(--typography-font-secondary);
    font-size: 14px;
    font-style: normal;
    font-weight: var(--weight-regular);
    line-height: var(--lh-none); /* 14px */
    letter-spacing: var(--ls-pos-14);
    text-transform: uppercase;
    margin-bottom: 16px;
}

.platform-section .inner-code .heading p,
.platform-section .inner-map .heading p,
.platform-section .inner-video .heading p {
    color: var(--color-white-a100);
    font-family: var(--typography-font-brand);
    font-size: 32px;
    font-style: normal;
    font-weight: var(--weight-bold);
    line-height: var(--lh-tight); /* 38.4px */
    letter-spacing: var(--ls-neg-64);
    margin-bottom: 16px;
}

.platform-section .inner-code .subtext p,
.platform-section .inner-map .subtext p,
.platform-section .inner-video .subtext p {
    color: var(--content-secondary-inverse);
    font-family: var(--typography-font-primary);
    font-size: 16px;
    font-style: normal;
    font-weight: var(--weight-regular);
    line-height: var(--lh-relaxed); /* 23.68px */
    letter-spacing: var(--ls-neg-016);
}

.platform-section .inner-map .stats-block {
    margin-top: 40px;
}

.platform-section .inner-map .stats-block .container {
    border-left: 1px solid var(--color-line-inverse);
    padding-left: 12px;
}
.platform-section .inner-map .stats-block .stat-heading p {
    color: var(--content-primary-inverse);

    /* Headline/h20 */
    font-family: var(--typography-font-primary);
    font-size: 20px;
    font-style: normal;
    font-weight: var(--weight-bold);
    line-height: var(--lh-tight); /* 24px */
    letter-spacing: var(--ls-neg-40);
    margin-bottom: 4px;
}
.platform-section .inner-map .stats-block .stat-figure p {
    color: var(--content-secondary-inverse);
    font-size: 14px;
    font-style: normal;
    font-weight: var(--weight-regular);
    line-height: var(--lh-relaxed); /* 20.72px */
    letter-spacing: var(--ls-neg-14);
}

.platform-section .inner-video {
    background-color: var(--color-black-a100);
    border-radius: var(--image-border-radius);
}

.platform-section .inner-code {
    background-color: var(--background-secondary-inverse);
    border-radius: var(--image-border-radius);
}

.cta-1col-section {
    background-color: var(--background-tertiary);
}

.solutions-section {
    background-color: var(--background-secondary);
}

.solutions-section p a {
    text-decoration: underline;
    color: var(--content-primary) !important;
    font-weight: var(--font-weight-400);
}

.solutions-section p a:hover {
    text-decoration: none !important;
}

.application {
    border-top: 1px solid var(--color-black-a12);
}

.application .title {
    text-transform: uppercase;
}

.video-carousel .title p {
    color: var(--content-primary);
    font-family: var(--typography-font-brand);
    font-size: 24px;
    font-style: normal;
    font-weight: var(--weight-bold);
    line-height: var(--lh-tight); /* 28.8px */
    letter-spacing: var(--ls-neg-48);
    margin-bottom: 8px;
}

.video-carousel .description p {
    color: var(--content-secondary);
    font-family: var(--typography-font-primary);
    font-size: 16px;
    font-style: normal;
    font-weight: var(--weight-regular);
    line-height: var(--lh-relaxed); /* 23.68px */
    letter-spacing: var(--ls-neg-016);
}

.platform-hero .title h1 {
    color: var(--content-primary);
    text-align: center;

    /* Headline/h48 */
    font-family: var(--typography-font-brand);
    font-size: 48px;
    font-style: normal;
    font-weight: var(--weight-bold);
    line-height: var(--lh-tight); /* 57.6px */
    letter-spacing: var(--ls-neg-96);
    margin: 0;
}
.platform-hero .subheading p {
    color: var(--content-primary);
    text-align: center;

    /* Body/b20 */
    font-family: var(--typography-font-primary);
    font-size: 20px;
    font-style: normal;
    font-weight: var(--weight-regular);
    line-height: var(--lh-relaxed); /* 29.6px */
    letter-spacing: var(--ls-neg-20);
    margin: 0;
}

.platform .overtext.elementor-widget .elementor-widget-container > p {
    color: var(--content-primary);
    font-family: var(--typography-font-secondary);
    font-size: 14px;
    font-style: normal;
    font-weight: var(--weight-regular);
    line-height: var(--lh-none);
    letter-spacing: var(--ls-pos-14);
    text-transform: uppercase;
    margin-bottom: 16px;
}

.platform .title > h2 {
    color: var(--content-primary);
    font-family: var(--typography-font-brand);
    font-size: 32px;
    font-style: normal;
    font-weight: var(--weight-bold);
    line-height: var(--lh-tight); /* 38.4px */
    letter-spacing: var(--ls-neg-64);
    margin-bottom: 20px;
}

.platform .subtext > p {
    color: var(--content-secondary);
    font-family: var(--typography-font-primary);
    font-size: 16px;
    font-style: normal;
    font-weight: var(--weight-regular);
    line-height: var(--lh-relaxed); /* 23.68px */
    letter-spacing: var(--ls-neg-016);
    margin-bottom: 28px;
    text-transform: none;
}

.rtk-section {
    background-color: var(--background-tertiary);
}

.rtk-section .application .title .elementor-heading-title {
    color: var(--content-primary) !important;
    font-family: "Azeret Mono", monospace !important;
    font-size: 14px;
    font-style: normal;
    font-weight: var(--weight-regular);
    line-height: var(--lh-none); /* 14px */
    letter-spacing: var(--ls-pos-14);
    text-transform: uppercase;
}

.elementor .rtk-section .application .description > p {
    color: var(--content-secondary);
    font-family: var(--typography-font-primary);
    font-size: 16px;
    font-style: normal;
    font-weight: var(--weight-regular);
    line-height: var(--lh-relaxed); /* 23.68px */
    letter-spacing: var(--ls-neg-016);
}

.pe-section {
    background-color: var(--background-secondary);
}

.platform .image-container,
.platform .image-container .elementor-background-video-container {
    border-radius: var(--image-border-radius); /* Adjust corner radius */
}

.applications-section {
    background-color: var(--background-secondary);
}

.success-stories .heading p {
    color: var(--content-primary);
    font-family: var(--typography-font-primary);
    font-size: 16px;
    font-style: normal;
    font-weight: var(--weight-bold);
    line-height: var(--lh-relaxed); /* 23.68px */
    letter-spacing: var(--ls-neg-32);
    margin-bottom: 8px;
}
.success-stories .description p {
    color: var(--content-secondary);
    font-family: var(--typography-font-primary);
    font-size: 16px;
    font-style: normal;
    font-weight: var(--weight-regular);
    line-height: var(--lh-relaxed); /* 23.68px */
    letter-spacing: var(--ls-neg-016);
    margin-bottom: 16px;
}
.success-stories .link p {
    color: var(--content-primary);
}

/* Full-width outer section */
.cta-2col-section {
    width: 100%;
    box-sizing: border-box;
    padding-inline: 20px; /* horizontal padding for small screens */
}

/* Inner container – handles layout box */
.cta-2col-inner-container {
    max-width: 1160px;
    margin-inline: auto;
    width: 100%;
    box-sizing: border-box;
}

/* Background box with border-radius */
.cta-2col-background-container {
    background-color: var(--background-tertiary);
    border-radius: var(--image-border-radius);
    overflow: hidden; /* ensures content respects border radius */
    width: 100%;
    box-sizing: border-box;
}

/* Padding inside the background container */
.cta-2col-background-container > .e-con-inner {
    max-width: 1160px;
    margin-inline: auto;
    box-sizing: border-box;
}

/* Responsive tweak for smaller screens */
@media (max-width: 768px) {
    .cta-2col-background-container > .e-con-inner {
    }
}

.cta-2col-background-container .overtext p {
    color: var(--content-primary);

    /* Overline/o14 */
    font-family: var(--typography-font-secondary);
    font-size: 14px;
    font-style: normal;
    font-weight: var(--weight-regular);
    line-height: var(--lh-none); /* 14px */
    letter-spacing: var(--ls-pos-14);
    text-transform: uppercase;
    margin-bottom: 16px;
}

.cta-2col-background-container .cta-heading p {
    color: var(--content-primary);
    font-family: var(--typography-font-brand);
    font-size: 32px;
    font-style: normal;
    font-weight: var(--weight-bold);
    line-height: var(--lh-tight); /* 38.4px */
    letter-spacing: var(--ls-neg-64);
}

/* Default: large screens */
.cta-2col-background-container .btn-cta .elementor-button {
    padding-inline: 100px;
}

/* Medium screens: 1024px and below */
@media (max-width: 1024px) {
    .cta-2col-background-container .btn-cta .elementor-button {
        padding-inline: 20px;
    }
}

/* Small screens: 767px and below */
@media (max-width: 767px) {
    .cta-2col-background-container .btn-cta .elementor-button {
        /* existing horizontal padding */
        padding-inline: 40px;
        /* make the button full width */
        width: 100% !important;
        display: flex !important;
        justify-content: center;
        align-items: center; /* centers the text vertically */
        text-align: center;
        box-sizing: border-box;
    }

    /* ensure wrapper allows full width */
    .cta-2col-background-container .btn-cta .elementor-button-wrapper {
        width: 100% !important;
        display: block;
    }

    /* ensure parent flex container doesn’t constrain width */
    .cta-2col-background-container .btn-cta {
        width: 100% !important;
        justify-content: center;
    }
}

/* Parent still controls stretch behavior */
.equal-height-parent {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
}

/* Each child container grows equally */
.equal-height-parent > .elementor-container,
.equal-height-parent > .elementor-element {
    flex: 1 1 0%;
    display: flex;
    flex-direction: column;
}

/* Don't stretch the image */
.equal-height-parent .elementor-widget-image {
    flex: 0 0 auto;
}

/* Title also keeps its size */
.equal-height-parent .elementor-widget-heading {
    flex: 0 0 auto;
}

/* Text editor fills the remaining space */
.equal-height-parent .equal-height-text {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* ==== Peek Carousel Container ==== */
.peek-carousel-container {
    width: 100%;
    max-width: 100vw;
    overflow: hidden;
    padding-bottom: 60px;
    box-sizing: border-box;
    position: relative;
}

.peek-carousel {
    width: 100%;
    box-sizing: border-box;
    overflow: visible;
}

/* ==== Swiper Slides ==== */
.swiper-slide {
    width: 90vw;
    max-width: 680px;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: stretch;
    height: auto;
    transition: transform 0.3s ease;
    box-sizing: border-box;
}

.swiper-slide:hover {
    cursor: default !important;
}

/* ==== Carousel Card ==== */
.carousel-card {
    width: 100%;
    height: 100%;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 440px;
}

.carousel-card img,
.carousel-card video {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    aspect-ratio: 680 / 382;
    border-radius: var(--image-border-radius);
    margin-bottom: 24px;
}

.swiper-slide-active {
    transform: scale(1.05);
    z-index: 2;
}

/* ==== Internal Content Styling ==== */
.full-slide-link {
    display: block;
    text-decoration: none !important;
    color: inherit;
}

.full-slide-link h3 {
    display: inline; /* KEY: prevents full-width underline */
    font-family: var(--typography-font-brand) !important;
    font-size: 24px !important;
    font-weight: var(--weight-bold);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-neg-48);
    color: var(--color-gray-90);
    margin: 0 0 8px 0 !important;
    text-align: left;
    text-decoration: none !important;
    border-bottom: 1px solid transparent; /* Invisible by default */
    transition: border-color 0.2s ease;
}

.full-slide-link:hover h3 {
    border-bottom-color: var(--color-gray-90); /* underline sits under the text only */
}

.carousel-card p,
.carousel-card a p {
    font-family: "Instrument Sans", sans-serif;
    font-size: 16px;
    font-weight: var(--weight-regular);
    line-height: var(--lh-relaxed);
    letter-spacing: var(--ls-neg-016);
    color: var(--color-black-a60) !important;
    margin-top: 4px;
    text-align: left;
    text-decoration: none;
}

.carousel-card p a {
    text-decoration: none !important;
}

.carousel-card p a:hover {
    text-decoration: underline !important;
}

/* ==== Navigation & Pagination ==== */
.peek-carousel-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 32px; /* consistent spacing between buttons and bullets */
    margin-top: 80px;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 2;
}

.swiper-button-prev,
.swiper-button-next {
    position: relative !important;
    width: 40px;
    height: 40px;
    background-color: var(--color-black-a100);
    border-radius: 50%;
    display: flex !important;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    cursor: pointer;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 24px 24px;
    background-image: none;
}

.swiper-button-prev {
    background-image: url("/wp-content/uploads/2025/07/chevron-left-white.svg");
}

.swiper-button-next {
    background-image: url("/wp-content/uploads/2025/07/chevron-right-white.svg");
}

.swiper-button-prev::after,
.swiper-button-next::after {
    display: none;
}

.swiper-pagination {
    position: relative !important;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
}

.swiper-pagination-bullet {
    width: 20px;
    height: 4px;
    border-radius: 100px;
    background: var(--color-gray-50);
    opacity: 1;
    transition: all 0.3s ease;
}

.swiper-pagination-bullet-active {
    width: 36px;
    height: 8px;
    border-radius: 100px;
    background: var(--color-gray-90);
}

/* ==== Mobile Adjustments ==== */
@media (max-width: 768px) {
    .swiper-pagination {
        gap: 4px;
    }

    .peek-carousel-controls {
        gap: 32px; /* preserve spacing even on mobile */
        flex-direction: row;
    }
}

/* ==== Responsive Adjustments ==== */
@media (max-width: 1024px) {
    .carousel-card {
        min-height: 500px;
    }
}

@media (max-width: 800px) {
    .swiper-slide {
        width: 85vw;
        max-width: 85vw;
    }
}

@media (max-width: 600px) {
    .swiper-slide {
        width: 80vw;
        max-width: 80vw;
    }

    .carousel-card {
        min-height: unset;
    }
}