/*
 * The Social page (/features/social/), and only it: DESIGN.md §9, "The Social page in
 * detail". Everything else on the page is the site's own (site.css, crux.css,
 * crux-features.css). Every selector starts with .soc- so nothing here reaches another page.
 */

/* ---------- The film's chapters ---------- */

.soc-chapters {
  margin-top: 24px;
}

.soc-chapters button {
  border-radius: 4px;
}

/* ---------- The tabs: short copy, so the clip takes more of the row ---------- */

.soc-part {
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.6fr);
  margin-top: 112px;
}

.soc-part.is-flip {
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.7fr);
}

.soc-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 20px;
  padding: 5px 13px 5px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.4;
}

.soc-tab i {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--brand);
}

.soc-clip figcaption {
  margin-top: 12px;
  color: var(--faint);
  font-size: 13px;
}

/* ---------- The trust line ---------- */

.soc-proof {
  max-width: calc(600px + 2 * var(--gutter));
  margin: 96px auto 0;
  padding: 0 var(--gutter);
  color: var(--ink-2);
  font-size: 17px;
  line-height: 1.5;
  text-align: center;
}

/* ---------- Narrower screens ---------- */

@media (max-width: 1100px) {
  .soc-part {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  }

  .soc-part.is-flip {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  }
}

@media (max-width: 960px) {
  .soc-part,
  .soc-part.is-flip {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 96px;
  }
}

@media (max-width: 640px) {
  .soc-chapters {
    grid-auto-flow: row;
    grid-template-columns: 1fr 1fr;
  }
}