/* =========================================================
   ALGORIXSTUDIOS — PROJECT DETAIL PAGE
   Clean responsive stylesheet
   ========================================================= */


/* =========================================================
   PAGE FOUNDATION
   ========================================================= */

body.has-algorix-project-page #content,
body.has-algorix-project-page #content > .ast-container,
body.has-algorix-project-page .site-content,
body.has-algorix-project-page .site-content > .ast-container,
body.has-algorix-project-page #primary,
body.has-algorix-project-page .content-area,
body.has-algorix-project-page #main,
body.has-algorix-project-page .site-main {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.has-algorix-project-page #secondary,
body.has-algorix-project-page .widget-area.secondary,
body.has-algorix-project-page #colophon,
body.has-algorix-project-page .site-footer {
    display: none !important;
}

.ax-project-page {
    --project-dark: #103846;
    --project-dark-2: #164b5a;
    --project-teal: #2b6675;
    --project-accent: #4a8fa3;
    --project-ink: #102b36;
    --project-muted: #60757d;
    --project-surface: #f4f8f9;
    --project-line: rgba(27, 75, 90, .13);

    width: 100%;
    max-width: none;
    overflow: clip;
    background: #fff;
    color: var(--project-ink);
}

/* One centered width system for the entire project page. */
body.has-algorix-project-page .ax-project-page .ax-shell {
    width: min(1180px, calc(100% - clamp(32px, 7vw, 96px))) !important;
    max-width: 1180px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}


/* =========================================================
   HERO
   ========================================================= */

.ax-project-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(82px, 8vw, 108px) 0 clamp(66px, 6vw, 86px);
    color: #fff;
    background:
        radial-gradient(circle at 82% 18%, rgba(75, 155, 176, .28), transparent 30%),
        linear-gradient(102deg, #103846 0%, #164b5a 58%, #2b6675 100%);
}

.ax-project-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .10;
    background-image:
        linear-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px);
    background-size: 50px 50px;
}

.ax-project-hero__inner {
    position: relative;
    z-index: 2;
}

.ax-project-back {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 28px;
    color: #d8ebef;
    font-size: .92rem;
    font-weight: 750;
    text-decoration: none;
    transition: color .2s ease, transform .2s ease;
}

.ax-project-back:hover {
    color: #fff;
    transform: translateX(-3px);
}

