/* Enterprise Page Styles - minimal, reusing base look */

.enterprise-page .accent {
    color: #d8ff4b;
}

.ep-hero p {
    max-width: 1020px !important;

}

.ep-cta {
    /*background: linear-gradient(90deg, #3bf5ff, #ffe6c8);*/
    background: #ffffff;
    color: #0d0d0d;
    font-size: var(--fs-18-16);
    font-weight: var(--font-weight-semibold);
    border-radius: 9999px;
    /*padding: 10px 64px;*/

    width: clamp(335px, calc(335px + 65 * ((100vw - 375px) / 1065)), 400px);
    height: 56px; /* Tablet/Mobile default */

    margin: 64px auto 0;

    display: flex;
    justify-content: center;
    align-items: center;
}

@media (min-width: 992px) {
    .ep-cta {
        height: 64px;
    }
}

.ep-cta .arrow {
    margin-left: 6px;
}

/* Ensure EP CTA retains background on hover/focus/active (override Bootstrap .btn states) */
.ep-cta:hover,
.ep-cta:focus,
.ep-cta:active {
    background: #ffffff; /* keep solid white background */
    color: #0d0d0d; /* preserve text color */
    text-decoration: none; /* avoid underline on hover */
}

/* Card */
.ep-grade-intel {
    background: #FFFFFF;
}

.ep-grade {
    /*background: linear-gradient(to bottom,*/
    /*#ffffff 10%,*/
    /*#ffffff 60%,*/
    /*rgba(124, 58, 255, 0.22) 100%);*/

    background: radial-gradient(ellipse 70% 55% at bottom center,
    rgba(124, 58, 255, 0.20) 0%,
    #ffffff 100%);
    border: 2px solid #7C3AFF;
}


.ep-bullets {
    padding-top: var(--spacing-48-24);
}

.ep-bullets li {
    padding-bottom: var(--spacing-12-8);
    color: #484E57;
}

/* Domains & Responsible */
.ep-list {
    display: grid;
    gap: var(--spacing-16-8);
    padding-top: var(--spacing-48-24);
}

/* make right stack match left card height */
.ep-domains .row.g-3, .ep-domains .row.g-4 {
    align-items: stretch;
    padding-top: 16px;
}

.ep-domains .col-lg-6 {
    display: flex;
}

.ep-domains .col-lg-6:first-child > .ep-card {
    height: 100%;
    width: 100%;
}

.ep-right-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
    width: 100%;
}

.ep-right-stack .ep-card {
    flex: 1 1 0;
}

