/* ================= r17 layout (Astra): nav row, phone hero, phone department tour =================
   Loaded after style.css, r16-auth and r16-labels.css. Desktop only gets the language pill and the auth group. */

/* ---------- nav: G + Gongpany on the left; language pill, Log in, Sign up grouped at the right edge ---------- */
.auth-nav{flex:none;display:flex;align-items:center;gap:6px}
.auth-nav>*{white-space:nowrap}
.lang-sw{display:inline-flex;align-items:center;justify-content:center;height:30px;min-width:40px;padding:0 11px;border-radius:999px;
  font-family:var(--sans);font-size:12.5px;font-weight:700;line-height:1;letter-spacing:.02em;color:#fff;
  background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);transition:background .2s,box-shadow .2s}
.lang-sw:hover,.lang-sw:focus-visible{background:rgba(52,232,140,.12);box-shadow:inset 0 0 0 1px rgba(52,232,140,.7)}
.auth-nav .lang-sw{margin-right:2px}
/* the pill made the row ~15 px wider: link labels must never wrap onto two lines (1024 px wrapped "The company") */
.links a{white-space:nowrap}
@media (min-width:761px) and (max-width:1180px){
  .nav-in{gap:12px}
  .links{gap:0;font-size:13.5px}
  .links a{padding:8px 8px}
}
@media (min-width:761px) and (max-width:900px){
  .links a{padding:8px 6px;font-size:12.5px}
}
@media (max-width:760px){
  .nav{padding:0 10px}
  .nav-in{flex-wrap:nowrap;gap:8px;padding:6px 6px 6px 12px;min-width:0}
  .brand{flex:0 1 auto;min-width:0}
  .auth-nav{margin-left:auto;gap:3px}
  .lang-sw{height:28px;min-width:0;padding:0 9px;font-size:12px}
  .auth-login{padding:6px 7px;font-size:13px}
  .auth-nav .pill{margin-left:2px;padding:8px 13px;font-size:13px}
}
@media (max-width:374px){
  .nav{padding:0 8px}
  .nav-in{gap:6px;padding-left:10px}
  .brand{gap:7px;font-size:15.5px}.brand-t{font-size:15.5px}
  .g-mark{width:29px;height:23px}
  .lang-sw{height:26px;padding:0 7px;font-size:11.5px}
  .auth-nav{gap:1px}
  .auth-login{padding:6px 6px;font-size:12.5px}
  .auth-nav .pill{padding:7px 10px;font-size:12.5px}
}

/* ---------- desktop pavilions: the speech bubble stays above the floating objects without lifting the figure ---------- */
.dio .fo{z-index:9}

/* ---------- desktop hero (>1080): the longer subline ran right up to the first figure; nudge the cast right ---------- */
@media (min-width:1081px){
  .hero{--cx:69vw}
}
/* narrow laptops (1081-1320): the copy column is 35vw at its widest, so the cast gets a touch smaller as well */
@media (min-width:1081px) and (max-width:1320px){
  .hero{--ph:min(108svh,73vw);--cx:70vw}
}

/* ---------- 761-1080 px, landscape (1024x768 laptops, tablets on their side) ----------
   1. Hero: the copy column is 38vw; the stage was centred at 60vw, so the subline ran over the leftmost cast.
      Push the stage right and scale it a touch so the whole cast sits right of the copy.
   2. Tour: the card was a full-width sheet over the lower half of the pavilion. Use the desktop split instead:
      pavilion left, card right, nothing on top of the art. */
