/* GO Stories (v4.3): short client stories, loaded from the back office. Uses the site tokens from styles.css. */
.gs-page [hidden] { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.gs-hero { padding: 56px 0 28px; }
.gs-hero .wrap { max-width: 860px; }
.gs-hero h1 { font-family: var(--display); font-weight: 700; font-size: clamp(2.1rem, 4.4vw, 3.5rem); line-height: 1.04; letter-spacing: -0.01em; color: var(--ink); margin: 14px 0 16px; text-wrap: balance; }
.gs-hero .lede { font-size: clamp(1.02rem, 1.4vw, 1.14rem); line-height: 1.6; color: var(--ink-2); max-width: 58ch; margin: 0; }

.gs-feed { padding: 20px 0 56px; }
.gs-feed .wrap { max-width: 1080px; }
.gs-list { display: flex; flex-direction: column; gap: 28px; }

/* one story */
.story { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(22px, 4vw, 48px); align-items: center;
  padding: clamp(16px, 2.4vw, 22px); background: var(--sheet); border-radius: var(--r-lg, 24px); box-shadow: var(--shadow-paper), inset 0 0 0 1px var(--rule);
  opacity: 0; transform: translateY(14px); transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out); }
.story.in { opacity: 1; transform: none; }
.story:nth-child(even) .story-media { order: 2; }
.story-media { position: relative; margin: 0; aspect-ratio: 16 / 10; border-radius: calc(var(--r-lg, 24px) - 8px); overflow: hidden; background: var(--navy); }
.story-media img { width: 100%; height: 100%; object-fit: cover; display: block; filter: var(--img-dim); }
.story-media.no-img { display: grid; place-items: center; background: radial-gradient(120% 120% at 0% 0%, #12405E, var(--navy) 55%, #08202F); }
.story-media.no-img img { width: 30%; height: auto; max-width: 140px; object-fit: contain; filter: none; opacity: .9; }
.story-body { padding: clamp(4px, 1vw, 12px) clamp(4px, 1vw, 16px) clamp(4px, 1vw, 12px) 0; min-width: 0; }
.story:nth-child(even) .story-body { padding-left: clamp(4px, 1vw, 16px); }
.story-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.story-tag { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: var(--r-pill, 999px); background: var(--red-tint); color: var(--stamp);
  font-family: var(--display); font-weight: 500; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; }
.story-tag::before { content: ''; width: 7px; height: 7px; background: currentColor; }
.story-date { font-size: 0.86rem; color: var(--ink-3); }
.story h3 { font-family: var(--display); font-weight: 700; font-size: clamp(1.55rem, 2.6vw, 2.1rem); line-height: 1.1; color: var(--ink); margin: 0 0 12px; text-wrap: balance; }
.story-intro { font-size: 1.08rem; line-height: 1.65; color: var(--ink); margin: 0 0 16px; max-width: 60ch; }
.story-note { margin: 0; padding: 14px 16px 14px 18px; border-left: 3px solid var(--stamp); background: var(--paper); border-radius: 0 var(--r-card, 16px) var(--r-card, 16px) 0; }
.story-note p { margin: 0; font-size: 0.98rem; line-height: 1.65; color: var(--ink-2); white-space: pre-line; }
.story-lang { margin-top: 12px; font-size: 0.82rem; color: var(--ink-3); }

/* loading and empty */
.gs-skel { display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center; padding: 22px; background: var(--sheet); border-radius: var(--r-lg, 24px); box-shadow: inset 0 0 0 1px var(--rule); }
.gs-skel span { aspect-ratio: 16 / 10; border-radius: 16px; background: var(--bar); }
.gs-skel div { display: grid; gap: 14px; }
.gs-skel i { height: 18px; border-radius: 8px; background: var(--bar); }
.gs-skel i:first-child { width: 40%; } .gs-skel i:nth-child(2) { height: 34px; width: 85%; } .gs-skel i:nth-child(3) { height: 70px; }
@media (prefers-reduced-motion: no-preference) { .gs-skel span, .gs-skel i { animation: gs-pulse 1.4s ease-in-out infinite; } }
@keyframes gs-pulse { 50% { opacity: .55; } }
.gs-empty { display: flex; gap: 16px; align-items: flex-start; max-width: 680px; padding: 22px 24px; background: var(--sheet); border-radius: var(--r-lg, 24px); box-shadow: inset 0 0 0 1px var(--rule); }
.gs-empty img { border-radius: 999px; flex: none; background: #fff; }
.gs-empty-t { font-family: var(--display); font-weight: 700; font-size: 1.2rem; margin: 2px 0 6px; color: var(--ink); }
.gs-empty p:not(.gs-empty-t) { margin: 0; color: var(--ink-2); line-height: 1.6; }
.gs-error { color: var(--stamp); margin: 0; }

/* signup + next story */
.gs-bottom { padding: 8px 0 72px; }
.gs-bottom-grid { max-width: 1080px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.gs-signup, .gs-cta { padding: clamp(22px, 3vw, 32px); border-radius: var(--r-lg, 24px); }
.gs-signup { background: var(--sheet); box-shadow: inset 0 0 0 1px var(--rule); }
.gs-bottom .wrap { max-width: 1080px; }
.gs-cta { background: var(--navy); color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; }
.gs-cta > div:first-child { flex: 1 1 380px; }
.gs-cta > div:first-child p { margin: 0; color: rgba(233, 241, 246, .82); line-height: 1.6; max-width: 56ch; }
.gs-h2 { font-family: var(--display); font-weight: 700; font-size: clamp(1.35rem, 2.2vw, 1.7rem); line-height: 1.15; margin: 0 0 8px; color: inherit; }
.gs-signup .gs-h2 { color: var(--ink); }
.gs-signup > p, .gs-cta > p { margin: 0 0 18px; line-height: 1.6; }
.gs-signup > p { color: var(--ink-2); }
.gs-cta > p { color: rgba(233, 241, 246, .82); }
.gs-cta-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.gs-cta .btn-ghost { background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, .6); box-shadow: none; }
.gs-cta .btn-ghost:hover { background: rgba(255, 255, 255, .1); border-color: #fff; }
.gs-submit { border: 0; cursor: pointer; }
:root[data-theme="dark"] .gs-cta { background: #0F2D41; box-shadow: inset 0 0 0 1px var(--rule-strong); }

@media (max-width: 860px) {
  .story, .gs-skel { grid-template-columns: 1fr; gap: 18px; }
  .story:nth-child(even) .story-media { order: 0; }
  .story-body, .story:nth-child(even) .story-body { padding: 0 4px 6px; }
  .gs-bottom-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .gs-hero { padding: 32px 0 18px; }
  .story { padding: 12px; border-radius: 20px; }
  .story-intro { font-size: 1.02rem; }
}
@media (prefers-reduced-motion: reduce) { .story { opacity: 1; transform: none; transition: none; } }