/* ==========================================================================
   Dimo Imagine — public gallery (explore + post pages)
   ========================================================================== */

.exp { max-width: 80rem; margin: 0 auto; }
.exp svg, .exp-viewer svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ── header + toolbar ─────────────────────────────────────────────── */
.exp-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.exp-head .page-title { margin-bottom: .6rem; }
.exp-head__sub { font-size: .875rem; color: var(--color-text-muted); max-width: 40rem; line-height: 1.8; }
.exp-head__actions { display: flex; gap: .5rem; flex-wrap: wrap; }

.exp-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1.5rem; }
.exp-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: var(--color-surface); border: 1px solid var(--border-subtle); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.exp-seg__item { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; padding: .45rem .95rem; border-radius: 999px; font-size: .8rem; font-weight: 600; color: var(--color-text-muted); transition: color .2s, background .2s; }
.exp-seg__item:hover { color: var(--color-text-main); }
.exp-seg__item.is-on { background: rgb(var(--primary-rgb) / .14); color: rgb(var(--primary-ink-rgb)); }
.exp-seg__item svg { width: .95rem; height: .95rem; }
.exp-kinds { display: flex; gap: .35rem; flex-wrap: wrap; }
.exp-kind { font-size: .75rem; padding: .35rem .8rem; border-radius: 999px; border: 1px solid var(--border-subtle); color: var(--color-text-muted); transition: border-color .2s, color .2s; }
.exp-kind:hover { color: var(--color-text-main); border-color: var(--border-strong); }
.exp-kind.is-on { color: rgb(var(--primary-ink-rgb)); border-color: rgb(var(--primary-rgb) / .5); background: rgb(var(--primary-rgb) / .07); }

/* ── grid + card ──────────────────────────────────────────────────── */
.exp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; }
@media (max-width: 520px) { .exp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; } }

.exp-card { display: flex; flex-direction: column; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-surface); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-xs); transition: border-color .25s, transform .35s var(--ease-out), box-shadow .35s var(--ease-out); }
.exp-card:hover { border-color: var(--border-strong); transform: translateY(-2px); box-shadow: var(--shadow-md); }

.exp-card__media { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--color-bg-dark); cursor: zoom-in; }
.exp-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease-out); }
.exp-card:hover .exp-card__media img { transform: scale(1.035); }
.exp-card__media--audio, .exp-card__media--speech {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .9rem;
    background: radial-gradient(120% 90% at 30% 10%, rgb(var(--primary-rgb) / .22), transparent 60%), var(--color-raised);
}
.exp-card__audio-label { font-size: .75rem; color: var(--color-text-muted); }
.exp-card__wave { display: flex; align-items: center; gap: 3px; height: 3.25rem; }
.exp-card__wave i { width: 4px; border-radius: 4px; background: rgb(var(--primary-rgb) / .75); height: calc(10% + var(--h, 5) * 9%); animation: exp-wave 1.6s ease-in-out infinite; animation-delay: calc(var(--d, 1) * -110ms); }
@keyframes exp-wave { 50% { transform: scaleY(.45); } }
@media (prefers-reduced-motion: reduce) { .exp-card__wave i { animation: none; } }

