/* ==========================================================================
   EXPLORE THE CAMPUS - CIRCLES EXPLORER + FULL-SCREEN DETAIL SCREENS
   All classes are prefixed with .ec- to avoid clashes with style.css.
   Loaded only by spaces-for-events.html (EN) and it/spaces-for-events.html.
   Behaviour: assets/js/explore-campus.js
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. PALETTE  (edit here to change the colour of each space)
   Each colour is both the circle colour and the background of its screen.
   Defaults come from the brand palette defined in style.css.
   -------------------------------------------------------------------------- */
.ec-explorer,
.ec-detail {
    --ec-c1: var(--color-mandarin);        /* 01 Monitoring Rooms          */
    --ec-c2: var(--color-royal-blue);      /* 02 Meeting & Collaborations  */
    --ec-c3: var(--color-dark-petroleum);  /* 03 Daily Workspaces          */
    --ec-c4: var(--color-black-shadow);    /* 04 Green Spaces & Art        */

    --ec-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --ec-white: #ffffff;
    --ec-ink: var(--color-black-shadow);
}

.ec-circle--1, .ec-screen[data-ec-index="0"], .ec-bg[data-ec-index="0"] { --ec-bg: var(--ec-c1); }
.ec-circle--2, .ec-screen[data-ec-index="1"], .ec-bg[data-ec-index="1"] { --ec-bg: var(--ec-c2); }
.ec-circle--3, .ec-screen[data-ec-index="2"], .ec-bg[data-ec-index="2"] { --ec-bg: var(--ec-c3); }
.ec-circle--4, .ec-screen[data-ec-index="3"], .ec-bg[data-ec-index="3"] { --ec-bg: var(--ec-c4); }

/* --------------------------------------------------------------------------
   2. CIRCLES VIEW (same stage, sizes and typography as "To the Campus")
   Sizes/positions mirror .sphere-spaces / .sphere-hub / .sphere-careers /
   .sphere-news from style.css (1340x760 stage, percentage based).
   -------------------------------------------------------------------------- */
.ec-explorer {
    position: relative;
    width: 100%;
    padding: 20px 4% 90px 4%;
    box-sizing: border-box;
}

.ec-hint {
    margin: 0 auto;
    text-align: center;
    font-family: var(--font-heading);
    font-size: 13px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--text-muted);
}

.ec-stage {
    position: relative;
    width: 100%;
    max-width: 1340px;
    aspect-ratio: 1340 / 760;
    margin: 24px auto 0 auto;
}

.ec-circle {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 50%;
    overflow: hidden;
    background-color: var(--ec-bg);   /* already coloured, no colour hover */
    color: var(--ec-white);
    font: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transform: scale(1);
    transform-origin: center center;
    transition: transform 0.45s var(--ec-ease);
    will-change: transform;
}

.ec-circle:hover,
.ec-circle:focus-visible {
    transform: scale(1.04);           /* the only hover feedback */
}

.ec-circle:focus-visible {
    outline: 3px solid var(--color-royal-blue);
    outline-offset: 5px;
}

.ec-circle-label {
    position: relative;
    z-index: 4;
    font-family: var(--font-heading);
    text-align: center;
    text-transform: uppercase;
    user-select: none;
    color: var(--ec-white);
    overflow-wrap: break-word;
}

/* 01 - same box as .sphere-spaces */
.ec-circle--1 { width: 22%; left: 8%; top: 34%; }
.ec-circle--1 .ec-circle-label {
    font-size: clamp(1.2rem, 2.0vw, 1.8rem);
    font-weight: 700;
    padding: 0 12px;
}

/* 02 - same box as .sphere-hub (central anchor) */
.ec-circle--2 { width: 27%; left: 36.5%; top: 42%; }
.ec-circle--2 .ec-circle-label {
    font-size: clamp(1.35rem, 2.3vw, 2.15rem);
    font-weight: 800;
    line-height: 1.15;
    padding: 0 16px;
    letter-spacing: -0.4px;
}

