/* Shared community cards on Home, Lens Custom and design share pages. */
.community-design { min-width: 0; padding: 16px; border-radius: 16px; background: var(--color-surface); text-align: left; }
.community-design__image { position: relative; display: grid; place-items: center; aspect-ratio: 1; padding: 16px; border-radius: 12px; background: var(--color-surface-brand); }
.community-design__image img { display: block; width: 100%; height: 100%; object-fit: contain; }
.community-design__heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.community-design__heading h3 { flex: 1; min-width: 0; margin: 0; font: 600 18px/1.5 var(--font-manrope); }
.community-design__heading h3 a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.community-design__author { display: block; margin: 4px 0 0; color: var(--color-text-muted); font: 400 12px/1.5 var(--font-inter); overflow-wrap: anywhere; }
.community-like { flex-shrink: 0; }
.community-like__total { display: inline-flex; align-items: center; gap: 6px; padding: 8px; color: var(--color-primary); font: 500 13px/1.5 var(--font-manrope); }
.community-like__button { display: inline-flex; gap: 6px; width: auto; padding: 8px; font: 500 13px/1.5 var(--font-manrope); }
.community-like__button[aria-pressed=true] { color: var(--color-primary); }
.community-like__button[aria-pressed=true] .ui-icon { fill: currentColor; }
.community-design [hidden] { display: none; }
.community-design__rank { --rank-fill: #efcf6d; position: absolute; top: 10px; right: 10px; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; color: #a87916; }
.community-design__rank .ui-icon { --icon-size: 21px; fill: var(--rank-fill); }
.community-design__rank[data-community-rank="2"] { --rank-fill: #ced4dc; color: #737f8c; }
.community-design__rank[data-community-rank="3"] { --rank-fill: #d5a079; color: #97613b; }

/* Equal groups make the loop seamless, using the splash's 42-second drift. */
.community-marquee { --marquee-visible: 5; --marquee-gap: 20px; container-type: inline-size; width: 100%; min-width: 0; overflow: hidden; }
.community-marquee__track { display: flex; width: max-content; min-width: 200%; padding-block: 16px; animation: community-flow 42s linear infinite; }
.community-marquee__group { display: flex; flex: 1 0 auto; justify-content: center; align-items: flex-start; gap: var(--marquee-gap); padding-right: var(--marquee-gap); }
.community-marquee .community-design { position: relative; flex: 0 0 calc((100cqw - (var(--marquee-visible) - 1) * var(--marquee-gap)) / var(--marquee-visible)); width: calc((100cqw - (var(--marquee-visible) - 1) * var(--marquee-gap)) / var(--marquee-visible)); transition: transform 320ms cubic-bezier(.22, 1, .36, 1); }
.community-marquee:is(:hover, :focus-within, :active) .community-marquee__track { animation-play-state: paused; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .community-marquee .community-design:hover { z-index: 1; transform: scale(1.04); }
}
@media (prefers-reduced-motion: no-preference) {
    .community-marquee .community-design:has(:focus-visible) { z-index: 1; transform: scale(1.04); }
}
@keyframes community-flow { to { transform: translateX(-50%); } }
@media (width < 1200px) { .community-marquee { --marquee-visible: 3; } }
@media (width < 768px) {
    .community-design { padding: 10px; }
    .community-design__image { padding: 8px; }
    .community-design__rank { top: 6px; right: 6px; width: 28px; height: 28px; }
    .community-design__rank .ui-icon { --icon-size: 18px; }
    .community-design__heading { flex-wrap: wrap; gap: 4px; }
    .community-design__heading h3 { font-size: 15px; }
    .community-like { margin-left: auto; }
    .community-marquee { --marquee-visible: 2; --marquee-gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .community-marquee .community-design { transition: none; }
    .community-marquee__track { width: 100%; min-width: 0; animation: none; }
    .community-marquee__group { flex: 1 1 100%; flex-wrap: wrap; padding-right: 0; }
    .community-marquee [data-community-marquee-copy], .community-marquee [data-community-loop-copy] { display: none; }
}
@media print {
    .community-marquee__track { width: 100%; min-width: 0; animation: none; }
    .community-marquee__group { flex-wrap: wrap; padding-right: 0; }
    .community-marquee [data-community-marquee-copy], .community-marquee [data-community-loop-copy] { display: none; }
}