/* Extracted from portfolio-orbit.php so it is cached once instead of being re-sent
   inside the HTML on every page view. Enqueued by
   lumoria_enqueue_template_styles() in functions.php. */

    #lumOrbit, #lumOrbit * { box-sizing: border-box; }
    /* An author `display` rule beats the browser's own `[hidden] { display:
       none }` whatever its specificity, and the stats row is grid, so without
       this the upcoming-projects card kept showing the previous category's
       units, availability and price. */
    #lumOrbit [hidden] { display: none !important; }
    #lumOrbit {
      --page-bg:#fbf5ec; --card-bg:#fff; --border:#ece4d6;
      --text:#101a17; --muted:var(--text-muted); --muted-2:#8a9490;
      --teal:#44BDA1; --teal-dark:#04272F; --teal-tint:#e3f4ed; --navy-circle:#0e1f1c;
      font-family: var(--font-primary);
      background: var(--page-bg);
      color: var(--text);
    }
    #lumOrbit a { text-decoration:none; color:inherit; }
    #lumOrbit .lum-orbit-wrap { max-width: var(--container-w); margin:0 auto; padding: clamp(44px,5vw,64px) clamp(20px,4vw,48px) clamp(60px,7vw,80px); }

    #lumOrbit .lum-orbit-eyebrow {
      display:inline-flex; align-items:center; margin-bottom:22px; padding:9px 18px;
      border-radius:999px; background:var(--teal-tint); color:var(--teal-dark);
      font-size:var(--text-xs); font-weight:var(--fw-semibold); letter-spacing:var(--ls-eyebrow); text-transform:uppercase;
    }
    #lumOrbit .lum-orbit-head { margin:0 0 14px; font-size:var(--text-h2); font-weight:var(--fw-heading); line-height:1.1; letter-spacing:var(--ls-h2); }
    #lumOrbit .lum-orbit-sub { margin:0 0 48px; max-width:640px; font-size:var(--text-base); line-height:var(--lh-prose); color:var(--muted); }

    #lumOrbit .lum-orbit-layout { display:grid; grid-template-columns:minmax(340px,480px) 1fr; gap:64px; align-items:start; }

    /* ---------------- DETAIL CARD ---------------- */
    /* The script holds the card at the height of its tallest category (see
       lockHeight() in portfolio-orbit.js), so switching categories never
       moves what sits below it. The card is a flex column and the photo
       absorbs that reserved height (see .lum-orbit-img), so the text, the
       figures and the button always sit together with no blank band. Flex
       items' margins do not collapse, but nothing here relied on collapsing
       -- every rule sets bottom margins only, and the status line's -8px
       still nets against the meta line's 18px exactly as before. */
    #lumOrbit .lum-orbit-card {
      display:flex; flex-direction:column;
      overflow:hidden; background:var(--card-bg); border:1px solid var(--border); border-radius:22px;
      box-shadow:0 1px 2px rgba(20,20,10,.03), 0 20px 48px rgba(20,20,10,.05);
    }
    /* The photo takes whatever height the lock reserves beyond its own 340px,
       so a category shorter than the tallest shows a taller photo instead of
       a blank band above its figures. */
    #lumOrbit .lum-orbit-img { position:relative; flex:1 0 340px; min-height:340px; overflow:hidden; }
    #lumOrbit .lum-orbit-img img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition:opacity .35s ease; }
    #lumOrbit .lum-orbit-tag {
      position:absolute; top:18px; inset-inline-end:18px; padding:8px 16px; border-radius:999px;
      background:var(--teal); color:#fff; font-size:12.5px; font-weight:var(--fw-semibold);
    }
    #lumOrbit .lum-orbit-tag.is-dark { background:#1f2d3d; }
    /* The fade is as long as the script's 180ms swap, so the text changes only
       once it is fully out of sight rather than part-way through the fade. */
    #lumOrbit .lum-orbit-body { display:flex; flex:0 0 auto; flex-direction:column; padding:28px 32px 32px; transition:opacity .18s ease; }
    /* No photo (an upcoming project without one): the body takes the space. */
    #lumOrbit .lum-orbit-card.is-promo .lum-orbit-body { flex-grow:1; }
    #lumOrbit .lum-orbit-body.is-fading { opacity:0; }
    #lumOrbit .lum-orbit-name { margin:0 0 8px; font-size:var(--text-2xl); font-weight:var(--fw-heading); letter-spacing:-.01em; }
    #lumOrbit .lum-orbit-meta { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:18px; font-size:var(--text-sm); color:var(--muted); }
    #lumOrbit .lum-orbit-meta i { color:var(--teal); font-size:13px; }
    #lumOrbit .lum-orbit-sep { color:#c9d0cc; }
    #lumOrbit .lum-orbit-standard { color:var(--muted-2); }
    #lumOrbit .lum-orbit-desc {
      margin:0 0 22px;
      font-size:15px; line-height:1.65; color:var(--muted);
      display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;
    }
    #lumOrbit .lum-orbit-status {
      display:flex; align-items:center; gap:8px; margin:-8px 0 18px;
      font-size:var(--text-sm); font-weight:var(--fw-semibold); color:var(--teal-dark);
    }
    #lumOrbit .lum-orbit-status i { color:var(--teal); font-size:13px; }
    /* The card's foot: a tinted figures panel and a full-width button, the
       same on every category, so the reserved height reads as space above a
       footer rather than as a hole. Labels sit above their figures and
       everything aligns to the start edge, like the text above it. */
    #lumOrbit .lum-orbit-stats {
      display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px 20px;
      margin-top:auto; margin-bottom:16px; padding:16px 20px;
      border:1px solid var(--border); border-radius:16px; background:var(--page-bg);
    }
    #lumOrbit .lum-orbit-stats.is-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
    #lumOrbit .lum-orbit-stats.is-1 { grid-template-columns:minmax(0,1fr); }
    #lumOrbit .lum-orbit-stat { display:flex; flex-direction:column; gap:4px; min-width:0; text-align:start; }
    #lumOrbit .lum-orbit-stat-label { order:-1; font-size:12.5px; line-height:1.3; color:var(--muted-2); }
    #lumOrbit .lum-orbit-stat-value { font-size:16px; line-height:1.3; font-weight:var(--fw-heading); color:var(--teal-dark); }
    /* One figure (a category's starting rent) runs as a single row: the label
       on the start side, the price on the end side. */
    #lumOrbit .lum-orbit-stats.is-1 .lum-orbit-stat { flex-direction:row; align-items:center; justify-content:space-between; gap:12px; }
    #lumOrbit .lum-orbit-stats.is-1 .lum-orbit-stat-label { font-size:var(--text-sm); }
    #lumOrbit .lum-orbit-stats.is-1 .lum-orbit-stat-value { font-size:20px; }
    #lumOrbit .lum-orbit-link {
      display:flex; align-items:center; justify-content:center; gap:10px;
      min-height:50px; padding:12px 22px; border-radius:999px;
      background:var(--teal-dark); color:#fff;
      font-size:15px; font-weight:var(--fw-semibold);
      transition:background .2s ease, gap .2s ease;
    }
    #lumOrbit a.lum-orbit-link { color:#fff; }
    #lumOrbit .lum-orbit-link i { font-size:14px; }
    #lumOrbit .lum-orbit-link:hover { background:var(--teal); gap:14px; }
    #lumOrbit .lum-orbit-link:focus-visible { outline:2px solid var(--teal); outline-offset:3px; }
    /* A card with no figures (an upcoming project with none) still keeps its
       link at the foot. */
    #lumOrbit .lum-orbit-stats[hidden] + .lum-orbit-link { margin-top:auto; }

    /* ---------------- ORBIT ---------------- */
    #lumOrbit .lum-orbit-panel { display:flex; flex-direction:column; align-items:center; }
    /* pan-y rather than none: the orbit spans most of a phone's width, and
       with none a page scroll that began on it went nowhere. Vertical swipes
       now scroll the page; sideways ones rotate the orbit (the script tells
       the two apart before claiming a gesture). */
    #lumOrbit .lum-orbit-stage {
      position:relative; width:min(560px,92vw); max-width:560px; aspect-ratio:1/1;
      touch-action:pan-y; user-select:none; cursor:grab;
    }
    #lumOrbit .lum-orbit-stage.is-grabbing { cursor:grabbing; }
    #lumOrbit .lum-orbit-ring { position:absolute; inset:0; border-radius:50%; border:1px dashed #d9d2c2; }
    #lumOrbit .lum-orbit-centre {
      position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
      width:37%; aspect-ratio:1/1; border-radius:50%;
      display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
      background:var(--navy-circle); color:#fff; pointer-events:none;
      box-shadow:0 20px 44px rgba(14,31,28,.28);
    }
    #lumOrbit .lum-orbit-count { margin-bottom:6px; font-size:clamp(28px,5vw,42px); font-weight:var(--fw-heading); line-height:1; color:var(--teal); }
    #lumOrbit .lum-orbit-count-label { max-width:74%; font-size:clamp(11px,1.4vw,13.5px); line-height:1.35; color:#c9d3cf; }
    #lumOrbit .lum-orbit-item {
      position:absolute; top:50%; left:50%; width:15.5%; aspect-ratio:1/1;
      overflow:hidden; border:2px solid #fff; border-radius:14px; padding:0; background:none;
      box-shadow:0 6px 16px rgba(20,20,10,.12);
      transition:left .5s cubic-bezier(.2,.8,.2,1), top .5s cubic-bezier(.2,.8,.2,1), width .35s ease, box-shadow .25s ease, border-color .25s ease;
    }
    #lumOrbit .lum-orbit-item.is-dragging { transition:none; }
    #lumOrbit .lum-orbit-item img { width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; }
    #lumOrbit .lum-orbit-item.is-selected { width:19%; border-color:var(--teal); box-shadow:0 10px 26px rgba(68,189,161,.35); z-index:5; }
    #lumOrbit .lum-orbit-item:not(.is-selected):hover { box-shadow:0 10px 22px rgba(20,20,10,.18); }

    /* The upcoming-projects node carries an icon instead of a photo, so it
       needs a ground of its own -- the others are filled edge to edge by
       their image. Tinted rather than white so it reads as the odd one out,
       which it is: it leaves the section rather than filtering it. */
    #lumOrbit .lum-orbit-item.is-promo {
      display:flex; align-items:center; justify-content:center;
      background:var(--navy-circle); color:var(--teal);
      font-size:clamp(13px,2vw,20px);
    }
    #lumOrbit .lum-orbit-item.is-promo i { pointer-events:none; }

    /* With no photo the card would open on a bare heading, so the body takes
       the padding the image used to provide. */
    #lumOrbit .lum-orbit-card.is-promo .lum-orbit-body { padding-top:34px; }

    /* Orbit items straddle the ring edge, so the controls clear half an item. */
    #lumOrbit .lum-orbit-controls { display:flex; align-items:center; gap:18px; margin-top:calc(20px + 8vw); }
    @media (min-width:720px){ #lumOrbit .lum-orbit-controls { margin-top:64px; } }
    #lumOrbit .lum-orbit-nav {
      display:flex; align-items:center; justify-content:center; flex-shrink:0;
      width:40px; height:40px; border-radius:50%; border:1px solid var(--border);
      background:#fff; color:var(--text); font-size:15px;
      transition:background .15s ease, border-color .15s ease;
    }
    #lumOrbit .lum-orbit-nav:hover { background:var(--teal-tint); border-color:var(--teal); }
    #lumOrbit .lum-orbit-hint { font-size:var(--text-sm); color:var(--muted-2); }

    @media (max-width:1180px){
      #lumOrbit .lum-orbit-layout { grid-template-columns:minmax(0,1fr); gap:56px; }
      #lumOrbit .lum-orbit-panel { order:2; }
      #lumOrbit .lum-orbit-card { order:1; max-width:560px; margin:0 auto; }
    }
    @media (max-width:720px){
      #lumOrbit .lum-orbit-img { flex-basis:240px; min-height:240px; }
      #lumOrbit .lum-orbit-body { padding:22px 22px 26px; }
      #lumOrbit .lum-orbit-stage { width:min(420px,88vw); }
      #lumOrbit .lum-orbit-controls { gap:12px; flex-wrap:wrap; justify-content:center; text-align:center; }
    }
    @media (max-width:420px){
      #lumOrbit .lum-orbit-img { flex-basis:200px; min-height:200px; }
      #lumOrbit .lum-orbit-stats { padding:14px 16px; gap:10px 14px; }
      #lumOrbit .lum-orbit-stat-value { font-size:15px; }
      #lumOrbit .lum-orbit-stat-label { font-size:11.5px; }
      #lumOrbit .lum-orbit-stats.is-1 .lum-orbit-stat-value { font-size:18px; }
    }
    @media (prefers-reduced-motion: reduce){
      #lumOrbit .lum-orbit-item { transition:none; }
      #lumOrbit .lum-orbit-body, #lumOrbit .lum-orbit-img img { transition:none; }
    }