/* ==========================================================
   P019008 SERVICE ARCHITECTURE
   POSHESH / CONNECTED DIGITAL SYSTEM
   ========================================================== */


.ph-architecture {
    position: relative;
    overflow: hidden;
    isolation: isolate;

    padding-block:
        clamp(100px, 10vw, 150px);

    border-bottom:
        1px solid rgba(255,255,255,.045);

    background:
        radial-gradient(
            720px 420px at 82% 40%,
            rgba(54,205,216,.075),
            transparent 72%
        ),
        radial-gradient(
            620px 400px at 12% 70%,
            rgba(111,78,216,.065),
            transparent 72%
        ),
        #02080e;
}


/* ----------------------------------------------------------
   INTRO
   ---------------------------------------------------------- */

.ph-architecture-head {
    display: grid;

    grid-template-columns:
        minmax(0,.68fr)
        minmax(0,1.32fr);

    gap:
        clamp(42px,7vw,105px);

    align-items: end;

    margin-block-end:
        clamp(48px,6vw,72px);
}


.ph-architecture-index {
    direction: ltr;
}


.ph-architecture-index strong {
    display: block;

    color:
        rgba(216,170,98,.75);

    font-size:
        clamp(4rem,7.8vw,7.4rem);

    font-weight: 250;

    line-height: .78;

    letter-spacing: -.065em;
}


.ph-architecture-index span {
    display: block;

    margin-block-start:
        20px;

    color:
        #5d747f;

    font-size:
        .64rem;

    letter-spacing:
        .15em;
}


.ph-architecture-copy h2 {
    max-width:
        760px;

    margin:
        10px 0 16px;

    color:
        #f3f8f9;

    font-size:
        clamp(2.25rem,4.15vw,4rem);

    line-height:
        1.25;

    letter-spacing:
        -.035em;
}


.ph-architecture-copy p {
    max-width:
        660px;

    margin: 0;

    color:
        #899fa9;

    line-height:
        2.05;
}


/* ----------------------------------------------------------
   SYSTEM FRAME
   ---------------------------------------------------------- */

.ph-architecture-frame {
    position: relative;

    padding:
        clamp(28px,4vw,52px)
        clamp(18px,3vw,34px);

    overflow: hidden;

    border:
        1px solid rgba(83,210,221,.16);

    border-radius:
        28px;

    background:
        linear-gradient(
            rgba(83,210,221,.024) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(83,210,221,.018) 1px,
            transparent 1px
        ),
        linear-gradient(
            145deg,
            #06151f,
            #020b12 68%
        );

    background-size:
        64px 64px,
        64px 64px,
        auto;

    box-shadow:
        0 34px 82px rgba(0,0,0,.25);
}


.ph-architecture-frame::before {
    content: "";

    position: absolute;

    top: 0;
    inset-inline-end: 9%;

    width:
        220px;

    height:
        2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--ph-cyan),
            #b9f5f6,
            var(--ph-violet),
            transparent
        );
}


.ph-architecture-frame::after {
    content: "";

    position: absolute;

    bottom: 0;
    inset-inline-start: 8%;

    width:
        125px;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--ph-gold),
            transparent
        );
}


/* ----------------------------------------------------------
   ARCHITECTURE TRACKS
   ---------------------------------------------------------- */

.ph-architecture-tracks {
    position: relative;

    display: grid;

    gap:
        clamp(13px,1.7vw,20px);
}


.ph-architecture-track {
    position: relative;

    min-height:
        118px;

    display: grid;

    grid-template-columns:
        96px
        minmax(180px,.62fr)
        minmax(260px,1.38fr)
        150px;

    align-items: center;

    gap:
        clamp(18px,2.5vw,36px);

    padding:
        20px
        clamp(22px,3vw,38px);

    overflow: hidden;

    border:
        1px solid rgba(255,255,255,.055);

    background:
        linear-gradient(
            90deg,
            rgba(7,28,40,.98),
            rgba(5,20,31,.92) 55%,
            rgba(3,13,21,.86)
        );
}


/* asymmetry */

.ph-architecture-track:nth-child(1) {
    margin-inline-end:
        7%;

    border-radius:
        7px 22px 22px 7px;
}


.ph-architecture-track:nth-child(2) {
    margin-inline-start:
        5%;

    border-radius:
        22px 7px 7px 22px;
}


.ph-architecture-track:nth-child(3) {
    margin-inline-end:
        3%;

    border-radius:
        7px 22px 22px 7px;
}


.ph-architecture-track:nth-child(4) {
    margin-inline-start:
        8%;

    border-radius:
        22px 7px 7px 22px;
}


/* colored energy edge */

.ph-architecture-track::before {
    content: "";

    position: absolute;

    inset-block: 0;
    inset-inline-start: 0;

    width:
        3px;

    background:
        var(--ph-cyan);
}


.ph-architecture-track:nth-child(1)::before {
    background:
        var(--ph-gold);
}


.ph-architecture-track:nth-child(2)::before {
    background:
        var(--ph-violet);
}


.ph-architecture-track:nth-child(3)::before {
    background:
        var(--ph-cyan);
}


.ph-architecture-track:nth-child(4)::before {
    background:
        linear-gradient(
            180deg,
            var(--ph-cyan),
            var(--ph-violet)
        );
}


/* inner energy rail */

.ph-architecture-track::after {
    content: "";

    position: absolute;

    top: 50%;
    inset-inline-start: 62%;

    width:
        28%;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            rgba(84,218,228,.30),
            rgba(84,218,228,.05),
            transparent
        );

    pointer-events: none;
}


