/* Further illustration studies for Mobilní přístup (počítač a telefon): new values of the `mobile` Pult axis.
   Kept in their own file so they can be built in parallel with the others. Each
   study replaces the original devices, uses the stage proportion of the flow and
   list studies and, between 701 and 1000 px, stacks the section like theirs. */

/* Jeden list ve dvou výřezech: one tender profile lies in the foreground, the
   computer and the phone are only outlines, two openings onto the same sheet.
   Outside them the sheet is dimmed; the whole composition is tilted as one, so
   the openings stay on the content. Opening geometry lives in the SVG
   (600 × 550, the stage proportion); the sheet blocks are placed in percent of
   the sheet to sit inside them. */
[data-mobile="viewports"] .mobile-original{display:none}
[data-mobile="viewports"] .access-viewports{display:block;height:auto;aspect-ratio:600/550}
@media(min-width:701px) and (max-width:1000px){
 [data-mobile="viewports"] .mobile{grid-template-columns:1fr}
}
.access-viewports{--viewports-tilt:-3deg;--viewports-dim:color-mix(in srgb,var(--canvas) 30%,transparent);--viewports-stroke:var(--ice)}
.viewports-stage{position:absolute;inset:0;transform:rotate(var(--viewports-tilt))}
.viewports-sheet{position:absolute;left:5%;top:4%;width:90%;height:92%;background:var(--paper);color:var(--ink);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.viewports-title{position:absolute;left:8%;top:9%;width:52%;font-weight:400;font-size:var(--access-title);line-height:1.05;letter-spacing:var(--display-track)}
.viewports-main{position:absolute;left:8%;top:27%;width:52%}
.viewports-rest{position:absolute;left:8%;top:66%;width:52%}
.viewports-side{position:absolute;left:71%;top:47%;width:22%}
.viewports-main .paper-lines:first-child,.viewports-side .paper-lines:first-child,.viewports-rest .paper-lines{margin-top:0}
.viewports-frames{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.viewports-dim{fill:var(--viewports-dim)}
.viewports-frame{fill:none;stroke:var(--viewports-stroke);stroke-width:var(--access-frame);stroke-linecap:round;vector-effect:non-scaling-stroke}

/* Stejný obsah, jiná šířka: no devices at all. The same tender profile is laid
   out twice, wide in two columns and narrow in one, and hairlines join the
   matching parts (drawn by illustrations-mobile.js from the rendered blocks, so
   they follow the text in every language and width). */
[data-mobile="reflow"] .mobile-original{display:none}
[data-mobile="reflow"] .access-reflow{display:block;height:auto;aspect-ratio:600/550}
@media(min-width:701px) and (max-width:1000px){
 [data-mobile="reflow"] .mobile{grid-template-columns:1fr}
}
.access-reflow{--reflow-link:var(--ice);--reflow-gap:var(--gap-md)}
.reflow-links{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;stroke:var(--reflow-link);stroke-width:1.3;pointer-events:none;z-index:0}
.reflow-links circle{fill:var(--paper);stroke:var(--ink)}
.access-reflow figure{position:absolute;margin:0;z-index:1}
.reflow-wide{left:0;top:8%;width:62%}
.reflow-narrow{right:0;top:22%;width:26%}
.reflow-sheet{background:var(--paper);color:var(--ink);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--reflow-gap)}
.reflow-narrow .reflow-sheet{padding:var(--gap-sm) var(--gap-xs)}
.reflow-sheet strong{display:block;font-weight:400;font-size:var(--access-title);line-height:1.05;letter-spacing:var(--display-track)}
.reflow-narrow .reflow-sheet strong{font-size:calc(var(--access-title)*.72)}
/* Long labels (English) hyphenate inside the narrow layout instead of leaving it. */
.reflow-narrow .access-highlight{hyphens:auto}
.reflow-columns{display:grid;grid-template-columns:1.6fr 1fr;gap:var(--reflow-gap);align-items:start}
.reflow-columns>div:last-child{padding-top:var(--gap-sm)}
.access-reflow .access-rule{padding:var(--gap-xs) 0 0;border-top:var(--hairline) solid var(--access-rule)}
.access-reflow figcaption.access-format{position:static;margin-top:var(--gap-sm)}
@media(max-width:700px){
 /* The narrow layout is taller than the wide one on a phone: the stage grows with it. */
 [data-mobile="reflow"] .access-reflow{aspect-ratio:600/760}
 .access-reflow{--reflow-gap:var(--gap-sm)}
 .reflow-wide{top:4%}
 .reflow-narrow{top:14%}
 .reflow-sheet{padding:var(--gap-sm)}
 .reflow-narrow .reflow-sheet{padding:var(--gap-xs)}
 .reflow-narrow .access-highlight{font-size:calc(var(--access-label)*.9)}
}

/* Kancelář, jednání, cesta: the three places from the section text, each with
   its device and the same tender profile, the screens getting smaller along
   one route. The yellow trail follows the scroll (illustrations-mobile.js
   scrubs --places-progress between --places-start and --places-end of the
   window); without motion it is drawn in full. */
[data-mobile="places"] .mobile-original{display:none}
[data-mobile="places"] .access-places{display:block;height:auto;aspect-ratio:600/550}
@media(min-width:701px) and (max-width:1000px){
 [data-mobile="places"] .mobile{grid-template-columns:1fr}
}
.access-places{--places-title:calc(var(--access-title)*.8);--places-start:85%;--places-end:25%}
.places-route{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;pointer-events:none;z-index:0}
.places-track{stroke:var(--access-stroke);stroke-width:1.3;vector-effect:non-scaling-stroke}
.places-trail{stroke:var(--accent);stroke-width:calc(var(--hairline)*3);stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:calc(1 - var(--places-progress,1));vector-effect:non-scaling-stroke}
.places-route circle{fill:var(--accent);stroke:var(--ink);vector-effect:non-scaling-stroke}
.places-stop{position:absolute;z-index:1}
.places-office{left:0;top:0;width:46.7%}
.places-meeting{left:31.7%;top:47.6%;width:38.3%}
.places-road{left:78.3%;top:45.5%;width:16.7%}
.access-places .access-monitor,.access-places .access-handset{position:relative;left:auto;right:auto;top:auto;width:100%}
.access-places .access-monitor{height:auto;aspect-ratio:16/10}
.access-places .access-handset{height:auto;aspect-ratio:9/18}
.access-places .access-handset .access-page{padding:var(--gap-xs) calc(var(--gap-xs)*.5)}
.access-places .access-page strong{font-size:var(--places-title)}
.places-laptop{position:relative;aspect-ratio:16/10}
.places-laptop-base{position:absolute;top:100%;left:-7%;right:-7%;height:calc(var(--access-frame)*2);border-radius:0 0 var(--radius) var(--radius);background:var(--access-stroke)}
.places-label{display:block;color:var(--ice);font-size:var(--access-label);letter-spacing:var(--label-track);white-space:nowrap;margin-top:var(--gap-sm)}
.places-office .places-label{margin-top:calc(var(--gap-lg) + var(--gap-sm))}
.places-meeting .places-label{margin-top:calc(var(--gap-sm) + var(--access-frame)*2)}
@media(max-width:700px){
 .access-places{--places-title:calc(var(--access-title)*.6)}
 .access-places .access-page{padding:var(--gap-xs)}
 .access-places .paper-lines{gap:calc(var(--gap-xs)*.5);margin:var(--gap-xs) 0}
 .access-places .access-highlight{padding:calc(var(--gap-xs)*.5);font-size:calc(var(--access-label)*.9)}
 .access-places .access-screen{padding:calc(var(--gap-xs)*.5)}
 .access-places .access-stand{height:var(--gap-md)}
 .access-places .access-handset{padding-left:0;padding-right:0}
 .places-office .places-label{margin-top:calc(var(--gap-md) + var(--gap-xs))}
 /* The phone at the end of the route gets a little wider, so its highlight fits. */
 .places-road{width:21.5%}
}