/* ============================================================
   services.css
   Styles specific to the "Our Services" page.
   (Shared inner-page styles live in assets/css/inner.css.)
   ============================================================ */

/* Banner background image for this page.
   Drop your image at assets/images/banner/services.jpg (or change the path). */
.page-banner {
    background-image: url('../images/banner/services.jpg');
}

/* ============================================================
   SERVICES — sticky scroll
   Left column scrolls; right illustration stays fixed and
   crossfades to the active service.
   ============================================================ */
.svc-detail { padding: 72px 0; }
.svc-detail-head { text-align: left; max-width: none; margin: 0 0 40px; }

.svc-scroll { display: grid; grid-template-columns: 1fr; gap: 0; }

/* ---- left: service items ---- */
.svc-item { padding: 26px 0; border-top: 1px solid var(--card-border); }
.svc-item:first-child { border-top: none; }
.svc-num {
    font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 13px;
    color: var(--cyan); letter-spacing: 0.08em;
}
.svc-num-total { color: var(--text-muted); }
.svc-item-title {
    font-family: 'Manrope', sans-serif; font-weight: 700;
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    color: var(--text-main); text-transform: uppercase; letter-spacing: 0.01em;
    margin: 8px 0 10px;
    transition: color .3s ease;
}
.svc-item-desc { color: var(--text-secondary); font-size: 15px; line-height: 1.7; max-width: 34rem; margin: 0; }

/* deliverables / categories list */
.svc-list {
    list-style: none; padding: 0; margin: 18px 0 22px;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 9px 22px; max-width: 40rem;
}
.svc-list li {
    position: relative; padding-left: 22px;
    font-size: 14px; color: var(--text-secondary); line-height: 1.5;
}
.svc-list li::before {
    content: "\2713"; position: absolute; left: 0; top: 0;
    color: var(--cyan); font-weight: 700;
}
.svc-cta { margin-top: 2px; }

/* ---- right visual (hidden on mobile; inline figure shown instead) ---- */
.svc-visual { display: none; }
.svc-figure-inline { margin-top: 22px; }

/* ---- illustration card (arch-shaped) ---- */
.svc-figure {
    position: relative;
    width: 100%; max-width: 340px;
    aspect-ratio: 4 / 5;
    border-radius: 150px 150px 26px 26px;      /* arch top */
    overflow: hidden;
    border: 1px solid var(--cyan-border);
    background: linear-gradient(160deg, var(--card-elevated), var(--bg-secondary));
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4), 0 0 30px var(--cyan-glow);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
}
.svc-figure-bg {
    position: absolute; inset: 0;
    background-image:
        radial-gradient(circle at 50% 24%, var(--cyan-glow), transparent 55%),
        linear-gradient(var(--card-border) 1px, transparent 1px),
        linear-gradient(90deg, var(--card-border) 1px, transparent 1px);
    background-size: auto, 40px 40px, 40px 40px;
    opacity: 0.5;
}
/* unique SVG illustration scene */
.svc-figure-art { position: relative; z-index: 2; width: 82%; max-width: 230px; }
.svc-figure-art svg { width: 100%; height: auto; display: block; overflow: visible; }
/* scene element classes (theme-aware) */
.a-card   { fill: var(--card-bg); stroke: var(--card-border); stroke-width: 1.5; }
.a-line   { stroke: var(--card-border); fill: none; stroke-width: 1.5; }
.a-muted  { fill: var(--card-border); }
.a-cyan   { fill: #22d3ee; }
.a-blue   { fill: #3b82f6; }
.a-purple { fill: #a78bfa; }
.a-cyan-s { stroke: #22d3ee; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.svc-figure-name {
    position: relative; z-index: 2;
    font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 1rem;
    color: var(--text-main); text-align: center; text-transform: uppercase; letter-spacing: 0.04em;
    padding: 0 22px;
}
.svc-figure-dot { position: absolute; z-index: 2; border-radius: 999px; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.svc-figure-dot.d1 { width: 8px; height: 8px; top: 15%; left: 18%; opacity: 0.7; }
.svc-figure-dot.d2 { width: 6px; height: 6px; bottom: 17%; right: 20%; opacity: 0.6; background: var(--blue); box-shadow: 0 0 10px var(--blue); }
.svc-figure-dot.d3 { width: 5px; height: 5px; top: 33%; right: 16%; opacity: 0.5; }

/* ============================================================
   DESKTOP: two columns + sticky right visual
   ============================================================ */
@media (min-width: 992px) {
    .svc-scroll { grid-template-columns: 1.1fr 0.9fr; gap: 60px; }  /* stretch (default) so sticky can travel */

    .svc-figure-inline { display: none; }

    .svc-item {
        min-height: 52vh;
        display: flex; flex-direction: column; justify-content: center;
        border-top: none; padding: 4vh 0;
    }
    /* dim inactive, highlight the active service */
    .svc-item-title { color: var(--text-muted); }
    .svc-item.is-active .svc-item-title { color: var(--text-main); }
    .svc-item-desc, .svc-list, .svc-cta { opacity: 0.5; transition: opacity .3s ease; }
    .svc-item.is-active .svc-item-desc,
    .svc-item.is-active .svc-list,
    .svc-item.is-active .svc-cta { opacity: 1; }

    .svc-visual { display: block; position: relative; }
    .svc-visual-sticky {
        position: sticky; top: 100px;
        width: 100%; max-width: 380px; margin: 0 auto;
        aspect-ratio: 4 / 5;
    }
    .svc-figure-sticky {
        position: absolute; inset: 0; max-width: none;
        opacity: 0; transform: scale(0.98);
        transition: opacity .5s ease, transform .5s ease;
    }
    .svc-figure-sticky.active { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .svc-figure-sticky { transition: none; }
}

/* ============================================================
   MOBILE & TABLET RESPONSIVENESS (<= 991px)
   The desktop layout (the min-width: 992px block above) is left
   completely unchanged; these rules only refine smaller screens.
   ============================================================ */
@media (max-width: 991px) {
    /* tighter, balanced section spacing */
    .svc-detail { padding: 52px 0; }
    .svc-detail-head { margin: 0 0 26px; }
    .svc-item { padding: 30px 0; }

    /* illustration: centred and size-capped so it scales cleanly */
    .svc-figure-inline { margin: 26px auto 0; }
    .svc-figure { max-width: 320px; }

    /* never let a long word/token cause horizontal overflow */
    .svc-item-title,
    .svc-item-desc,
    .svc-list li { overflow-wrap: anywhere; }
}

@media (max-width: 560px) {
    .svc-detail { padding: 42px 0; }
    .svc-item { padding: 24px 0; }
    .svc-item-desc { font-size: 14.5px; }

    /* single-column deliverables for comfortable reading on phones */
    .svc-list { grid-template-columns: 1fr; gap: 9px; }

    /* smaller, still-centred illustration */
    .svc-figure { max-width: 250px; }
    .svc-figure-name { font-size: 0.9rem; }

    /* full-width, easy-to-tap CTA */
    .svc-cta { display: flex; width: 100%; justify-content: center; }
}