/*
 * Stage 3 of docs/design-unification-plan.md: public pages skeleton.
 * Loaded on every page (templates/element/ui/next_styles.php). The widget
 * (#hr24AppBox) and the cabinets (body.body-admin) are not targeted here.
 */

/* Home: two columns of temple cards from 600px, photo above the text. */
@media (min-width: 600px) and (max-width: 1024px) {
  html:root body._v2 .temples-list2 {
    grid-template-columns: 1fr 1fr;
  }

  html:root body._v2 .temples-list2 .card_temple {
    max-width: none;
    justify-self: stretch;
  }

  html:root body._v2 .temples-list2 .card_temple .row {
    grid-template-columns: 1fr;
    grid-gap: var(--h24-space-md);
    max-width: none;
  }
}

/* Phones: temple and blog cards add one 12px inset to the page gutter
   instead of 18px card padding plus card-body padding plus a 280px cap. */
@media (max-width: 575px) {
  html:root body._v2 .card_temple {
    padding: var(--h24-space-sm);
  }

  html:root body._v2 .card_temple .row {
    max-width: none;
    grid-gap: var(--h24-space-sm);
  }

  html:root body._v2 .card_temple .card-body {
    padding-right: 0;
    padding-left: 0;
  }
}

/* «О проекте»: the illustration never pushes a phone screen sideways. */
@media (max-width: 767px) {
  html:root body._v2 .img-plus-text__img {
    max-width: min(360px, 100%);
  }
}

/* Feed: collapsed text fades out and «Читать дальше» sits under it
   instead of covering the last line. */
html:root .feed-card__text-wrap.is-collapsible:not(.is-expanded) .feed-card__text {
  -webkit-mask-image: linear-gradient(to bottom, #000 65%, transparent);
  mask-image: linear-gradient(to bottom, #000 65%, transparent);
}

html:root .feed-card__text-wrap.is-collapsible:not(.is-expanded) .feed-card__more {
  position: static;
  margin-top: var(--h24-space-xs);
  padding-left: 0;
  background: none;
}

html:root .feed-card__text-wrap .feed-card__more > [aria-hidden=true] {
  display: none;
}

html:root .feed-card__footer a {
  color: var(--h24-color-text-muted);
}