/* =========================================================================
   Section: Nos technologies (sct-19)
   Standalone plain CSS (no SCSS build). Source: scss/sections/nos-technologies/
   _sct-19-nos-technologies.scss (kept in sync manually, NOT compiled).
   Zigzag list of bordered cards rendered from the existing `nos_technologies`
   ACF content. Page bg is #F7F1ED so the white "arch" stays visible.

   Layout (from Figma node 2805-52368):
   - Card box is 810px wide (border included).
   - Card 1 = stacked variant (photo on top, breaking out above the box).
   - Cards 2,4,6 = box pushed RIGHT, photo on the left.
     Cards 3,5,7 = box pushed LEFT, photo on the right.
   - Photo is 450x320, absolutely positioned: it overlaps the box by 180px and
     breaks out 270px toward the arch center. The photo side gets 230px padding.
   - A textured "big pill" SVG (360x256) sits behind the photo and peeks ~26px
     out on the outer-bottom corner.
   - Number badge floats on the top border at the text column's left edge.
   ========================================================================= */

/* page background: blue base (#d9e8f2) with a beige (#eeddd1) wave BAND across the
   middle — blue on top, beige in the middle, blue at the bottom (matches Figma node
   2805-52368). bg-beige-band.svg has a crisp wavy edge on BOTH its top and bottom,
   sized 100% auto so the waves keep their shape (no vertical stretch). */
.sct-19-nos-technologies {
    position: relative;
    overflow: hidden;
    background-color: #d9e8f2;
    background-image: url('../template-parts/sections/nos-technologies/img/bg-beige-band.svg');
    background-repeat: no-repeat;
    background-position: center 35%;
    background-size: 100% auto;
    padding: 60px 20px 120px;
}

/* recolor the page-header wave SVG (.data-bg = bg-white.svg) from white to the
   section blue on this page only. The header's #ecf5fb top then flows through a
   wavy edge into #d9e8f2 — the soft top wave from the Figma mockup — and blends
   seamlessly into the section's blue background below. */
.page-template-nos-technologies .sct-page-header .data-bg path {
    fill: #d9e8f2;
}

.sct-19-nos-technologies * {
    box-sizing: border-box;
}

/* white rounded "arch" that holds the cards */
.sct-19-nos-technologies .tech-arch {
    width: 1410px;
    max-width: 100%;
    margin: 0 auto;
    background: #fff;
    border-radius: 680px 680px 60px 60px;
    overflow: hidden;
    padding: 230px 120px 100px;
}

.sct-19-nos-technologies .tech-list {
    display: flex;
    flex-direction: column;
    gap: 80px;
    max-width: 1080px;
    margin: 0 auto;
}

/* ============================== CARD ================================== */
/* two-column cards (2..n): box holds the text; photo is absolute */
.tech-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 360px;
    width: 810px;
    max-width: 100%;
    padding: 60px 60px 60px 230px;
    background: #fff;
    border: 2.297px solid var(--tc-border, #f4b3b3);
    border-radius: 50px;
}

/* default (photo left) hugs the right edge of the list */
.tech-card:not(.tech-card--reverse):not(.tech-card--stacked) {
    margin-left: auto;
}

/* reverse (photo right) hugs the left edge; swap the wide padding */
.tech-card--reverse {
    margin-right: auto;
    padding: 60px 230px 60px 90px;
}

/* ---- media column (absolute: overlaps 180px, breaks out 270px) ---- */
.tech-card__media {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 450px;
    height: 320px;
}

.tech-card:not(.tech-card--reverse):not(.tech-card--stacked) .tech-card__media {
    left: -270px;
}

.tech-card--reverse .tech-card__media {
    right: -270px;
}

.tech-card__media img {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    height: 320px;
    object-fit: cover;
    border-radius: 50px;
}

