/* =====================================================================
   support.css — shared by the support layer: FAQ, size guide, shipping,
   care, privacy, terms, accessibility, credits, 404.
   Owned by the support/SEO agent. Uses base.css tokens only.
   ===================================================================== */

/* ---------------------------------------------------------------- page title */
.sp-title { font-size: var(--fs-3xl); }
.sp-sub { margin-top: var(--s-3); color: var(--muted); font-size: var(--fs-md); max-width: var(--max-text); }

/* ---------------------------------------------------------------- split: image | words
   <div class="sp-split"><figure class="sp-media">img + figcaption</figure><div class="sp-body">…</div></div>
   Phone: image on top (square crop), words below.
   Desktop: the image holds the left half of the screen while the words scroll. */
.sp-split { display: grid; }
.sp-media { margin: 0; display: flex; flex-direction: column; background: var(--bone); }
.sp-media__img { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: #d8d5d7; }
.sp-media__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 40%); }
.sp-media figcaption { padding: var(--s-3) var(--gutter) var(--s-4); background: var(--ivory); }
.sp-media figcaption a { text-decoration: none; }
.sp-media figcaption a:hover .wall-label__title { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.sp-body { padding: var(--s-7) var(--gutter) 0; min-width: 0; }
.sp-body > * { max-width: 36rem; }

@media (min-width: 900px) {
  .sp-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .sp-media { position: sticky; top: var(--header-h); height: calc(100svh - var(--header-h)); }
  .sp-media__img { flex: 1; aspect-ratio: auto; }
  .sp-media figcaption { padding: var(--s-4) var(--gutter) var(--s-5); }
  .sp-body { padding: clamp(3rem, 2rem + 4vw, 7rem) clamp(2rem, 1rem + 4vw, 7rem) var(--s-8); }
}

/* image settles in once loaded (no layout shift: the box is fixed) */
.sp-media__img img { transform: scale(1.04); opacity: 0; transition: opacity 0.9s var(--ease), transform 1.6s var(--ease); }
.sp-media__img img.is-loaded, .no-js .sp-media__img img { transform: none; opacity: 1; }

/* ---------------------------------------------------------------- sections of short fragments */
.sp-section { padding-top: var(--s-7); }
.sp-section + .sp-section { margin-top: var(--s-7); border-top: 1px solid var(--line); }
.sp-section > h2 { font-size: var(--fs-xl); }
.sp-section > h2 + * { margin-top: var(--s-4); }
.sp-section p + p { margin-top: var(--s-3); }
.sp-lines { list-style: none; padding: 0; margin: 0; }
.sp-lines > li { padding-block: var(--s-4); border-bottom: 1px solid var(--line); font-family: var(--font-display); font-size: var(--fs-lg); line-height: 1.25; }
.sp-lines > li:first-child { border-top: 1px solid var(--line); }
.sp-small { font-size: var(--fs-sm); color: var(--muted); }

/* ---------------------------------------------------------------- policy pages (privacy, terms, accessibility, credits) */
.policy { padding-block: clamp(3rem, 2rem + 4vw, 6rem) 0; }
.policy__head { padding-bottom: var(--s-6); border-bottom: 1px solid var(--line); }
.policy__date { margin-top: var(--s-3); font-size: var(--fs-sm); color: var(--muted); }
.policy__body { padding-top: var(--s-6); }
.policy__body > section + section { margin-top: var(--s-7); }
.policy__body h2 { font-size: var(--fs-lg); font-weight: 500; line-height: 1.25; }
.policy__body h2 + * { margin-top: var(--s-3); }
.policy__body p, .policy__body li { color: var(--ink-2); }
.policy__body p + p, .policy__body p + ul, .policy__body ul + p { margin-top: var(--s-3); }
.policy__body ul { padding-left: 1.1em; }
.policy__body li + li { margin-top: var(--s-2); }
.policy__body a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; text-decoration-color: var(--line-strong); }
.policy__body a:hover { text-decoration-color: currentColor; }
@media (min-width: 900px) {
  .policy__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--s-8); }
  .policy__head { border-bottom: 0; padding-bottom: 0; position: sticky; top: calc(var(--header-h) + var(--s-6)); align-self: start; }
  .policy__body { padding-top: 0.6rem; max-width: 40rem; }
}

/* ---------------------------------------------------------------- 404 */
.nf .sp-body { display: flex; flex-direction: column; gap: var(--s-5); }
@media (min-width: 900px) { .nf .sp-body { min-height: calc(100svh - var(--header-h)); justify-content: center; padding-block: var(--s-8); } }