/* Works E, round 9, part C: the normal grid (Omar, 16 Oct 00:2x: "A way to toggle a normal grid option that has the exact
   same setup as the old website."). The grid is the live /works listing, built in the live page's own markup and classes
   (study/works-page/source/live-works.html), so the live stylesheet the shell already loads draws the cards, the columns,
   the chips and the View case pill. This file holds only what the live page sets outside that stylesheet (its inline
   <style>: the column swap at 1440 and the container widths), the two layouts the page swaps between, and the view switch.
   Loaded after works.css; works.css and works.js are not edited. */
/* slop-ok: SLOP-07 - radii are live tokens: xsmall for the switch, its thumb and the live chips, xsmall + .5rem for the bar, as the dock */
/* slop-ok: SLOP-18 - spacing is the dock's own (.5rem inset, 1.25rem from the bottom) and the live page's rem steps */
/* slop-ok: SLOP-27 - 1440, 991 and 767 are the live page's column swap and Webflow's tablet and phone breakpoints, not measures */
/* slop-ok: SLOP-35 - buttons take font-family: inherit, the site's declared stack (Excon, Arial, sans-serif) */

/* ---------- the live page's inline style, scoped to the grid section ---------- */
/* At 1440 and up the live page hides its CMS list (absolute at -19999 px) and shows the three columns it clones the cards
   into; here the cards move into the columns, so the list is empty and simply leaves the flow. */
@media (min-width: 1440px) {
  .wg [data-source-list] { display: none; }
  .wg .container-small.biggerat1440 { max-width: 120rem; }
  /* the live clones carry the image scale's end state, 1.15, and keep it (probe 14 Oct, 1920: every card at 1.15) */
  .wg .work-list_image-v2 { transform: scale(1.15); }
}
@media (max-width: 1439px) {
  .wg .container-small.biggerat1440 { max-width: 75rem; }
}
.wg[hidden] { display: none !important; }

/* The live chips are labels round hidden radio inputs, which a keyboard cannot reach; here they are buttons with the same
   classes, so they take the label's type and box: Excon 14 px on body leading (1.4), no border. */
.wg .work-list_categories-wrap.top .work-list_category {
  border: 0; font-family: inherit; font-weight: inherit; letter-spacing: inherit; line-height: inherit; cursor: pointer; margin: 0;
}
.wg .work-list_categories-wrap.top .work-list_category.slctd { cursor: default; }
.wg .work-list_category:focus-visible,
.wg .work-list_image-wrap-v2:focus-visible,
.wg .button:focus-visible { outline: 2px solid var(--_colors---primary--orange); outline-offset: 3px; }

/* ---------- the two layouts ---------- */
/* The field is the first screen and the grid is not there (works.css). In grid mode (.wg-on) the field's section leaves
   the flow and lies under the top of the page, the grid section takes its place, and the page scrolls as a normal page.
   Once the field has faded (.wg-settled) it is hidden outright: works.js keeps writing its plane's opacity on scroll. */
main[data-works-root].wg-host { position: relative; }
.wg-on .we-stage { position: absolute; top: 0; left: 0; width: 100%; pointer-events: none; }
.wg-on .we-stage > .we-sr { display: none; }
.wg-settled .we-stage { visibility: hidden; }
/* leaving the grid at the top of the page, the grid lies over the returning field while it fades */
.wg.wg-leaving { position: absolute; top: 0; left: 0; width: 100%; pointer-events: none; }

/* ---------- the view switch ---------- */
/* One control, two places: inside the dock while the field is up, and in its own bar while the grid is (the dock goes
   inert and away with the field). Two square buttons on the chip ground; the thumb, in the text colour, slides to the
   current view and its icon turns from Phosphor regular to fill, so the state reads without colour. Orange stays the
   filter's. */
