/* AR/VR service cards — used by custom-post-default.hbs shortcode output */

.ar-vr-card-main {
    position: relative;
    padding: 96px 0 48px;
    background: transparent;
    color: #fff;
    /* visible so cards can slide in from the side without clipping */
    overflow-x: visible;
    overflow-y: visible;
}

.ar-vr-card-main .ar-vr-container {
    position: relative;
    z-index: 1;
}

.ar-vr-card-main .container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

.ar-vr-card-main .bottom-row {
    width: 100%;
}

.digital-service-heading {
    color: #000 !important;
    text-align: center;
    width: 50%;
    margin: auto;
    line-height: 1.2;
    padding-bottom: 8rem;
}

/* 6-col grid: row1 full; row2 4+2; row3+ pairs 3+3 */
.ar-vr-cards-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
    align-items: stretch;
}

.ar-vr-card {
    position: relative;
    display: block;
    /* border-radius: 12px; */
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    min-height: 0;
    box-shadow: 0 12px 32px -12px rgba(0, 0, 0, .45);
    /* avoid transform here so scroll-driven reveal + inner .ar-vr-card__bg scale stay smooth */
    transition: box-shadow .35s ease;
}

.ar-vr-card:hover {
    box-shadow: 0 22px 44px -14px rgba(0, 0, 0, .58);
}

/* ── Scroll-driven reveal: all cards enter from the left (CSS only) ── */
/* Scroll progress maps to these keyframes — soft opacity + long horizontal ease feels smooth */
@keyframes ar-vr-card-from-left {
    0% {
        opacity: 0;
        transform: translate3d(-100px, 0, 0);
    }

    22% {
        opacity: 0.25;
    }

    55% {
        opacity: 0.85;
        transform: translate3d(-28px, 0, 0);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes ar-vr-cta-from-left {
    0% {
        opacity: 0;
        transform: translate3d(-56px, 0, 0);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@supports (animation-timeline: view()) {
    /*
     * Smoother feel: longer animation-range = same motion over more scrolling (slower, not snappy).
     * ease-in-out maps scroll progress so motion eases at start/end of the reveal.
     * (transition does not apply during keyframe animation — range + easing do the smoothing.)
     */
    .ar-vr-cards-grid > .ar-vr-card {
        animation: ar-vr-card-from-left ease-in-out both;
        animation-timeline: view(block);
        animation-range: entry 0% cover 58%;
        will-change: transform, opacity;
    }

    /* Stagger: slightly later start, still long range so each card glides in calmly */
    .ar-vr-cards-grid > .ar-vr-card:nth-child(1) {
        animation-range: entry 0% cover 56%;
    }

    .ar-vr-cards-grid > .ar-vr-card:nth-child(2) {
        animation-range: entry 5% cover 60%;
    }

    .ar-vr-cards-grid > .ar-vr-card:nth-child(3) {
        animation-range: entry 8% cover 64%;
    }

    .ar-vr-cards-grid > .ar-vr-card:nth-child(4) {
        animation-range: entry 10% cover 66%;
    }

    .ar-vr-cards-grid > .ar-vr-card:nth-child(5) {
        animation-range: entry 12% cover 68%;
    }

    .ar-vr-cards-grid > .ar-vr-card:nth-child(n + 6) {
        animation-range: entry 14% cover 70%;
    }

    .ar-vr-cards-cta {
        animation: ar-vr-cta-from-left ease-in-out both;
        animation-timeline: view(block);
        animation-range: entry 0% cover 55%;
        will-change: transform, opacity;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ar-vr-cards-grid > .ar-vr-card,
    .ar-vr-cards-cta {
        animation: none !important;
        will-change: auto;
    }

    .ar-vr-cards-grid > .ar-vr-card,
    .ar-vr-cards-cta {
        opacity: 1;
        transform: none;
    }
}

/* Spans: post order 0..4 then pairs */
.ar-vr-card--row1 {
    grid-column: 1 / -1;
}

.ar-vr-card--row2a {
    grid-column: span 4;
}

.ar-vr-card--row2b {
    grid-column: span 2;
}

.ar-vr-card--row3a,
.ar-vr-card--row3b {
    grid-column: span 3;
}

    .ar-vr-card--row3a {
        height: 340px !important;
    }

.ar-vr-card--pair {
    grid-column: span 3;
}

.ar-vr-card--image {
    position: relative;
    min-height: 240px;
    display: flex;
    flex-direction: column;
    /* justify-content: flex-end; */
}

@media (min-width: 901px) {
    .ar-vr-card--row2a,
    .ar-vr-card--row2b {
        min-height: 430px !important;
    }
}

.ar-vr-card__bg {
    position: absolute;
    inset: 0;
    background-size: 100% 100%;
    background-position: center;
    transition: transform .6s ease;
}

.ar-vr-card:hover .ar-vr-card__bg {
    transform: scale(1.04);
}

.ar-vr-card--image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 10, 20, 0) 0%, rgba(0, 12, 24, .5) 45%, rgba(0, 8, 18, .88) 100%);
    pointer-events: none;
}

.ar-vr-card--image .ar-vr-card-body {
    position: relative;
    z-index: 1;
    padding: 22px 24px 26px;
}

/* First card: solid blue + split layout; right image from post content */
.ar-vr-card--hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 320px;
    background: #2f6fae;
    color: #fff;
    height: 350px !important;
}

.ar-vr-card--hero .ar-vr-card-hero__left {
    position: relative;
    padding: 40px 36px 40px 44px;
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    background: #2f6fae;
    z-index: 1;
}

.ar-vr-card--hero .ar-vr-card-hero__left--texture::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--ar-vr-hero-left-bg) center / cover no-repeat;
    opacity: 0.22;
    z-index: 0;
}

