/* -------------------------------------------------- */
/* Share page polish                                  */
/* -------------------------------------------------- */

:root {
  --surface: #ffffff;
  --surface-2: #f8f9fb;
  --ink: #111827;
  --ink-2: #6b7280;
  --brand: #3b82f6;
  --brand-2: #a78bfa;
  --ring: #ffbf47; /* high-contrast focus */
  --border: #e5e7eb;
  --shadow: 0 6px 28px rgba(16,24,40,.12);
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface: #0b0f14;
    --surface-2: #0e141b;
    --ink: #e5e7eb;
    --ink-2: #9aa4b2;
    --brand: #60a5fa;
    --brand-2: #c4b5fd;
    --ring: #f59e0b;
    --border: #1f2937;
    --shadow: 0 8px 36px rgba(0,0,0,.5);
  }
}

/* HERO */
.share-hero {
  position: relative;
  border-radius: .6rem;
  overflow: hidden;
  box-shadow: var(--shadow);
  background: #000;
}
.share-hero__img {
  width: 100%;
  aspect-ratio: 16/7;
  object-fit: cover;
  display: block;
  filter: saturate(1.08) contrast(1.05);
}
.share-hero__overlay {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 0% 100%, rgba(15,17,25,.75) 0%, rgba(15,17,25,.25) 55%, transparent 85%),
    linear-gradient(180deg, rgba(10,12,18,.10) 0%, rgba(10,12,18,.55) 100%);
}
.share-hero__content {
  position: absolute; inset: 0;
  display: grid; align-content: end; justify-content: start;
  gap: .75rem;
  padding: clamp(1rem, 3vw, 2rem);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.share-hero__chip {
  display: inline-flex; align-items: center; gap:.4rem;
  background: rgba(17,24,39,.55);
  color: #fff; border: 1px solid rgba(255,255,255,.18);
  padding: .2rem .55rem; border-radius: 999px;
  font-size: .85rem; letter-spacing:.02em;
}

/* Button row keeps spacing crisp and collapses on small screens */
.btn-row { display:flex; flex-wrap:wrap; gap:.5rem 1rem; }

/* CARDS */
.neon-card {
  border-radius: .6rem;
  background: var(--surface);
  border: 1px solid rgba(149,114,252,.28);
  box-shadow:
    0 0 0 1px rgba(149,114,252,.22) inset,
    0 10px 24px rgba(16,24,40,.08),
    0 0 24px rgba(149,114,252,.12);
}

/* CODE BOXES (script + caption) */
.code-box {
  margin: 0;
  padding: .9rem 1rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: .5rem;
  color: var(--ink);
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.55;
  max-height: 36ch;
  overflow: auto;
}
.code-box:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }

/* small helper line above boxes */
.subtle-hint { color: var(--ink-2); font-size: .925rem; margin-top: -.35rem; }

/* ACTIONS */
.copy-actions { display:flex; flex-wrap:wrap; gap:.5rem; }

/* MINI LINKS */
.mini-link { display:inline-flex; align-items:center; gap:.45rem; }
.mini-link img { width: 18px; height: 18px; object-fit: contain; }

/* -------------------------------------------------- */
/* GALLERY STRIP                                      */
/* -------------------------------------------------- */
.share-gallery-mask { position: relative; }
.share-gallery-mask::before,
.share-gallery-mask::after {
  content: "";
  position: absolute; top:0; bottom:.5rem;
  width: 3rem; z-index: 1; pointer-events: none;
}
.share-gallery-mask::before {
  left: 0;
  background: linear-gradient(to right, var(--surface) 35%, rgba(255,255,255,0));
}
.share-gallery-mask::after  {
  right: 0;
  background: linear-gradient(to left , var(--surface) 35%, rgba(255,255,255,0));
}

.share-gallery {
  display: flex;
  gap: .75rem;
  overflow-x: auto;
  padding: .25rem 0 .5rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.share-gallery::-webkit-scrollbar { display: none; }

.share-item {
  flex: 0 0 auto;
  width: clamp(108px, 14vw, 160px);
  height: calc(clamp(108px,14vw,160px) * 16 / 9); /* tall 9:16 vibe */
  position: relative;
  border-radius: .55rem;
  overflow: hidden;
  border: 1px solid var(--border);
  background: #e5e7eb;
  cursor: pointer;
  scroll-snap-align: start;
  box-shadow: 0 2px 8px rgba(16,24,40,.08);
}
.share-item img,
.share-item video { width: 100%; height: 100%; object-fit: cover; display:block; }

/* focus ring for keyboard users */
.share-item:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }

/* tiny hover pop for desktop */
@media (hover:hover) {
  .share-item { transition: transform .14s ease, box-shadow .14s ease; }
  .share-item:hover { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(16,24,40,.16); }
}

/* Optional play icon overlay for videos (add .is-video on items you render as <video>) */
.share-item.is-video::after {
  content: "►";
  position: absolute; inset: auto auto .35rem .4rem;
  font-size: .9rem; line-height:1;
  background: rgba(17,24,39,.6); color:#fff;
  border-radius: .35rem; padding:.25rem .4rem;
}

/* -------------------------------------------------- */
/* PREVIEW MODAL                                      */
/* -------------------------------------------------- */
.preview-modal {
  border: none; padding: 0;
  max-width: min(92vw, 780px);
  max-height: 90vh;
  background: transparent;
}
.preview-modal::backdrop { background: rgba(0,0,0,.65); }

.preview-modal img,
.preview-modal video {
  max-width: 100%;
  max-height: 80vh;
  border-radius: .65rem;
  display: block;
  box-shadow: var(--shadow);
  background: #000;
}

.preview-close {
  position: absolute;
  top: .6rem; right: .6rem;
  z-index: 10;
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border-radius: 999px;
  background: rgba(17,24,39,.6);
  color: #fff;
  cursor: pointer;
}
.preview-close:hover { background: rgba(17,24,39,.75); }

/* MEDIA THUMB BORDER CONSISTENCY (if you use .share-thumb elsewhere) */
.share-thumb { border-radius: .5rem; border: 1px solid var(--border); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .share-item { transition: none; }
}

/* HERO text */
.hero-title {
  margin: 0 0 .25rem 0;
  font-size: clamp(1.8rem, 3.6vw, 3rem);
  font-weight: 800;
  letter-spacing: -.015em;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.hero-sub {
  margin: 0;
  color: #e8eef7;
  text-shadow: 0 1px 3px rgba(0,0,0,.35);
}
.hero-link { color: #cfe2ff; }
.hero-link:hover { color: #ffffff; }

/* High-contrast buttons */
.btn-strong {
  background: #0b63ff;           /* stronger blue */
  border-color: #0b63ff;
  color: #fff;
}
.btn-strong:hover { background: #094fca; border-color: #094fca; }
.btn-strong:active { background: #083fa3; }
.btn-strong:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }

.btn-strong-outline {
  --outline-fg: #0b63ff;
  color: var(--outline-fg) !important;
  border-color: var(--outline-fg) !important;
  background: transparent !important;
}
.btn-strong-outline:hover { background: rgba(11,99,255,.08) !important; }
.btn-strong-outline:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }

/* Emoji mini-links */
.mini-link { position: relative; padding-left: 1.6rem; }
.mini-emoji::before {
  content: attr(data-emoji);
  position: absolute; left: 0; top: .05rem;
  font-size: 1.05rem; line-height: 1;
}

/* Keep hero overlay a touch darker for button/heading contrast */
.share-hero__overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(8,12,20,.25) 0%, rgba(8,12,20,.65) 100%),
    radial-gradient(120% 80% at 0% 100%, rgba(8,12,20,.55) 0%, transparent 70%);
}


/* Ensure dark enough backdrop for text & buttons */
.share-hero__overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(6,10,16,.35) 0%, rgba(6,10,16,.72) 100%),
    radial-gradient(120% 80% at 0% 100%, rgba(6,10,16,.55) 0%, transparent 70%);
}

/* Hit target: 44x44 and consistent spacing */
.btn-row a { min-height: 44px; padding-inline: 14px; align-items:center; display:inline-flex; }

/* Strong primary button already good; add robust focus */
.btn-strong:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }

/* High-contrast ghost button (outline + subtle fill) */
.btn-ghost {
  color: #ffffff !important;
  border: 2px solid rgba(255,255,255,.9) !important;
  background: rgba(255,255,255,.12) !important;
  backdrop-filter: saturate(110%) blur(1px);
}
.btn-ghost:hover { background: rgba(255,255,255,.18) !important; }
.btn-ghost:active { background: rgba(255,255,255,.22) !important; }
.btn-ghost:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }

/* Text link that passes contrast on dark images */
.hero-text-link {
  color: #E6EEFF;                 /* ~#e6eeff on #0b0f14 overlay => >4.5:1 */
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  font-weight: 600;
}
.hero-text-link:hover { color: #ffffff; }
.hero-text-link:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }

/* Keyboard users: visible focus for all links in hero */
.share-hero a:focus-visible { border-radius: 6px; }

/* Reduced motion users */
@media (prefers-reduced-motion: reduce) {
  .btn-ghost, .btn-strong, .hero-text-link { transition: none; }
}