.wg-switch {
  position: relative; flex: none; display: flex; isolation: isolate;
  border-radius: var(--border-radius--xsmall); background-color: var(--_theme---s-bg-t2); color: var(--_theme---s-text);
}
.wg-thumb {
  position: absolute; z-index: -1; top: 0; left: 0; width: 50%; height: 100%;
  border-radius: var(--border-radius--xsmall); background-color: var(--_theme---s-text);
  transition: transform .5s cubic-bezier(.65, 0, .35, 1);
}
.wg-switch[data-view="grid"] .wg-thumb { transform: translateX(100%); }
.wg-sw {
  position: relative; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; padding: 0; border: 0;
  border-radius: var(--border-radius--xsmall); background: transparent; color: inherit; cursor: pointer;
  transition: color .5s cubic-bezier(.65, 0, .35, 1);
}
.wg-sw[aria-pressed="true"] { color: var(--_theme---s-bg); cursor: default; }
.wg-sw:focus-visible { outline: 2px solid var(--_colors---primary--orange); outline-offset: 2px; }
.wg-ic { grid-area: 1 / 1; display: block; width: 1rem; height: 1rem; transition: opacity .3s ease; }
.wg-ic svg { display: block; width: 100%; height: 100%; }
.wg-ic-on, .wg-sw[aria-pressed="true"] .wg-ic-off { opacity: 0; }
.wg-sw[aria-pressed="true"] .wg-ic-on { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .wg-sw[aria-pressed="false"]:hover { background-color: var(--_theme---s-bg-t3); }
}

/* the grid's bar: the dock's ground, inset and corner, holding the switch alone; it rises in as the field's dock goes
   and steps down out of the way once the call to action below the grid is on screen */
.wg-bar {
  position: fixed; left: 1rem; right: 1rem; bottom: 1.25rem; z-index: 5; margin-inline: auto; width: fit-content;
  display: flex; padding: .5rem; border-radius: calc(var(--border-radius--xsmall) + .5rem);
  background-color: var(--_theme---s-bg); color: var(--_theme---s-text);
  opacity: 0; translate: 0 1.5rem; visibility: hidden;
  transition: opacity .3s ease, translate .45s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .45s;
}
.wg-bar.is-on {
  opacity: 1; translate: 0 0; visibility: visible;
  transition: opacity .4s ease var(--wg-bar-d, 0s), translate .7s cubic-bezier(.16, 1, .3, 1) var(--wg-bar-d, 0s), visibility 0s linear 0s;
}
.wg-bar.is-on.is-past { opacity: 0; translate: 0 1.5rem; visibility: hidden; transition: opacity .3s ease, translate .45s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .45s; }

/* Integration, 16 Oct: the grid's Exit is the field's Exit (works.css .we-exit draws it), fixed in the same bottom right
   corner, the bar's height (grid.js writes --we-dock-h from it), arriving and stepping away with the bar */
.wg-exit {
  position: fixed; opacity: 0; translate: 0 1.5rem; visibility: hidden; pointer-events: none;
  transition: background-color .25s ease, opacity .3s ease, translate .45s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .45s;
}
.wg-exit.is-on {
  opacity: 1; translate: 0 0; visibility: visible; pointer-events: auto;
  transition: background-color .25s ease, opacity .4s ease var(--wg-bar-d, 0s), translate .7s cubic-bezier(.16, 1, .3, 1) var(--wg-bar-d, 0s), visibility 0s linear 0s;
}
.wg-exit.is-on.is-past {
  opacity: 0; translate: 0 1.5rem; visibility: hidden; pointer-events: none;
  transition: background-color .25s ease, opacity .3s ease, translate .45s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .45s;
}

/* slop-ok: SLOP-27 - Webflow's phone breakpoint, not a text measure */
@media (max-width: 767px) {
  .wg-sw { width: 2rem; height: 2rem; }
  .wg-bar { left: .5rem; right: .5rem; bottom: .5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .wg-thumb, .wg-sw, .wg-ic, .wg-bar, .wg-bar.is-on, .wg-bar.is-on.is-past, .wg-exit, .wg-exit.is-on, .wg-exit.is-on.is-past { transition: none; }
}