/* Public story highlights module. Content is supplied by data/stories.php and
   can later be replaced by the CMS without changing this visual component. */
.public-stories { position: relative; z-index: 20; border-bottom: 1px solid var(--line); background: var(--surface); }
.public-stories__inner { display: flex; align-items: center; gap: 24px; min-height: 116px; padding-block: 13px; }
.public-stories__intro { display: flex; flex: 0 0 auto; align-items: center; gap: 10px; min-width: 154px; }
.public-stories__intro > div { display: grid; gap: 1px; }
.public-stories__intro strong { color: var(--ink); font: 900 13px var(--font-display); }
.public-stories__intro small { color: var(--muted); font-size: 10px; }
.public-stories__live-dot { width: 10px; height: 10px; border: 2px solid var(--surface); border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px rgba(131,223,56,.17); }
.public-stories__rail { display: flex; flex: 1 1 auto; align-items: flex-start; gap: 17px; min-width: 0; overflow-x: auto; padding: 2px 3px 5px; scrollbar-width: none; overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; touch-action: pan-x; cursor: grab; }
.public-stories__rail:active { cursor: grabbing; }
.public-stories__rail.is-dragging { cursor: grabbing; user-select: none; }
.public-stories__rail::-webkit-scrollbar { display: none; }
.story-bubble { display: grid; flex: 0 0 78px; justify-items: center; gap: 5px; padding: 0; border: 0; color: var(--muted); background: transparent; cursor: pointer; font: inherit; transition: color .2s ease, transform .2s ease; }
.story-bubble:hover, .story-bubble:focus-visible { color: var(--green-900); transform: translateY(-3px); }
.story-bubble__ring { position: relative; display: grid; width: 72px; height: 72px; padding: 3px; place-items: center; border-radius: 50%; background: conic-gradient(from 220deg, var(--sky), var(--lime), #c7ef70, var(--sky)); box-shadow: 0 8px 20px rgba(7,59,40,.12); }
.story-bubble__ring::after { position: absolute; inset: 3px; border: 3px solid var(--surface); border-radius: inherit; content: ''; pointer-events: none; }
.story-bubble__ring img { width: 66px; height: 66px; border-radius: 50%; object-fit: cover; }
.story-bubble__title { max-width: 78px; overflow: hidden; font: 800 10px var(--font-display); text-overflow: ellipsis; white-space: nowrap; }
.story-bubble__play { position: absolute; z-index: 2; right: 2px; bottom: 2px; display: grid; width: 22px; height: 22px; place-items: center; border: 2px solid var(--surface); border-radius: 50%; color: #fff; background: var(--green-900); }
.story-bubble__play svg { width: 11px; height: 11px; fill: currentColor; }
.story-bubble.is-new .story-bubble__ring { animation: story-ring-pulse 2.8s ease-in-out infinite; }
@keyframes story-ring-pulse { 0%, 100% { box-shadow: 0 8px 20px rgba(7,59,40,.12); } 50% { box-shadow: 0 9px 26px rgba(67,196,232,.28), 0 0 0 5px rgba(131,223,56,.08); } }

.story-viewer { position: fixed; z-index: 600; inset: 0; display: grid; place-items: center; padding: 18px; overscroll-behavior: none; }
.story-viewer[hidden] { display: none; }
.story-viewer__backdrop { position: absolute; inset: 0; background: rgba(2,15,10,.78); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); opacity: 0; transition: opacity .25s ease; }
.story-viewer__panel { --story-ratio: 16 / 9; position: relative; z-index: 1; display: flex; width: min(920px, calc(100vw - 36px)); height: auto; max-height: calc(100svh - 36px); aspect-ratio: var(--story-ratio); flex-direction: column; overflow: hidden; border: 1px solid rgba(255,255,255,.2); border-radius: 28px; background: #071a12; box-shadow: 0 35px 100px rgba(0,0,0,.5); opacity: 0; transform: translateY(18px) scale(.97); transition: opacity .25s ease, transform .3s cubic-bezier(.2,.8,.2,1); }
.story-viewer.is-open .story-viewer__backdrop { opacity: 1; }
.story-viewer.is-open .story-viewer__panel { opacity: 1; transform: none; }
.story-viewer__progress { position: absolute; z-index: 5; top: 13px; right: 16px; left: 16px; display: flex; gap: 4px; }
.story-viewer__progress span { height: 3px; flex: 1; border-radius: 99px; background: rgba(255,255,255,.38); }
.story-viewer__progress span.is-active { background: var(--lime); box-shadow: 0 0 10px rgba(131,223,56,.45); }
.story-viewer__toolbar { position: absolute; z-index: 4; top: 27px; right: 16px; left: 16px; display: flex; align-items: center; justify-content: space-between; color: #fff; }
.story-viewer__author { display: flex; align-items: center; gap: 9px; }
.story-viewer__author > span:last-child { display: grid; gap: 0; }
.story-viewer__author strong { font: 900 12px var(--font-display); }
.story-viewer__author small { color: rgba(255,255,255,.7); font-size: 9px; }
.story-viewer__author-mark { display: grid; width: 33px; height: 33px; place-items: center; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; color: #fff; background: linear-gradient(145deg, var(--green-700), var(--sky-deep)); font: 900 15px var(--font-display); }
.story-viewer__close { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid rgba(255,255,255,.35); border-radius: 12px; color: #fff; background: rgba(0,0,0,.22); cursor: pointer; font-size: 25px; line-height: 1; }
.story-viewer__close:hover, .story-viewer__close:focus-visible { background: var(--green-900); }
.story-viewer__media { position: relative; display: grid; min-height: 0; flex: 1 1 auto; place-items: center; background: #0a2418; }
.story-viewer__media img, .story-viewer__media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.story-viewer__media video[hidden], .story-viewer__media img[hidden] { display: none; }
.story-viewer__media-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.42), transparent 28%, transparent 66%, rgba(0,0,0,.48)); pointer-events: none; }
.story-viewer__nav { position: absolute; z-index: 3; top: 50%; display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid rgba(255,255,255,.32); border-radius: 50%; color: #fff; background: rgba(0,0,0,.24); cursor: pointer; font-size: 27px; line-height: 1; transform: translateY(-50%); transition: background .2s ease, transform .2s ease; }
.story-viewer__nav:hover, .story-viewer__nav:focus-visible { background: var(--green-900); transform: translateY(-50%) scale(1.06); }
.story-viewer__nav--prev { right: 13px; }
.story-viewer__nav--next { left: 13px; }
.story-viewer__footer { position: absolute; z-index: 4; right: 0; bottom: 0; left: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; min-height: 210px; padding: 82px 22px 22px; color: #fff; background: linear-gradient(180deg, transparent 0%, rgba(4,22,14,.18) 20%, rgba(4,22,14,.84) 74%, #06160f 100%); pointer-events: none; }
.story-viewer__footer-copy { min-width: 0; max-width: 72%; text-shadow: 0 2px 14px rgba(0,0,0,.32); }
.story-viewer__eyebrow { display: flex; align-items: center; gap: 7px; margin: 0 0 8px; color: #fff; font: 900 16px/1.45 var(--font-display); }
.story-viewer__eyebrow span:first-child { width: 24px; height: 3px; border-radius: 99px; background: linear-gradient(90deg, var(--sky), var(--lime)); }
.story-viewer__footer-copy > p:nth-child(2) { max-width: 440px; margin: 0; color: rgba(255,255,255,.94); font: 500 13px/2 var(--font-display); }
.story-viewer__footer-copy > small { display: block; margin-top: 8px; color: rgba(207,246,216,.76); font: 700 10px/1.8 var(--font-display); }
.story-viewer__actions { display: flex; flex: 0 0 auto; align-items: center; gap: 7px; pointer-events: auto; }
.story-viewer__action { display: inline-flex; min-width: 48px; height: 42px; align-items: center; justify-content: center; gap: 5px; padding: 0 11px; border: 1px solid rgba(255,255,255,.25); border-radius: 13px; color: #fff; background: rgba(255,255,255,.12); box-shadow: 0 8px 24px rgba(0,0,0,.16); cursor: pointer; font: 800 10px var(--font-display); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease; }
.story-viewer__action svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.story-viewer__action:hover, .story-viewer__action:focus-visible { border-color: rgba(131,223,56,.7); color: #06160f; background: var(--lime); transform: translateY(-2px); }
.story-viewer__action.is-liked { border-color: rgba(131,223,56,.74); color: #06160f; background: var(--lime); }
.story-viewer__link { text-decoration: none; }
.story-viewer__status { position: absolute; right: 22px; bottom: 76px; color: var(--lime); font: 800 10px var(--font-display); opacity: .95; }
.story-viewer__overlay-copy { position: absolute; z-index: 2; right: 44px; bottom: 230px; left: 44px; margin: 0; color: #fff; text-align: center; text-shadow: 0 3px 24px rgba(0,0,0,.5); pointer-events: none; }
.story-viewer__overlay-copy--display { font: 900 clamp(24px, 5vw, 40px)/1.35 var(--font-display); letter-spacing: -.02em; }
.story-viewer__overlay-copy--minimal { font: 700 clamp(16px, 3vw, 23px)/1.7 var(--font-display); }
.story-viewer__overlay-copy[hidden] { display: none; }
html.story-lock { overflow: hidden; }
body.story-viewer-open { overflow: hidden; }
[data-theme="dark"] .public-stories { border-color: rgba(113,216,239,.16); background: #0d241a; }
[data-theme="dark"] .story-bubble:hover, [data-theme="dark"] .story-bubble:focus-visible { color: var(--lime); }
[data-theme="dark"] .story-bubble__ring::after { border-color: #0d241a; }
@media (max-width: 700px) {
  .public-stories__inner { display: block; padding-block: 11px 8px; }
  .public-stories__intro { margin-bottom: 9px; }
  .public-stories__rail { gap: 14px; }
  .story-viewer { padding: 8px; }
  .story-viewer__panel { width: min(920px, calc(100vw - 16px)); max-height: calc(100svh - 16px); border-radius: 24px; }
  .story-viewer__footer { display: block; min-height: 250px; padding: 96px 16px 16px; }
  .story-viewer__footer-copy { max-width: 100%; }
  .story-viewer__eyebrow { font-size: 14px; }
  .story-viewer__footer-copy > p:nth-child(2) { font-size: 12px; line-height: 1.85; }
  .story-viewer__actions { margin-top: 13px; }
  .story-viewer__action { height: 39px; }
  .story-viewer__status { right: 16px; bottom: 65px; }
  .story-viewer__overlay-copy { right: 22px; bottom: 265px; left: 22px; }
}
@media (prefers-reduced-motion: reduce) { .story-bubble.is-new .story-bubble__ring { animation: none; } .story-viewer__backdrop, .story-viewer__panel, .story-viewer__nav { transition: none; } }