/* Lisnora FM - story share page /s/<slug> (loads after site.css). The Worker fills share.html for each story. */

.share { position: relative; overflow: hidden; overflow: clip; isolation: isolate; padding: 28px 0 16px; }
.share-glow { width: 480px; height: 480px; left: 50%; top: 0; margin-left: -240px; z-index: -1; }
.share-card { width: 100%; max-width: 560px; margin: 0 auto; padding: 0 24px; display: flex; flex-direction: column; align-items: center; gap: 18px;
  text-align: center; }
.share-url { margin: 0; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.share-cover { width: 240px; height: 240px; border-radius: 26px; object-fit: cover; background: var(--panel);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .65); animation: rise .8s var(--ease) both; }
.share-head { display: flex; flex-direction: column; align-items: center; gap: 8px; animation: rise .8s var(--ease) .08s both; }
.share-head h1 { font-size: clamp(28px, 6vw, 38px); }
.share-genre { margin: 0; font-size: 14px; color: var(--muted); }
.share-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 4px; }
.share-logline { margin: 0; font-size: 16px; line-height: 1.6; color: var(--text2); animation: rise .8s var(--ease) .16s both; }

.share-actions { width: 100%; display: flex; flex-direction: column; gap: 10px; margin-top: 4px; animation: rise .8s var(--ease) .24s both; }
.cta { width: 100%; min-height: 56px; height: auto; padding: 10px 18px; font-size: 15px; line-height: 1.3; white-space: normal; text-align: center; }
.cta svg { fill: var(--ink); }
/* "Coming soon" state: solid and readable (no opacity fade), clearly not a live button */
.cta.soon { cursor: default; opacity: 1; background: #2A2210; color: var(--gold-hi); border: 1px dashed rgba(240, 185, 90, .45); }
.cta.soon svg { fill: var(--gold-hi); }
.cta.soon:hover { background: #2A2210; color: var(--gold-hi); box-shadow: none; }
.cta.soon::after { display: none; }
.cta.soon:active { transform: none; }
.share-stores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.share-stores .store { justify-content: center; padding: 0 12px; text-align: left; }
.share-stores a.store { transition: border-color .2s, background .2s; }
.share-stores a.store:hover { color: var(--text); border-color: #3D3D3D; background: var(--panel2); }
.share-hint { margin: 0; padding: 0 8px; font-size: 12px; line-height: 1.5; color: var(--muted); }

.more { width: 100%; display: flex; flex-direction: column; gap: 12px; margin-top: 18px; padding-top: 22px; border-top: 1px solid var(--line); text-align: left; }
.more-title { font-size: 11px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); }
.more-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.more-item { display: block; overflow: hidden; border-radius: 14px; border: 1px solid var(--line2); transition: transform .45s var(--ease), border-color .3s; }
.more-item:hover { transform: translateY(-4px); border-color: rgba(240, 185, 90, .6); }
.more-item img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.more-all { align-self: center; margin-top: 4px; font-size: 14px; font-weight: 700; }

@media (max-width: 760px) {
  .share-card { padding: 0 16px; }
  .share-cover { width: 220px; height: 220px; }
}
@media (max-width: 360px) {
  .share-stores { grid-template-columns: minmax(0, 1fr); }
}