/**
 * mod_wall.css — адаптивная сетка, карточки, load-more, blog theme preset.
 *
 * CSS-переменные колонок задаются inline на .mod-wall из PHP ($gridConfig).
 * Без внешних зависимостей. Тест: resize 320 / 768 / 992+ px.
 */

.mod-wall {
  --mod-wall-gap: 1.25rem;
  --mod-wall-radius: 0.75rem;
  --mod-wall-border: 1px solid rgb(24 24 27 / 8%);
  --mod-wall-bg: #fff;
  --mod-wall-text: #18181b;
  --mod-wall-muted: #71717a;
  --mod-wall-accent: #4f46e5;
  --mod-wall-accent-category: var(--mod-wall-accent);
  --mod-wall-accent-title: var(--mod-wall-accent);
  --mod-wall-accent-readmore: var(--mod-wall-accent);
  /* Кольцо фокуса, рамка при наведении и разделители держались на зашитом
     rgb(31 78 121). Этот цвет не совпадает ни с акцентом модуля (#4f46e5), ни с
     акцентом сайта (--c-accent, сейчас #16456b) — в теме сайта его нет вовсе.
     Значения по умолчанию оставлены прежними, а ниже, там где браузер понимает
     color-mix, они считаются от акцента. */
  --mod-wall-ring: rgb(31 78 121 / 28%);
  --mod-wall-ring-soft: rgb(31 78 121 / 8%);
  --mod-wall-border-hover: rgb(31 78 121 / 22%);
  --mod-wall-divider: rgb(31 78 121 / 12%);
  --mod-wall-pag-border: rgb(31 78 121 / 14%);
  --mod-wall-shadow: 0 1px 2px rgb(24 24 27 / 6%);
  --mod-wall-shadow-hover: 0 8px 24px rgb(24 24 27 / 10%);
  --mod-wall-cols-mobile: 1;
  --mod-wall-cols-tablet: 2;
  --mod-wall-cols-desktop: 3;
  --mod-wall-bp-tablet: 768px;
  --mod-wall-bp-desktop: 992px;
  --mod-wall-hover-zoom: 1.03;
  --mod-wall-tint-opacity: 0.2;
  --mod-wall-effect-color: var(--mod-wall-accent);
  --mod-wall-darken-factor: 0.85;
  --mod-wall-brighten-factor: 1.12;
  --mod-wall-excerpt-lines-desktop: 3;
  --mod-wall-excerpt-lines-tablet: var(--mod-wall-excerpt-lines-desktop);
  --mod-wall-excerpt-lines-mobile: var(--mod-wall-excerpt-lines-desktop);
  --mod-wall-no-image-lines-desktop: 6;
  --mod-wall-no-image-lines-tablet: var(--mod-wall-no-image-lines-desktop);
  --mod-wall-no-image-lines-mobile: var(--mod-wall-no-image-lines-desktop);
  /* Active vars — only from external CSS so media queries can override. */
  --mod-wall-excerpt-lines: var(--mod-wall-excerpt-lines-desktop);
  --mod-wall-no-image-lines: var(--mod-wall-no-image-lines-desktop);
}

.mod-wall__heading {
  margin: 0 0 1rem;
}

.mod-wall__grid {
  display: grid;
  gap: var(--mod-wall-gap);
  grid-template-columns: repeat(var(--mod-wall-cols-mobile), minmax(0, 1fr));
}

@media (min-width: 768px) {
  .mod-wall__grid {
    grid-template-columns: repeat(var(--mod-wall-cols-tablet), minmax(0, 1fr));
  }
}

@media (min-width: 992px) {
  .mod-wall__grid {
    grid-template-columns: repeat(var(--mod-wall-cols-desktop), minmax(0, 1fr));
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .mod-wall {
    --mod-wall-excerpt-lines: var(--mod-wall-excerpt-lines-tablet);
    --mod-wall-no-image-lines: var(--mod-wall-no-image-lines-tablet);
  }
}

@media (max-width: 767.98px) {
  .mod-wall {
    --mod-wall-excerpt-lines: var(--mod-wall-excerpt-lines-mobile);
    --mod-wall-no-image-lines: var(--mod-wall-no-image-lines-mobile);
  }
}

/* Strict equal-height rows */
.mod-wall--grid .mod-wall__grid {
  align-items: stretch;
}

.mod-wall--grid .mod-wall__card {
  height: 100%;
}

/* Masonry-like: variable height, same DOM order */
.mod-wall__grid--masonry {
  grid-auto-rows: minmax(120px, auto);
  align-items: start;
}

.mod-wall__grid--masonry .mod-wall__card {
  height: auto;
}

/* Specificity beats .mod-wall__card--no-image .mod-wall__excerpt */
.mod-wall__grid--masonry .mod-wall__card .mod-wall__excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mod-wall--excerpt-mode-characters .mod-wall__grid--masonry .mod-wall__card .mod-wall__excerpt {
  display: block;
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
  overflow: visible;
}

/* Hero layout */
.mod-wall__grid--hero {
  grid-auto-flow: dense;
}

@media (min-width: 992px) {
  .mod-wall__grid--hero .mod-wall__card--hero {
    grid-column: span 2;
    grid-row: span 2;
  }
}

.mod-wall__card {
  display: flex;
  flex-direction: column;
  background: var(--mod-wall-bg);
  border: var(--mod-wall-border);
  border-radius: var(--mod-wall-radius);
  box-shadow: var(--mod-wall-shadow);
  overflow: hidden;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.mod-wall__card:focus-within {
  outline: none;
}

.mod-wall__card:focus-within:not(.mod-wall__card--clickable) {
  outline: 2px solid var(--mod-wall-ring);
  outline-offset: 2px;
}

.mod-wall__card--clickable:focus-within,
.mod-wall__card--clickable:has(.mod-wall__card-link:focus-visible) {
  outline: none;
  border-color: var(--blog-action-border-hover, var(--mod-wall-border-hover));
  box-shadow:
    var(--shadow-sm, var(--bs-box-shadow-sm, 0 1px 2px rgb(24 24 27 / 5%))),
    0 0 0 var(--blog-action-ring-size, 3px) var(--blog-action-ring, var(--mod-wall-ring-soft));
}

.mod-wall__card-link {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  text-decoration: none;
  outline: none;
}

.mod-wall__card-link:focus,
.mod-wall__card-link:focus-visible {
  outline: none;
}

.mod-wall__card:hover {
  box-shadow: var(--mod-wall-shadow-hover);
}

.mod-wall__card--clickable {
  position: relative;
  cursor: pointer;
}

.mod-wall__card--clickable .mod-wall__category a,
.mod-wall__card--clickable .mod-wall__readmore-link:not(.mod-wall__readmore-link--static) {
  position: relative;
  z-index: 2;
}

.mod-wall__readmore-link--static {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--mod-wall-accent-readmore);
}

.mod-wall__media {
  position: relative;
  display: block;
  overflow: hidden;
  background: rgb(24 24 27 / 4%);
}

.mod-wall__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

.mod-wall--img-effect-zoom .mod-wall__card:hover .mod-wall__media img {
  transform: scale(var(--mod-wall-hover-zoom, 1.03));
}

.mod-wall--img-effect-grayscale-color .mod-wall__media img {
  filter: grayscale(1);
  transition: filter 0.4s ease, transform 0.35s ease;
}

.mod-wall--img-effect-grayscale-color .mod-wall__card:hover .mod-wall__media img {
  filter: grayscale(0);
}

.mod-wall--img-effect-grayscale-tint .mod-wall__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--mod-wall-effect-color);
  mix-blend-mode: color;
  opacity: var(--mod-wall-tint-opacity, 0.2);
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.mod-wall--img-effect-grayscale-tint .mod-wall__card:hover .mod-wall__media::after {
  opacity: 0;
}