.ep-domains-card {
    border: 2px solid #3BF5FF;
    border-radius: 32px;

    background: linear-gradient(to bottom,
    #ffffff 8%,
    #72f8ff 100%);
}

.ep-responsible-card {
    border: 2px solid #D8FF5A;
    border-radius: 32px;
    background: linear-gradient(to bottom,
    #ffffff 8%,
    rgba(216, 255, 90, 0.45) 100%);
}

.ep-built-card {
    border: 2px solid #EAEAEA;
    border-radius: 32px;
}


.ep-list-item {
    background: rgba(255, 255, 255);
    border-radius: var(--spacing-24-16);
    padding: 24px;
}

.ep-list-item h5 {
    font-size: var(--fs-24-20);
    font-weight: var(--font-weight-semibold);
    color: #121314;
}

.section-title {
    font-size: 1.6rem;
    margin-bottom: 4px;
    font-weight: var(--font-weight-semibold);
}

/* Evolution timeline */
.ep-evolution-card {
    border: 2px solid #D9D9D9;
    border-radius: 32px;
    /*background: #000;*/
    color: #121314;
}

.ep-evolution .ep-card {
    overflow: visible; /* allow tooltips to escape the card bounds */
}

.ep-timeline {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 12px;
    align-items: center;
}

.ep-phase {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    font-size: 13px;
    cursor: pointer;
}

.phase-label {
    font-size: var(--fs-18-16);
    color: #121314;
    font-weight: var(--font-weight-regular);
}

.phase-number {
    font-size: var(--fs-16-14);
    color: #484E57;
    font-weight: var(--font-weight-regular);
}

.ep-phase .dot {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #121314;
    border: 4px solid rgba(255, 255, 255);
    box-shadow: 0 0 16px rgba(18, 19, 20, 0.55);
    display: grid;
    place-items: center;
    overflow: hidden; /* ensure images are clipped inside the circle */
    transition: transform 180ms ease, background-color 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.ep-phase .dot img {
    display: none; /* replaced by masked pseudo-element for color control */
}

/* Masked SVG icons inserted via ::after, allowing arbitrary color */
.ep-phase .dot::after {
    content: "";
    width: 45px;
    height: 45px;
    background-color: #D8FF5A; /* default icon color */
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    display: block;
}

/* Map each phase to its corresponding SVG mask */
.ep-timeline .ep-phase:nth-child(1) .dot::after {
    -webkit-mask-image: url(../../images/codicon_robot.svg);
    mask-image: url(../../images/codicon_robot.svg);
}

.ep-timeline .ep-phase:nth-child(2) .dot::after {
    -webkit-mask-image: url(../../images/codicon_organization.svg);
    mask-image: url(../../images/codicon_organization.svg);
}

.ep-timeline .ep-phase:nth-child(3) .dot::after {
    -webkit-mask-image: url(../../images/fluent_organization-16-regular.svg);
    mask-image: url(../../images/fluent_organization-16-regular.svg);
}

.ep-timeline .ep-phase:nth-child(4) .dot::after {
    -webkit-mask-image: url(../../images/streamline_brain-cognitive.svg);
    mask-image: url(../../images/streamline_brain-cognitive.svg);
}

.ep-timeline .ep-phase:nth-child(5) .dot::after {
    -webkit-mask-image: url(../../images/hugeicons_artificial-intelligence-03.svg);
    mask-image: url(../../images/hugeicons_artificial-intelligence-03.svg);
}

.ep-timeline .ep-phase:nth-child(6) .dot::after {
    -webkit-mask-image: url(../../images/icon-park-outline_lens-alignment.svg);
    mask-image: url(../../images/icon-park-outline_lens-alignment.svg);
}

.ep-timeline .ep-phase:nth-child(7) .dot::after {
    -webkit-mask-image: url(../../images/iconoir_agile.svg);
    mask-image: url(../../images/iconoir_agile.svg);
}

/* Hover: change icon color to black */
.ep-timeline .ep-phase:hover .dot::after,
.ep-grade .ep-timeline .ep-phase:hover .dot::after {
    background-color: #000000;
}

.ep-phase.highlight .dot {
    background: #d8ff4b;
    width: 90px;
    height: 90px;
    border: 5px solid rgba(255, 255, 255);

}

.ep-phase.highlight img {
    width: 45px;
    height: 45px;
}

.ep-phase .glow {
    box-shadow: 0 0 16px #d8ff4b, 0 0 36px rgba(216, 255, 75, 0.6);
}

@media (max-width: 991px) {
    .ep-timeline {
        grid-template-columns: repeat(3, 1fr);
    }
}


/* Key Enterprise Domains: image left, text stacked */
.ep-domains-card .ep-list-item {
    display: grid;
    grid-template-columns: 68px 1fr;
    grid-template-rows: auto auto;
    column-gap: 12px;
    align-items: center;
}

.ep-domains-card .ep-list-item img {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 68px;
    height: 68px;
    object-fit: contain;
}

.ep-domains-card .ep-list-item h5 {
    grid-column: 2;
    grid-row: 1;
    margin: 0 0 4px;
}

.ep-domains-card .ep-list-item p {
    grid-column: 2;
    grid-row: 2;
    margin: 0;
}

@media (max-width: 767.98px) {
    /* Stack and center Key Enterprise Domains items on mobile */
    .ep-domains-card .ep-list-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        /* neutralize grid-specific gaps on mobile */
        column-gap: 0;
        row-gap: 6px;
    }

    .ep-domains-card .ep-list-item img {
        /* reset any grid placement and add spacing below the image */
        margin: 0 0 8px;
    }

    .ep-domains-card .ep-list-item h5,
    .ep-domains-card .ep-list-item p {
        /* ensure no grid placements interfere on mobile */
    }
}

/* Vendor badges inside Built for Tomorrow card */
.vendor-badges {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 16px 24px;
    padding-top: var(--spacing-48-24);
    padding-left: 0;
    margin: 0;
    align-items: center;
}

.badge-vendor {
    display: flex;
    align-items: center;
    justify-content: center;
}

.badge-vendor img {
    max-height: 34px;
    width: auto;
    object-fit: contain;
    filter: none;
}

/* Grade Intelligence bullets: replace default dots with check icons */
.ep-grade .ep-bullets {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.ep-grade .ep-bullets li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 10px; /* keep existing spacing */
    color: #484E57;
}

.ep-grade .ep-bullets li i {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 2px solid #7C3AFF;
    border-radius: 50%;
    color: #7C3AFF;
    margin-right: 10px;
    margin-top: 2px; /* align icon with first line of text */
    font-size: 14px; /* icon glyph size inside the badge */
}

/* Timeline connecting line (with fading ends) */
.ep-timeline {
    position: relative;
    margin-top: var(--spacing-48-24);
    padding-top: var(--spacing-64-48);
}

.ep-timeline::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    /* Fade from transparent (white) to black and back to transparent for arrow-like ends */
    background: linear-gradient(90deg,
    rgba(18, 19, 20, 0) 0%,
    rgba(18, 19, 20, 0.65) 12%,
    rgba(18, 19, 20, 1) 25%,
    rgba(18, 19, 20, 1) 75%,
    rgba(18, 19, 20, 0.65) 88%,
    rgba(18, 19, 20, 0) 100%
    );
    top: 106px; /* center through 60px dots (approx half) */
    z-index: 0;
    border-radius: 4px; /* softer edges */
}