/* 03 - same box as .sphere-careers */
.ec-circle--3 { width: 21%; left: 70%; top: 48%; }
.ec-circle--3 .ec-circle-label {
    font-size: clamp(1.2rem, 2.0vw, 1.75rem);
    font-weight: 700;
    padding: 0 12px;
}

/* 04 - same box as .sphere-news */
.ec-circle--4 { width: 16%; left: 58%; top: 14%; }
.ec-circle--4 .ec-circle-label {
    font-size: clamp(1.1rem, 1.7vw, 1.55rem);
    font-weight: 700;
    padding: 0 8px;
}

/* Tablet & mobile: wrapped, resized circles (same approach as the home) */
@media (max-width: 900px) {
    .ec-explorer { padding: 8px 4% 60px 4%; }

    .ec-stage {
        aspect-ratio: auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 16px;
        padding: 16px 0;
    }

    .ec-circle {
        position: relative;
        left: auto;
        top: auto;
        width: min(44vw, 240px);
    }

    .ec-circle--2 { width: min(48vw, 260px); }
    .ec-circle--3 { width: min(42vw, 230px); }
    .ec-circle--4 { width: min(40vw, 215px); }

    .ec-circle .ec-circle-label {
        font-size: clamp(0.85rem, 3.4vw, 1.3rem);
        padding: 0 10px;
        letter-spacing: 0;
        line-height: 1.15;
    }
}

/* --------------------------------------------------------------------------
   3. FULL-SCREEN DETAIL
   -------------------------------------------------------------------------- */
html.ec-locked,
body.ec-locked { overflow: hidden; }

.ec-detail {
    position: fixed;
    inset: 0;
    z-index: 300;                    /* above #site-header (200) */
    overflow: hidden;
    touch-action: pinch-zoom;        /* vertical swipes are handled in JS */
    overscroll-behavior: contain;
    color: var(--ec-white);
    font-family: var(--font-body);
}

.ec-detail[hidden] { display: none; }

.ec-screens { position: absolute; inset: 0; z-index: 1; }

/* Colour layer: one full-screen background per section, under all the screens.
   The screens themselves are transparent so their content can move between sections. */
.ec-bgs { position: absolute; inset: 0; z-index: 0; }

.ec-bg {
    position: absolute;
    inset: 0;
    visibility: hidden;
    background-color: var(--ec-bg);
    z-index: 0;
}

.ec-bg.is-active { visibility: visible; z-index: 1; }
.ec-bg.is-top    { z-index: 2; }

.ec-screen {
    position: absolute;
    inset: 0;
    visibility: hidden;
    z-index: 0;
}

.ec-screen.is-active { visibility: visible; z-index: 1; }
.ec-screen.is-top    { z-index: 2; }

/* Positioning area: leaves room for the Back button (top) and the
   navigation bar (bottom). Every element is placed in % of this area. */
.ec-area {
    position: absolute;
    left: 0;
    right: 0;
    top: var(--ec-inset-top, 84px);
    bottom: var(--ec-inset-bottom, 112px);
}

/* Elements receive --ec-x / --ec-y / --ec-s / --ec-w from EC_CONFIG (JS). */
.ec-main,
.ec-photo {
    position: absolute;
    left: calc(var(--ec-x, 50) * 1%);
    top: calc(var(--ec-y, 50) * 1%);
    width: calc(var(--ec-s, 20) * 1vmin);
    height: calc(var(--ec-s, 20) * 1vmin);
    /* centre anchor; keeps `transform` free for animation. --ec-mx/--ec-my = mouse reactivity offset (JS) */
    translate: calc(-50% + var(--ec-mx, 0px)) calc(-50% + var(--ec-my, 0px));
    border-radius: 50%;
}