.ar-vr-card--hero .ar-vr-card-hero__inner {
    position: relative;
    z-index: 1;
}

.ar-vr-card--hero .ar-vr-card-title {
    margin: 0 0 16px;
    font-size: clamp(22px, 2.2vw, 30px);
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
}

.ar-vr-card--hero .ar-vr-card-desc {
    margin: 0;
    font-size: 16px;
    line-height: 2.65;
    color: rgba(255, 255, 255, .95);
}

.ar-vr-card-hero__right {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.ar-vr-card-hero__right img {
    max-width: 100%;
    max-height: min(340px, 50vh);
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

.ar-vr-card--image .ar-vr-card-title {
    margin: 0 0 10px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
}

.ar-vr-card--image .ar-vr-card-desc {
    margin: 0;
    font-size: 16px;
    line-height: 2.55;
    color: rgba(255, 255, 255, .9);
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ar-vr-cards-cta {
    text-align: center;
    margin-top: 40px;
}

.ar-vr-cards-cta__btn {
    display: inline-block;
    padding: 8px 19px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    background: #2f6fae;
    border: none;
    border-radius: 8px;
    text-decoration: none;
    transition: background .25s ease, transform .2s ease;
}

.ar-vr-cards-cta__btn:hover {
    background: #3a7fc4;
    transform: translateY(-1px);
    color: #fff;
}

.ar-vr-cards-empty,
.ar-vr-cards-error {
    padding: 24px;
    text-align: center;
    color: rgba(225, 233, 245, .7);
    font-size: 14px;
}

.ar-vr-cards-error {
    color: #f6a6a6;
}

@media (max-width: 900px) {
    .ar-vr-card-main {
        padding: 64px 0 32px;
    }

    .ar-vr-cards-grid {
        grid-template-columns: 1fr;
    }


    .ar-vr-card--row1,
    .ar-vr-card--row2a,
    .ar-vr-card--row2b,
    .ar-vr-card--row3a,
    .ar-vr-card--row3b,
    .ar-vr-card--pair {
        grid-column: 1 / -1;
    }

    .ar-vr-card--hero {
        grid-template-columns: 1fr;
    }

    .ar-vr-card-hero__right {
        min-height: 220px;
    }

    .ar-vr-card--image {
        min-height: 220px;
    }
}

/* Small mobile tuning: keep AR/VR cards readable and prevent overflow/jumpy animations */
@media (max-width: 767px) {
    .ar-vr-card-main {
        padding: 40px 0 24px;
        overflow-x: hidden;
    }

    .ar-vr-card-main .container {
        padding: 0 14px;
    }

    .ar-vr-cards-grid {
        gap: 14px;
    }

    .ar-vr-card {
        border-radius: 10px;
    }

    .ar-vr-card--hero {
        min-height: 0;
        height: auto !important;
        grid-template-columns: 1fr;
    }

    .ar-vr-card--hero .ar-vr-card-hero__left {
        padding: 18px 16px;
    }

    .ar-vr-card-hero__right {
        padding: 12px;
        min-height: 0;
    }

    .ar-vr-card-hero__right img {
        width: 100%;
        height: auto;
        max-height: 220px;
        object-fit: contain;
    }

    .ar-vr-card--row3a {
        height: auto !important;
    }

    .ar-vr-card--image {
        min-height: 190px;
    }

    .ar-vr-card--image .ar-vr-card-body {
        padding: 14px 14px 16px;
    }

    .ar-vr-card--hero .ar-vr-card-title {
        font-size: clamp(18px, 5.2vw, 24px);
        margin-bottom: 10px;
    }

    .ar-vr-card--hero .ar-vr-card-desc,
    .ar-vr-card--image .ar-vr-card-desc {
        font-size: 14px;
        line-height: 1.8;
    }

    .ar-vr-card--image .ar-vr-card-title {
        font-size: clamp(16px, 4.8vw, 20px);
        margin-bottom: 8px;
    }

    .ar-vr-card--image .ar-vr-card-desc {
        -webkit-line-clamp: 3;
    }

    .ar-vr-cards-cta {
        margin-top: 24px;
    }

    .ar-vr-cards-cta__btn {
        font-size: 14px;
        padding: 8px 16px;
    }

    html[dir="rtl"] .ar-vr-card--hero .ar-vr-card-hero__left,
    html[dir="rtl"] .ar-vr-card--image .ar-vr-card-body,
    html[dir="rtl"] .ar-vr-card-title,
    html[dir="rtl"] .ar-vr-card-desc {
        text-align: right;
    }

    /*
      View-timeline animations can be inconsistent on mobile browsers.
      Disable for phone widths to avoid clipped/jerky card entry.
    */
    @supports (animation-timeline: view()) {
        .ar-vr-cards-grid > .ar-vr-card,
        .ar-vr-cards-cta {
            animation: none !important;
            transform: none !important;
            opacity: 1 !important;
            will-change: auto;
        }
    }
}