/* Hover highlight behavior for timeline dots */
.ep-timeline .ep-phase:hover .dot,
.ep-grade .ep-timeline .ep-phase:hover .dot {
    background: #d8ff4b;
    transform: scale(1.5);
    border-color: rgba(255, 255, 255, 1);
    box-shadow: 0 0 16px #d8ff4b, 0 0 36px rgba(216, 255, 75, 0.6);
}

/* Ensure dots render above the line */
.ep-phase .dot {
    position: relative;
    z-index: 1;
}

/* Desktop: force two-line titles by constraining label width */
.ep-timeline .ep-phase > span:not(.dot) {
    display: block;
    max-width: 100px;
    margin: 0 auto;
    white-space: normal; /* allow wrapping between words */
}

/* Tooltips for timeline phases */
.ep-timeline .ep-phase {
    position: relative;
}

.ep-tooltip {
    position: absolute;
    bottom: 220px; /* sit above the dot/label with extra clearance so it doesn't cover the icon */
    left: 50%;
    transform: translateX(-50%);
    min-width: 260px;
    max-width: 360px;
    background: #ffffff;
    color: #121314;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px;
    padding: 14px 16px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
    z-index: 1000;
    text-align: left !important;
}

.ep-tooltip::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -8px;
    transform: translateX(-50%);
    width: 14px;
    height: 14px;
    background: #ffffff;
    border-left: 1px solid rgba(0, 0, 0, 0.08);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    transform: translateX(-50%) rotate(45deg);
}

.ep-tooltip-phase {
    font-size: 16px;
    color: #484E57;
    margin: 0 0 4px;
}

.ep-tooltip-title {
    font-weight: var(--font-weight-semibold);
    font-size: 24px;
    margin: 0;
}

.ep-tooltip-desc {
    margin: 6px 0 0;
    font-size: 16px;
    color: #484E57;
}

.ep-tooltip-list {
    list-style: none;
    padding: 8px 0 0;
    margin: 0;
    display: grid;
    gap: 8px;
}

.ep-tooltip-list li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 14px;
    color: #333;
}

.ep-tooltip-list li i {
    color: #7C3AFF;
}

.ep-tooltip-list li .sub {
    font-size: 13px;
    color: #555;
    margin-top: 2px;
}

/* show on hover */
.ep-timeline .ep-phase:hover .ep-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-2px);
}

/* Disable tooltips on very small screens */
@media (max-width: 991px) {
    .ep-tooltip {
        display: none !important;
    }

    .ep-timeline {
        display: flex;
        flex-direction: column;
        gap: 12px;
        align-items: flex-start; /* ensure the stack starts from the left */
        position: relative; /* ensure the vertical connector is positioned correctly */
    }

    /* Hide the horizontal connector on mobile */
    .ep-timeline::before {
        display: none;
    }

    /* Show a vertical connector on mobile */
    .ep-timeline::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 30px; /* center line through 60px dots */
        width: 2px;
        background: linear-gradient(180deg,
        rgba(18, 19, 20, 0) 0%,
        rgba(18, 19, 20, 0.65) 12%,
        rgba(18, 19, 20, 1) 25%,
        rgba(18, 19, 20, 1) 75%,
        rgba(18, 19, 20, 0.65) 88%,
        rgba(18, 19, 20, 0) 100%
        );
        z-index: 0;
        border-radius: 4px;
    }

    .ep-phase {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start; /* start content at the left */
        text-align: left;
        gap: 12px;
        /*width: 100%; !* make each row span full width *!*/
    }

    .ep-phase .dot {
        flex: 0 0 60px;
        width: 60px;
        height: 60px;
        margin: 0; /* ensure it hugs the left */
    }

    /* Remove top padding on the text span used in desktop layout */
    .ep-phase > span:not(.dot) {
        padding-top: 0 !important;
    }

    /* Mobile: keep phase titles on a single line */
    .ep-timeline .ep-phase > span:not(.dot) {
        white-space: nowrap;
        /*max-width: none;*/

    }

    /* Increase label text size on mobile for readability */
    /*.ep-phase {*/
    /*    font-size: 14px;*/
    /*    line-height: 1.25;*/
    /*}*/
    .ep-phase .dot::after {
        width: 30px;
        height: 30px;

    }

}