/* ==========================================================================
   Managed IT services — curved 3D carousel
   (cards sit on a concave arc: outer cards are large and angled inward,
    centre cards are small and face front. Auto-slides, arrows at the bottom.)
   ========================================================================== */

.managed.managed-arc {
    /* one screen = viewport minus the fixed navbar (height set by header-glass.js) */
    --arc-nav: var(--hdr-compact, 64px);
    box-sizing: border-box;
    height: auto;
    /* one-screen min-height, padding and scroll-margin: see sections-snap.css */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ---- smaller headings ---- */
.managed.managed-arc .costomized-head { padding: 0 18px; }

.managed.managed-arc .costomized-head h2 {
    font-size: clamp(1.35rem, 2.2vw + .6rem, 2rem);
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: -.01em;
}

.managed.managed-arc .costomized-head p {
    font-size: .95rem;
    line-height: 1.55;
    max-width: 760px;
    margin: .75rem auto 0;
    opacity: .85;
}

/* ---- stage ---- */
.arc {
    position: relative;
    margin-top: clamp(.6rem, 2vh, 1.5rem);
    user-select: none;
    flex: 1 1 auto;                              /* takes whatever height the heading/text leave */
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.arc__stage {
    position: relative;
    width: 100%;                        /* full width of the section (100vw also counted the scrollbar,\n                                           so the cards were laid out ~15px wider than the visible page) */
    left: 0;
    margin-left: 0;
    flex: 1 1 0;                                 /* cards stage flexes to fit the screen */
    min-height: 230px;
    max-height: 560px;
    perspective: var(--arc-persp, 1100px);
    perspective-origin: 50% 50%;
    /* overflow:hidden cut the cards' drop-shadows off along the stage's bottom edge (the faint
       horizontal line). Clip only left/right (screen edges) and let the shadow run past the
       bottom; the section itself still clips anything that would leave it. */
    overflow: visible;
    clip-path: inset(-24px 0 -56px 0);
    touch-action: pan-y;
    cursor: default;
}

.arc__card {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--arc-w, 190px);
    height: var(--arc-h, 280px);
    margin: calc(var(--arc-h, 280px) / -2) 0 0 calc(var(--arc-w, 190px) / -2);
    border-radius: var(--arc-r, 28px);       /* set by the script: scales with the card size */
    background-size: cover;
    background-position: center;
    background-color: #1b2a78;
    box-shadow: 0 6px 16px rgba(5, 8, 40, .4);
    overflow: hidden;
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-user-drag: none;
    transition: box-shadow .3s ease;
}

.arc__card::after {            /* legibility gradient */
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(8, 10, 45, .78) 0%, rgba(8, 10, 45, 0) 55%);
    pointer-events: none;
}

.arc__dim {                    /* replaces the old brightness() filter (see managed-arc.js) */
    position: absolute;
    inset: 0;
    z-index: 1;
    background: #05082a;
    opacity: 0;
    pointer-events: none;
}

.arc__card.is-active {
    box-shadow: 0 6px 18px rgba(5, 8, 40, .45);
}

/* animated gradient border on the centre (active) card only */
.arc__card.is-active::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    padding: 3px;                                  /* border thickness */
    border-radius: inherit;
    background: linear-gradient(90deg, #B51BB5 0%, #F0A400 35.58%, #AC20BC 65.87%, #43D2E0 100%);
    background-size: 200% 100%;
    animation: arc-border-move 4s ease-in-out infinite alternate;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    pointer-events: none;
}

