/* ---------- стрічка прев'ю ---------- */
.strip { border-top: 1px solid var(--line); padding: 12px 0 max(12px, env(safe-area-inset-bottom)); }
.strip__row {
  display: flex; gap: 14px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding: 4px var(--col-r, var(--gutter)) 4px var(--col-l, var(--gutter));   /* межі колонки контенту: з JS (alignLayout) */
  scroll-padding-inline: var(--col-l, var(--gutter)) var(--col-r, var(--gutter));
  scrollbar-width: none;
}
.strip__row::-webkit-scrollbar { display: none; }
/* рядок прев'ю по центру; якщо не вміщується — auto-відступи стають 0 й він просто гортається з початку */
.strip__row > :first-child { margin-left: auto; }
.strip__row > :last-child { margin-right: auto; }

.card {
  flex: 1 1 clamp(100px, 10vw, 147px); min-width: 100px;   /* картки заповнюють колонку від обкладинки до віджета; менше 100px не стискаються — тоді стрічка гортається */
  scroll-snap-align: start;
  text-align: left;
  display: grid; gap: 8px; align-content: start; align-self: flex-start;   /* підписи різної висоти (1–3 рядки) не зсувають картинки й верх. край підпису */
  -webkit-tap-highlight-color: transparent;
}
.card__img {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: var(--ratio);
  background: #e8f1f9;
  outline: 1px solid var(--line); outline-offset: -1px;
}
.card__img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .6s var(--ease), filter .4s;
}
.card:hover .card__img img, .card:focus-visible .card__img img { transform: scale(1.05); }
.card:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.card__meta { display: flex; align-items: flex-start; gap: 6px; font-size: 11px; line-height: 1.3; min-width: 0; }
.card__meta b { font-weight: 700; letter-spacing: .06em; }
.card__meta span { min-width: 0; opacity: .8; overflow-wrap: anywhere; }   /* нік артиста показуємо повністю: у вузькій картці переноситься на другий рядок, а не обрізається */
.card__badge {
  position: absolute; left: 8px; bottom: 8px;
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  background: rgba(255,255,255,.85); padding: 3px 6px;
}
/* вибране прев'ю: контур щільно по краю картинки з усіх боків (без проміжку); поля рядка нижче дають йому місце, щоб не обрізався */
.card.is-active .card__img { outline: 2px solid var(--ink); outline-offset: 0; }
.card.is-active .card__meta span { opacity: 1; }
.card__eq { position: absolute; right: 8px; top: 8px; display: none !important; box-sizing: content-box; height: 14px; padding: 5px 6px; background: rgba(255, 255, 255, .88); color: var(--ink); }
.card.is-active .card__eq { display: inline-flex !important; }
.card--cover .card__img { background: #fff; }
.card--cover .card__img img { object-fit: contain; }
.card--soon { cursor: default; }
.card--soon .card__img {
  background: repeating-linear-gradient(135deg, #eef5fb 0 8px, #e6f0f8 8px 16px);
  display: grid; place-items: center;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft);
}
.card--soon .card__meta { opacity: .5; }

/* мобільний: сторінка скролиться, обкладинка по ширині */
@media (max-aspect-ratio: 1/1) {
  body { height: auto; min-height: 100dvh; grid-template-rows: auto auto auto; }
  .home { flex-direction: column; align-items: center; gap: 22px; padding-bottom: 22px; }
  .hero { overflow: visible; width: 100%; height: auto; aspect-ratio: auto; }
  .hero__img { position: static; height: auto; }
  .widget { flex: none; width: min(100%, 360px); }
}