/* Main circle: white, number in black.
   The white is a single child layer (.ec-main-fill) so it can fade in/out
   without a second coloured layer on top (which would leave a light fringe). */
.ec-main {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: transparent;
    will-change: transform;
}

.ec-main-fill {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: 50%;
    background-color: var(--ec-white);
}

.ec-main-num {
    position: relative;
    z-index: 1;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: calc(var(--ec-s, 20) * 0.38vmin);
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--ec-ink);
}

/* Second number used while the circle travels from one section to the next */
.ec-main-num.ec-num-next {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ec-main-label {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    z-index: 3;
    translate: 0 -50%;
    text-align: center;
    text-transform: uppercase;
    font-family: var(--font-heading);
    color: var(--ec-white);
    opacity: 0;           /* only visible while the circle morphs from/to the circles view */
    overflow-wrap: break-word;
}

/* Title + paragraph */
.ec-copy {
    position: absolute;
    left: calc(var(--ec-x, 10) * 1%);
    top: calc(var(--ec-y, 20) * 1%);
    width: calc(var(--ec-w, 40) * 1%);
    color: var(--ec-white);
    text-align: left;
}

.ec-copy[data-align="center"] { text-align: center; }

.ec-eyebrow {
    display: inline-block;
    margin: 0 0 18px 0;
    padding: 7px 16px;
    font-family: var(--font-heading);
    font-size: 12px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--ec-white);
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 30px;
}

.ec-title {
    margin: 0 0 0.4em 0;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(1.8rem, min(3.4vw, 6vh), 3.4rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--ec-white);
    overflow-wrap: break-word;
}

.ec-text {
    margin: 0;
    max-width: 38ch;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(1rem, min(1.25vw, 2.4vh), 1.3rem);
    line-height: 1.6;
    color: var(--ec-white);
    overflow-wrap: break-word;
}

.ec-copy[data-align="center"] .ec-text { margin-left: auto; margin-right: auto; }

/* Photo circles */
.ec-photos { display: contents; margin: 0; padding: 0; list-style: none; }

.ec-photo { overflow: hidden; margin: 0; padding: 0; list-style: none; background-color: rgba(255, 255, 255, 0.12); }
.ec-photo[hidden] { display: none; }

.ec-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* --------------------------------------------------------------------------
   4. CONTROLS (Back, arrows, 01-04 indicator)
   -------------------------------------------------------------------------- */
.ec-ui { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.ec-ui > * { pointer-events: auto; }

.ec-back {
    position: absolute;
    top: 22px;
    left: 28px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 46px;
    padding: 0 22px 0 16px;
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--ec-white);
    background: rgba(255, 255, 255, 0.12);
    border: 1.5px solid rgba(255, 255, 255, 0.7);
    border-radius: 40px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.ec-nav {
    position: absolute;
    left: 50%;
    bottom: 30px;
    translate: -50% 0;
    display: flex;
    align-items: center;
    gap: 14px;
}

.ec-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    padding: 0;
    color: var(--ec-white);
    background: rgba(255, 255, 255, 0.12);
    border: 1.5px solid rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease, opacity 0.3s ease;
}

.ec-back:hover,
.ec-arrow:hover:not(:disabled) { background: rgba(255, 255, 255, 0.26); }

.ec-arrow:disabled {
    opacity: 0.32;
    cursor: not-allowed;
}

.ec-back:focus-visible,
.ec-arrow:focus-visible,
.ec-dot:focus-visible {
    outline: 3px solid var(--ec-white);
    outline-offset: 3px;
}

.ec-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ec-dot {
    min-width: 44px;
    height: 44px;
    padding: 0 6px;
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.72);
    background: transparent;
    border: none;
    border-radius: 24px;
    cursor: pointer;
    transition: color 0.3s ease, background-color 0.3s ease;
}

.ec-dot:hover { color: var(--ec-white); }

.ec-dot.is-current {
    color: var(--ec-ink);
    background: var(--ec-white);
    cursor: default;
}

