/* Samator — Sustainability Story Wall
   Multi-step submission wizard (Name → Story → Photo → Submit), transparent by
   default, optionally ringed by floating approved-story avatars (text shown
   directly, no hover). */

.sam-story-wall {
	--sw-ink: #1f2433;
	--sw-muted: #4b5566;   /* AA on the tinted gradient */
	--sw-hint: #5b6675;    /* placeholder / hint / counter — also AA */
	--sw-accent: #e2231a;
	--sw-line: #8a97a3;     /* input underline ≥3:1 non-text contrast */
	position: relative;
	overflow: hidden;
	padding: clamp(28px, 4vw, 56px) clamp(16px, 5vw, 64px);
	box-sizing: border-box;
}
/* Visible keyboard focus for every interactive element. */
.sam-story-wall :focus-visible {
	outline: 2px solid var(--sw-accent);
	outline-offset: 2px;
	border-radius: 6px;
}
/* Background variants. Transparent is the default; gradient is opt-in. */
.sam-story-wall.sw-bg-none { background: none; }
.sam-story-wall.sw-bg-gradient {
	background: linear-gradient(180deg, #ffffff 0%, rgba(173, 212, 235, 0.29) 100%);
}

/* ── Centre column ─────────────────────────────────────────────── */
.sam-story-wall .sw-center {
	position: relative;
	z-index: 2;
	max-width: var(--sw-center-w, 620px);
	margin: 0 auto;
	text-align: center;
}
.sam-story-wall .sw-eyebrow {
	margin: 0 0 14px;
	color: var(--sw-accent);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}
.sam-story-wall .sw-heading {
	margin: 0 0 clamp(24px, 4vw, 40px);
	color: var(--sw-ink);
	font-weight: 400;
	font-size: clamp(30px, 5vw, 56px);
	line-height: 1.12;
	letter-spacing: -0.01em;
}

/* ── Wizard form ───────────────────────────────────────────────── */
.sam-story-wall .sw-form {
	max-width: var(--sw-form-w, 460px);
	margin: 0 auto;
	text-align: left;
}
.sam-story-wall .sw-form-intro {
	margin: 0 0 20px;
	text-align: center;
	color: var(--sw-muted);
	font-size: 15px;
	line-height: 1.5;
}

/* Step indicator — now anchored at the bottom of the form */
.sam-story-wall .sw-progress-wrap {
	margin-top: 30px;
	padding-top: 22px;
	border-top: 1px solid rgba(31, 36, 51, 0.08);
}
.sam-story-wall .sw-progress {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin: 0 0 10px;
	padding: 0;
	list-style: none;
}
.sam-story-wall .sw-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(31, 36, 51, 0.18);
	transition: background-color 0.25s; /* not width — avoid layout thrash */
}
.sam-story-wall .sw-dot.is-active { background: var(--sw-accent); width: 22px; border-radius: 4px; }
.sam-story-wall .sw-dot.is-done { background: var(--sw-accent); opacity: 0.5; }

/* Visible "Step N of 3 · Title" — the literal status the dots can't carry. */
.sam-story-wall .sw-stepline {
	margin: 0;
	text-align: center;
	font-size: 13px;
	font-weight: 600;
	color: var(--sw-muted);
}
.sam-story-wall .sw-stepline b { color: var(--sw-ink); font-weight: 700; }

/* Steps */
.sam-story-wall .sw-step { margin: 0; padding: 0; border: 0; min-inline-size: 0; }
.sam-story-wall .sw-step[hidden] { display: none; }
.sam-story-wall .sw-step.is-active { animation: sw-step-in 0.32s ease both; }
@keyframes sw-step-in {
	from { opacity: 0; transform: translateX(14px); }
	to   { opacity: 1; transform: translateX(0); }
}