/* textured "big pill" rectangle peeking out behind the photo */
.tech-card__back {
    position: absolute;
    z-index: 1;
    width: 360px;
    height: 256px;
    background-image: var(--tc-pill);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.tech-card:not(.tech-card--reverse):not(.tech-card--stacked) .tech-card__back {
    left: -26px;
    bottom: -26px;
}

.tech-card--reverse .tech-card__back {
    right: -26px;
    bottom: -26px;
}

/* ---- text column ---- */
.tech-card__text {
    position: relative;
    min-width: 0;
}

.tech-card__head {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 16px;
}

.tech-card__num {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 40px;
    background: #304c83;
    color: #fffcf0;
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    font-size: 24px;
    line-height: 1.5;
}

/* two-column cards: float the badge above the top border at the text's left edge
   (positioned relative to .tech-card__text, which is vertically centered) */
.tech-card:not(.tech-card--stacked) .tech-card__num {
    position: absolute;
    top: -85px;
    left: 0;
}

/* high specificity so theme heading rules can't hijack the card title */
.tech-card .tech-card__title {
    margin: 0;
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    font-size: 28px;
    line-height: 1.3;
    letter-spacing: normal;
    text-align: left;
    text-transform: none;
    color: #1e4c85;
}

.tech-card__desc {
    color: #323232;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.8;
    text-align: justify;
}

.tech-card__desc p {
    margin: 0 0 12px;
}

.tech-card__desc p:last-child {
    margin-bottom: 0;
}

/* ---- decorative grain pills (desktop only) ---- */
.tech-card:nth-child(6n + 1)::after,
.tech-card:nth-child(6n + 5)::after,
.tech-card:nth-child(6n)::after {
    content: "";
    position: absolute;
    z-index: 3;
    width: 22px;
    height: 160px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    pointer-events: none;
}

.tech-card:nth-child(6n + 1)::after {
    right: -6px;
    top: 24%;
    transform: translateY(-50%);
    background-image: url('../template-parts/sections/nos-technologies/img/pill-yellow.svg');
}

.tech-card:nth-child(6n + 5)::after {
    left: -6px;
    bottom: 30px;
    background-image: url('../template-parts/sections/nos-technologies/img/pill-blue.svg');
}

/* pink pill: horizontal variant (own 112x30 size overrides the shared 22x160),
   tucked under the bottom-right corner */
.tech-card:nth-child(6n)::after {
    width: 112px;
    height: 30px;
    right: 60px;
    bottom: -13px;
    background-image: url('../template-parts/sections/nos-technologies/img/pill-pink.svg');
}

/* ============================== STACKED (card 1) ===================== */
.tech-card--stacked {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    min-height: 0;
    width: 810px;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 60px 60px;
}

.tech-card--stacked .tech-card__media {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    transform: none;
    width: 450px;
    max-width: 100%;
    height: 320px;
    margin: -161px auto 60px;
}

.tech-card--stacked .tech-card__media img {
    height: 320px;
}

/* stacked pill peeks out on the top-right corner */
.tech-card--stacked .tech-card__back {
    left: auto;
    bottom: auto;
    right: -16px;
    top: -16px;
}

.tech-card--stacked .tech-card__text {
    display: block;
}

/* stacked badge: pull it left so it sits centered on the card's left border */
.tech-card--stacked .tech-card__head {
    position: relative;
}

.tech-card--stacked .tech-card__num {
    position: absolute;
    left: -84px;
    top: 50%;
    transform: translateY(-50%);
}

/* ============================== RESPONSIVE =========================== */
@media (max-width: 1199px) {
    .sct-19-nos-technologies .tech-arch {
        padding: 180px 60px 80px;
    }
}

@media (max-width: 1025px) {
    .sct-19-nos-technologies .tech-arch {
        padding: 60px 20px;
        border-radius: 60px;
    }

    .sct-19-nos-technologies .tech-list {
        gap: 50px;
        max-width: 640px;
    }

    /* collapse every card to a single column: photo on top, no break-out */
    .tech-card,
    .tech-card--reverse,
    .tech-card--stacked {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 24px;
        min-height: 0;
        width: 100%;
        max-width: 640px;
        margin: 0 auto;
        padding: 40px;
    }

    .tech-card__media,
    .tech-card--reverse .tech-card__media,
    .tech-card--stacked .tech-card__media {
        position: static;
        top: auto;
        left: auto;
        right: auto;
        transform: none;
        width: 100%;
        height: auto;
        margin: 0;
        order: -1;
    }

    .tech-card__media img,
    .tech-card--stacked .tech-card__media img {
        height: auto;
        aspect-ratio: 450 / 300;
    }

    .tech-card__back,
    .tech-card::after {
        display: none;
    }

    .tech-card .tech-card__num {
        position: static;
        left: auto;
        top: auto;
        transform: none;
    }

    .tech-card__text {
        display: block;
    }
}

@media (max-width: 767px) {
    .sct-19-nos-technologies {
        padding: 30px 12px 70px;
    }

    .sct-19-nos-technologies .tech-arch {
        padding: 30px 14px;
        border-radius: 30px;
    }

    .tech-card,
    .tech-card--reverse,
    .tech-card--stacked {
        padding: 24px;
        gap: 18px;
        border-radius: 30px;
    }

    .tech-card__media img,
    .tech-card--stacked .tech-card__media img {
        border-radius: 24px;
    }

    .tech-card__num {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }

    .tech-card .tech-card__title {
        font-size: 22px;
    }

    .tech-card__desc {
        font-size: 14px;
        text-align: left;
    }

    /* desktop-only AOS — keep everything visible on mobile */
    .sct-19-nos-technologies [data-aos] {
        opacity: 1 !important;
        transform: none !important;
    }
}