.ax-project-category {
    margin: 0 0 12px;
    color: #9fd7e1;
    font-size: .78rem;
    font-weight: 850;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.ax-project-title {
    max-width: 900px;
    margin: 0 0 16px;
    color: #fff;
    font-family: "Rajdhani", "Exo 2", Inter, system-ui, sans-serif;
    font-size: clamp(3rem, 5.2vw, 5rem);
    font-weight: 800;
    line-height: .96;
    letter-spacing: -.045em;
}

.ax-project-subtitle {
    max-width: 780px;
    margin: 0 0 22px;
    color: #d5e7eb;
    font-size: clamp(1.04rem, 1.45vw, 1.28rem);
    line-height: 1.6;
}

.ax-project-tech {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ax-project-tech span {
    padding: 7px 11px;
    border: 1px solid rgba(255, 255, 255, .17);
    border-radius: 999px;
    color: #e8f7fa;
    background: rgba(255, 255, 255, .07);
    font-size: .76rem;
    font-weight: 750;
    backdrop-filter: blur(5px);
}


/* =========================================================
   MAIN CONTENT
   ========================================================= */

.ax-project-content {
    padding: clamp(64px, 6vw, 86px) 0 clamp(90px, 8vw, 120px);
    background: linear-gradient(180deg, #f6fafb 0%, #fff 100%);
}

.ax-project-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(300px, .75fr);
    grid-template-areas:
        "media sidebar"
        "overview sidebar"
        "gallery sidebar";
    align-items: start;
    gap: 26px clamp(28px, 3vw, 38px);
}


/* =========================================================
   MAIN MEDIA
   ========================================================= */

.ax-project-media {
    grid-area: media;
    position: relative;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 1px solid var(--project-line);
    border-radius: 20px;
    background: #0f3542;
    box-shadow: 0 18px 48px rgba(16, 56, 70, .09);
}

.ax-project-media > img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.ax-project-video {
    width: 100%;
    height: 100%;
}

.ax-project-video iframe,
.ax-project-video video {
    width: 100% !important;
    height: 100% !important;
    display: block;
    border: 0;
}

.ax-project-media__placeholder {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    color: #d9f1f5;
    background:
        radial-gradient(circle at 70% 24%, rgba(95, 185, 206, .28), transparent 27%),
        linear-gradient(120deg, #103846, #2b6675);
}

.ax-project-media__placeholder span {
    font-family: "Rajdhani", Inter, sans-serif;
    font-size: clamp(4rem, 10vw, 8rem);
    font-weight: 800;
}


/* =========================================================
   RIGHT SIDEBAR
   ========================================================= */

.ax-project-sidebar {
    grid-area: sidebar;
    position: sticky;
    top: 84px;
    display: grid;
    gap: 16px;
}

.ax-project-side-card {
    padding: 24px;
    border: 1px solid var(--project-line);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(16, 56, 70, .04);
}

.ax-project-side-card__eyebrow {
    margin: 0 0 8px;
    color: #36798a;
    font-size: .72rem;
    font-weight: 850;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.ax-project-side-card h2 {
    margin: 0 0 12px;
    color: var(--project-ink);
    font-family: "Rajdhani", "Exo 2", Inter, sans-serif;
    font-size: 1.45rem;
    line-height: 1.1;
}

.ax-project-side-card p {
    margin: 0;
    color: var(--project-muted);
    font-size: .92rem;
    line-height: 1.68;
}

.ax-project-live-button {
    width: 100%;
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 5px;
    padding: 10px 16px;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(100deg, #2b6675, #4a8fa3);
    font-size: .88rem;
    font-weight: 850;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease;
}

.ax-project-live-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(43, 102, 117, .18);
}

.ax-project-live-button.is-disabled {
    color: #60757d;
    background: #edf3f5;
    cursor: default;
}


/* =========================================================
   OVERVIEW
   ========================================================= */

.ax-project-overview {
    grid-area: overview;
    padding: clamp(28px, 3vw, 38px);
    border: 1px solid var(--project-line);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(16, 56, 70, .035);
}

.ax-project-overview > h2 {
    max-width: 650px;
    margin: 0 0 20px;
    color: var(--project-ink);
    font-family: "Rajdhani", "Exo 2", Inter, sans-serif;
    font-size: clamp(2rem, 3vw, 2.8rem);
    line-height: 1.04;
}

.ax-project-richtext {
    color: #4f6871;
    font-size: clamp(.97rem, 1vw, 1.04rem);
    line-height: 1.8;
}

.ax-project-richtext > *:first-child {
    margin-top: 0;
}

.ax-project-richtext > *:last-child {
    margin-bottom: 0;
}

.ax-project-richtext h2,
.ax-project-richtext h3,
.ax-project-richtext h4 {
    color: var(--project-ink);
}

.ax-project-richtext a {
    color: #2b7284;
}


/* =========================================================
   GALLERY
   ========================================================= */

.ax-project-gallery {
    grid-area: gallery;
    padding: clamp(28px, 3vw, 38px);
    border: 1px solid var(--project-line);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(16, 56, 70, .035);
}

.ax-project-gallery__heading {
    margin-bottom: 22px;
}

.ax-project-gallery__heading h2 {
    margin: 0;
    color: var(--project-ink);
    font-family: "Rajdhani", "Exo 2", Inter, sans-serif;
    font-size: clamp(1.9rem, 2.8vw, 2.6rem);
    line-height: 1.04;
}

.ax-project-gallery__thumbs {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 8px;
    scrollbar-width: thin;
}

.ax-project-gallery__thumb {
    flex: 0 0 112px;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 10px;
    background: #edf4f6;
    cursor: pointer;
    opacity: .72;
    transition: opacity .2s ease, border-color .2s ease, transform .2s ease;
}

.ax-project-gallery__thumb:hover {
    opacity: 1;
    transform: translateY(-2px);
}

.ax-project-gallery__thumb.is-active {
    border-color: #398196;
    opacity: 1;
}

.ax-project-gallery__thumb img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.ax-project-gallery__stage {
    overflow: hidden;
    margin-top: 12px;
    border-radius: 14px;
    background: #edf4f6;
}

.ax-project-gallery__stage img {
    width: 100%;
    height: auto;
    max-height: 680px;
    display: block;
    object-fit: contain;
}


/* =========================================================
   LAPTOP
   ========================================================= */

@media (max-width: 1180px) {
    .ax-project-layout {
        grid-template-columns: minmax(0, 1.42fr) minmax(290px, .74fr);
        column-gap: 28px;
    }
}


/* =========================================================
   IPAD / TABLET
   ========================================================= */

@media (max-width: 900px) {
    body.has-algorix-project-page .ax-project-page .ax-shell {
        width: min(calc(100% - 44px), 760px) !important;
    }

    .ax-project-hero {
        padding: 76px 0 66px;
    }

    .ax-project-layout {
        grid-template-columns: 1fr;
        grid-template-areas:
            "media"
            "sidebar"
            "overview"
            "gallery";
        gap: 22px;
    }

    .ax-project-sidebar {
        position: static;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {
    body.has-algorix-project-page .ax-project-page .ax-shell {
        width: min(calc(100% - 30px), 560px) !important;
    }

    .ax-project-hero {
        padding: 68px 0 58px;
    }

    .ax-project-back {
        margin-bottom: 24px;
    }

    .ax-project-title {
        font-size: clamp(2.65rem, 13vw, 3.8rem);
    }

    .ax-project-subtitle {
        font-size: 1rem;
    }

    .ax-project-content {
        padding: 54px 0 82px;
    }

    .ax-project-sidebar {
        grid-template-columns: 1fr;
    }

    .ax-project-media,
    .ax-project-overview,
    .ax-project-gallery {
        border-radius: 17px;
    }

    .ax-project-overview,
    .ax-project-gallery {
        padding: 24px 20px;
    }

    .ax-project-side-card {
        padding: 22px 20px;
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 390px) {
    body.has-algorix-project-page .ax-project-page .ax-shell {
        width: calc(100% - 24px) !important;
    }

    .ax-project-media {
        aspect-ratio: 4 / 3;
    }

    .ax-project-gallery__thumb {
        flex-basis: 94px;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    .ax-project-live-button,
    .ax-project-gallery__thumb,
    .ax-project-back {
        transition: none !important;
    }

    .ax-project-gallery__thumb:hover,
    .ax-project-live-button:hover,
    .ax-project-back:hover {
        transform: none !important;
    }
}