/* AirWeb — «Наши работы» (examples.html): все работы подряд — сначала индивидуальный дизайн, под ним готовые решения.
   Переключатель едет за прокруткой под меню, ведёт к группе и подсвечивает ту, до которой долистали.
   Карточки сайтов — те же .pcard, что на главной (fx.css). */

.wk{padding-block:clamp(26px,3vw,48px) clamp(60px,7vw,110px)}
.wk-head{display:flex;align-items:flex-end;min-height:66px}
.wk-title h1{margin-top:12px;font-size:clamp(34px,4.4vw,68px);font-weight:600;letter-spacing:-.05em;line-height:1}

/* the switch: sits at the right of the title, then stays under the menu while the page scrolls */
.wk-bar{position:sticky;top:calc(var(--nav) + 10px);z-index:30;display:flex;justify-content:flex-end;margin-top:-66px;pointer-events:none}
.wk-tabs{position:relative;display:flex;padding:5px;border:1.5px solid var(--ink);border-radius:999px;background:#fff;box-shadow:0 16px 36px -20px rgba(30,20,6,.35);pointer-events:auto}
/* the filled half slides to the group in view (black — custom design, amber — ready-made) */
.wk-tabs::before{content:"";position:absolute;top:5px;bottom:5px;left:0;width:var(--w,0);border-radius:999px;background:var(--ink);transform:translateX(var(--x,0));transition:transform .45s var(--ease),width .45s var(--ease),background .45s ease}
.wk-tabs[data-on="ready"]::before{background:var(--amber)}
.wk-tab{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;min-height:54px;padding:0 30px;border-radius:999px;font-size:17px;font-weight:600;letter-spacing:-.01em;color:var(--ink);white-space:nowrap;transition:color .35s ease}
.wk-tab[aria-current="true"]{color:#fff}
.wk-tabs[data-on="ready"] .wk-tab[aria-current="true"]{color:var(--ink)}
.wk-tab[aria-current="false"]:hover{color:var(--amber-deep)}
html:not(.js) .wk-tab[aria-current="true"]{background:var(--ink);color:#fff}

/* the two groups, one after the other */
.wk-panel{scroll-margin-top:calc(var(--nav) + 90px)}
.wk-panel+.wk-panel{margin-top:clamp(44px,5.4vw,88px)}
.wk-group{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 18px;margin:clamp(20px,2.4vw,32px) 0 clamp(16px,1.8vw,24px);padding-top:clamp(14px,1.6vw,20px);border-top:1px solid var(--line)}
.wk-badge{padding:6px 13px;border-radius:999px;background:#2b2926;color:var(--amber);font-size:13px;font-weight:600;white-space:nowrap}
.wk-badge-amber{background:var(--amber);color:var(--ink)}

/* custom design: the homepage project cards, always a grid here (the homepage hides it in its band variant) */
html .pgrid.wk-grid,html.pv3 .pgrid.wk-grid{display:grid;padding-top:0}
/* a site whose top is plain (Luisante opens on a grey video frame): its homepage cover shows until the card is hovered */
.wk-cover{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;object-position:top;transition:opacity .6s ease}
.pcard:hover .wk-cover,.pcard.auto .wk-cover{opacity:0}
.wk-btns{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:16px}
.wk-btns .pc-link{margin-top:0}

/* the group line carries the device switch next to the price badge */
.wk-group-r{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
/* phones: the cover and the buttons belong to the desktop cards */
.wk-grid.is-m .wk-cover,.wk-grid.is-m .wk-btns{display:none}

/* ready-made: the steps and tools of the former page; the tools keep their distance from the cards */
.wk .ex-steps{margin-top:0}
.wk .ex-tools{margin-bottom:clamp(20px,2.6vw,36px)}

/* up to 1100px the title and the switch do not fit one row (the Russian switch is the widest): the switch goes under the title */
@media (max-width:1100px){
  .wk-head{min-height:0}
  .wk-bar{margin-top:16px;justify-content:flex-start}
}
@media (max-width:760px){
  .wk-bar{justify-content:stretch}
  .wk-tabs{width:100%}
  .wk-tab{flex:1;min-height:50px;padding:0 10px;font-size:15px;white-space:normal;text-align:center;line-height:1.15}
}
@media (prefers-reduced-motion:reduce){.wk-tabs::before{transition:none}}