/* Fryk Works — work page (dark register, light footer) */

/* ── INTRO ── */
.wkp-intro{
  padding:192px 0 72px;
}
.wkp-intro .sec-label{
  display:block;
  margin-bottom:26px;
  color:var(--white-38);
}
.wkp-h{
  font-size:clamp(38px,5.5vw,72px);
  font-weight:300;
  line-height:1.05;
  letter-spacing:-.038em;
  color:var(--white);
  text-wrap:balance;
}

/* ── CONTROLS ── */
.wkp-controls{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  flex-wrap:wrap;
  gap:20px 48px;
  padding-top:30px;
  border-top:1px solid rgba(255,255,255,.10);
  margin-bottom:56px;
}
.wk-filters{
  display:flex;
  flex-wrap:wrap;
  gap:8px 26px;
  transition:opacity 200ms var(--ease-out),visibility 0s 0s;
}
/* company view: filters don't apply — fade out, keep the row's space */
.wk-filters.is-off{
  opacity:0;
  visibility:hidden;
  transition:opacity 200ms var(--ease-out),visibility 0s 200ms;
}
.wk-filter,
.wk-view{
  position:relative;
  background:none;
  border:none;
  padding:0 0 5px;
  cursor:pointer;
  font-family:inherit;
  color:var(--white-38);
  transition:color 200ms var(--ease-out);
}
.wk-filter{
  font-size:13px;
  letter-spacing:.04em;
}
.wk-view{
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
}
/* active underline — grows from the baseline, same move as .sec-action */
.wk-filter::after,
.wk-view::after{
  content:"";
  position:absolute;
  left:0;bottom:0;
  width:100%;height:1px;
  background:var(--white);
  transform:scaleY(0);
  transform-origin:bottom center;
  transition:transform var(--motion-dur-hover) var(--ease-spring);
}
.wk-filter[aria-pressed="true"],
.wk-view[aria-pressed="true"]{color:var(--white)}
.wk-filter[aria-pressed="true"]::after,
.wk-view[aria-pressed="true"]::after{transform:scaleY(1)}
.wk-toggle{
  display:flex;
  gap:24px;
  flex-shrink:0;
}

/* ── GALLERY ── */
.wkp-gallery .work-grid{
  row-gap:52px; /* 2× the shared 26px row rhythm */
  column-gap:26px;
}
.wkp-gallery{
  padding:0 0 128px;
}
.wk-gallery{
  transition:opacity 180ms var(--ease-out);
}
.wk-gallery.is-swapping{opacity:0}

/* re-render entrance (filter / view change) — initial load uses data-anim */
.wk-enter{
  animation:wk-in 260ms var(--ease-out) both;
  animation-delay:var(--d,0ms);
}
@keyframes wk-in{
  from{opacity:0;transform:translateY(10px) scale(.99)}
}

/* ── CARD ── */
/* anatomy reuses .work-card / .work-thumb / .work-title from components.css */
.wkp-gallery .work-card{
  color:var(--white);
}
.wkp-gallery .work-card:focus-visible{
  outline-color:var(--white);
}
.wkp-gallery .work-title{color:var(--white)}
.wk-card .work-thumb{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--white-10);
}
/* tonal placeholder label — sits under the image, visible until it loads */
.wk-ph-name{
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--white-38);
  text-align:center;
  padding:0 24px;
}
.work-thumb .wk-img{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  object-fit:cover;
  opacity:0;
  transition:
    opacity 360ms var(--ease-out),
    transform 400ms var(--ease-out);
}
.work-thumb .wk-img.is-loaded{opacity:1}
.wk-meta{
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--white-38);
}

/* ── COMPANY GROUPS ── */
.wk-group{margin-bottom:104px}
.wk-group:last-child{margin-bottom:0}
.wk-group-head{margin-bottom:40px}
.wkg-name{
  font-size:clamp(24px,3vw,34px);
  font-weight:300;
  line-height:1.15;
  letter-spacing:-.025em;
  color:var(--white);
}
.wkg-tags{
  margin-top:12px;
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--white-38);
}

/* ── LIGHT FOOTER (on dark page base) ── */
body.page-base-dark .footer.surface-light{
  background:var(--bg);
  border-top-color:var(--border);
}
body.page-base-dark .footer.surface-light .foot-logo img{
  filter:invert(1);
  opacity:.65;
}
body.page-base-dark .footer.surface-light .foot-copy{color:var(--ink-45)}
body.page-base-dark .footer.surface-light .foot-link{color:var(--ink-45)}

/* ── HOVER (fine pointer only) ── */
@media (hover:hover) and (pointer:fine){
  .wk-filter:hover,
  .wk-view:hover{color:var(--white)}
  body.page-base-dark .footer.surface-light .foot-link:hover{color:var(--ink)}
}

/* ── NOSCRIPT FALLBACK ── */
.wk-static{
  list-style:none;
}
.wk-static li{
  padding:18px 0;
  border-bottom:1px solid rgba(255,255,255,.10);
  font-size:14px;
  font-weight:300;
  color:var(--white-55);
}

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion:reduce){
  .wk-gallery,
  .wk-filters,
  .wk-filter,
  .wk-view,
  .wk-filter::after,
  .wk-view::after,
  .work-thumb .wk-img{transition:none}
  .wk-enter{animation:none}
}

/* ── RESPONSIVE ── */
@media(max-width:960px){
  .wkp-intro{padding:160px 0 56px}
  .wkp-gallery .work-grid{
    row-gap:40px; /* 2× the shared 20px */
    column-gap:20px;
  }
}
@media(max-width:640px){
  .wkp-intro{padding:136px 0 44px}
  .wkp-controls{margin-bottom:44px}
  .wkp-gallery{padding-bottom:96px}
  .wkp-gallery .work-grid{gap:88px} /* 2× the shared 44px single-column rhythm */
  .wk-group{margin-bottom:80px}
}