.sam-story-wall .sw-field { position: relative; margin-bottom: 10px; }
.sam-story-wall .sw-label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--sw-ink);
}
.sam-story-wall .sw-optional { font-weight: 400; color: var(--sw-muted); }
.sam-story-wall .sw-input {
	width: 100%;
	box-sizing: border-box;
	border: none;
	border-bottom: 1.5px solid var(--sw-line);
	border-radius: 0;
	background: transparent;
	padding: 12px 2px;
	font-size: 16px;
	color: var(--sw-ink);
	outline: none;
	transition: border-color 0.2s;
}
.sam-story-wall input.sw-input { min-height: 44px; } /* comfortable touch target */
.sam-story-wall .sw-input::placeholder { color: var(--sw-hint); }
.sam-story-wall .sw-input:focus { border-bottom-color: var(--sw-ink); border-bottom-width: 2px; }
.sam-story-wall .sw-textarea { resize: vertical; min-height: 72px; line-height: 1.5; }

.sam-story-wall .sw-counter {
	position: absolute;
	right: 2px;
	bottom: -18px;
	font-size: 12.5px;
	color: var(--sw-hint);
}

/* Validation — error carries a warning glyph, not colour alone */
.sam-story-wall .sw-error {
	display: none;
	margin-top: 8px;
	font-size: 13px;
	color: var(--sw-accent);
}
.sam-story-wall .sw-field.has-error .sw-error { display: flex; align-items: flex-start; gap: 5px; }
.sam-story-wall .sw-field.has-error .sw-error::before {
	content: "";
	flex: none;
	width: 14px;
	height: 14px;
	margin-top: 1px;
	background: var(--sw-accent);
	-webkit-mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 2 1 21h22L12 2zm0 6 .9 7h-1.8L12 8zm0 9.5a1.2 1.2 0 1 1 0 2.4 1.2 1.2 0 0 1 0-2.4z'/%3E%3C/svg%3E");
	mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 2 1 21h22L12 2zm0 6 .9 7h-1.8L12 8zm0 9.5a1.2 1.2 0 1 1 0 2.4 1.2 1.2 0 0 1 0-2.4z'/%3E%3C/svg%3E");
}
.sam-story-wall .sw-field.has-error .sw-input { border-bottom-color: var(--sw-accent); }