/* --------------------------------------------------------------------------
   5. RESPONSIVE (mirrors the JS "mobile" layout set: portrait <=900px or <=600px)
   -------------------------------------------------------------------------- */
.ec-detail[data-ec-layout="mobile"],
.ec-detail[data-ec-layout="compact"] {
    --ec-inset-top: 76px;
    --ec-inset-bottom: 100px;
}

.ec-detail[data-ec-layout="mobile"] .ec-back,
.ec-detail[data-ec-layout="compact"] .ec-back { top: 16px; left: 16px; height: 42px; padding: 0 18px 0 14px; }
.ec-detail[data-ec-layout="mobile"] .ec-nav,
.ec-detail[data-ec-layout="compact"] .ec-nav { bottom: 22px; gap: 8px; }
.ec-detail[data-ec-layout="mobile"] .ec-arrow,
.ec-detail[data-ec-layout="compact"] .ec-arrow { width: 46px; height: 46px; }
.ec-detail[data-ec-layout="mobile"] .ec-dot,
.ec-detail[data-ec-layout="compact"] .ec-dot { min-width: 40px; height: 40px; font-size: 14px; }
.ec-detail[data-ec-layout="mobile"] .ec-eyebrow,
.ec-detail[data-ec-layout="compact"] .ec-eyebrow { margin-bottom: 12px; font-size: 11px; letter-spacing: 2.4px; }
.ec-detail[data-ec-layout="mobile"] .ec-title,
.ec-detail[data-ec-layout="compact"] .ec-title { font-size: clamp(1.7rem, 7.2vw, 3.2rem); }
.ec-detail[data-ec-layout="mobile"] .ec-text,
.ec-detail[data-ec-layout="compact"] .ec-text { max-width: 46ch; font-size: clamp(0.98rem, 3.3vw, 1.35rem); line-height: 1.55; }
.ec-detail[data-ec-layout="mobile"] .ec-copy[data-align="center"] .ec-text,
.ec-detail[data-ec-layout="compact"] .ec-copy[data-align="center"] .ec-text { max-width: none; }

/* Compact phones: slightly smaller type so the copy stays clear of the photos */
.ec-detail[data-ec-layout="compact"] { --ec-inset-top: 70px; --ec-inset-bottom: 92px; }
.ec-detail[data-ec-layout="compact"] .ec-eyebrow { margin-bottom: 8px; padding: 5px 12px; }
.ec-detail[data-ec-layout="compact"] .ec-title { font-size: clamp(1.45rem, 6.6vw, 2rem); margin-bottom: 0.3em; }
.ec-detail[data-ec-layout="compact"] .ec-text { font-size: clamp(0.86rem, 3.9vw, 1rem); line-height: 1.45; }

/* Short landscape screens (phones turned sideways) */
@media (max-height: 520px) and (orientation: landscape) {
    .ec-detail { --ec-inset-top: 64px; --ec-inset-bottom: 76px; }
    .ec-back { top: 12px; left: 16px; height: 40px; }
    .ec-nav { bottom: 14px; }
    .ec-arrow { width: 44px; height: 44px; }
    .ec-dot { min-width: 38px; height: 38px; }
    .ec-eyebrow { margin-bottom: 8px; padding: 5px 12px; font-size: 10px; }
    .ec-title { font-size: clamp(1.3rem, 5vh, 2rem); }
    .ec-text { font-size: clamp(0.82rem, 3.4vh, 1rem); line-height: 1.45; }
}

/* --------------------------------------------------------------------------
   6. REDUCED MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .ec-circle { transition: none; }
    .ec-circle:hover,
    .ec-circle:focus-visible { transform: none; }
    .ec-back,
    .ec-arrow,
    .ec-dot { transition: none; }
}

/* --------------------------------------------------------------------------
   7. PARTICLE FIELD (closed view, white background) + layering
   -------------------------------------------------------------------------- */
