.chd-video-card{background:var(--chd-surface);border:1px solid var(--chd-color-border);border-radius:var(--chd-radius-lg);box-shadow:var(--chd-shadow-sm);min-inline-size:0;overflow:hidden;position:relative;transition:border-color var(--chd-duration-normal) var(--chd-ease-standard),box-shadow var(--chd-duration-normal) var(--chd-ease-standard)}.chd-video-card:hover,.chd-video-card:focus-within{border-color:var(--chd-primary);box-shadow:var(--chd-shadow-md)}.chd-video-card:focus-within{border-color:var(--chd-primary);box-shadow:var(--chd-shadow-focus)}.chd-video-card--featured,.chd-video-card--popular{border-color:var(--chd-accent)}.chd-video-card__media{background:var(--chd-dark-raised);border-radius:0;isolation:isolate}.chd-video-card__image{transition:transform var(--chd-duration-normal) var(--chd-ease-standard)}.chd-video-card:hover .chd-video-card__image,.chd-video-card:focus-within .chd-video-card__image{transform:scale(1.015)}.chd-video-card__fallback{background:var(--chd-surface-muted);block-size:100%;display:block;inline-size:100%}.chd-video-card__fallback:before{border:2px solid var(--chd-color-border-strong);border-radius:var(--chd-radius-pill);content:"";inset-block-start:50%;inset-inline-start:50%;position:absolute;transform:translate(-50%,-50%);block-size:var(--chd-space-10);inline-size:var(--chd-space-10)}.chd-video-card__badges{display:flex;flex-wrap:wrap;gap:var(--chd-space-1);inset-block-start:var(--chd-space-2);inset-inline-start:var(--chd-space-2);max-inline-size:calc(100% - (2 * var(--chd-space-4)));position:absolute;z-index:var(--chd-z-base)}.chd-video-card__badge,.chd-video-card__duration{background:var(--chd-overlay);border:1px solid var(--chd-dark-border);border-radius:var(--chd-radius-sm);color:var(--chd-text-on-dark);font-size:var(--chd-font-size-xs);font-weight:var(--chd-font-weight-semibold);line-height:var(--chd-line-height-tight);padding:var(--chd-space-1) var(--chd-space-2)}.chd-video-card__badge--quality{background:var(--chd-primary);border-color:var(--chd-primary)}.chd-video-card__duration{inset-block-end:var(--chd-space-2);inset-inline-end:var(--chd-space-2);position:absolute}.chd-video-card__content{display:grid;gap:var(--chd-space-1);min-block-size:0;padding:var(--chd-space-3)}.chd-video-card__state{color:var(--chd-color-accent);font-size:var(--chd-font-size-xs);font-weight:var(--chd-font-weight-semibold)}.chd-video-card--featured .chd-video-card__state{color:var(--chd-color-link)}.chd-video-card__title{display:-webkit-box;font-size:var(--chd-font-size-md);line-height:var(--chd-line-height-heading);max-inline-size:100%;overflow:hidden;overflow-wrap:anywhere;-webkit-box-orient:vertical;-webkit-line-clamp:2}.chd-video-card__link{color:var(--chd-color-text);text-decoration:none}.chd-video-card:hover .chd-video-card__link,.chd-video-card:focus-within .chd-video-card__link{color:var(--chd-primary)}.chd-video-card__link:after{content:"";inset:0;position:absolute}.chd-video-card__link:focus-visible{outline-offset:var(--chd-space-1)}.chd-video-card__description{color:var(--chd-color-text-muted);display:-webkit-box;font-size:var(--chd-font-size-sm);max-inline-size:100%;overflow:hidden;overflow-wrap:anywhere;-webkit-box-orient:vertical;-webkit-line-clamp:3}.chd-video-card__votes{align-items:center;display:flex;gap:var(--chd-space-2);justify-content:flex-end;min-block-size:2rem;position:relative;z-index:calc(var(--chd-z-base) + 1)}.chd-video-card__vote{align-items:center;background:var(--chd-surface-muted);border:1px solid var(--chd-color-border);border-radius:var(--chd-radius-pill);color:var(--chd-color-text-muted);cursor:pointer;display:inline-flex;font-size:var(--chd-font-size-xs);font-weight:var(--chd-font-weight-semibold);gap:var(--chd-space-1);min-block-size:2rem;padding:var(--chd-space-1) var(--chd-space-2);transition:background-color var(--chd-duration-fast) var(--chd-ease-standard),border-color var(--chd-duration-fast) var(--chd-ease-standard),color var(--chd-duration-fast) var(--chd-ease-standard)}.chd-video-card__vote svg{block-size:1rem;fill:currentColor;inline-size:1rem}.chd-video-card__vote:hover:not(:disabled),.chd-video-card__vote:focus-visible{border-color:var(--chd-primary);color:var(--chd-primary)}.chd-video-card__vote[aria-pressed=true]{background:var(--chd-primary);border-color:var(--chd-primary);color:var(--chd-text-on-dark)}.chd-video-card__vote:disabled{cursor:default;opacity:.7}.chd-video-card__vote[aria-busy=true]{opacity:.55}.chd-video-card__vote-status{block-size:1px;clip:rect(0 0 0 0);clip-path:inset(50%);inline-size:1px;overflow:hidden;position:absolute;white-space:nowrap}.chd-video-card__meta{color:var(--chd-color-text-subtle);font-size:var(--chd-font-size-sm);margin-block-start:auto}@media (prefers-reduced-motion: reduce){.chd-video-card__image{transition-duration:1ms}.chd-video-card:hover .chd-video-card__image,.chd-video-card:focus-within .chd-video-card__image{transform:none}}@media (min-width: 48rem){.chd-video-card__content{gap:var(--chd-space-2);min-block-size:9.25rem;padding:var(--chd-space-4)}}@media (forced-colors: active){.chd-video-card,.chd-video-card__badge,.chd-video-card__duration{border-color:ButtonText}}.chd-video-grid{display:grid;gap:var(--chd-space-4);grid-template-columns:minmax(0,1fr);min-inline-size:0}@media (min-width: 30rem){.chd-video-grid--compact,.chd-video-grid--standard,.chd-video-grid--wide{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width: 48rem){.chd-video-grid{gap:var(--chd-content-gap)}}@media (min-width: 48rem){.chd-video-grid--compact,.chd-video-grid--wide{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (min-width: 64rem){.chd-video-grid--compact,.chd-video-grid--wide{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (min-width: 75rem){.chd-video-grid--standard{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (min-width: 90rem){.chd-video-grid--wide{grid-template-columns:repeat(5,minmax(0,1fr))}}.chd-video-empty-state{background:var(--chd-surface);border:1px solid var(--chd-color-border);border-radius:var(--chd-radius-lg);box-shadow:var(--chd-shadow-sm);color:var(--chd-color-text-muted);max-inline-size:none;padding:clamp(var(--chd-space-8),5vw,var(--chd-space-16));text-align:center}@media (forced-colors: active){.chd-video-empty-state{border-color:ButtonText}}