/* #spaces (pass 7, owner: SECTIONS) · a dark film band, five photo cards (src/partials/s-spaces.html).
   Phones and tablets (< 900 px): one row that swipes natively: CSS scroll-snap, no script drag, overscroll kept inside the row,
   the next card peeking at the end edge (the row's own shape, no hint text); a vertical swipe always scrolls the page.
   Desktops: a grid of three. Each card: picture (4:5, its mid-tone behind it while it loads), "הדמיה", name, sentence, the ask.
   Type: the pass-7 scale (heading 34-40 px phones / 56-72 px desktops). Motion: the page's one reveal (data-in, css/c.css).
   The pass-2 letter windows (.sp__win, .sp__w …) are gone with their rules (archive/pass7-sections-before-2026-10-24/). */

#spaces { position: relative; z-index: 2; padding: 12svh 0 11svh; background: var(--film); color: var(--pearl); }

/* ---------- the head ---------- */
#spaces .sp-head { padding: 0 var(--gut); display: grid; gap: 16px; margin-bottom: 6svh; }
#spaces .sp-head__h {
  margin: 0; font-family: var(--display); font-weight: 900; font-stretch: 62.5%; font-synthesis: none;
  font-size: clamp(34px, 3px + 8.6vw, 40px); line-height: 1; color: var(--pearl);
}
#spaces .sp-head__l { display: block; }
#spaces .sp-head__intro { margin: 0; font: 400 var(--fs-lead)/1.5 var(--text); color: rgba(244, 239, 231, .8); max-width: 36ch; --i: 2; }

/* ---------- the cards: a native swipe (phones, tablets) ---------- */
/* (position: relative makes the row the containing block of anything absolute inside it, e.g. the visually hidden ".vh" note
   common.js adds to each WhatsApp link: without it those escape the row and widen the whole page sideways) */
#spaces .sp-cards {
  position: relative; list-style: none; margin: 0; padding: 4px var(--gut) 8px; display: flex; gap: 14px;
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gut);
  overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
#spaces .sp-cards::-webkit-scrollbar { display: none; }
#spaces .sp-card { flex: 0 0 min(80vw, 400px); min-width: 0; scroll-snap-align: start; display: flex; flex-direction: column; }
#spaces .sp-card__pic { position: relative; aspect-ratio: 4 / 5; max-height: 70vh; overflow: hidden; overflow: clip; background: var(--tone, #3d3732); }
#spaces .sp-card__pic picture, #spaces .sp-card__img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#spaces .sp-card__img { object-fit: cover; object-position: 50% 62%; }
/* (QA-05) the photo never waits for a class: a real lazy <img> over its own mid-tone, which is what shows while it loads */
#spaces .sp-card__tag {
  position: absolute; z-index: 1; top: 10px; left: 10px;
  font: 500 var(--fs-xs)/1 var(--text); letter-spacing: .04em; color: var(--pearl);
  background: rgba(12, 11, 10, .72); padding: 6px 9px 5px; pointer-events: none;
}
#spaces .sp-card__t {
  margin: 16px 0 0; font-family: var(--display); font-weight: 900; font-stretch: 62.5%; font-synthesis: none;
  font-size: clamp(26px, 2px + 6.6vw, 32px); line-height: 1.02; color: var(--pearl);
}
#spaces .sp-card__p { margin: 10px 0 0; font: 400 var(--fs-body)/1.55 var(--text); color: rgba(244, 239, 231, .8); }
/* the ask: the site's underlined link, in the film's copper; 44 px tall */
#spaces .sp-card__cta {
  align-self: flex-start; margin-top: auto; padding-top: 12px; min-height: 44px; line-height: 32px; display: inline-block;
  font-size: var(--fs-btn); color: var(--pearl); background-image: linear-gradient(var(--copper-l), var(--copper-l));
}
#spaces .sp-card__p + .sp-card__cta { margin-top: 12px; padding-top: 0; }
@media (hover: hover) and (pointer: fine) { #spaces .sp-card__cta:hover { color: var(--copper-l); } }

#spaces .sp-note { margin: 7svh var(--gut) 0; padding-top: 18px; border-top: 1px solid rgba(244, 239, 231, .18); max-width: 52rem; }
#spaces .sp-note p { margin: 0; font: 400 var(--fs-s)/1.65 var(--text); color: rgba(244, 239, 231, .8); }
#spaces .sp-note .sp-note__img { font-size: var(--fs-xs); color: rgba(244, 239, 231, .66); margin-top: 6px; }

/* ---------- desktops: a grid of three (the swipe stops; nothing scrolls sideways) ---------- */
@media (min-width: 900px) {
  #spaces { padding: 16svh 0 14svh; }
  #spaces .sp-head { grid-template-columns: auto minmax(0, 34ch); justify-content: start; column-gap: 4vw; align-items: end; margin-bottom: 9svh; }
  #spaces .sp-head__h { font-size: clamp(56px, 24px + 2.5vw, 72px); }
  #spaces .sp-head__intro { padding-bottom: .3em; }
  /* three cards on the first row, the last two share the second row (a six-column grid), so no row is left a third empty */
  #spaces .sp-cards {
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8svh clamp(24px, 2.6vw, 44px);
    overflow: visible; scroll-snap-type: none; padding: 0 var(--gut);
  }
  #spaces .sp-card { flex: none; grid-column: span 2; }
  #spaces .sp-card:nth-child(n+4) { grid-column: span 3; }
  /* a card always fits a screen: the picture is capped (it crops; the wide ones of the second row become landscape) */
  #spaces .sp-card__pic { max-height: min(58vh, 640px); }
  #spaces .sp-card__t { font-size: clamp(30px, 10px + 1.6vw, 40px); margin-top: 20px; }
}

/* high contrast: no picture behind any text (the pictures stay above the text, as content) */
html.a11y-contrast #spaces { background: #000 !important; }