.ph-architecture-track:nth-child(1)::after {
    background:
        linear-gradient(
            90deg,
            rgba(216,170,98,.32),
            rgba(216,170,98,.05),
            transparent
        );
}


.ph-architecture-track:nth-child(2)::after {
    background:
        linear-gradient(
            90deg,
            rgba(119,89,223,.34),
            rgba(119,89,223,.05),
            transparent
        );
}


/* ----------------------------------------------------------
   TRACK CONTENT
   ---------------------------------------------------------- */

.ph-track-number {
    direction: ltr;

    color:
        rgba(255,255,255,.12);

    font-size:
        clamp(2.6rem,4.8vw,4.8rem);

    font-weight:
        250;

    line-height:
        1;
}


.ph-track-title small {
    display: block;

    margin-block-end:
        8px;

    color:
        #54717d;

    font-size:
        .57rem;

    font-weight:
        750;

    letter-spacing:
        .13em;
}


.ph-track-title strong {
    color:
        #edf5f6;

    font-size:
        clamp(1rem,1.45vw,1.28rem);

    line-height:
        1.45;
}


.ph-track-output {
    position: relative;
    z-index: 2;

    color:
        #849aa4;

    font-size:
        .76rem;

    line-height:
        1.85;
}


.ph-track-output strong {
    display: block;

    margin-block-end:
        5px;

    color:
        #c6d5da;

    font-size:
        .72rem;

    font-weight:
        650;

    letter-spacing:
        .025em;
}


.ph-track-state {
    direction: ltr;

    justify-self: end;

    padding:
        8px 11px;

    border:
        1px solid rgba(84,218,228,.11);

    border-radius:
        7px;

    color:
        #607b86;

    font-size:
        .56rem;

    letter-spacing:
        .09em;
}


/* ----------------------------------------------------------
   SYSTEM SPINE
   ---------------------------------------------------------- */

.ph-architecture-spine {
    display: grid;

    grid-template-columns:
        1fr auto 1fr;

    align-items: center;

    gap:
        20px;

    margin-block-start:
        30px;
}


.ph-architecture-spine::before,
.ph-architecture-spine::after {
    content: "";

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(84,218,228,.25)
        );
}


.ph-architecture-spine::after {
    background:
        linear-gradient(
            90deg,
            rgba(119,89,223,.25),
            transparent
        );
}


.ph-architecture-spine span {
    direction: ltr;

    color:
        #617a85;

    font-size:
        .59rem;

    letter-spacing:
        .13em;
}


/* ----------------------------------------------------------
   CONCLUSION
   ---------------------------------------------------------- */

.ph-architecture-conclusion {
    display: grid;

    grid-template-columns:
        minmax(0,.8fr)
        minmax(0,1.2fr);

    gap:
        clamp(40px,7vw,95px);

    align-items: center;

    margin-block-start:
        40px;
}


.ph-architecture-conclusion-line {
    height:
        1px;

    background:
        linear-gradient(
            90deg,
            rgba(216,170,98,.36),
            rgba(84,218,228,.38),
            rgba(119,89,223,.28),
            transparent
        );
}


.ph-architecture-conclusion p {
    margin: 0;

    color:
        #859ba5;

    font-size:
        .86rem;

    line-height:
        2;
}


.ph-architecture-conclusion strong {
    color:
        #d8e5e8;
}


/* ----------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------- */

@media (max-width:1000px) {

    .ph-architecture-head {
        grid-template-columns:
            1fr;
    }


    .ph-architecture-track {
        grid-template-columns:
            74px
            minmax(150px,.7fr)
            minmax(200px,1.3fr);
    }


    .ph-track-state {
        display:
            none;
    }

}


@media (max-width:720px) {

    .ph-architecture-frame {
        padding:
            16px;
    }


    .ph-architecture-track,
    .ph-architecture-track:nth-child(n) {
        margin-inline:
            0;

        grid-template-columns:
            62px 1fr;

        min-height:
            145px;

        gap:
            12px 18px;

        border-radius:
            16px;
    }


    .ph-track-output {
        grid-column:
            2;
    }


    .ph-architecture-track::after {
        display:
            none;
    }


    .ph-architecture-conclusion {
        grid-template-columns:
            1fr;
    }

}


/* END P019008 SERVICE ARCHITECTURE */


/* ==========================================================
   P019008B TRACK TYPOGRAPHY
   ========================================================== */

.ph-track-ghost {
    position: absolute;

    z-index: 0;

    inset-inline-end:
        clamp(35px,7vw,100px);

    top: 50%;

    transform:
        translateY(-50%);

    pointer-events: none;

    color:
        rgba(223,242,245,.032);

    font-size:
        clamp(3.2rem,7vw,7rem);

    font-weight:
        800;

    line-height:
        .8;

    letter-spacing:
        -.055em;

    white-space:
        nowrap;
}


.ph-architecture-track:nth-child(1) .ph-track-ghost {
    color:
        rgba(216,170,98,.045);
}


.ph-architecture-track:nth-child(2) .ph-track-ghost {
    color:
        rgba(119,89,223,.050);
}


.ph-architecture-track:nth-child(3) .ph-track-ghost {
    color:
        rgba(84,218,228,.045);
}


.ph-architecture-track:nth-child(4) .ph-track-ghost {
    color:
        rgba(122,111,230,.042);
}


.ph-track-number,
.ph-track-title,
.ph-track-output,
.ph-track-state {
    position: relative;
    z-index: 2;
}


@media (max-width:720px) {

    .ph-track-ghost {
        inset-inline-end:
            18px;

        font-size:
            clamp(2.8rem,16vw,5rem);

        opacity:
            .65;
    }

}

/* END P019008B TRACK TYPOGRAPHY */