/* Лента «Нас поддерживают» на главной (№823, п. 7). На телефоне листается пальцем, на компьютере ещё и стрелками (karusel.js).
   Перелом 900 - компьютер: в ряд видно четыре карточки. */

.home-pd__nav { display: none; }
.pd-strip { display: flex; align-items: flex-start; gap: 12px; margin: 22px calc(var(--gutter) * -1) 0; padding: 4px var(--gutter) 22px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter); scrollbar-width: none; }
.pd-strip::-webkit-scrollbar { display: none; }
.pd-strip .pd-card { flex: 0 0 78%; max-width: 300px; margin: 0; padding-bottom: 20px; overflow: hidden; scroll-snap-align: start; border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); }
.pd-strip img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 30%; background: var(--sky); }
.pd-strip .pd-card__name { margin: 16px 18px 0; font-size: 18px; line-height: 1.2; letter-spacing: -.01em; }
.pd-strip blockquote { margin: 8px 18px 0; }
.pd-strip blockquote p, .pd-strip .pd-card__about { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.pd-strip .pd-card__about { margin: 8px 18px 0; }
.pd-strip blockquote p::before { content: "«"; }
.pd-strip blockquote p::after { content: "»"; }
html[lang="en"] .pd-strip blockquote p::before { content: "\201C"; }
html[lang="en"] .pd-strip blockquote p::after { content: "\201D"; }
.home-pd__all { width: 100%; }

@media (min-width: 900px) {
  .home-pd__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head nav" "strip strip" "all all"; column-gap: 30px; align-items: end; }
  .home-pd__head { grid-area: head; }
  .home-pd__nav:not([hidden]) { grid-area: nav; display: flex; gap: 10px; }
  .home-pd__btn { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; background: var(--sky); color: var(--blue); cursor: pointer; transition: background .2s, opacity .2s; }
  .home-pd__btn:hover { background: var(--sky-2); }
  .home-pd__btn:disabled { opacity: .35; cursor: default; }
  .home-pd__btn svg { width: 20px; height: 20px; }
  .home-pd__btn--prev svg { transform: scaleX(-1); }
  .pd-strip { grid-area: strip; align-items: stretch; gap: 20px; margin: 30px -6px 0; padding: 6px 6px 30px; scroll-padding: 0 6px; }
  .pd-strip .pd-card { flex: 0 0 calc((100% - 60px) / 4); max-width: none; }
  .pd-strip .pd-card__name { margin: 20px 22px 0; font-size: 20px; }
  .pd-strip blockquote, .pd-strip .pd-card__about { margin: 10px 22px 0; }
  /* Лавров - первая карточка, широкая: фото слева, цитата справа, чтобы длинная цитата не растягивала соседей. */
  .pd-strip .pd-card--lead { flex-basis: calc((100% - 60px) / 2 + 20px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 1fr auto auto 1fr; padding-bottom: 0; }
  .pd-strip .pd-card--lead img { grid-row: 1 / -1; height: 100%; aspect-ratio: auto; object-position: 50% 20%; }
  .pd-strip .pd-card--lead .pd-card__name { grid-column: 2; grid-row: 2; margin-top: 0; }
  .pd-strip .pd-card--lead blockquote { grid-column: 2; grid-row: 3; }
  .home-pd__all { grid-area: all; width: auto; justify-self: start; }
}
