/* Layout: поиск — крупное поле, вкладки по типам, результаты сгруппированы: фильмы постерами, люди кружками, материалы списком. Ищет по русским, оригинальным и альтернативным названиям. */

.s-head{padding-top:clamp(100px,12vw,140px);display:grid;gap:18px}
.s-head h1{font:800 clamp(2.2rem,5vw,3.6rem)/1 var(--font-display);letter-spacing:-.045em}
.field{position:relative}
.field input{width:100%;font:600 clamp(1.3rem,2.6vw,1.9rem)/1.2 var(--font-display);letter-spacing:-.02em;color:var(--fg);background:var(--card);border:2px solid transparent;border-radius:20px;padding:22px 64px 22px 64px;outline:none}
.field input:focus{border-color:var(--accent)}
.field input::placeholder{color:var(--fg-3)}
.field svg{position:absolute;left:22px;top:50%;width:26px;height:26px;margin-top:-13px;color:var(--fg-3)}
.field .clear{all:unset;cursor:pointer;position:absolute;right:16px;top:50%;margin-top:-18px;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.1);font-size:1.1rem}
.field .clear:focus-visible{outline:2px solid var(--fg)}
.hint{font-size:.88rem;color:var(--fg-3)}
.hint button{all:unset;cursor:pointer;color:var(--fg-2);text-decoration:underline;text-underline-offset:3px;margin:0 2px}
.hint button:focus-visible{outline:2px solid var(--fg)}
.seg{justify-self:start;display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:var(--card);max-width:100%;overflow-x:auto;scrollbar-width:none}
.seg::-webkit-scrollbar{display:none}
.seg button{all:unset;cursor:pointer;white-space:nowrap;padding:10px 16px;border-radius:999px;font:500 .9rem/1 var(--font-ui);color:var(--fg-2)}
.seg button[aria-pressed="true"]{background:var(--fg);color:#000;font-weight:600}
.seg button:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
.seg button b{font-weight:500;color:var(--fg-3);margin-left:4px}
.seg button[aria-pressed="true"] b{color:rgba(0,0,0,.5)}

.group{margin-top:40px}
.group h2{font:700 1.3rem/1.2 var(--font-display);margin-bottom:16px;display:flex;align-items:baseline;gap:10px}
.group h2 span{font:500 .9rem/1 var(--font-ui);color:var(--fg-3)}
.films{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px}
.film{display:grid;gap:8px}
.film .img{aspect-ratio:2/3;border-radius:var(--r-sm)}
.film b{font:600 .98rem/1.25 var(--font-display)}
.film span{font-size:.8rem;color:var(--fg-3)}
.film .alt{color:var(--fg-2)}
.film .score{justify-self:start;font:700 .75rem/1 var(--font-ui);padding:5px 7px;border-radius:6px;background:var(--fg);color:#000}
mark{background:rgba(255,55,95,.28);color:inherit;border-radius:3px;padding:0 1px}
.people{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px}
.person{display:grid;gap:8px;justify-items:center;text-align:center}
.person .ph{width:104px;height:104px;border-radius:50%;overflow:hidden;background:var(--card)}
.person .ph img{width:100%;height:100%;object-fit:cover;object-position:center 20%}
.person b{font:600 .95rem/1.25 var(--font-display)}
.person span{font-size:.8rem;color:var(--fg-3)}
.mats{display:grid}
.mat{display:grid;grid-template-columns:200px minmax(0,1fr);gap:20px;align-items:center;padding-block:14px;border-top:1px solid var(--line)}
.mat .img{aspect-ratio:16/10;border-radius:var(--r-sm)}
.mat .k{font:600 .72rem/1 var(--font-ui);letter-spacing:.07em;text-transform:uppercase;color:var(--accent)}
.mat h3{font:700 1.15rem/1.25 var(--font-display);margin-top:6px}
.mat p{color:var(--fg-2);font-size:.92rem;margin-top:4px}
.mat a:hover h3{color:var(--accent)}
.empty{margin-top:48px;display:grid;gap:16px;justify-items:start}
.empty h2{font:700 1.4rem/1.2 var(--font-display)}
.empty p{color:var(--fg-2)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{all:unset;cursor:pointer;font:500 .9rem/1 var(--font-ui);padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.08)}
.chip:hover{background:rgba(255,255,255,.16)}
.chip:focus-visible{outline:2px solid var(--fg)}
@media (max-width:1100px){.films,.people{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:640px){.films{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.people{grid-template-columns:repeat(3,minmax(0,1fr))}.person .ph{width:84px;height:84px}.mat{grid-template-columns:110px minmax(0,1fr);gap:14px}.mat p{display:none}.field input{padding:18px 54px}.field svg{left:18px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}