.mod-wall--img-effect-pan .mod-wall__media img {
  transform: scale(1.08);
  transition: transform 0.5s ease;
}

.mod-wall--img-effect-pan.mod-wall--pan-left .mod-wall__card:hover .mod-wall__media img {
  transform: scale(1.08) translateX(-3%);
}

.mod-wall--img-effect-pan.mod-wall--pan-right .mod-wall__card:hover .mod-wall__media img {
  transform: scale(1.08) translateX(3%);
}

.mod-wall--img-effect-pan.mod-wall--pan-up .mod-wall__card:hover .mod-wall__media img {
  transform: scale(1.08) translateY(-3%);
}

.mod-wall--img-effect-pan.mod-wall--pan-down .mod-wall__card:hover .mod-wall__media img {
  transform: scale(1.08) translateY(3%);
}

.mod-wall--img-effect-darken .mod-wall__media img,
.mod-wall--img-effect-brighten .mod-wall__media img {
  transition: filter 0.35s ease;
}

.mod-wall--img-effect-darken .mod-wall__card:hover .mod-wall__media img {
  filter: brightness(var(--mod-wall-darken-factor, 0.85));
}

.mod-wall--img-effect-brighten .mod-wall__card:hover .mod-wall__media img {
  filter: brightness(var(--mod-wall-brighten-factor, 1.12));
}

.mod-wall--img-effect-border .mod-wall__media {
  box-shadow: 0 0 0 0 var(--mod-wall-effect-color);
  transition: box-shadow 0.3s ease;
}

.mod-wall--img-effect-border .mod-wall__card:hover .mod-wall__media {
  box-shadow: 0 0 0 3px var(--mod-wall-effect-color);
}

.mod-wall__media--16-9 {
  aspect-ratio: 16 / 9;
}

.mod-wall__media--4-3 {
  aspect-ratio: 4 / 3;
}

.mod-wall__media--auto img {
  height: auto;
  object-fit: contain;
}

.mod-wall__body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem 1.125rem 1.125rem;
  flex: 1;
}

