/* RelaxingJazz.com · stories.css (scoped to the Listener stories page, /stories/) */

/* ---- hero */
.page--stories .ls-hero {
  padding-top: var(--page-hero-pad-top, clamp(3rem, 2rem + 4vw, 6rem));
  padding-bottom: var(--page-hero-pad-bottom, clamp(2rem, 1.5rem + 2vw, 3rem));
}
.page--stories .ls-hero .h-display { font-size: var(--page-hero-title, var(--step-6)); }
.page--stories .ls-hero .lede { margin-top: var(--space-4); max-width: 46rem; }
.page--stories .ls-hero__actions { margin-top: var(--space-6); align-items: center; gap: var(--space-3) var(--space-5); }
.page--stories .ls-hero__count { color: var(--text-3); font-family: var(--font-display); font-style: italic; }

/* ---- the stories */
.page--stories .ls-grid {
  display: grid; gap: clamp(var(--space-4), 2vw, var(--space-5)); align-items: start;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
  margin: 0; padding: 0; list-style: none;
}
.page--stories .ls-story { display: grid; gap: var(--space-4); padding: clamp(var(--space-4), 2vw, var(--space-5)); }
.page--stories .ls-story__photo {
  display: block; margin: calc(-1 * clamp(var(--space-4), 2vw, var(--space-5))) calc(-1 * clamp(var(--space-4), 2vw, var(--space-5))) 0;
  border-radius: var(--radius-l) var(--radius-l) 0 0; overflow: hidden; background: var(--bg-sunken);
}
.page--stories .ls-story__photo img { display: block; width: 100%; height: auto; max-height: 26rem; object-fit: cover; }
.page--stories .ls-story__photo:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.page--stories .ls-story__text { position: relative; color: var(--text); line-height: 1.65; overflow-wrap: anywhere; }
.page--stories .ls-story__text::before {
  content: "\201C"; display: block; height: 0.55em; margin-bottom: var(--space-2);
  color: var(--gold); font-family: var(--font-display); font-size: 3rem; line-height: 1;
}
.page--stories .ls-story__text > p + p { margin-top: 0.8em; }
.page--stories .ls-story__by {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3);
  padding-top: var(--space-3); border-top: 1px solid var(--border); font-size: var(--step--1);
}
.page--stories .ls-story__name { color: var(--gold); font-weight: 600; }
.page--stories .ls-story__place { display: inline-flex; align-items: center; gap: 0.35em; color: var(--text-2); }
.page--stories .ls-story__place .icon { width: 0.95em; height: 0.95em; color: var(--text-3); }
.page--stories .ls-story__date { color: var(--text-3); margin-left: auto; }
.page--stories .ls-pages { justify-content: center; margin-top: var(--space-6); gap: var(--space-3) var(--space-4); }
.page--stories .ls-pages__at { color: var(--text-3); font-size: var(--step--1); }
.page--stories .ls-empty { max-width: 40rem; margin-inline: auto; }

/* ---- share your story */
.page--stories .ls-share { scroll-margin-top: calc(var(--header-h) + var(--space-4)); }
.page--stories .ls-share:focus { outline: none; }
.page--stories .ls-share__card { padding: clamp(var(--space-5), 4vw, var(--space-8)); }
.page--stories .ls-share__card > h2 { margin-top: var(--space-2); }
.page--stories .ls-share__intro { margin-top: var(--space-3); color: var(--text-2); max-width: 60ch; }
.page--stories .ls-form { display: grid; gap: var(--space-5); margin-top: var(--space-6); }
.page--stories .ls-form__grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.page--stories .ls-tag { margin-left: 0.35em; color: var(--text-3); font-size: var(--step--1); font-weight: 400; }
.page--stories .ls-form [aria-invalid="true"] { border-color: var(--danger); }
.page--stories .ls-form .field__error:not([hidden]) { display: block; }
.page--stories .ls-count { justify-self: end; color: var(--text-3); font-size: var(--step--2); font-variant-numeric: tabular-nums; }
.page--stories .ls-count.is-near { color: var(--gold); }
.page--stories .ls-count.is-over { color: var(--danger); }

/* the photo: a hidden file input behind a button-like label (still reachable with the keyboard) */
.page--stories .ls-photo__pick { position: relative; justify-self: start; }
.page--stories .ls-photo__input {
  position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; padding: 0; border: 0; opacity: 0; cursor: pointer;
}
.page--stories .ls-photo__input:focus-visible + .ls-photo__btn { outline: 2px solid var(--focus); outline-offset: 3px; }
.page--stories .ls-photo__preview { display: grid; gap: var(--space-3); margin: 0; justify-items: start; }
.page--stories .ls-photo__preview img {
  display: block; max-width: min(100%, 22rem); max-height: 18rem; height: auto; border-radius: var(--radius-m); background: var(--bg-sunken);
}
.page--stories .ls-photo__preview figcaption { align-items: center; gap: var(--space-3); }
.page--stories .ls-photo__info { color: var(--text-3); font-size: var(--step--1); }

/* checkboxes (rj.css styles switches, not plain boxes) */
.page--stories .ls-check { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-1) var(--space-3); align-items: start; }
.page--stories .ls-check input[type="checkbox"] {
  width: 1.3rem; height: 1.3rem; min-height: 0; margin: 0.15em 0 0; accent-color: var(--gold); cursor: pointer;
}
.page--stories .ls-check label { color: var(--text); cursor: pointer; }
.page--stories .ls-check .field__error { grid-column: 2; }
.page--stories .ls-photo .ls-check { margin-top: var(--space-2); }

/* the hidden box only bots fill in: off-screen rather than display:none, which many bots skip */
.page--stories .ls-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.page--stories .ls-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); }
.page--stories .ls-status { color: var(--text-2); min-height: 1.5em; }
.page--stories .ls-status[data-state="error"] { color: var(--danger); }
.page--stories .ls-status[data-state="busy"] { color: var(--gold); }
.page--stories .ls-form__privacy { color: var(--text-3); font-size: var(--step--1); }
.page--stories .ls-form__privacy a { color: var(--text-2); }
.page--stories [data-ls-submit][aria-disabled="true"] { opacity: 0.6; pointer-events: none; }

.page--stories .ls-thanks { display: grid; gap: var(--space-3); justify-items: start; margin-top: var(--space-6); }
.page--stories .ls-thanks:focus { outline: none; }
.page--stories .ls-thanks .empty-state__msg { max-width: none; color: var(--gold); }
.page--stories .no-js-only { margin-top: var(--space-5); }

@media (prefers-reduced-motion: no-preference) {
  .page--stories .ls-status[data-state="busy"] { animation: ls-pulse 1.4s var(--ease, ease) infinite; }
  @keyframes ls-pulse { 50% { opacity: 0.55; } }
}

.page--stories .ls-loading { margin-top: var(--space-6); color: var(--text-2); }