.ec-particles {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.ec-explorer > .ec-hint,
.ec-explorer > .ec-stage {
    position: relative;
    z-index: 1;
}

/* --------------------------------------------------------------------------
   8. SERVICES HUB + connection lines (closed view)
   Round hub in the empty area above the central circle; one translucent black
   line goes from it to each of the 4 spaces (drawn by JS, tracks the mouse movement).
   -------------------------------------------------------------------------- */
.ec-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    z-index: 0;
}

.ec-lines line {
    stroke: rgba(0, 0, 0, 0.3);
    stroke-width: 1.5px;
    vector-effect: non-scaling-stroke;
    stroke-linecap: round;
}

.ec-hub {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 13.4%;
    left: 33.6%;
    top: 9.2%;
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
    border-radius: 50%;
    background-color: var(--color-white-moon);
    border: 1.5px solid rgba(29, 29, 29, 0.22);
    color: var(--ec-ink);
    cursor: default;
    will-change: transform;
}

.ec-hub .ec-circle-label {
    color: var(--ec-ink);
    font-size: clamp(1rem, 1.7vw, 1.5rem);
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 0 8px;
}

/* Tablet & mobile: the wrapped circles have no coordinates for the lines, so hub and lines are not shown */
@media (max-width: 900px) {
    .ec-lines,
    .ec-hub { display: none; }
}

/* ==========================================================================
   CAMPUS AT A GLANCE (key figures + services) - classes prefixed .cs-
   ========================================================================== */
.cs-stats,
.cs-services {
    margin: 0;
    padding: 0;
    list-style: none;
}

.cs-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 20px;
}

.cs-stat {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 26px 26px 24px;
    background: #fafafa;
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
}

.cs-stat-num {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(1.9rem, 3vw, 2.5rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--text-dark);
    white-space: nowrap;
}

.cs-stat-label {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-muted);
}

.cs-subtitle {
    margin: 56px 0 24px 0;
    font-size: clamp(1.4rem, 2.4vw, 1.9rem);
}

.cs-services {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px 20px;
}

.cs-service {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 0 16px 0;
    border-top: 1px solid var(--border-subtle);
}

.cs-service strong {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1.1rem;
    line-height: 1.3;
    color: var(--text-dark);
}

.cs-service span {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--text-muted);
}

@media (max-width: 640px) {
    .cs-stats { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .cs-stat { padding: 20px 18px 18px; }
    .cs-stat-num { font-size: 1.9rem; }
    .cs-stat-label { font-size: 0.75rem; letter-spacing: 1.2px; }
    .cs-stats .cs-stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .cs-subtitle { margin-top: 40px; }
}

/* Campus figures: on hover each card takes a colour of the brand palette (cycle of 4) */
.cs-stat {
    --cs-hover: var(--color-mandarin);
    cursor: default;
    transition: background-color 0.35s ease, border-color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
}

.cs-stat:nth-child(4n+1) { --cs-hover: var(--color-mandarin); }
.cs-stat:nth-child(4n+2) { --cs-hover: var(--color-royal-blue); }
.cs-stat:nth-child(4n+3) { --cs-hover: var(--color-dark-petroleum); }
.cs-stat:nth-child(4n+4) { --cs-hover: var(--color-black-shadow); }

.cs-stat .cs-stat-num,
.cs-stat .cs-stat-label {
    transition: color 0.35s ease;
}

.cs-stat:hover {
    background: var(--cs-hover);
    border-color: var(--cs-hover);
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.14);
}

.cs-stat:hover .cs-stat-num { color: #ffffff; }
.cs-stat:hover .cs-stat-label { color: rgba(255, 255, 255, 0.86); }

@media (prefers-reduced-motion: reduce) {
    .cs-stat { transition: background-color 0.2s ease, border-color 0.2s ease; }
    .cs-stat:hover { transform: none; }
}