/* The public site hides the native cursor in favour of a custom reticle
   that follows the mouse. The /admin (Studio) screen doesn't mount that
   reticle, so without this override the cursor is invisible while editing. */
/* !important here is deliberate: the compiled bundle sets cursor:none on
   body/a/button at (0,1,2) specificity for its custom cursor reticle, which
   beats a same-or-lower-specificity override — this is the one reliable way
   to win without risking edits to the minified bundle itself. */
.admin,
.admin input,
.admin textarea,
.admin select {
  cursor: auto !important;
}
.admin a,
.admin button,
.admin summary {
  cursor: pointer !important;
}

/* The bundle shows its own full-screen logo-reveal loader (.loader, with
   .loader-brand + .loader-bar) on first mount AND again on every route
   change. index.html now has its own short, fixed-length preloader for
   first load, so this one is switched off completely — both for the
   initial page and for in-app navigation. Pure display:none: the component
   still mounts/unmounts as before, this just stops it ever painting. */
.loader {
  display: none !important;
}

/* Clients section: small 3-up grid instead of 47 full-width stacked cards,
   and logos shown uncropped on a light chip instead of stretched/cover-cropped. */
.admin-main.kf-clients-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  align-items: start;
}
.admin-main.kf-clients-grid > .admin-bar,
.admin-main.kf-clients-grid > .admin-note,
.admin-main.kf-clients-grid > .btn.btn-fill {
  grid-column: 1 / -1;
  /* Must out-rank the -1 given to the "newest card" rule below, or grid
     auto-placement (which follows order regardless of span) puts that card
     ahead of this full-width header/button row instead of below it. */
  order: -2;
}
.admin-main.kf-clients-grid .admin-card {
  padding: 10px;
}
.admin-main.kf-clients-grid .admin-card-head strong {
  font-size: 13px;
}
.admin-main.kf-clients-grid input {
  font-size: 12px;
  padding: 6px 8px;
}
.admin-main.kf-clients-grid .admin-preview {
  height: 56px;
  width: 100%;
  object-fit: contain;
  background: #fff;
  padding: 8px;
  box-sizing: border-box;
}
@media (max-width: 1100px) {
  .admin-main.kf-clients-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 800px) {
  .admin-main.kf-clients-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .admin-main.kf-clients-grid {
    grid-template-columns: 1fr;
  }
}

/* Work page cards already have a play icon (.play > .play-btn > .orb), but
   the bundle only shows it on :hover. Keep the icon itself always visible;
   keep the dark wash behind it hover-only so thumbnails stay clear at rest. */
.work-card .play {
  opacity: 1 !important;
  background: transparent !important;
}
.work-card:hover .play {
  background: rgba(11, 11, 12, 0.28) !important;
}

/* Home page video rows (.river-tile) have no play icon at all — site-extras.js
   injects the same .play-btn/.orb markup Work page uses, this just centers it. */
.kf-river-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}

/* "Add client" always appends to the end of the list, so a freshly-added
   (still-empty) card used to land at the very bottom of 47 others. `order`
   is layout-only — it doesn't touch the underlying data/array, so save
   order and the homepage logo strip are unaffected — it just puts whichever
   card is currently last (i.e. the newest one) first in the grid, so it's
   immediately visible to fill in without scrolling. */
.admin-main.kf-clients-grid .admin-card:last-child {
  order: -1;
}

/* Home hero headline: swipe in from the left on load, plus a small
   interactive nudge on the orange line on hover. Nothing here currently
   animates this element (verified: h1.getAnimations() is empty), so this
   can't collide with the bundle's own motion logic. */