/* ── Photo: upload state ───────────────────────────────────────── */
.sam-story-wall .sw-file {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	box-sizing: border-box;
	margin-top: 4px;
	padding: 14px 16px;
	border: 1.5px dashed var(--sw-line);
	border-radius: 12px;
	cursor: pointer;
	transition: border-color 0.2s, background 0.2s;
}
.sam-story-wall .sw-file:hover { border-color: var(--sw-ink); background: rgba(31, 36, 51, 0.02); }
.sam-story-wall .sw-file-ic { color: var(--sw-muted); display: inline-flex; flex: none; }
.sam-story-wall .sw-file-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sam-story-wall .sw-file-btn { font-size: 14px; font-weight: 600; color: var(--sw-ink); }
.sam-story-wall .sw-file-name {
	font-size: 12.5px;
	color: var(--sw-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ── Photo: preview state (thumb left · × right) ───────────────── */
.sam-story-wall .sw-preview {
	display: flex;
	align-items: center;
	gap: 14px;
}
/* A class-based display rule beats the UA [hidden] rule — restore it. */
.sam-story-wall .sw-preview[hidden] { display: none; }
.sam-story-wall .sw-preview {
	width: 100%;
	box-sizing: border-box;
	margin-top: 4px;
	padding: 10px 12px;
	border: 1.5px solid var(--sw-line);
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.6);
}
.sam-story-wall .sw-preview-img {
	width: 56px;
	height: 56px;
	flex: none;
	object-fit: cover;
	border-radius: 8px;
}
.sam-story-wall .sw-preview-meta {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 13px;
	color: var(--sw-ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.sam-story-wall .sw-preview-remove {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(31, 36, 51, 0.06);
	color: var(--sw-ink);
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
}
/* Neutral-darker hover — Samator red stays reserved for the primary action. */
.sam-story-wall .sw-preview-remove:hover { background: rgba(31, 36, 51, 0.14); }
/* Toggle between upload ⇆ preview state */
.sam-story-wall .sw-photo-field.has-preview .sw-file { display: none; }

.sam-story-wall .sw-hint {
	display: block;
	margin-top: 10px;
	font-size: 12.5px;
	color: var(--sw-hint);
}

/* Persistent reassurance: submissions are moderated before they appear. */
.sam-story-wall .sw-note {
	margin: 18px 0 0;
	display: flex;
	align-items: flex-start;
	gap: 7px;
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--sw-muted);
}
.sam-story-wall .sw-note-ic { flex: none; margin-top: 1px; color: var(--sw-muted); }

/* "Submitting as <name>" echo on the final step. */
.sam-story-wall .sw-echo {
	margin: 0 0 14px;
	font-size: 13px;
	color: var(--sw-muted);
}
.sam-story-wall .sw-echo b { color: var(--sw-ink); font-weight: 600; }
.sam-story-wall .sw-echo:empty { display: none; }

/* Honeypot — hidden from humans, present for bots */
.sam-story-wall .sw-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Visually hidden, still read by screen readers (step announcements). */
.sam-story-wall .sw-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ── Step navigation buttons ───────────────────────────────────── */
.sam-story-wall .sw-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 26px;
}
/* Step 1 has only a Next button — push it to the right. */
.sam-story-wall .sw-step[data-step="1"] .sw-nav { justify-content: flex-end; }

.sam-story-wall .sw-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	border: none;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: transform 0.15s ease, background 0.2s, opacity 0.2s, color 0.2s;
}
.sam-story-wall .sw-next,
.sam-story-wall .sw-submit {
	min-width: 150px;
	padding: 13px 28px;
	background: var(--sw-accent);
	color: #fff;
}
.sam-story-wall .sw-next:hover,
.sam-story-wall .sw-submit:hover { background: #c41d15; }
/* The terminal action gets a touch more presence than the repeating Next. */
.sam-story-wall .sw-submit { font-weight: 700; box-shadow: 0 6px 18px rgba(226, 35, 26, 0.22); }
.sam-story-wall .sw-btn:active { transform: translateY(1px); }
.sam-story-wall .sw-btn[disabled] { opacity: 0.6; cursor: default; }

.sam-story-wall .sw-ghost {
	padding: 13px 14px;
	background: transparent;
	color: var(--sw-ink);
	text-decoration: underline;
	text-decoration-color: var(--sw-line);
	text-underline-offset: 3px;
}
.sam-story-wall .sw-ghost:hover { text-decoration-color: var(--sw-ink); }

.sam-story-wall .sw-spinner {
	display: none;
	width: 16px;
	height: 16px;
	border: 2px solid rgba(255, 255, 255, 0.45);
	border-top-color: #fff;
	border-radius: 50%;
	animation: sw-spin 0.7s linear infinite;
}
.sam-story-wall.is-submitting .sw-spinner { display: inline-block; }
@keyframes sw-spin { to { transform: rotate(360deg); } }

/* ── Feedback / success ────────────────────────────────────────── */
.sam-story-wall .sw-feedback {
	margin: 18px 0 0;
	text-align: center;
	font-size: 14.5px;
	line-height: 1.5;
	min-height: 1.2em;
}
.sam-story-wall .sw-feedback.is-success { color: #157347; font-weight: 600; }
.sam-story-wall .sw-feedback.is-error { color: var(--sw-accent); }
.sam-story-wall.is-done .sw-form > *:not(.sw-feedback) { display: none; }
.sam-story-wall.is-done .sw-feedback { font-size: 16px; margin-top: 0; }

/* ── Story wall: floating approved-story cards around the centred form ──
   Cards anchor to the FORM's vertical area (.sw-stage), so the mid cards always
   sit level with the form. They live in the side gutters (never over the form)
   and gently drift, reading as "floating". */
.sam-story-wall .sw-stage {
	position: relative;
	min-height: 460px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.sam-story-wall .sw-stage > .sw-form { width: 100%; }

.sam-story-wall .sw-wall {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}
.sam-story-wall .sw-slot {
	position: absolute;
	width: clamp(208px, 16vw, 244px);
	margin: 0;
	opacity: 0;                 /* hidden until the section scrolls into view */
	pointer-events: auto;
}
/* Pop in (staggered) once the section is revealed — no continuous drift. */
.sam-story-wall.is-revealed .sw-slot {
	animation: sw-pop 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes sw-pop {
	from { opacity: 0; transform: translateY(14px) scale(0.95); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Six positions, anchored to the form area: top / middle / bottom each side.
   Mid cards sit furthest out; top & bottom tuck inward → a soft ring. */
.sam-story-wall .sw-slot--1 { top: 0;    right: calc(100% + 12px); animation-delay: 0.05s; }
.sam-story-wall .sw-slot--2 { top: 41%;  right: calc(100% + 34px); animation-delay: 0.15s; }
.sam-story-wall .sw-slot--3 { bottom: 0; right: calc(100% + 12px); animation-delay: 0.25s; }
.sam-story-wall .sw-slot--4 { top: 0;    left: calc(100% + 12px);  animation-delay: 0.1s; }
.sam-story-wall .sw-slot--5 { top: 41%;  left: calc(100% + 34px);  animation-delay: 0.2s; }
.sam-story-wall .sw-slot--6 { bottom: 0; left: calc(100% + 12px);  animation-delay: 0.3s; }
/* Marquee clones (JS-added) — only used in the mobile strip; hidden on desktop. */
.sam-story-wall .sw-slot.sw-clone { display: none; }
/* JS wraps the slots in this track. On desktop it has no box (display:contents) so
   the absolute scatter is untouched; the mobile @media turns it into the moving row. */
.sam-story-wall .sw-marquee-track { display: contents; }

.sam-story-wall .sw-card {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	padding: 14px 16px;
	background: #fff;
	border: 0;                  /* button reset */
	width: 100%;
	font: inherit;
	color: inherit;
	border-radius: 16px;
	box-shadow: 0 14px 34px rgba(34, 33, 73, 0.14);
	text-align: left;
	cursor: default;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}
/* Only cards with truncated text are interactive (JS adds .sw-has-more). */
.sam-story-wall .sw-card.sw-has-more { cursor: pointer; }
.sam-story-wall .sw-card.sw-has-more:hover,
.sam-story-wall .sw-card.sw-has-more:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 20px 46px rgba(34, 33, 73, 0.22);
}
.sam-story-wall .sw-card:focus-visible {
	outline: 2px solid var(--sw-accent, #e2231a);
	outline-offset: 2px;
}
.sam-story-wall .sw-card-more {
	display: none;              /* shown by JS only when the story is actually cut off */
	margin-top: 3px;
	font-size: 11.5px;
	font-weight: 700;
	color: var(--sw-accent, #e2231a);
}
.sam-story-wall .sw-card.sw-has-more .sw-card-more { display: block; }
.sam-story-wall .sw-avatar {
	width: 44px;
	height: 44px;
	flex: none;
	border-radius: 50%;
	object-fit: cover;
}
/* Fallback when no photo — Samator-red disc with the contributor's initial. */
.sam-story-wall .sw-avatar--fallback {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--sw-accent), #b3160e);
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
}
.sam-story-wall .sw-card-body {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.sam-story-wall .sw-card-name {
	font-weight: 700;
	font-size: 13.5px;
	line-height: 1.25;
	color: var(--sw-ink);
}
.sam-story-wall .sw-card-text {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.45;
	color: #3f4757;
	overflow-wrap: anywhere;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Below the comfortable width the scattered ring won't fit — the floating cards
   become a FULL-BLEED auto-scrolling marquee strip ABOVE the form instead.
   .sw-wall = fixed full-width viewport that clips; .sw-marquee-track = the moving row. */
@media (max-width: 1279px) {
	.sam-story-wall .sw-stage { min-height: 0; }
	/* Viewport: span the whole screen edge-to-edge (no side gap) and clip overflow. */
	.sam-story-wall .sw-wall {
		position: relative;
		inset: auto;
		display: block;
		width: 100vw;
		margin-left: 50%;
		transform: translateX(-50%);
		overflow: hidden;
		pointer-events: auto;
		margin-bottom: clamp(12px, 5vw, 28px);
	}
	/* Track: the actual moving row, looped via translateX. */
	.sam-story-wall .sw-marquee-track {
		display: flex;
		width: max-content;
		padding: 12px 0 34px;          /* vertical only (L/R would break -50%); bottom = room for shadow */
		animation: sw-marquee 34s linear infinite;
		will-change: transform;
	}
	.sam-story-wall .sw-slot {
		position: static;
		opacity: 1;
		flex: none;
		width: clamp(200px, 62vw, 240px);
		margin: 0 14px 0 0;            /* trailing gap → exact -50% seamless loop */
		animation: none;
	}
	/* Softer, more diffuse shadow on mobile (the desktop one reads too hard here). */
	.sam-story-wall .sw-card {
		box-shadow: 0 8px 26px rgba(34, 33, 73, 0.09);
	}
	.sam-story-wall .sw-slot.sw-clone { display: flex; }
	/* Pause while hovering the strip, or while a story modal is open (readable). */
	.sam-story-wall .sw-wall:hover .sw-marquee-track { animation-play-state: paused; }
	.sam-story-wall.sw-modal-open .sw-marquee-track { animation-play-state: paused; }
}
/* Track scrolls left by exactly one set (originals == clones) → seamless. */
@keyframes sw-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.sam-story-wall.is-revealed .sw-slot { animation: sw-pop 0.5s both; }
	/* No auto-motion → freeze the marquee and let the user swipe it instead. */
	.sam-story-wall .sw-marquee-track { animation: none !important; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 1279px) {
	.sam-story-wall .sw-wall { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* On phones the terminal action goes full-width into the thumb zone. */
@media (max-width: 480px) {
	.sam-story-wall .sw-step[data-step="3"] .sw-nav { flex-wrap: wrap; }
	.sam-story-wall .sw-step[data-step="3"] .sw-submit { order: -1; width: 100%; }
}

/* Motion is not mandatory — honour the user's preference. */
@media (prefers-reduced-motion: reduce) {
	.sam-story-wall .sw-step.is-active,
	.sam-story-wall .sw-slot { animation: none !important; }
	.sam-story-wall .sw-spinner { animation-duration: 1.4s; }
	.sam-story-wall .sw-dot,
	.sam-story-wall .sw-btn,
	.sam-story-wall .sw-input,
	.sam-story-wall .sw-file,
	.sam-story-wall .sw-card,
	.sam-story-wall .sw-preview-remove { transition: none !important; }
	.sam-story-wall .sw-modal-backdrop,
	.sam-story-wall .sw-modal-dialog { animation: none !important; }
}

/* ============================================================
   READ-MORE MODAL — tap a floating card to read the full story
   ============================================================ */
.sam-story-wall .sw-modal[hidden] { display: none; }
.sam-story-wall .sw-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.sam-story-wall .sw-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(20, 22, 38, 0.55);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	animation: sw-modal-fade 0.2s ease both;
}
.sam-story-wall .sw-modal-dialog {
	position: relative;
	width: min(440px, 100%);
	max-height: 80vh;
	overflow-y: auto;
	background: #fff;
	border-radius: 20px;
	padding: 28px 26px 26px;
	box-shadow: 0 30px 70px rgba(20, 22, 38, 0.35);
	animation: sw-modal-pop 0.24s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.sam-story-wall .sw-modal-close {
	position: absolute;
	top: 14px;
	right: 14px;
	display: inline-grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 50%;
	background: rgba(20, 22, 38, 0.06);
	color: var(--sw-ink, #1f2433);
	cursor: pointer;
	transition: background 0.2s ease;
}
.sam-story-wall .sw-modal-close:hover { background: rgba(20, 22, 38, 0.12); }
.sam-story-wall .sw-modal-head {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 16px;
	padding-right: 32px;
}
.sam-story-wall .sw-modal-avatar {
	width: 56px;
	height: 56px;
	flex: none;
	border-radius: 50%;
	object-fit: cover;
}
.sam-story-wall .sw-modal-name {
	font-weight: 700;
	font-size: 17px;
	color: var(--sw-ink, #1f2433);
}
.sam-story-wall .sw-modal-story {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: #3f4757;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}
@keyframes sw-modal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sw-modal-pop {
	from { opacity: 0; transform: translateY(12px) scale(0.97); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}