@media (min-width:761px) and (max-width:1080px){
  .hero{--ph:min(86svh,80vw);--cx:71vw}
}
@media (min-width:761px) and (max-width:1080px) and (min-aspect-ratio:6/5){
  .tour{--B:min(55vw,calc((100svh - 230px) * 1.55))}
  .dio-wrap{left:calc(clamp(12px,2vw,40px) + var(--B) * (1 - var(--s)) / 2);width:calc(var(--B) * var(--s));
    top:max(calc(var(--r17-headb,250px) + 14px),calc(62svh - var(--B) * var(--s) / var(--ar) * var(--fl)))}
  .card{left:auto!important;right:clamp(16px,2.6vw,32px)!important;top:50%;bottom:auto;transform:translateY(-50%);
    width:calc(100vw - var(--B) - clamp(12px,2vw,40px) - clamp(16px,2.6vw,32px) - 26px)!important;max-height:calc(100svh - 190px);overflow:hidden;
    padding:20px 20px 18px;border-radius:24px}
  .card .body{display:block;font-size:15px;line-height:1.5;margin-bottom:14px}
  .card h3{font-size:clamp(22px,2.5vw,27px);line-height:1.12;margin-bottom:10px}
  .card .good{grid-template-columns:1fr 1fr;gap:6px;margin-bottom:0}
  .card .good li{font-size:13px;padding:7px 10px}
  .card-a{left:auto;right:18px;top:16px}
  .fo{width:clamp(40px,4.4vw,56px)}
}
/* short landscape screens: the body copy steps aside before anything overlaps */
@media (min-width:761px) and (max-width:1080px) and (min-aspect-ratio:6/5) and (max-height:700px){
  .card .body{display:none}
}
/* ---------- phone hero: copy, then the WHOLE cast, then a caption slot that is part of the hero ----------
   The stage is sized from the screen width so all 21 people fit (the cast spans ~78% of --ph), and the hero grows
   to hold copy + cast + caption, so a caption can never sit under the next section. */
