/* Resize these shared tokens to change employee cards and the CMS preview together. */
:root{--media-kita-card-width:338px;--media-kita-card-ratio:338 / 342}
.media-kita-toolbar{display:flex;align-items:center;gap:12px;margin:4px 0 18px}
.media-kita-toolbar .search{flex:1;max-width:520px}
.media-kita-toolbar .select{min-width:170px}
.media-kita-grid{display:flex;flex-wrap:wrap;align-items:flex-start;gap:16px}
.media-kita-card{position:relative;isolation:isolate;box-sizing:border-box;flex:0 1 var(--media-kita-card-width);width:min(var(--media-kita-card-width),100%);height:auto;aspect-ratio:var(--media-kita-card-ratio);max-width:100%;min-width:0;overflow:hidden;border:1px solid rgba(223,228,236,.9);border-radius:16px;background:var(--navy950);box-shadow:var(--shadow);transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s cubic-bezier(.16,1,.3,1),border-color .3s ease}
.media-kita-card:hover{transform:translateY(-2px);border-color:rgba(201,154,58,.48);box-shadow:0 2px 4px rgba(15,23,42,.04),0 16px 40px -12px rgba(15,23,42,.12)}
.media-kita-card::after{position:absolute;inset:-1px;z-index:6;padding:1px;border-radius:inherit;background:linear-gradient(135deg,rgba(201,154,58,.55),rgba(76,114,165,.55));content:"";opacity:0;pointer-events:none;transition:opacity .3s ease;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.media-kita-card:hover::after{opacity:1}
.media-kita-banner{position:absolute;inset:0;isolation:isolate;height:100%;overflow:hidden;background:linear-gradient(140deg,var(--navy950),var(--navy700));color:#fff}
.media-kita-art,.media-kita-image{position:absolute;inset:0;z-index:0;width:100%;height:100%}
.media-kita-art{overflow:hidden;background:radial-gradient(circle at 77% 23%,rgba(232,206,134,.72) 0 1px,transparent 2px),radial-gradient(circle at 77% 23%,transparent 0 56px,rgba(255,255,255,.18) 57px 58px,transparent 59px),radial-gradient(circle at 77% 23%,transparent 0 86px,rgba(255,255,255,.10) 87px 88px,transparent 89px),radial-gradient(circle at 77% 23%,rgba(201,154,58,.3),transparent 34%),linear-gradient(140deg,var(--navy950),var(--navy700))}
.media-kita-art::after{position:absolute;right:-5%;bottom:0;left:-5%;height:38%;background:linear-gradient(160deg,rgba(223,231,242,.04),rgba(232,206,134,.2));content:"";clip-path:polygon(0 49%,16% 24%,35% 42%,53% 67%,72% 61%,100% 20%,100% 100%,0 100%)}
.media-kita-image{display:none;object-fit:cover;object-position:center;transform:scale(1.001);transition:transform .65s cubic-bezier(.16,1,.3,1)}
.media-kita-banner.has-upload .media-kita-image{display:block}
.media-kita-banner.has-upload .media-kita-art{display:none}
.media-kita-card:hover .media-kita-image{transform:scale(1.025)}
.media-kita-shade{position:absolute;inset:0;z-index:1;background:radial-gradient(circle at 85% 10%,rgba(201,154,58,.18),transparent 34%),linear-gradient(180deg,rgba(15,24,40,.03) 0%,rgba(15,24,40,.12) 34%,rgba(15,24,40,.55) 68%,rgba(15,24,40,.96) 100%)}
.media-kita-topline{position:absolute;top:12px;right:12px;z-index:2;max-width:calc(100% - 24px)}
.media-kita-platform{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:6px 9px;border:1px solid rgba(255,255,255,.38);border-radius:999px;background:rgba(255,255,255,.88);color:var(--navy900);font-size:9px;font-weight:800;letter-spacing:.03em;backdrop-filter:blur(12px);box-shadow:0 1px 3px rgba(15,23,42,.1)}
.media-kita-platform svg{width:12px;height:12px;flex:none}
.media-kita-platform span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.media-kita-content{position:absolute;right:0;bottom:0;left:0;z-index:3;display:flex;flex-direction:column;align-items:flex-start;padding:28px 16px 16px;color:#fff}
.media-kita-copy{width:100%;min-width:0}
.media-kita-kicker{display:block;margin:0 0 7px;color:var(--gold300);font:600 8px 'JetBrains Mono',monospace;letter-spacing:.16em}
.media-kita-content h2{display:-webkit-box;margin:0 0 7px;color:#fff;font-size:17px;line-height:1.25;font-weight:700;letter-spacing:-.025em;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-shadow:0 1px 10px rgba(15,23,42,.22)}
.media-kita-content p{display:-webkit-box;max-width:100%;margin:0;color:rgba(255,255,255,.82);font-size:10.5px;line-height:1.55;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.media-kita-open{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:36px;margin-top:14px;padding:0 14px;border:0;border-radius:999px;background:var(--gold500);color:var(--ink900);font-size:10.5px;font-weight:800;text-decoration:none;white-space:nowrap;box-shadow:0 1px 2px rgba(15,23,42,.1);transition:transform .25s cubic-bezier(.16,1,.3,1),background .2s ease,box-shadow .25s cubic-bezier(.16,1,.3,1)}
.media-kita-open::before{position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.24),transparent);content:"";transition:left .6s ease}
.media-kita-open:hover{transform:translateY(-1px);background:var(--gold300);box-shadow:0 10px 24px -12px rgba(201,154,58,.7)}
.media-kita-open:hover::before{left:100%}
.media-kita-open:active{transform:scale(.98)}
.media-kita-open:focus-visible{outline:0;box-shadow:0 0 0 4px rgba(232,206,134,.28)}
.media-kita-open svg{width:14px;height:14px}
.media-kita-card:focus-within{border-color:var(--gold500);box-shadow:0 0 0 3px rgba(201,154,58,.18),var(--shadow)}
.media-kita-preview{position:relative;display:grid;place-items:center;width:min(100%,var(--media-kita-card-width));aspect-ratio:var(--media-kita-card-ratio);height:auto;overflow:hidden;border:1px solid var(--ink200);border-radius:14px;background:var(--navy50)}
.media-kita-preview img{width:100%;height:100%;object-fit:cover;object-position:center}
.media-kita-preview-empty{color:var(--ink500);font-size:13px;font-weight:700}
.media-kita-preview-empty img{display:none}
@media(max-width:680px){.media-kita-toolbar{align-items:stretch;flex-direction:column}.media-kita-toolbar .search{max-width:none}.media-kita-toolbar .select{width:100%}.media-kita-grid{gap:14px}.media-kita-card{flex-basis:var(--media-kita-card-width);width:min(var(--media-kita-card-width),100%)} }
@media(prefers-reduced-motion:reduce){.media-kita-card,.media-kita-image,.media-kita-open,.media-kita-open::before{transition:none}.media-kita-card:hover,.media-kita-open:hover,.media-kita-open:active{transform:none}.media-kita-card:hover .media-kita-image{transform:none}.media-kita-open::before{display:none}}
