/*! Copyright 2026 El Trivia (eltrivia.com). All rights reserved. */
.poster{--pp:clamp(14px,5.5cqi,28px);aspect-ratio:4/5;background-color:var(--field);background-image:var(--grain);border-radius:var(--r-poster);box-shadow:var(--hang);color:var(--on);container-name:poster;container-type:inline-size;display:grid;grid-template-rows:minmax(0,1fr) auto;isolation:isolate;overflow:hidden;position:relative;text-decoration:none;transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease)}.poster__art{grid-row:1;min-height:0;pointer-events:none;position:relative}.poster__art svg{aspect-ratio:4/5;height:151.5%;left:50%;max-width:none;overflow:visible;position:absolute;top:0;transform:translateX(-50%);width:auto}.poster .art-field{display:none}.poster__chips{display:flex;flex-wrap:wrap;gap:6px;left:var(--pp);pointer-events:none;position:absolute;right:var(--pp);top:var(--pp);z-index:2}.poster__chips .chip{font-size:12px;height:24px;padding:0 9px}.poster__text{container-type:inline-size;grid-row:2;padding:0 var(--pp) var(--pp);position:relative;z-index:1}.poster__title{font-size:calc(100cqi/var(--em)*.985);font-stretch:var(--wdth);font-weight:900;letter-spacing:-.01em;line-height:.9;margin:0 0 .16em;padding-top:.08em;text-transform:uppercase;white-space:nowrap}.poster__foot{align-items:flex-end;display:flex;gap:10px;justify-content:space-between}.poster__desc{font-size:14px;font-weight:500;line-height:1.35;max-width:34ch;min-width:0}.poster__meta{align-items:center;display:flex;flex-wrap:wrap;gap:6px}.poster__action{align-items:center;background:var(--deep);border-radius:var(--r-pill);color:#fff;display:inline-flex;flex:none;font-size:15px;font-weight:700;gap:6px;line-height:1;min-height:44px;padding:0 14px 0 18px}.poster__action .ico{height:18px;width:18px}.poster .layer{transition:transform var(--t) var(--ease)}@media (hover:hover) and (pointer:fine){a.poster:focus-visible,a.poster:hover{box-shadow:var(--lift);transform:translateY(-4px)}a.poster:focus-visible .layer[data-depth="1"],a.poster:hover .layer[data-depth="1"]{transform:translate(-2px,1px)}a.poster:focus-visible .layer[data-depth="2"],a.poster:hover .layer[data-depth="2"]{transform:translate(3px,-3px)}a.poster:focus-visible .layer[data-depth="3"],a.poster:hover .layer[data-depth="3"]{transform:translate(6px,-5px)}}a.poster:focus-visible{box-shadow:0 0 0 2px var(--wall),var(--lift);outline:3px solid var(--ink);outline-offset:2px}.poster .photo-slot image{opacity:1}.poster--soon{background:transparent;border:1.5px dashed var(--line-strong);box-shadow:none;color:var(--ink)}.poster--soon .art-ink,.poster--soon .art-ink *{mix-blend-mode:normal!important}.poster--soon .art-ink :is(rect,circle,ellipse,polygon,path,text){fill:none!important;stroke:var(--line-strong)!important;stroke-width:2px!important}.poster--soon .poster__desc{color:var(--ink-2)}.poster--soon .chip{background:var(--surface-2);color:var(--ink)}.poster--wide{aspect-ratio:auto}.poster--wide .poster__art svg{left:auto;right:0;transform:none}.poster--wide .poster__chips{right:45%}.poster--featured .poster__desc{font-size:16px}.poster--featured .poster__chips .chip{font-size:13px;height:28px;padding:0 11px}.poster--featured .poster__foot{flex-wrap:wrap}.poster--featured .poster__cta{align-items:center;display:flex;flex-wrap:wrap;gap:10px}.poster--featured .poster__action{font-size:16px;min-height:48px;padding:0 18px 0 24px}.countdown{font-variant-numeric:tabular-nums}@container poster (min-width: 560px){.poster--featured .poster__art svg{left:auto;right:0;transform:none}.poster--featured .poster__chips{right:50%}}.poster--small .poster__desc{font-size:13px}@container poster (max-width: 300px){.poster__desc{font-size:13px}.poster__action{font-size:14px;padding:0 12px 0 14px}}@container poster (max-width: 250px){.poster__foot{align-items:flex-start;flex-direction:column;gap:8px}}.skeleton{background:var(--light,var(--surface-2));border-radius:var(--r-poster);overflow:hidden;position:relative}:root[data-theme=dark] .skeleton{background:var(--surface-2)}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .skeleton{background:var(--surface-2)}}@media (prefers-reduced-motion:no-preference){.skeleton:after{animation:shimmer 2.2s ease-in-out infinite;background:hsla(0,0%,100%,.22);bottom:0;content:"";left:0;position:absolute;top:0;transform:translateX(-120%) skewX(-12deg);width:28%}@keyframes shimmer{to{transform:translateX(460%) skewX(-12deg)}}}.sw-vermilion{--duo:url(#duo-vermilion)}.sw-cobalt{--duo:url(#duo-cobalt)}.sw-jade{--duo:url(#duo-jade)}.sw-saffron{--duo:url(#duo-saffron)}.sw-rose{--duo:url(#duo-rose)}.sw-sky{--duo:url(#duo-sky)}
