/* /submit/ (submit.mjs). The page is built on the /sponsor/ page and its sponsor.css; these are only the extras. */

/* "Recently featured" studio names in place of the sponsor logo row */
.sf-trust .sf-studio{color:#fff;font-size:26px;font-weight:600;letter-spacing:-.02em;line-height:1;opacity:.88;white-space:nowrap}
@media (max-width:760px){.sf-trust .sf-studio{font-size:20px}}

/* What we look for: four white cards on the light band */
.sf-look{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:32px}
.sf-card{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:22px;padding:24px 22px 26px}
.sf-card h3{margin:0 0 10px;font-size:22px;line-height:1.15;letter-spacing:-.02em;font-weight:700;color:#0b0b0b}
.sf-card p{margin:0;font-size:14.5px;line-height:1.5;color:#444}

/* Featured lately: the four newest projects */
.sp-light .sf-recent-sec{padding-top:72px}
.sf-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
.sp-light .sf-head .sp-link{color:#0b0b0b}
.sf-recent{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:28px}
.sf-recent a{display:flex;flex-direction:column;gap:4px;text-decoration:none;color:#0b0b0b;min-width:0}
.sf-img{display:block;aspect-ratio:4/3;border-radius:16px;overflow:hidden;background:#e6e3dc;margin-bottom:10px}
.sf-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.sf-recent a:hover .sf-img img{transform:scale(1.03)}
.sf-recent b{font-size:16px;font-weight:700;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sf-recent span:not(.sf-img){font-size:14px;color:#555;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* the form: "You are" is one pick, so round markers and three in a row */
.sf .sf-who .sp-chips-in{grid-template-columns:repeat(3,minmax(0,1fr))}
.sf .sp-chips-in input[type=radio]+span:before{border-radius:50%}
.sf .sp-chips-in input[type=radio]:checked+span:before{background:var(--y);box-shadow:inset 0 0 0 3px #1a1a1a;border-color:var(--y)}
.sf .sp-form .sp-f input[aria-invalid=true],.sf .sp-form .sp-f textarea[aria-invalid=true]{border-color:#f87171}

/* thanks state: takes the whole glass box, centred, in place of the form */
.sf-sent:focus{outline:0}
.sf .sf-sent{grid-column:1/-1;justify-self:center;text-align:center;max-width:560px;padding:20px 0}
.sf-acts{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:26px}
.sf-ghost{background:rgba(255,255,255,.08)!important;color:#fff!important;border:1px solid rgba(255,255,255,.18)!important}
.sf-ghost:hover{background:rgba(255,255,255,.14)!important}

@media (max-width:1023px){
  .sf-look,.sf-recent{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .sf-look{grid-template-columns:1fr;gap:10px}
  .sf-card{padding:20px 18px 22px;border-radius:18px}
  .sf-card h3{font-size:19px}
  .sf-recent{gap:12px}
  .sf .sf-who .sp-chips-in{grid-template-columns:1fr}
  .sf-acts .sp-btn{flex:1 1 100%}
}
.sf .sp-form[hidden],.sf .sp-form-head[hidden],.sf .sp-sent[hidden]{display:none!important}
/* role chips: one line each, sized to their label on wide screens */
@media (min-width:601px){.sf .sf-who .sp-chips-in{display:flex;flex-wrap:wrap}.sf .sf-who .sp-chips-in label{flex:none}.sf .sf-who .sp-chips-in span{white-space:nowrap}}
/* the big "picked by hand" line sits in the form band over the moving covers, centred above the glass form, at the statement size */
.sf .sf-top{position:relative;z-index:1;max-width:1120px;margin:0 auto 72px;text-align:center}
.sf .sf-top .sp-big{margin:0 auto;text-shadow:0 2px 30px rgba(0,0,0,.55)}
@media (max-width:860px){.sf .sf-top{margin-bottom:36px}}
/* The band clips its moving covers. With overflow:hidden it is still a scroll box, so a browser scrolling the thanks message
   into view could slide the whole band up inside itself and cut the headline off at the top. overflow:clip can't be scrolled. */
.sf>.sp-form-band{overflow:clip}

/* Recently featured: studio logos in one moving row (submit.mjs builds it from content/studio-logos.json) */
.sf-trust .sf-logos{position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.sf-trust .sf-logos-track{display:flex;align-items:center;gap:56px;width:max-content;padding-right:56px;animation:sf-logos calc(var(--n) * 3.2s) linear infinite}
.sf-trust .sf-logos:hover .sf-logos-track{animation-play-state:paused}
.sf-trust .sf-logos img{display:block;flex:none;height:calc(var(--h) * 1px);width:auto;opacity:.88}
@keyframes sf-logos{to{transform:translateX(-50%)}}
@media (max-width:760px){.sf-trust .sf-logos-track{gap:40px;padding-right:40px}.sf-trust .sf-logos img{height:calc(var(--h) * .8px)}}
@media (prefers-reduced-motion:reduce){.sf-trust .sf-logos{-webkit-mask-image:none;mask-image:none}.sf-trust .sf-logos-track{animation:none;flex-wrap:wrap;width:auto;gap:22px 44px;padding-right:0}.sf-trust .sf-logos img[aria-hidden]{display:none}}

/* Nov 10, 2026 (Vadim): the hero text sits in the middle of the stat box's height instead of at its top, with
   breadcrumbs above the headline like /jobs/post/ ("Jobs / Post a job"). Only on /submit/: the sponsor page keeps
   its top-aligned copy (sponsor.css). */
.sf .sp-hero-copy{align-self:center}
.sf-crumbs{display:flex;align-items:center;gap:8px;margin:0 0 22px;font-size:14px;line-height:1.4;color:#8c8c8c}
.sf-crumbs a{color:#8c8c8c;text-decoration:none}
.sf-crumbs a:hover{color:#fff}
.sf-crumbs a:focus-visible{outline:2px solid #fff;outline-offset:3px}
.sf-crumbs span:before{content:"/";margin-right:8px;color:#4a4a4a}
@media (max-width:760px){.sf-crumbs{margin-bottom:16px;font-size:13px}}