.hero-copy h1 {
  animation: kf-hero-in 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.hero-copy h1 em {
  display: inline-block;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-copy h1:hover em {
  transform: translateX(8px);
}
@keyframes kf-hero-in {
  from {
    transform: translateX(-8%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-copy h1 {
    animation: none;
  }
  .hero-copy h1:hover em {
    transform: none;
  }
}

/* Team photos: forced to a real square everywhere the site shows them,
   matching the square crop the new upload tool now produces. Was 4:5. */
.member-frame {
  aspect-ratio: 1 / 1 !important;
}

/* Team / Work / Featured admin sections: same compact grid treatment as
   Clients — three up (as many rows as needed), small preview, small fields
   — instead of one giant stacked list. Same last-child order:-1 so a
   freshly-added card appears first instead of at the bottom. */
.admin-main.kf-team-grid,
.admin-main.kf-work-grid,
.admin-main.kf-featured-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  align-items: start;
}
.admin-main.kf-team-grid > .admin-bar,
.admin-main.kf-team-grid > .admin-note,
.admin-main.kf-team-grid > .btn.btn-fill,
.admin-main.kf-work-grid > .admin-bar,
.admin-main.kf-work-grid > .admin-note,
.admin-main.kf-work-grid > .btn.btn-fill,
/* Work also has a standalone "Work page title / text" field pair (its own
   top-level .admin-grid.two, not one nested inside a film card — the `>`
   direct-child combinator is what keeps this from also matching the ones
   inside each card) sitting between the note and the Add button. Without
   this it floats into the film grid as if it were half a card. */
.admin-main.kf-work-grid > .admin-grid.two,
.admin-main.kf-featured-grid > .admin-bar,
.admin-main.kf-featured-grid > .admin-note,
.admin-main.kf-featured-grid > .btn.btn-fill {
  grid-column: 1 / -1;
  order: -2; /* see the matching comment on .kf-clients-grid above */
}
.admin-main.kf-team-grid .admin-card:last-child,
.admin-main.kf-work-grid .admin-card:last-child,
.admin-main.kf-featured-grid .admin-card:last-child {
  order: -1;
}
/* Smaller card chrome — labels, inputs, textareas, name/title — so three
   cards actually fit per row instead of just being cropped. */
.admin-main.kf-team-grid .admin-card,
.admin-main.kf-work-grid .admin-card,
.admin-main.kf-featured-grid .admin-card {
  padding: 10px;
}
.admin-main.kf-team-grid .admin-card-head strong,
.admin-main.kf-work-grid .admin-card-head strong,
.admin-main.kf-featured-grid .admin-card-head strong {
  font-size: 12px;
}
.admin-main.kf-team-grid .admin-field span,
.admin-main.kf-work-grid .admin-field span,
.admin-main.kf-featured-grid .admin-field span {
  font-size: 10px;
}
.admin-main.kf-team-grid input,
.admin-main.kf-team-grid textarea,
.admin-main.kf-work-grid input,
.admin-main.kf-work-grid textarea,
.admin-main.kf-featured-grid input,
.admin-main.kf-featured-grid textarea {
  font-size: 12px;
  padding: 6px 8px;
}
/* The Title/Client, Category/Year, etc. field pairs inside each card were
   built for a full-width card — at one-third width two inputs side by side
   get too narrow to use, so stack them in this compact mode instead. */
.admin-main.kf-work-grid .admin-card .admin-grid.two,
.admin-main.kf-featured-grid .admin-card .admin-grid.two {
  grid-template-columns: 1fr;
}
@media (max-width: 1300px) {
  .admin-main.kf-team-grid,
  .admin-main.kf-work-grid,
  .admin-main.kf-featured-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 760px) {
  .admin-main.kf-team-grid,
  .admin-main.kf-work-grid,
  .admin-main.kf-featured-grid {
    grid-template-columns: 1fr;
  }
}

/* Team preview: small and square, matching the cropped-square upload and
   the site's own .member-frame ratio, instead of the previous large
   uncropped rectangle. */
.admin-main.kf-team-grid .admin-preview {
  width: 84px;
  height: 84px;
  object-fit: cover;
  border-radius: 4px;
}

/* Work / Featured preview: small 16:9 strip instead of a full-width still,
   since the card itself is now only a third of the row. */
.admin-main.kf-work-grid .admin-preview,
.admin-main.kf-featured-grid .admin-preview {
  width: 100%;
  height: 90px;
  object-fit: cover;
  border-radius: 4px;
}
.admin-main.kf-work-grid .admin-card textarea,
.admin-main.kf-featured-grid .admin-card textarea {
  min-height: 44px;
}

/* Photo-crop modal (Team uploads only) — see ensureTeamPhotoCrop in
   site-extras.js. Cropper.js supplies the crop interaction itself; this is
   just the surrounding dialog chrome. */
.kf-crop-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(11, 11, 12, 0.86);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.kf-crop-box {
  background: #101012;
  border: 1px solid #232326;
  width: min(480px, 100%);
  display: flex;
  flex-direction: column;
}
.kf-crop-stage {
  width: 100%;
  height: 360px;
  background: #000;
}
.kf-crop-stage img {
  display: block;
  max-width: 100%;
}
.kf-crop-actions {
  display: flex;
  gap: 10px;
  padding: 16px;
}
.kf-crop-actions button {
  flex: 1;
  padding: 12px;
  font-family: inherit;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  border: 1px solid #2c2c30;
  background: transparent;
  color: #ede8de;
}
.kf-crop-actions button.kf-crop-save {
  background: #e8722c;
  border-color: #e8722c;
  color: #0b0b0c;
  font-weight: 700;
}
.kf-crop-actions button:disabled {
  opacity: 0.5;
  cursor: default;
}
.kf-crop-title {
  padding: 16px 16px 0;
  color: #9a958a;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}