.mod-wall__category {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.mod-wall__category a {
  color: var(--mod-wall-muted);
  text-decoration: none;
}

.mod-wall__category a:hover,
.mod-wall__category a:focus-visible {
  color: var(--mod-wall-accent-category);
}

.mod-wall__title {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.35;
}

.mod-wall--title-clamp .mod-wall__title {
  display: -webkit-box;
  -webkit-line-clamp: var(--mod-wall-title-lines, 2);
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mod-wall__title a {
  color: var(--mod-wall-text);
  text-decoration: none;
}

.mod-wall__title a:hover,
.mod-wall__title a:focus-visible {
  color: var(--mod-wall-accent-title);
}

.mod-wall__card--hero .mod-wall__title {
  font-size: clamp(1.15rem, 2vw, 1.5rem);
}

.mod-wall__date {
  font-size: 0.82rem;
  color: var(--mod-wall-muted);
}

.mod-wall__excerpt {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgb(24 24 27 / 78%);
  display: -webkit-box;
  -webkit-line-clamp: var(--mod-wall-excerpt-lines, 3);
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mod-wall__card--no-image .mod-wall__excerpt {
  -webkit-line-clamp: var(--mod-wall-no-image-lines, 6);
}

.mod-wall--excerpt-mode-characters .mod-wall__excerpt {
  display: block;
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
  overflow: visible;
}

.mod-wall__readmore {
  margin: auto 0 0;
  padding-top: 0.35rem;
}

.mod-wall__readmore-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--mod-wall-accent-readmore);
  text-decoration: none;
}

.mod-wall__readmore-link:hover,
.mod-wall__readmore-link:focus-visible {
  text-decoration: underline;
}

.mod-wall__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mod-wall__tags li {
  font-size: 0.75rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: rgb(79 70 229 / 8%);
  color: var(--mod-wall-accent);
}

.mod-wall__pagination {
  margin-top: 1.5rem;
  text-align: center;
}

.mod-wall__pagination-counter {
  margin: 0 0 0.75rem;
  font-size: 0.88rem;
  color: var(--mod-wall-muted);
}

.mod-wall__pagination-links .pagination {
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0;
}

.mod-wall__pagination-links .page-link {
  border-radius: 0.5rem;
  color: var(--mod-wall-text);
}

.mod-wall__pagination-links .page-item.active .page-link {
  background: var(--mod-wall-accent);
  border-color: var(--mod-wall-accent);
}

/* Load more — module default */
.mod-wall__loadmore {
  margin-top: 1.5rem;
  text-align: center;
}

.mod-wall__loadmore-btn {
  appearance: none;
  border: 1px solid rgb(79 70 229 / 25%);
  background: #fff;
  color: var(--mod-wall-accent);
  border-radius: 999px;
  padding: 0.65rem 1.35rem;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.mod-wall__loadmore-btn:hover:not(:disabled),
.mod-wall__loadmore-btn:focus-visible {
  background: rgb(79 70 229 / 6%);
  border-color: var(--mod-wall-accent);
  outline: none;
}

.mod-wall__loadmore-btn:disabled {
  opacity: 0.65;
  cursor: wait;
}

.mod-wall__loadmore-meta,
.mod-wall__loadmore-status {
  margin: 0.65rem 0 0;
  font-size: 0.85rem;
  color: var(--mod-wall-muted);
}

.mod-wall.is-loading .mod-wall__loadmore-btn {
  opacity: 0.75;
}

.mod-wall.is-mobile-adjusting [data-mod-wall-grid] {
  visibility: hidden;
}

.mod-wall.is-done .mod-wall__loadmore-btn {
  display: none;
}

/* ============================================================
   Pagination UI presets — mod-wall--pag-* (pages mode)
   ============================================================ */

.mod-wall__pagination {
  padding-top: 1.15rem;
  border-top: 1px solid rgb(24 24 27 / 10%);
}

.mod-wall--pag-blog .mod-wall__pagination-links .pagination {
  --pag-gap: 0.35rem;
  --pag-size: 2.35rem;
  --pag-border: var(--mod-wall-pag-border);
}

.mod-wall--pag-blog .mod-wall__pagination-links .page-link {
  border-radius: var(--r-lg, var(--bs-border-radius-lg, 0.75rem));
  box-shadow: var(--shadow-sm, var(--bs-box-shadow-sm, 0 1px 2px rgb(24 24 27 / 6%)));
}

.mod-wall--pag-blog .mod-wall__pagination-links .page-item.active .page-link {
  background: var(--c-accent, var(--bs-link-color, var(--bs-primary, var(--mod-wall-accent))));
  border-color: var(--c-accent, var(--bs-link-color, var(--bs-primary, var(--mod-wall-accent))));
  color: #fff;
}

.mod-wall--pag-pills .mod-wall__pagination-links .page-link {
  border-radius: 999px;
  padding-inline: 1.1rem;
}

.mod-wall--pag-minimal .mod-wall__pagination-links .page-link {
  border: 0;
  box-shadow: none;
  background: transparent;
  min-width: auto;
  padding-inline: 0.35rem;
}

.mod-wall--pag-bordered .mod-wall__pagination-links .page-link {
  border-width: 2px;
  background: transparent;
}

.mod-wall--pag-compact .mod-wall__pagination-links .page-link {
  min-width: 1.85rem;
  min-height: 1.85rem;
  font-size: 0.78rem;
  padding-inline: 0.45rem;
}

.mod-wall--pag-ghost .mod-wall__pagination-links .page-link {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.mod-wall--pag-ghost .mod-wall__pagination-links .page-item.active .page-link {
  background: rgb(79 70 229 / 10%);
  color: var(--mod-wall-accent);
}

.mod-wall--pag-accent .mod-wall__pagination-links .page-item.active .page-link {
  background: var(--mod-wall-accent);
  border-color: var(--mod-wall-accent);
  color: #fff;
}

.mod-wall--pag-underline .mod-wall__pagination-links .page-link {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  border-bottom: 2px solid transparent;
}

.mod-wall--pag-underline .mod-wall__pagination-links .page-item.active .page-link {
  border-bottom-color: var(--mod-wall-accent);
  color: var(--mod-wall-accent);
  background: transparent;
}

.mod-wall--pag-dots .mod-wall__pagination-links .page-link {
  min-width: 0.65rem;
  width: 0.65rem;
  height: 0.65rem;
  padding: 0;
  border-radius: 50%;
  border: 0;
  background: rgb(24 24 27 / 18%);
  overflow: hidden;
  text-indent: -9999px;
}

.mod-wall--pag-dots .mod-wall__pagination-links .page-item.active .page-link {
  background: var(--mod-wall-accent);
  transform: scale(1.25);
}

.mod-wall--pag-dots .mod-wall__pagination-links .page-item:has(.icon-angle-left) .page-link,
.mod-wall--pag-dots .mod-wall__pagination-links .page-item:has(.icon-angle-right) .page-link {
  width: auto;
  height: auto;
  min-width: 2rem;
  min-height: 2rem;
  text-indent: 0;
  border: 1px solid rgb(24 24 27 / 12%);
  border-radius: 0.5rem;
  background: #fff;
}

.mod-wall--pag-tab .mod-wall__pagination-links .pagination {
  gap: 0;
  border: 1px solid rgb(24 24 27 / 12%);
  border-radius: 0.65rem;
  overflow: hidden;
}

.mod-wall--pag-tab .mod-wall__pagination-links .page-link {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  border-right: 1px solid rgb(24 24 27 / 10%);
}

.mod-wall--pag-tab .mod-wall__pagination-links .page-item:last-child .page-link {
  border-right: 0;
}

.mod-wall--pag-split .mod-wall__pagination-links .page-item:not(:has(.icon-angle-left)):not(:has(.icon-angle-right)):not(.active) {
  opacity: 0.55;
}

.mod-wall--pag-split .mod-wall__pagination-links .page-item:has(.icon-angle-left) .page-link,
.mod-wall--pag-split .mod-wall__pagination-links .page-item:has(.icon-angle-right) .page-link {
  font-weight: 700;
  min-width: 2.75rem;
}

/* ============================================================
   Load more button presets — mod-wall--lm-btn-*
   ============================================================ */

.mod-wall__loadmore:not(.blog-load-more) {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  padding-top: 1.15rem;
  border-top: 1px solid rgb(24 24 27 / 10%);
}

.mod-wall--lm-btn-blog .mod-wall__loadmore {
  border-top-color: var(--pag-divider, var(--mod-wall-divider));
}

/* Blog — блок «вынесен» за сетку (как navigation в списке категории) */
.mod-wall--lm-btn-blog-detached .mod-wall__loadmore.blog-load-more {
  margin: 0.75rem -1.25rem 0;
  padding: 1.15rem 1.25rem 0.15rem;
  border-top: 1px solid var(--pag-divider, var(--mod-wall-divider));
  background: transparent;
  box-shadow: none;
  width: auto;
}

.mod-wall--lm-btn-blog-detached .mod-wall__grid {
  margin-bottom: 0;
}

/* В карточке Cassiopeia (main-bottom) — на всю ширину card-body */
body.site .main-bottom.card .mod-wall--lm-btn-blog-detached .mod-wall__loadmore.blog-load-more {
  margin-inline: -1.25rem;
  padding-inline: 1.25rem;
}

body.site .main-bottom.card:has(.mod-wall--bare) .mod-wall--lm-btn-blog-detached .mod-wall__loadmore.blog-load-more,
body.site .main-top.card:has(.mod-wall--bare) .mod-wall--lm-btn-blog-detached .mod-wall__loadmore.blog-load-more {
  margin-inline: 0;
  padding-inline: 0;
}

.mod-wall--bare .mod-wall__loadmore:not(.blog-load-more) {
  border-top-color: var(--pag-divider, var(--mod-wall-divider));
}

/* Shared icon buttons */
.mod-wall--lm-btn-arrow .mod-wall__loadmore-btn,
.mod-wall--lm-btn-chevron .mod-wall__loadmore-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
}

.mod-wall--lm-btn-arrow .mod-wall__loadmore-btn::after {
  content: "↓";
  font-size: 0.875rem;
  opacity: 0.75;
  transition: transform 0.15s ease;
}

.mod-wall--lm-btn-arrow .mod-wall__loadmore-btn:hover:not(:disabled)::after {
  transform: translateY(2px);
}

.mod-wall--lm-btn-chevron .mod-wall__loadmore-btn::after {
  content: "↓";
  font-size: 0.875rem;
  line-height: 1;
  opacity: 0.72;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.mod-wall--lm-btn-chevron .mod-wall__loadmore-btn:hover:not(:disabled)::after {
  transform: translateY(2px);
  opacity: 1;
}

.mod-wall--lm-btn-pill-solid .mod-wall__loadmore-btn {
  background: var(--mod-wall-accent);
  border-color: var(--mod-wall-accent);
  color: #fff;
  border-radius: 999px;
}

.mod-wall--lm-btn-pill-solid .mod-wall__loadmore-btn:hover:not(:disabled) {
  filter: brightness(1.06);
  background: var(--mod-wall-accent);
  color: #fff;
}

.mod-wall--lm-btn-pill-soft .mod-wall__loadmore-btn {
  background: rgb(79 70 229 / 10%);
  border-color: transparent;
  color: var(--mod-wall-accent);
  border-radius: 999px;
}

.mod-wall--lm-btn-pill-soft .mod-wall__loadmore-btn:hover:not(:disabled) {
  background: rgb(79 70 229 / 16%);
}

.mod-wall--lm-btn-outline .mod-wall__loadmore-btn {
  border-radius: 0.5rem;
  border-width: 2px;
  background: #fff;
  min-width: 11rem;
}

.mod-wall--lm-btn-ghost .mod-wall__loadmore-btn {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.mod-wall--lm-btn-ghost .mod-wall__loadmore-btn:hover:not(:disabled) {
  background: rgb(79 70 229 / 6%);
}

.mod-wall--lm-btn-link .mod-wall__loadmore-btn {
  border: 0;
  background: transparent;
  border-radius: 0;
  padding-inline: 0.25rem;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  min-width: 0;
}

.mod-wall--lm-btn-link .mod-wall__loadmore-btn:hover:not(:disabled) {
  background: transparent;
  color: var(--mod-wall-accent);
}

.mod-wall--lm-btn-block .mod-wall__loadmore {
  align-items: stretch;
}

.mod-wall--lm-btn-block .mod-wall__loadmore-btn {
  width: 100%;
  max-width: none;
  border-radius: 0.65rem;
  min-height: 2.85rem;
}

.mod-wall--lm-btn-bordered .mod-wall__loadmore-btn {
  border-width: 2px;
  border-color: var(--mod-wall-accent);
  background: transparent;
  border-radius: 0.65rem;
  box-shadow: none;
}

.mod-wall--lm-btn-accent .mod-wall__loadmore-btn {
  background: var(--mod-wall-accent);
  border-color: var(--mod-wall-accent);
  color: #fff;
  border-radius: 0.65rem;
  box-shadow: 0 4px 14px rgb(79 70 229 / 28%);
}

.mod-wall--lm-btn-gradient .mod-wall__loadmore-btn {
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 48%, #2563eb 100%);
  box-shadow: 0 6px 20px rgb(79 70 229 / 30%);
}

.mod-wall--lm-btn-gradient .mod-wall__loadmore-btn:hover:not(:disabled) {
  filter: brightness(1.05);
  color: #fff;
}

.mod-wall--lm-btn-dark .mod-wall__loadmore-btn {
  background: #18181b;
  border-color: #18181b;
  color: #fafafa;
  border-radius: 0.65rem;
}

.mod-wall--lm-btn-dark .mod-wall__loadmore-btn:hover:not(:disabled) {
  background: #27272a;
  border-color: #27272a;
  color: #fff;
}

.mod-wall--lm-btn-glass .mod-wall__loadmore-btn {
  border: 1px solid rgb(255 255 255 / 55%);
  background: rgb(255 255 255 / 42%);
  backdrop-filter: blur(10px);
  border-radius: 999px;
  box-shadow: 0 4px 18px rgb(24 24 27 / 8%);
}

.mod-wall--lm-btn-brutalist .mod-wall__loadmore-btn {
  border: 2px solid #18181b;
  border-radius: 0;
  background: #fff;
  box-shadow: 4px 4px 0 #18181b;
  color: #18181b;
}

.mod-wall--lm-btn-brutalist .mod-wall__loadmore-btn:hover:not(:disabled) {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 #18181b;
}

.mod-wall--lm-btn-compact .mod-wall__loadmore-btn {
  padding: 0.45rem 1rem;
  font-size: 0.85rem;
  min-width: 0;
}

.mod-wall--lm-btn-elevated .mod-wall__loadmore-btn {
  border: 0;
  border-radius: 0.75rem;
  background: #fff;
  box-shadow: 0 10px 28px rgb(24 24 27 / 14%), 0 2px 6px rgb(24 24 27 / 6%);
}

.mod-wall--lm-btn-elevated .mod-wall__loadmore-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgb(24 24 27 / 18%), 0 4px 10px rgb(24 24 27 / 8%);
}

.mod-wall.is-loading.mod-wall--lm-btn-chevron .mod-wall__loadmore-btn::after,
.mod-wall.is-loading.mod-wall--lm-btn-arrow .mod-wall__loadmore-btn::after {
  animation: mod-wall-lm-spin 0.65s linear infinite;
}

@keyframes mod-wall-lm-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Пользовательское свойство принимает любые токены, поэтому парная запись
   «прежнее значение, следом color-mix» здесь не спасёт: старый браузер сохранит
   непонятое значение и сломается уже в месте применения. Обновляем только там,
   где color-mix точно поддержан. */
@supports (color: color-mix(in srgb, red 50%, transparent)) {
  .mod-wall {
    --mod-wall-ring: color-mix(in srgb, var(--mod-wall-accent) 28%, transparent);
    --mod-wall-ring-soft: color-mix(in srgb, var(--mod-wall-accent) 8%, transparent);
    --mod-wall-border-hover: color-mix(in srgb, var(--mod-wall-accent) 22%, transparent);
    --mod-wall-divider: color-mix(in srgb, var(--mod-wall-accent) 12%, transparent);
    --mod-wall-pag-border: color-mix(in srgb, var(--mod-wall-accent) 14%, transparent);
  }
}

/* ============================================================
   Оформление «как на сайте» (переключатель «Стили сайта»).

   До 1.13.0 здесь лежал только запас, а сами правила — в user.css шаблона.
   Настройка при этом включена по умолчанию, то есть на любом чужом сайте она
   включалась, а работать ей было нечем: файла шаблона там нет. Правила
   перенесены сюда целиком и переведены на собственные токены модуля, у которых
   цепочка «переменные сайта → переменные Bootstrap → запас».
   ============================================================ */
.mod-wall--site-styles {
  --mod-wall-bg: var(--c-surface-solid, var(--bs-body-bg, #fff));
  --mod-wall-text: var(--c-text, var(--bs-body-color, #18181b));
  /* Текст второго уровня: у Bootstrap отдельного токена нет, поэтому следующая
     ступень — основной цвет текста, а не приглушённый: анонс должен читаться. */
  --mod-wall-text-2: var(--c-text-2, var(--bs-body-color, rgb(24 24 27 / 78%)));
  --mod-wall-muted: var(--c-muted, var(--bs-secondary-color, #71717a));
  --mod-wall-accent: var(--c-accent, var(--bs-link-color, var(--bs-primary, #4f46e5)));
  --mod-wall-border-strong: var(--c-border-strong, var(--bs-border-color, #d4d4d8));
  --mod-wall-radius: var(--r-lg, var(--bs-border-radius-lg, 0.75rem));
  --mod-wall-shadow: var(--shadow-sm, var(--bs-box-shadow-sm, 0 1px 2px rgb(24 24 27 / 6%)));
  --mod-wall-shadow-hover: var(--shadow-md, var(--bs-box-shadow, 0 8px 24px rgb(24 24 27 / 10%)));
  --mod-wall-border: 1px solid rgb(255 255 255 / 78%);
  /* Подложка под картинкой до её загрузки. Значение светлое, как было в
     шаблоне; на тёмной теме ниже пересчитывается от поверхности. */
  --mod-wall-media-bg: rgb(248 250 252 / 80%);
}

@supports (color: color-mix(in srgb, red 50%, transparent)) {
  .mod-wall--site-styles {
    --mod-wall-media-bg: color-mix(in srgb, var(--mod-wall-bg) 97%, var(--mod-wall-text));
  }
}

/* Сетка и карточка */
.mod-wall--site-styles .mod-wall__grid {
  gap: 1rem;
}

.mod-wall--site-styles .mod-wall__card {
  background: var(--mod-wall-bg);
  border: var(--mod-wall-border);
  border-radius: var(--mod-wall-radius);
  box-shadow: var(--mod-wall-shadow);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mod-wall--site-styles .mod-wall__card:hover {
  border-color: var(--mod-wall-border-strong);
  box-shadow: var(--mod-wall-shadow-hover);
}

.mod-wall--site-styles .mod-wall__card--clickable:focus-within,
.mod-wall--site-styles .mod-wall__card--clickable:has(.mod-wall__card-link:focus-visible) {
  outline: none;
  border-color: var(--mod-wall-border-hover);
  box-shadow: var(--mod-wall-shadow), 0 0 0 3px var(--mod-wall-ring-soft);
}

.mod-wall--site-styles .mod-wall__media {
  background: var(--mod-wall-media-bg);
}

.mod-wall--site-styles .mod-wall__media img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.mod-wall--site-styles .mod-wall__body {
  padding: clamp(1.15rem, 3vw, 1.5rem) clamp(1.2rem, 3vw, 1.65rem) clamp(1.2rem, 3vw, 1.55rem);
}

.mod-wall--site-styles .mod-wall__card--hero .mod-wall__body {
  padding: clamp(1.25rem, 3.5vw, 1.75rem) clamp(1.25rem, 3.5vw, 1.85rem) clamp(1.3rem, 3.5vw, 1.75rem);
}

/* Типографика */
.mod-wall--site-styles .mod-wall__category {
  font-size: 0.8125rem;
  color: var(--mod-wall-muted);
  text-transform: none;
  letter-spacing: 0;
}

.mod-wall--site-styles .mod-wall__title {
  margin: 0 0 0.65rem;
  font-family: var(--font-heading, var(--bs-body-font-family, inherit));
  font-size: clamp(1.125rem, 2.5vw, 1.35rem);
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.015em;
  color: var(--mod-wall-text);
}

.mod-wall--site-styles .mod-wall__card--hero .mod-wall__title {
  font-size: clamp(1.375rem, 3.5vw, 1.875rem);
  line-height: 1.2;
}

.mod-wall--site-styles .mod-wall__title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease;
}

.mod-wall--site-styles .mod-wall__title a:hover,
.mod-wall--site-styles .mod-wall__title a:focus-visible {
  color: var(--mod-wall-accent);
}

.mod-wall--site-styles .mod-wall__date {
  font-size: 0.8125rem;
  color: var(--mod-wall-muted);
}

.mod-wall--site-styles .mod-wall__excerpt {
  color: var(--mod-wall-text-2);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.mod-wall--site-styles .mod-wall__readmore-link {
  color: var(--mod-wall-accent);
  font-weight: 500;
}

.mod-wall--site-styles .mod-wall__pagination {
  margin-top: 0.75rem;
}

/* Появление подгруженной карточки. Класс вешает mod_wall.js, а сама анимация
   до 1.13.0 была описана только в user.css шаблона — на чужом сайте карточки
   возникали рывком, и понять почему было неоткуда. */
.mod-wall--site-styles .mod-wall__card.blog-load-more-item-enter {
  animation: blog-load-more-fade-in 0.35s ease both;
}

@keyframes blog-load-more-fade-in {
  from {
    opacity: 0;
    transform: translateY(0.35rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================
   Layout themes — mod-wall--theme-*
   ============================================================ */

.mod-wall--theme-clean {
  --mod-wall-gap: 1.25rem;
  --mod-wall-radius: 0.75rem;
}

.mod-wall--theme-editorial {
  --mod-wall-gap: 1.75rem;
  --mod-wall-radius: 0.35rem;
}

.mod-wall--theme-editorial .mod-wall__title {
  font-size: 1.15rem;
  letter-spacing: -0.02em;
}

.mod-wall--theme-editorial .mod-wall__category {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
}

.mod-wall--theme-compact {
  --mod-wall-gap: 0.75rem;
  --mod-wall-radius: 0.5rem;
}

.mod-wall--theme-compact .mod-wall__body {
  padding: 0.75rem 0.875rem 0.875rem;
  gap: 0.35rem;
}

.mod-wall--theme-compact .mod-wall__title {
  font-size: 0.98rem;
}

.mod-wall--theme-airy {
  --mod-wall-gap: 2rem;
  --mod-wall-radius: 1rem;
  --mod-wall-shadow: 0 2px 8px rgb(24 24 27 / 4%);
}

.mod-wall--theme-airy .mod-wall__body {
  padding: 1.25rem 1.35rem 1.35rem;
}

.mod-wall--theme-dense {
  --mod-wall-gap: 0.5rem;
  --mod-wall-radius: 0.35rem;
}

.mod-wall--theme-dense .mod-wall__body {
  padding: 0.65rem 0.75rem 0.75rem;
  gap: 0.25rem;
}

/* Specificity beats .mod-wall__card--no-image .mod-wall__excerpt */
.mod-wall--theme-dense .mod-wall__card .mod-wall__excerpt {
  font-size: 0.85rem;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Same root holds both modifiers — compound selector beats theme-dense clamp above. */
.mod-wall--excerpt-mode-characters.mod-wall--theme-dense .mod-wall__card .mod-wall__excerpt {
  display: block;
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
  overflow: visible;
}

.mod-wall--theme-magazine {
  --mod-wall-gap: 1.5rem 1.25rem;
}

.mod-wall--theme-magazine .mod-wall__title {
  font-size: 1.12rem;
  font-weight: 650;
}

.mod-wall--theme-magazine .mod-wall__card--hero .mod-wall__title {
  font-size: clamp(1.35rem, 2.5vw, 1.85rem);
}

.mod-wall--theme-brutalist {
  --mod-wall-gap: 1rem;
  --mod-wall-radius: 0;
  --mod-wall-border: 2px solid #18181b;
  --mod-wall-shadow: none;
  --mod-wall-shadow-hover: 4px 4px 0 #18181b;
}

.mod-wall--theme-brutalist .mod-wall__card:hover {
  transform: translate(-2px, -2px);
}

.mod-wall--theme-soft {
  --mod-wall-gap: 1.35rem;
  --mod-wall-radius: 1.25rem;
  --mod-wall-shadow: 0 4px 20px rgb(79 70 229 / 8%);
  --mod-wall-shadow-hover: 0 12px 32px rgb(79 70 229 / 14%);
}

.mod-wall--theme-soft .mod-wall__tags li {
  border-radius: 0.65rem;
}

.mod-wall--theme-contrast {
  --mod-wall-bg: #18181b;
  --mod-wall-text: #fafafa;
  --mod-wall-muted: #a1a1aa;
  --mod-wall-border: 1px solid rgb(255 255 255 / 10%);
  --mod-wall-shadow: 0 4px 16px rgb(0 0 0 / 25%);
}

.mod-wall--theme-contrast .mod-wall__excerpt {
  color: rgb(250 250 250 / 72%);
}

.mod-wall--theme-contrast .mod-wall__category a {
  color: rgb(250 250 250 / 55%);
}

.mod-wall--theme-minimal {
  --mod-wall-gap: 0;
  --mod-wall-radius: 0;
  --mod-wall-border: 0;
  --mod-wall-shadow: none;
  --mod-wall-shadow-hover: none;
  --mod-wall-bg: transparent;
}

.mod-wall--theme-minimal .mod-wall__card {
  border-bottom: 1px solid rgb(24 24 27 / 12%);
  border-radius: 0;
  padding-bottom: 1.25rem;
  margin-bottom: 1.25rem;
}

.mod-wall--theme-minimal .mod-wall__grid {
  gap: 0;
}

.mod-wall--theme-minimal .mod-wall__card:last-child {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

.mod-wall--theme-bento .mod-wall__grid {
  grid-auto-flow: dense;
}

@media (min-width: 992px) {
  .mod-wall--theme-bento .mod-wall__card:nth-child(6n + 1) {
    grid-column: span 2;
  }

  .mod-wall--theme-bento .mod-wall__card:nth-child(6n + 4) {
    grid-row: span 2;
  }
}

.mod-wall--theme-showcase {
  --mod-wall-gap: 1.5rem;
}

.mod-wall--theme-showcase .mod-wall__card--hero {
  --mod-wall-radius: 1rem;
}

@media (min-width: 992px) {
  .mod-wall--theme-showcase .mod-wall__grid .mod-wall__card:first-child:not(.mod-wall__card--hero) {
    grid-column: span 2;
  }

  .mod-wall--theme-showcase .mod-wall__grid .mod-wall__card:first-child:not(.mod-wall__card--hero) .mod-wall__title {
    font-size: 1.35rem;
  }
}

/* ============================================================
   Card styles — mod-wall__card--style-*
   ============================================================ */

.mod-wall__card--style-site {
  background: var(--c-surface-solid, var(--bs-body-bg, var(--mod-wall-bg)));
  border: 1px solid rgb(255 255 255 / 78%);
  border-radius: var(--r-lg, var(--bs-border-radius-lg, var(--mod-wall-radius)));
  box-shadow: var(--shadow-sm, var(--bs-box-shadow-sm, var(--mod-wall-shadow)));
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mod-wall__card--style-site:hover,
.mod-wall__card--style-site.mod-wall__card--clickable:focus-within,
.mod-wall__card--style-site.mod-wall__card--clickable:has(.mod-wall__card-link:focus-visible) {
  border-color: var(--c-border-strong, var(--bs-border-color, var(--mod-wall-border-hover)));
  box-shadow: var(--shadow-md, var(--bs-box-shadow, var(--mod-wall-shadow-hover)));
  outline: none;
}

.mod-wall__card--style-site .mod-wall__media {
  background: rgb(248 250 252 / 80%);
}

.mod-wall__card--style-site .mod-wall__category {
  font-size: 0.8125rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--c-muted, var(--bs-secondary-color, var(--mod-wall-muted)));
}

.mod-wall__card--style-site .mod-wall__title {
  font-family: var(--font-heading, var(--bs-body-font-family, inherit));
  font-weight: 600;
  letter-spacing: -0.015em;
}

.mod-wall__card--style-site .mod-wall__title a,
.mod-wall__card--style-site .mod-wall__title span {
  color: var(--c-text, var(--bs-body-color, var(--mod-wall-text)));
}

.mod-wall__card--style-site .mod-wall__title a:hover,
.mod-wall__card--style-site .mod-wall__title a:focus-visible {
  color: var(--mod-wall-accent-title);
}

.mod-wall__card--style-site .mod-wall__title a:hover span,
.mod-wall__card--style-site .mod-wall__title a:focus-visible span {
  color: var(--mod-wall-accent-title);
}

.mod-wall__card--style-action {
  background: var(--c-surface-solid, var(--bs-body-bg, var(--mod-wall-bg)));
  border: 1px solid var(--c-border-strong, var(--bs-border-color, #d4d4d8));
  border-radius: var(--r-lg, var(--bs-border-radius-lg, var(--mod-wall-radius)));
  box-shadow: var(--shadow-sm, var(--bs-box-shadow-sm, var(--mod-wall-shadow)));
  transition: border-color 0.28s ease, box-shadow 0.28s ease, background-color 0.28s ease;
}

.mod-wall__card--style-action:hover,
.mod-wall__card--style-action.mod-wall__card--clickable:focus-within,
.mod-wall__card--style-action.mod-wall__card--clickable:has(.mod-wall__card-link:focus-visible) {
  border-color: var(--blog-action-border-hover, var(--mod-wall-border-hover));
  box-shadow:
    var(--shadow-sm, var(--bs-box-shadow-sm, 0 1px 2px rgb(24 24 27 / 5%))),
    0 0 0 var(--blog-action-ring-size, 3px) var(--blog-action-ring, var(--mod-wall-ring-soft));
  outline: none;
}

.mod-wall__card--style-action .mod-wall__title a,
.mod-wall__card--style-action .mod-wall__title span {
  color: var(--c-text, var(--bs-body-color, var(--mod-wall-text)));
}

.mod-wall__card--style-action .mod-wall__title a:hover,
.mod-wall__card--style-action .mod-wall__title a:focus-visible {
  color: var(--mod-wall-accent-title);
}

.mod-wall__card--style-action .mod-wall__title a:hover span,
.mod-wall__card--style-action .mod-wall__title a:focus-visible span {
  color: var(--mod-wall-accent-title);
}

.mod-wall__card--style-action .mod-wall__category {
  color: var(--c-muted, var(--bs-secondary-color, var(--mod-wall-muted)));
}

.mod-wall__card--style-overlay {
  position: relative;
  min-height: 260px;
  border: 0;
  background: #0f0f12;
}

.mod-wall__card--style-overlay .mod-wall__media {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  height: 100%;
}

.mod-wall__card--style-overlay .mod-wall__media img {
  height: 100%;
  min-height: 260px;
}

.mod-wall__card--style-overlay .mod-wall__body {
  position: relative;
  z-index: 1;
  margin-top: auto;
  min-height: 260px;
  justify-content: flex-end;
  background: linear-gradient(180deg, rgb(0 0 0 / 0%) 25%, rgb(0 0 0 / 78%) 100%);
  color: #fff;
}

.mod-wall__card--style-overlay .mod-wall__title a,
.mod-wall__card--style-overlay .mod-wall__title span {
  color: #fff;
}

.mod-wall__card--style-overlay .mod-wall__title a:hover,
.mod-wall__card--style-overlay .mod-wall__title a:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.mod-wall__card--style-overlay .mod-wall__date,
.mod-wall__card--style-overlay .mod-wall__excerpt,
.mod-wall__card--style-overlay .mod-wall__category a {
  color: rgb(255 255 255 / 78%);
}

.mod-wall__card--style-horizontal {
  flex-direction: row;
  align-items: stretch;
}

.mod-wall__card--style-horizontal .mod-wall__media {
  flex: 0 0 38%;
  max-width: 38%;
  aspect-ratio: auto;
  min-height: 140px;
}

.mod-wall__card--style-horizontal .mod-wall__body {
  flex: 1;
  min-width: 0;
}

@media (max-width: 575px) {
  .mod-wall__card--style-horizontal {
    flex-direction: column;
  }

  .mod-wall__card--style-horizontal .mod-wall__media {
    flex: none;
    max-width: none;
    width: 100%;
    aspect-ratio: 16 / 9;
  }
}

.mod-wall__card--style-inset {
  background: rgb(24 24 27 / 3%);
  border: 0;
  box-shadow: none;
  padding: 0.75rem;
}

.mod-wall__card--style-inset .mod-wall__media {
  border-radius: calc(var(--mod-wall-radius) - 0.25rem);
}

.mod-wall__card--style-inset .mod-wall__body {
  padding-left: 0.35rem;
  padding-right: 0.35rem;
}

.mod-wall__card--style-bordered {
  border: 2px solid var(--mod-wall-accent);
  box-shadow: none;
}

.mod-wall__card--style-bordered:hover {
  box-shadow: 0 0 0 4px rgb(79 70 229 / 12%);
}

.mod-wall__card--style-ghost {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.mod-wall__card--style-ghost:hover {
  background: rgb(79 70 229 / 4%);
  box-shadow: none;
}

.mod-wall__card--style-elevated {
  border: 0;
  box-shadow: 0 10px 30px rgb(24 24 27 / 12%), 0 2px 6px rgb(24 24 27 / 6%);
}

.mod-wall__card--style-elevated:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgb(24 24 27 / 16%), 0 4px 10px rgb(24 24 27 / 8%);
}

.mod-wall__card--style-flat {
  border: 0;
  box-shadow: none;
  background: rgb(79 70 229 / 6%);
}

.mod-wall__card--style-flat .mod-wall__category a {
  color: var(--mod-wall-accent);
}

.mod-wall__card--style-accent-bar {
  border-left: 4px solid var(--mod-wall-accent);
  border-radius: 0 var(--mod-wall-radius) var(--mod-wall-radius) 0;
}

.mod-wall__card--style-polaroid {
  background: #fff;
  border: 1px solid rgb(24 24 27 / 8%);
  box-shadow: 0 6px 18px rgb(24 24 27 / 10%);
  padding: 0.75rem 0.75rem 1rem;
}

.mod-wall__card--style-polaroid .mod-wall__media {
  border-radius: 0.25rem;
  margin-bottom: 0.25rem;
}

.mod-wall__card--style-polaroid .mod-wall__body {
  padding: 0.5rem 0.25rem 0;
}

.mod-wall__card--style-stack {
  position: relative;
  min-height: 240px;
  border: 0;
  overflow: hidden;
}

.mod-wall__card--style-stack .mod-wall__media {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
}

.mod-wall__card--style-stack .mod-wall__media img {
  min-height: 240px;
  height: 100%;
}

.mod-wall__card--style-stack .mod-wall__body {
  position: relative;
  z-index: 1;
  margin-top: auto;
  min-height: 240px;
  justify-content: flex-end;
  background: linear-gradient(180deg, transparent 40%, rgb(0 0 0 / 82%) 100%);
  color: #fff;
}

.mod-wall__card--style-stack .mod-wall__title a,
.mod-wall__card--style-stack .mod-wall__title span,
.mod-wall__card--style-stack .mod-wall__readmore-link,
.mod-wall__card--style-stack .mod-wall__readmore-link--static {
  color: #fff;
}

.mod-wall__card--style-stack .mod-wall__title a:hover,
.mod-wall__card--style-stack .mod-wall__title a:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.mod-wall__card--style-stack .mod-wall__excerpt {
  display: none;
}

.mod-wall__card--style-headline {
  border: 0;
  box-shadow: none;
  background: transparent;
}

.mod-wall__card--style-headline .mod-wall__media {
  display: none;
}

.mod-wall__card--style-headline .mod-wall__body {
  padding: 0.5rem 0;
  gap: 0.35rem;
}

.mod-wall__card--style-headline .mod-wall__title {
  font-size: 1.2rem;
  line-height: 1.25;
}

.mod-wall__card--style-headline .mod-wall__excerpt,
.mod-wall__card--style-headline .mod-wall__readmore {
  display: none;
}

.mod-wall__card--style-headline .mod-wall__category {
  order: -1;
}

.mod-wall__card--style-split {
  flex-direction: row;
  align-items: stretch;
}

.mod-wall__card--style-split .mod-wall__media {
  flex: 0 0 42%;
  max-width: 42%;
  aspect-ratio: auto;
  min-height: 160px;
  border-right: 1px solid rgb(24 24 27 / 12%);
  border-radius: 0;
}

.mod-wall__card--style-split .mod-wall__body {
  flex: 1;
  min-width: 0;
  justify-content: center;
}

@media (max-width: 575px) {
  .mod-wall__card--style-split {
    flex-direction: column;
  }

  .mod-wall__card--style-split .mod-wall__media {
    flex: none;
    max-width: none;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-right: 0;
    border-bottom: 1px solid rgb(24 24 27 / 12%);
  }
}

.mod-wall__card--style-minimal-line {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  border-bottom: 1px solid rgb(24 24 27 / 12%);
  padding-bottom: 1rem;
}

.mod-wall__card--style-minimal-line:hover,
.mod-wall__card--style-minimal-line:focus-within {
  transform: none;
  box-shadow: none;
  outline: none;
}

.mod-wall__card--style-minimal-line .mod-wall__media {
  border-radius: 0.5rem;
  overflow: hidden;
}

.mod-wall__card--style-minimal-line .mod-wall__body {
  padding-left: 0;
  padding-right: 0;
}

@keyframes mod-wall-fade-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.mod-wall__card--entering {
  animation: mod-wall-fade-in 250ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .mod-wall,
  .mod-wall * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Явный выбор пользователя (accent colors) должен побеждать любые сторонние
   стили сайта — !important здесь осознанный, узкий случай, работает только когда
   пользователь сам задал цвет. */
.mod-wall--custom-accent .mod-wall__category a:hover,
.mod-wall--custom-accent .mod-wall__category a:focus-visible {
  color: var(--mod-wall-accent-category) !important;
}

.mod-wall--custom-accent .mod-wall__title a:hover,
.mod-wall--custom-accent .mod-wall__title a:hover span,
.mod-wall--custom-accent .mod-wall__title a:focus-visible,
.mod-wall--custom-accent .mod-wall__title a:focus-visible span {
  color: var(--mod-wall-accent-title) !important;
}

.mod-wall--custom-accent .mod-wall__readmore-link {
  color: var(--mod-wall-accent-readmore) !important;
}

.mod-wall--accent-title-card-hover .mod-wall__card--clickable:hover .mod-wall__title span,
.mod-wall--accent-title-card-hover .mod-wall__card--clickable:focus-within .mod-wall__title span {
  color: var(--mod-wall-accent-title);
}

.mod-wall--custom-accent.mod-wall--accent-title-card-hover .mod-wall__card--clickable:hover .mod-wall__title span,
.mod-wall--custom-accent.mod-wall--accent-title-card-hover .mod-wall__card--clickable:focus-within .mod-wall__title span {
  color: var(--mod-wall-accent-title) !important;
}