@keyframes arc-border-move {
    0%   { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

.arc__card--clone { opacity: 0; }       /* hidden until the script places it (never shown on mobile) */

.arc__card.is-edge {             /* outer cards: soft shadow only (no border) so they read as sitting on top */
    box-shadow: 0 6px 16px rgba(5, 8, 40, .55);
}

.arc__label {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 1;
    padding: 0 10px 12px;
    text-align: center;
    color: #fff;
    line-height: 1.15;
}
.arc__label b {
    display: block;
    font-size: .7rem;
    font-weight: 600;
    color: #ffb27a;
    letter-spacing: .04em;
    margin-bottom: 2px;
}
.arc__label span {
    font-size: clamp(8px, calc(var(--arc-w, 190px) * .085), 13px);   /* scales with the card */
    font-weight: 600;
}

/* ---- bottom bar: arrow · caption · arrow ---- */
.arc__bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(.75rem, 3vw, 2rem);
    margin: clamp(.6rem, 1.8vh, 1.4rem) auto 0;
    flex: 0 0 auto;
    padding: 0 18px;
    max-width: 760px;
}

.arc__btn {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .55);
    background: rgba(16, 20, 60, .45);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: background .25s ease, color .25s ease, transform .25s ease;
}
.arc__btn svg { width: 18px; height: 18px; }
.arc__btn:hover,
.arc__btn:focus-visible { background: #fff; color: #102CBA; transform: scale(1.08); outline: none; }
.arc__btn:active { transform: scale(.95); }

.arc__info {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
    min-height: 9.2rem;
}
.arc__info h3 {
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0 0 .35rem;
}
.arc__info p {
    font-size: .9rem;
    line-height: 1.5;
    opacity: .88;
    margin: 0;
}
.arc__cta {
    display: inline-block;
    margin-top: .8rem;
    padding: .6rem 1.6rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .85);
    background: #fff;
    color: #102CBA;
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .25s ease, color .25s ease, transform .25s ease;
}
.arc__cta:hover,
.arc__cta:focus-visible { background: transparent; color: #fff; transform: translateY(-2px); outline: none; }

.arc__info > div { transition: opacity .35s ease, transform .35s ease; }
.arc__info.is-swapping > div { opacity: 0; transform: translateY(6px); }

.arc__dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: .6rem;
    flex: 0 0 auto;
}
.arc__dots span {
    width: 8px; height: 8px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .4);
    transition: width .3s ease, background .3s ease;
}
.arc__dots span.is-on { width: 24px; background: #fff; }

/* ---- mobile ---- */
@media (max-width: 768px) {
    .managed.managed-arc { padding: 1.1rem 0 1.1rem; }

    .managed.managed-arc .costomized-head h2 { font-size: clamp(1.2rem, 5vw, 1.45rem); }
    .managed.managed-arc .costomized-head p  { font-size: .86rem; }

    .arc { margin-top: .8rem; }
    .arc__stage { min-height: 190px; }
    .arc__card { border-radius: 20px; }
    .arc__label { padding: 0 3px 10px; }
    .arc__label span { font-size: .6rem; overflow-wrap: normal; word-break: normal; }
    .arc__label b { font-size: .62rem; }

    .arc__btn { display: none; }                 /* mobile = touch / swipe only */
    .arc__bar { margin-top: .6rem; gap: .6rem; }
    .arc__info { min-height: 9.6rem; }
    .arc__cta { padding: .6rem 1.4rem; font-size: .85rem; }
    .arc__info h3 { font-size: 1.05rem; }
    .arc__info p  { font-size: .84rem; }
}

@media (prefers-reduced-motion: reduce) {
    .arc__card.is-active::before { animation: none; }
    .arc__cta {
    display: inline-block;
    margin-top: .8rem;
    padding: .6rem 1.6rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .85);
    background: #fff;
    color: #102CBA;
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .25s ease, color .25s ease, transform .25s ease;
}
.arc__cta:hover,
.arc__cta:focus-visible { background: transparent; color: #fff; transform: translateY(-2px); outline: none; }

.arc__info > div { transition: none; }
}

/* ---- section background: purple -> blue, flowing one way in an endless loop (same movement as
   About MADDS). The gradient ends on the colour it starts with, so the repeat is seamless, and
   the pan moves exactly one tile per cycle. Change 16s to speed it up / slow it down. ---- */
.managed.managed-arc {
    background: linear-gradient(90deg,
        rgba(185, 0, 255, 0.85) 0%,
        rgba(0, 88, 255, 0.85) 50%,
        rgba(185, 0, 255, 0.85) 100%);
    background-size: 200% 100%;
    background-repeat: repeat-x;
    animation: managed-gradient-flow 16s linear infinite;
}

@keyframes managed-gradient-flow {
    from { background-position: 0% 50%; }
    to   { background-position: 200% 50%; }      /* exactly one tile -> seamless loop */
}

@media (prefers-reduced-motion: reduce) {
    .managed.managed-arc { animation: none; }
}

/* ==========================================================================
   LAPTOP SCREENS AND UP (>= 1024px): taller / wider images, SAME section height.
   The freed space comes from putting the texts in single rows:
     • heading block centred: title on one row, description on the next
     • the caption under the cards is ONE row: arrow · title · text · button · arrow
   The stage already flexes to fill whatever height is left, so the section itself is
   never taller than one screen.
   ========================================================================== */
@media (min-width: 1024px) {

    /* heading block, centred: title on ONE row, description on the next row */
    .managed.managed-arc .container-div .costomized-head {
        display: block;
        padding: 0;
        text-align: center;
    }

    .managed.managed-arc .container-div .costomized-head h2 {
        margin: 0 auto;
        text-align: center;
        white-space: nowrap;                /* title stays on one row */
    }

    .managed.managed-arc .container-div .costomized-head h2 br {
        display: none;                      /* "Managed IT services customized for your industry" on one line */
    }

    .managed.managed-arc .container-div .costomized-head p {
        max-width: none;
        width: 100%;
        margin: .45rem auto 0;
        font-size: .92rem;
        line-height: 1.5;
        text-align: center;
    }

    /* stage: takes all the freed height */
    .arc {
        margin-top: clamp(.4rem, 1.2vh, 1rem);
    }

    .arc__stage {
        min-height: 300px;
        max-height: 780px;
    }

    /* caption row: arrow · [heading / text / button stacked, centred] · arrow
       - pulled up closer to the cards (negative margin, so no empty gap under them)
       - sits above the stage so the stage's soft shadows never cover it */
    .arc__bar {
        position: relative;
        z-index: 3;
        /* bar width = text block + arrows, so the arrows sit close to the middle instead of at the
           far screen edges. Make --arc-bar-w smaller to bring them even closer, larger to push out. */
        --arc-bar-w: 840px;
        max-width: min(var(--site-width, 88%), var(--arc-bar-w));
        width: min(var(--site-width, 88%), var(--arc-bar-w));
        margin-top: calc(-1 * clamp(1.5rem, 6vh, 3.25rem));
        padding: 0;
        gap: clamp(.75rem, 2vw, 1.75rem);
        align-items: center;               /* arrows stay vertically centred on the caption */
    }

    /* caption, centred, one item per row: heading, then text, then button.
       The text area has a FIXED height (room for 3 lines), so the button, and everything
       below it, stays in exactly the same place whatever the industry's text length. */
    .arc__info {
        min-height: 0;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        text-align: center;
    }

    .arc__info > div {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
    }

    .arc__info h3 {
        margin: 0 0 .7rem;                 /* space: heading -> text */
        font-size: 1.2rem;
        line-height: 1.3;
        white-space: nowrap;
        text-align: center;
    }

    .arc__info p {
        display: flex;                     /* centre short texts inside the fixed text area */
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        margin: 0 auto;
        max-width: 78ch;
        min-height: calc(3 * 1.45 * .88rem);   /* 3 lines: the longest text */
        font-size: .88rem;
        line-height: 1.45;
        text-align: center;
    }

    .arc__cta {
        margin: 1rem 0 0;                  /* space: text -> button */
        white-space: nowrap;
    }

    .arc__dots {
        position: relative;
        z-index: 3;
        margin-top: .9rem;                 /* dots no longer touch the button */
    }
}