/* PROJECTED REALITY — use-cases page (v2 "Haze", DESIGN.md §0.5 positioning brief).
   Loaded after css/services.css; every color is a token from that sheet. No page script:
   services.css + js/service-motion.js supply nav, reveals, FAQ motion and the contact modal.
   Parts: hero width, two-ways tiles, jump index, eight use-case rows, booking steps. */

/* ===== hero ===== */
.uc-hero h1{max-width:17ch}

/* ===== 01 two ways to work ===== */
.ways{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem}
.ways .tile{min-height:0;padding-bottom:1.5rem}
.ways .tile p{max-width:52ch}
.tile .tile-rec{display:grid;gap:.3rem;margin-top:.4rem;padding-top:.9rem;border-top:1px solid var(--border);font:400 .72rem/1.6 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-2)}
.tile-rec span{color:var(--text-3)}

/* ===== 02 use cases: jump index + alternating rows ===== */
.uc-index{display:flex;flex-wrap:wrap;gap:.5rem;margin:-.5rem 0 clamp(1.5rem,3vh,2.5rem)}
.uc-index a{display:inline-flex;align-items:center;gap:.6em;min-height:44px;padding:0 1rem;border:1px solid var(--border);border-radius:999px;color:var(--text-2);text-decoration:none;font:500 .85rem/1 var(--font-body);transition:color .25s,border-color .25s,background .25s}
.uc-index a span{font:400 .68rem/1 var(--font-mono);letter-spacing:.12em;color:var(--accent)}
.uc-index a:hover{color:var(--text);border-color:var(--border-hover);background:rgba(var(--text-rgb),.03)}
.uc-list{list-style:none}
.uc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2rem clamp(2rem,5vw,4.5rem);align-items:center;padding:clamp(2.5rem,5vh,4rem) 0;border-top:1px solid var(--border)}
.uc:last-child{border-bottom:1px solid var(--border)}
.uc:nth-child(even)>.uc-media{order:2}
.uc-media{position:relative;margin:0;aspect-ratio:16/10;overflow:hidden;border:1px solid var(--border);border-radius:16px;background:var(--surface);isolation:isolate}
.uc-media picture{display:block;width:100%;height:100%}
.uc-media img{width:100%;height:100%;object-fit:cover;filter:saturate(.9) brightness(.9);transform:scale(1.04);transition:transform 1.1s var(--ease-out),filter .6s}
.uc:hover .uc-media img{transform:scale(1);filter:saturate(1) brightness(1)}
.uc-media figcaption{position:absolute;left:1rem;bottom:1rem;z-index:1;padding:.45em .65em;border-radius:6px;background:rgba(var(--bg-rgb),.66);color:var(--text-2);line-height:1;pointer-events:none}
.uc-body{display:grid;gap:1rem;align-content:center;min-width:0}
.uc .n{font:400 .72rem/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.uc h3{font-size:clamp(1.5rem,2.4vw,2.1rem);line-height:1.1;letter-spacing:-.02em;max-width:18ch;text-wrap:balance}
.uc-scenario{color:var(--text);font-size:clamp(1.02rem,1.25vw,1.15rem);line-height:1.5;max-width:46ch}
.uc-spec{display:grid;margin-top:.25rem}
.uc-spec>div{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:.4rem 1.25rem;align-items:start;padding:.85rem 0;border-top:1px solid var(--border)}
.uc-spec dt{padding-top:.2rem;font:500 .68rem/1.6 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.uc-spec dd{color:var(--text-2);font-size:.95rem;line-height:1.55;max-width:50ch}
.uc-spec .chips{gap:.4rem}
.uc-note{padding:.7rem .9rem;border:1px solid var(--border-hover);border-radius:8px;color:var(--text-2);font-size:.88rem;line-height:1.5;max-width:52ch}
.uc-note strong{font-weight:500;color:var(--text)}
.uc-note a{color:var(--text);padding-block:.8rem;text-decoration:underline;text-decoration-color:rgba(var(--text-rgb),.3);text-underline-offset:.22em;text-decoration-thickness:1px;transition:text-decoration-color .25s}
.uc-note a:hover{text-decoration-color:var(--accent)}
.uc-actions{display:flex;align-items:center;gap:.8rem 1.6rem;flex-wrap:wrap;padding-top:.6rem}
.uc-link{display:inline-flex;align-items:center;min-height:44px;color:var(--text);font:500 .92rem/1.3 var(--font-body);text-decoration:underline;text-decoration-color:rgba(var(--text-rgb),.3);text-underline-offset:.22em;text-decoration-thickness:1px;transition:text-decoration-color .25s}
.uc-link::after{content:"↗";display:inline-block;margin-left:.35em;color:var(--accent);transition:transform .3s}
.uc-link:hover{text-decoration-color:var(--accent)}
.uc-link:hover::after{transform:translate(2px,-2px)}

/* ===== 03 how to book ===== */
.book-steps{list-style:none}
.book-steps .tile{min-height:0}

/* ===== responsive ===== */
@media (max-width:1000px){
  .ways{grid-template-columns:1fr}
  .uc{grid-template-columns:1fr;gap:1.5rem;align-items:start}
  .uc:nth-child(even)>.uc-media{order:0}
  .uc-media{aspect-ratio:16/9}
}
@media (max-width:640px){
  .uc{padding:2.4rem 0}
  .uc-media{border-radius:12px}
  .uc-media figcaption{left:.75rem;bottom:.75rem}
  .uc h3{font-size:1.6rem}
  .uc-spec>div{grid-template-columns:1fr;gap:.35rem}
  .uc-actions .btn{flex:1 1 auto;justify-content:center}
  .uc-index a{flex:1 1 calc(50% - .5rem);justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .uc-media img,.uc:hover .uc-media img{transform:none;filter:saturate(1) brightness(1)}
}
@media print{
  .uc-media img{filter:none;transform:none}
}