.r17-cap{display:none}
@media (max-width:760px){
  .hero{--ph:calc((100vw - 16px) * 1.27);--cap:92px;height:auto;min-height:max(100svh,600px);display:flex;flex-direction:column;padding-top:80px}
  .hero-copy{position:relative;left:auto;top:auto;transform:none;width:auto;margin:0 20px}
  .hero::after{content:"";display:block;flex:none;margin-top:auto;height:calc(var(--ph) * .5 + var(--cap));pointer-events:none}
  .stage{left:calc(50vw - var(--ph) * 1.165 + var(--ph) * .012);top:auto;bottom:calc(var(--cap) - var(--ph) * .22)}
  .hc-float{display:none!important}
  /* the selected person: smile pose and a soft light; stack order is untouched */
  .hc.r17-sel.ready img.b{opacity:1}.hc.r17-sel.ready img.a{opacity:0}
  .hc.r17-sel img{filter:drop-shadow(0 2px 2px rgba(0,0,0,.5)) drop-shadow(0 0 7px rgba(255,240,210,.55))}
  .hcl.dim{filter:none}.hcl.r17-dim{filter:brightness(.5) saturate(.65)}
  .r17-cap-dept[hidden]{display:none}
  .r17-cap{position:absolute;left:12px;right:12px;bottom:14px;z-index:5;display:flex;align-items:center;gap:10px;min-height:56px;padding:8px 8px 8px 14px;border-radius:18px;
    background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.03) 48%,rgba(255,255,255,.05)),rgba(13,12,22,.9);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px color-mix(in srgb,var(--c,#34E88C) 55%,rgba(255,255,255,.1)),0 16px 30px -16px rgba(0,0,0,.9);
    transition:box-shadow .25s}
  .r17-cap::before{content:"";position:absolute;left:var(--ax,50%);top:-9px;width:1px;height:9px;background:color-mix(in srgb,var(--c,#34E88C) 75%,transparent);opacity:0;transition:opacity .2s}
  .r17-cap.on::before{opacity:1}
  .r17-cap-hint{flex:1;font-size:13.5px;color:var(--soft);display:flex;align-items:center;gap:9px}
  .r17-cap-hint::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:#34E88C;box-shadow:0 0 0 4px rgba(52,232,140,.18)}
  .r17-cap-who{flex:1;min-width:0;display:grid;grid-template-columns:auto 1fr;column-gap:8px;align-items:baseline;line-height:1.25}
  .r17-cap-who[hidden],.r17-cap-hint[hidden],.r17-cap-go[hidden]{display:none}
  .r17-cap-who b{font-size:15px;color:#fff;font-weight:700}
  .r17-cap-role{font-size:13px;color:rgba(255,255,255,.82);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .r17-cap-dept{grid-column:1/-1;display:flex;align-items:center;gap:6px;margin-top:2px;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.6)}
  .r17-cap-dept::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--c,#34E88C)}
  .r17-cap:lang(zh) .r17-cap-dept{letter-spacing:.04em;text-transform:none}
  .r17-cap-go{flex:none;display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 14px;border-radius:999px;font-size:13px;font-weight:700;color:#06150D;background:#34E88C;white-space:nowrap}
  .r17-cap-go::after{content:"\2192"}
}

/* ---------- phone tour (and upright tablets): heading, the pavilion as large as the screen allows, then ONE card
   docked above the rail. The pavilion is centred in the space left between heading and card, so it never sits
   under text and nothing sits on the people. --r17-headb (heading bottom, on .tour) and --r17-cardh (each card's
   height, on its .panel) are measured by js/r17-layout.js, because both change with language and width. ---------- */
@media (max-width:760px),(min-width:761px) and (max-width:1080px) and (max-aspect-ratio:6/5){
  .tour-head .eyebrow{margin-bottom:4px}
  .panel{--hb:var(--r17-headb,150px);--ch:var(--r17-cardh,220px);--railtop:66px;
    --avail:calc(100svh - var(--hb) - var(--railtop) - var(--ch) - 30px);
    --W:max(46vw,min(calc((100vw - 12px) * var(--s) * 1.02),calc(var(--avail) * var(--ar)),calc(100vw - 12px)))}
  .dio-wrap{left:calc((100vw - var(--W)) / 2);width:var(--W);top:calc(var(--hb) + 12px + max(0px,(var(--avail) - var(--W) / var(--ar)) * .5))}
  .card{top:auto!important;bottom:var(--railtop)!important;max-height:calc(100svh - var(--hb) - var(--railtop) - 110px);overflow:hidden}
  .tour-rail{bottom:12px;scroll-behavior:smooth}
}
@media (max-width:760px){
  .tour-head{top:68px}
  .tour-head .eyebrow{font-size:11px}
  .card{padding:14px 16px 15px;border-radius:22px}
  .card .eyebrow{font-size:11px;margin-bottom:6px}
  .card h3{font-size:clamp(19px,5.3vw,22px);line-height:1.14;margin-bottom:12px}
  .card .good-h{font-size:10.5px;margin-bottom:7px}
  .card .good{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:0}
  .card .good li{padding:6px 11px 6px 10px;font-size:13px;border-radius:999px;gap:7px}
  .card .good li::before{width:6px;height:6px}
  .card-a{left:auto;right:26px;top:18px}
  /* fewer things fighting for a small screen: smaller floating objects, a compact speech bubble */
  .fo{width:38px}
  .bubble{max-width:176px;font-size:11.5px;padding:6px 10px}
}
/* short phones (640-700 px tall): a tighter card so the pavilion keeps its room */
@media (max-width:760px) and (max-height:700px){
  .tour-head{top:64px}
  .card{padding:11px 14px 12px}
  .card h3{font-size:18px;margin-bottom:8px}
  .card .good-h{display:none}
  .card .good li{padding:5px 10px 5px 9px;font-size:12.5px}
}
/* tall phones: the three people, by name and role, under the jobs */
@media (max-width:760px) and (min-height:780px){
  .card .people{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:12px}
  .card .people li{display:grid;grid-template-columns:26px minmax(0,1fr);column-gap:6px;align-items:center;text-align:left;padding:6px 7px;border-radius:12px}
  .card .people img{grid-row:span 2;width:26px;height:26px;margin:0}
  .card .people b{font-size:12px;line-height:1.1}
  .card .people span{font-size:10px;line-height:1.15;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}