.exp-card__play { position: absolute; inset: 0; margin: auto; width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center; background: rgb(0 0 0 / .5); color: #fff; backdrop-filter: blur(4px); }
.exp-card__play svg { width: 1.2rem; height: 1.2rem; stroke: none; margin-left: 3px; }
.exp-card__kind, .exp-card__rank { position: absolute; top: .6rem; font-size: .68rem; font-weight: 700; padding: .2rem .55rem; border-radius: 999px; background: rgb(0 0 0 / .55); color: #fff; backdrop-filter: blur(6px); }
.exp-card__kind { inset-inline-end: .6rem; font-weight: 500; }
.exp-card__rank { inset-inline-start: .6rem; background: rgb(var(--primary-rgb)); color: var(--color-text-on-primary); }

.exp-card__body { display: flex; flex-direction: column; gap: .7rem; padding: .85rem .9rem .9rem; flex: 1; }
.exp-card__prompt { font-size: .8rem; line-height: 1.75; color: var(--color-text-main); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: 4.2em; }
.exp-card__foot { display: flex; align-items: center; gap: .5rem; margin-top: auto; }
.exp-card__author { font-size: .72rem; color: var(--color-text-muted); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exp-card__week { font-size: .66rem; color: rgb(var(--primary-ink-rgb)); white-space: nowrap; }
.exp-card__actions { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
@media (max-width: 520px) {
    .exp-card__actions { grid-template-columns: 1fr; }
    .exp-card__actions [data-copy] { display: none; }
    .exp-card__week { display: none; }
}

/* ── buttons ──────────────────────────────────────────────────────── */
.exp-btn { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; font-size: .74rem; font-weight: 600; padding: .5rem .7rem; border-radius: var(--radius-sm); border: 1px solid var(--border-subtle); color: var(--color-text-main); background: transparent; white-space: nowrap; transition: border-color .2s, background .2s, color .2s; }
.exp-btn:hover { border-color: var(--border-strong); background: var(--color-hover-subtle); }
.exp-btn--primary { border-color: rgb(var(--primary-rgb) / .45); color: rgb(var(--primary-ink-rgb)); background: rgb(var(--primary-rgb) / .08); }
.exp-btn--primary:hover { border-color: rgb(var(--primary-rgb) / .7); background: rgb(var(--primary-rgb) / .14); }
.exp-btn:focus-visible, .exp-like:focus-visible, .exp-card__media:focus-visible { outline: 2px solid rgb(var(--primary-rgb) / .7); outline-offset: 2px; }

.exp-like { display: inline-flex; align-items: center; gap: .3rem; font-size: .75rem; font-weight: 600; padding: .3rem .55rem; border-radius: 999px; color: var(--color-text-muted); border: 1px solid transparent; transition: color .2s, background .2s; }
.exp-like svg { width: 1.05rem; height: 1.05rem; transition: transform .3s var(--ease-out); }
.exp-like:hover { color: #f43f5e; background: rgb(244 63 94 / .08); }
.exp-like.is-on { color: #f43f5e; }
.exp-like.is-on svg { fill: currentColor; }
.exp-like.is-pop svg { animation: exp-pop .45s var(--ease-out); }
.exp-like--lg { font-size: .85rem; padding: .5rem .8rem; border-color: var(--border-subtle); }
@keyframes exp-pop { 40% { transform: scale(1.35); } }

.exp-chip { display: inline-flex; align-items: center; font-size: .7rem; padding: .2rem .6rem; border-radius: 999px; border: 1px solid var(--border-subtle); color: var(--color-text-muted); }

/* ── pager + empty ────────────────────────────────────────────────── */
.exp-pager { display: flex; align-items: center; justify-content: center; gap: .75rem; margin-top: 2rem; }
.exp-pager__info { font-size: .8rem; color: var(--color-text-muted); }
.exp-empty { text-align: center; padding: 4.5rem 1.5rem; border-style: dashed; }
.exp-empty__icon { width: 3.5rem; height: 3.5rem; margin: 0 auto 1.25rem; border-radius: 50%; display: grid; place-items: center; background: rgb(var(--primary-rgb) / .1); color: rgb(var(--primary-ink-rgb)); }
.exp-empty__icon svg { width: 1.5rem; height: 1.5rem; }
.exp-empty h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: .5rem; }
.exp-empty p { font-size: .875rem; color: var(--color-text-muted); margin-bottom: 1.5rem; }

/* ── viewer (modal) + post page ───────────────────────────────────── */
.exp-viewer { position: fixed; inset: 0; z-index: 1100; display: grid; place-items: center; padding: 1rem; }
.exp-viewer[hidden] { display: none; }
.exp-viewer__scrim { position: absolute; inset: 0; background: rgb(0 0 0 / .72); backdrop-filter: blur(6px); animation: exp-fade .2s ease-out; }
.exp-viewer__panel { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 22rem; width: min(72rem, 100%); max-height: calc(100dvh - 2rem); border-radius: var(--radius-xl); overflow: hidden; background: var(--color-surface); border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg); animation: exp-rise .3s var(--ease-out); }
.exp-viewer__close { position: absolute; top: .7rem; inset-inline-end: .7rem; z-index: 2; width: 2.2rem; height: 2.2rem; display: grid; place-items: center; border-radius: 50%; background: rgb(0 0 0 / .5); color: #fff; }
.exp-viewer__close svg { width: 1.1rem; height: 1.1rem; }
.exp-viewer__stage { display: grid; place-items: center; background: #000; min-height: 18rem; }
.exp-viewer__stage img, .exp-viewer__stage video { max-width: 100%; max-height: calc(100dvh - 2rem); object-fit: contain; display: block; }
.exp-audio { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; padding: 3rem 2rem; width: 100%; background: radial-gradient(100% 80% at 50% 0%, rgb(var(--primary-rgb) / .25), transparent 70%), var(--color-raised); align-self: stretch; justify-content: center; }
.exp-audio .exp-card__wave { height: 5rem; }
.exp-audio audio { width: min(28rem, 100%); }
.exp-viewer__side { display: flex; flex-direction: column; gap: .85rem; padding: 1.4rem 1.25rem 1.25rem; overflow-y: auto; }
.exp-viewer__meta { display: flex; align-items: center; gap: .6rem; padding-inline-end: 2.4rem; }
.exp-viewer__author { font-size: .8rem; color: var(--color-text-muted); }
.exp-viewer__label { font-size: .72rem; font-weight: 600; color: var(--color-text-subtle); }
.exp-viewer__prompt { font-size: .875rem; line-height: 1.9; white-space: pre-wrap; padding: .8rem .9rem; border-radius: var(--radius); background: var(--color-bg-dark); border: 1px solid var(--border-subtle); margin-top: -.4rem; max-height: 16rem; overflow-y: auto; }
.exp-viewer__opts { display: flex; flex-wrap: wrap; gap: .35rem; }
.exp-viewer__opts:empty { display: none; }
.exp-viewer__model { font-family: ui-monospace, monospace; font-size: .7rem; color: var(--color-text-subtle); text-align: end; }
.exp-viewer__actions { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: auto; padding-top: .5rem; }
.exp-viewer__actions .exp-btn { flex: 1; padding-block: .6rem; }
.exp-viewer__links { display: flex; flex-wrap: wrap; gap: 1rem; font-size: .74rem; color: var(--color-text-muted); }
.exp-viewer__links a:hover, .exp-viewer__links button:hover { color: var(--color-text-main); }
.exp-viewer__links .is-danger { color: #f87171; margin-inline-start: auto; }
@keyframes exp-fade { from { opacity: 0; } }
@keyframes exp-rise { from { opacity: 0; transform: translateY(12px) scale(.985); } }
@media (max-width: 860px) {
    .exp-viewer { padding: 0; place-items: end stretch; }
    .exp-viewer__panel { grid-template-columns: 1fr; max-height: 100dvh; border-radius: var(--radius-xl) var(--radius-xl) 0 0; overflow-y: auto; }
    .exp-viewer__stage img, .exp-viewer__stage video { max-height: 55dvh; }
    .exp-viewer__side { overflow: visible; }
}

.exp-back { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; color: var(--color-text-muted); margin-bottom: 1rem; }
.exp-back:hover { color: var(--color-text-main); }
.exp-back svg { width: 1rem; height: 1rem; }
.exp-detail { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; overflow: hidden; padding: 0 !important; margin-bottom: 2.5rem; }
.exp-detail .exp-viewer__stage { border-radius: 0; min-height: 24rem; }
.exp-detail .exp-viewer__stage img, .exp-detail .exp-viewer__stage video { max-height: 78vh; }
@media (max-width: 860px) { .exp-detail { grid-template-columns: 1fr; } }
.exp-more-title { font-size: 1rem; font-weight: 700; margin-bottom: 1rem; }

/* ── "share to gallery" control on my gallery / studios ───────────── */
.exp-share { display: inline-flex; align-items: center; gap: .3rem; }
.exp-share--live { color: rgb(var(--primary-ink-rgb)) !important; border-color: rgb(var(--primary-rgb) / .45) !important; background: rgb(var(--primary-rgb) / .08) !important; }